/* ==========================================================================
   Gavo — design
   --------------------------------------------------------------------------
   Bygget mobile-first: grundreglerne gælder telefonen, og media queries
   (min-width) lægger desktop ovenpå.

   Farver, afstande og typografi styres af variablerne i :root herunder.
   Skal hele sidens udtryk ændres, er det næsten altid nok at rette dem.

   Indhold
     1. Variabler og nulstilling
     2. Hjælpeklasser, typografi og rytme
     3. Knapper, mærkater og små dele
     4. Topbjælke, menu og skuffe
     5. Hero
     6. Anmeldelser
     7. Funktionsblokke og påmindelsen
     8. Trin (den fastholdte scene og den store visning)
     9. Tal-kortet
    10. Blog: kort, oversigt, artikel
    11. FAQ
    12. Sidehoveder, sider og formularer
    13. Download-kort og -bånd
    14. Sidefod og paginering
    15. Bevægelse
   ========================================================================== */

/* ==========================================================================
   1. Variabler og nulstilling
   ========================================================================== */

:root {
	/* Brandfarver — fra Gavos stylesheet */
	--orange:       #FDBA72;
	--orange-dyb:   #E17100;   /* flader og pynt */
	--orange-tekst: #B45309;   /* orange der er mørk nok til tekst (kontrast ≥ 4.5) */
	--fersken:      #FED6A9;
	--creme:        #FFEDD4;
	--sand:         #F7F5F2;   /* neutral sidebaggrund — de varme cremeflader skal kunne ses ovenpå */
	--sort:         #03031C;
	--brun:         #2E251F;
	--linje:        #E3DCD5;
	/*
	 * Kanten om en varm flade.
	 *
	 * Creme mod sand er 1,06 : 1 og fersken 1,26 : 1. En flade i de farver
	 * kan man ikke SE på sidebaggrunden — der er ikke kontrast nok til, at
	 * øjet kan finde en kant. Den er translucent, så den samme streg virker
	 * både på sand, på creme og på fersken.
	 */
	--linje-varm:   rgba(46, 37, 31, .14);

	/*
	 * Kantknappens kant og tekst. Standarden gælder på sidebaggrunden; hver
	 * varm flade sætter sine egne værdier (se "Knapper på varme flader").
	 * Det var før en hårdkodet liste over tre sektionsklasser, og knappen
	 * stod derfor uden kant i hero, i sidehovedet, i hjælpekortet og i
	 * artiklens slutkort — 1,18 : 1 mod creme.
	 */
	--btn-kant:       var(--linje);
	--btn-kant-tekst: var(--sort);

	/*
	 * Læsemål. Der var ti forskellige — 42, 44, 46, 48, 52, 52, 52, 58, 68 —
	 * og forsidens manchet var derfor 24 % smallere end undersidens med
	 * samme skriftgrad. Det er dét, man ser som "siderne hører ikke sammen".
	 * Tre mål er nok: et til de store flader, et til alle manchetter, et til
	 * brødtekst.
	 */
	--maal-lead-stor: 44ch;
	--maal-lead:      48ch;
	--maal-brod:      66ch;
	--hvid:         #FFFFFF;

	/* Afledte */
	--tekst:        var(--sort);
	--tekst-blod:   #6B6259;
	--linje-fin:    rgba(3, 3, 28, .10);

	/* Typografi */
	--font: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/*
	 * To — og kun to — størrelser under brødteksten:
	 *   --tekst-meta   ≈ 14 px, til datoer, noter, bylines og hjælpetekst
	 *   --tekst-label  ≈ 12 px, kun til versal-labels med sperring
	 */
	--tekst-meta:   .8rem;
	--tekst-label:  .69rem;

	/* Mål */
	--bredde:       1220px;
	--bredde-bred:  1400px;   /* coverbilleder, der må gå bredere end teksten */
	--bredde-smal:  720px;
	--bredde-laes:  660px;    /* læsebredde i en artikel */
	--bredde-doc:   46rem;    /* opslagsindhold: FAQ-listen og hjælpekortet */
	--kant:         1.25rem;  /* sideafstand på mobil */
	--radius:       24px;
	--radius-lille: 14px;
	--radius-stor:  28px;

	/*
	 * Afstanden MELLEM to afsnit. Sektionen bruger halvdelen i hver ende,
	 * så to sektioner ved siden af hinanden altid står præcis --sektion fra
	 * hinanden — uanset hvilken flade de ligger på, og uanset hvilken side
	 * de står på.
	 */
	--sektion:      5.5rem;

	/*
	 * Luften inde i en hoved-stak: overskrift → manchet → knapper.
	 * Ét tal, så en h1 på 77 px og en h3 på 25 px sætter det samme af.
	 */
	--hoved-stak:   1rem;

	/*
	 * Den OPTISKE afstand fra mærkaten ned til overskriftens versalhøjde.
	 * Ét tal for hele sitet — se noten ved .label.
	 */
	--label-gab:    1.8rem;

	/* Højde på topbjælken — bruges af skuffen og af alt, der er sticky. */
	--bjaelke:      68px;

	/* Skygger */
	--skygge-let:   0 1px 2px rgba(3, 3, 28, .04), 0 10px 30px rgba(3, 3, 28, .06);
	--skygge:       0 24px 70px rgba(3, 3, 28, .14);
	--skygge-tung:  0 40px 90px rgba(3, 3, 28, .28);

	/*
	 * Telefonernes skygge. Den er varm og ikke sort, fordi den altid
	 * falder på en varm flade — orange, fersken eller creme. Sidens sorte
	 * indeholder blåt, de flader gør ikke, og blandingen bliver grå: det
	 * er den grå dis, man ser omkring et billede, der ligger på orange.
	 * Farven her (#7C2D12) er fladernes egen, kogt ned til noget mørkere
	 * og mere mættet — så kan den ikke blive grå.
	 */
	--skygge-telefon: 0 14px 26px rgba(124, 45, 18, .17);

	/* Én bevægelseskurve på hele siden. */
	--kurve:        cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 720px) {
	:root {
		--kant:    1.6rem;
		--sektion: 7rem;
	}
}

@media (min-width: 900px) {
	:root {
		--kant:       2rem;
		--sektion:    9rem;
		--bjaelke:    76px;
		--hoved-stak: 1.15rem;
	}
}

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

html {
	scroll-behavior: smooth;
	/* Ankre og #faq-links må ikke gemme sig bag den klæbende topbjælke. */
	scroll-padding-top: calc(var(--bjaelke) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sand);
	color: var(--tekst);
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

@media (min-width: 900px) {
	body { font-size: 18px; }
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/*
 * Bundmargenen er i rem, ikke i em.
 *
 * .5em under en h1 på 77 px er 38 px; under en h3 på 25 px er det 12. Det
 * var den samme regel, men tre vidt forskellige afstande — og derfor så en
 * underside med en h1 aldrig ud, som om den var sat op efter de samme mål
 * som en sektion på forsiden med en h2. Nu er der ét tal.
 *
 * Brødteksten i editoren har sin egen rytme og sætter selv sine margener
 * igen længere nede (.prose).
 */
h1, h2, h3, h4 {
	overflow-wrap: break-word;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.028em;
	margin: 0 0 var(--hoved-stak);
	text-wrap: balance;
}

h1 { font-size: clamp(2.65rem, 8.5vw, 4.8rem); }
h2 { font-size: clamp(2rem, 5.6vw, 3.25rem); }
h3 { font-size: clamp(1.18rem, 3vw, 1.55rem); }

/*
 * Den stramme sperring hører til de helt store grader. Ved 24 px klumper
 * bogstaverne sammen, så h3/h4 får en mildere værdi.
 */
h3, h4 { letter-spacing: -.012em; line-height: 1.22; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

button { font-family: inherit; }

:focus-visible {
	outline: 3px solid var(--orange-tekst);
	outline-offset: 3px;
	border-radius: 8px;
}

::selection { background: var(--orange); color: var(--sort); }

/* ==========================================================================
   2. Hjælpeklasser, typografi og rytme
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--bredde);
	margin-inline: auto;
	padding-inline: var(--kant);
}
.wrap--narrow,
.wrap--smal { max-width: var(--bredde-smal); }
.wrap--laes { max-width: calc(var(--bredde-laes) + var(--kant) * 2); }
.wrap--bred { max-width: var(--bredde-bred); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 12px; left: 12px;
	width: auto; height: auto; clip: auto;
	z-index: 999;
	background: var(--hvid);
	padding: .75rem 1.25rem;
	border-radius: var(--radius-lille);
	box-shadow: var(--skygge);
}

/*
 * Rytme.
 *
 * Der er ÉN afstand mellem afsnit. Den gamle regel gav hver anden sektion
 * strammere luft med :nth-of-type(even) — men den tæller <section>-TAGS,
 * og forsiden begynder med hero, mens undersiderne begynder med et
 * <header>. Takten landede derfor forskelligt fra side til side, og en
 * sektion kunne skifte luft, bare fordi kunden ryddede overskriften i en
 * anden sektion længere oppe. Det er en af de ting, man mærker som
 * "siderne hænger ikke sammen", uden at kunne pege på den.
 *
 * Det, der skal give siden afsnit, er ikke luftens LÆNGDE, men FLADEN.
 * Sektionen bruger halv --sektion i hver ende, så to sektioner altid står
 * --sektion fra hinanden — og et farvet bånd bryder rækken, hvor der er
 * brug for et nyt kapitel.
 */
.section { padding-block: calc(var(--sektion) * .5); }

/* En fortsættelse af afsnittet ovenover — ikke et nyt afsnit. */
.section--tight { padding-block: calc(var(--sektion) * .3); }

/* ---------- Bånd ---------- */
/*
 * Et bånd går fra kant til kant.
 *
 * Det er dét, der gør, at man kan se, hvor et afsnit begynder — og dét, en
 * rundet kasse, der svæver på sidebaggrunden, ikke kan, når fladerne
 * ligger så tæt i lyshed, som Gavos gør. På en flade uden kontrast er det
 * KANTEN, der bærer, ikke fyldet, og en kant, der går tværs over hele
 * skærmen, kan øjet ikke overse. Derfor får de lyse bånd en hårstreg, hvor
 * de møder sidebaggrunden; orange og sort har kontrast nok i sig selv.
 *
 * Båndet har lidt mere luft end en almindelig sektion: dets padding er
 * dets egen indervæg, ikke afstanden til naboen.
 */
.section--baand { padding-block: calc(var(--sektion) * .72); }

.section--creme   { background: var(--creme);   border-block: 1px solid var(--linje-varm); }
.section--fersken { background: var(--fersken); border-block: 1px solid var(--linje-varm); }
.section--orange  { background: var(--orange);  color: var(--brun); }
.section--sort    { background: var(--sort);    color: var(--hvid); }

/*
 * Brødtekst i andet plan på en varm flade.
 *
 * --tekst-blod (#6B6259) er valgt efter sidebaggrunden. På fersken giver
 * den 3,9 : 1 og på orange 3,2 : 1 — begge under AA's 4,5 for brødtekst.
 * --brun giver 5,4 : 1 på fersken og 8,0 : 1 på orange. Brugerne er både 19
 * og 79 år; kontrast er ikke til forhandling.
 */
.section--creme .lead,
.section--fersken .lead,
.section--orange .lead,
.section--creme .note,
.section--fersken .note,
.section--orange .note,
.panel--creme .lead,
.panel--fersken .lead,
.panel--orange .lead { color: var(--brun); }
.section--orange .label { color: var(--brun); opacity: .8; }
.section--sort .lead  { color: rgba(255, 255, 255, .72); }
.section--sort .label { color: rgba(255, 255, 255, .55); }

/* To bånd i samme farve i træk er ét afsnit — ikke to streger. */
.section--creme + .section--creme,
.section--fersken + .section--fersken { border-top: 0; }

.label {
	font-size: var(--tekst-label);
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--tekst-blod);
	margin: 0 0 var(--label-gab);
	display: flex;
	align-items: center;
	gap: .7rem;
}
/*
 * Hårstregen efter overteksten. Den binder labelen til sektionen i stedet
 * for at lade den svæve, og den er det eneste "pynt" på siden — en streg,
 * ikke et ikon.
 */
.label::after {
	content: "";
	flex: 1;
	max-width: 3.5rem;
	height: 1px;
	background: currentColor;
	opacity: .35;
}
/*
 * Mærkat → overskrift: ét mål for hele sitet.
 *
 * En overskrift bærer usynlig luft over versalhøjden — halvledningen plus
 * afstanden fra skriftens ascender ned til versalerne. Den luft måles i em
 * og vokser altså med graden: under en h1 på 77 px er den ~20 px, under en
 * h3 på 25 px kun ~8. Med den samme margen i rem sad mærkaten derfor klods
 * op ad de store overskrifter og langt fra de små, selv om tallet var det
 * samme. Vi trimmer luften væk i em og lader --label-gab bestemme resten.
 *
 * Margenerne kollapser i normalt flow og lægges sammen i grid og flex —
 * resultatet bliver det samme begge steder.
 */
.label + h1,
.label + h2,

/* h3 og h4 har line-height 1.22, ikke 1.08 — altså mere luft at trimme. */
.label + h3,
.label + h4 { margin-top: -.33em; }

.label a { text-decoration: none; }
.label a:hover { color: var(--orange-tekst); }
.label--lys { color: rgba(255, 255, 255, .6); }

/* Nummeret foran overteksten — blokkens plads i rækken, ikke pynt. */
.label__nr {
	font-variant-numeric: tabular-nums;
	opacity: .55;
	padding-right: .25rem;
}

.lead {
	font-size: 1.08rem;
	color: var(--tekst-blod);
	max-width: var(--maal-lead);
}

/*
 * Hoveder.
 *
 * Sidehovedet på en underside og sektionshovedet på forsiden er ÉN
 * komponent — mærkat, overskrift, manchet — og de sætter den samme luft af.
 * Før var de to systemer med hver sine tal, og det er dét, man ser, når en
 * underside "ikke sidder i skabet" ved siden af forsiden.
 *
 * Målet sættes på hvert element for sig: overskriften efter sin egen grad
 * (18ch måles mod 52 px), manchetten efter brødtekstens. Ellers brækker
 * alle h2'er i præcis samme kasse, og siden ligner noget, en maskine har
 * sat op.
 */
.section-head { margin-bottom: 2.75rem; max-width: none; }
.section-head h2 { max-width: 18ch; }
.section-head .lead { max-width: var(--maal-lead); }
.section-head > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.section-head { margin-bottom: 3.75rem; }
	.lead { font-size: 1.14rem; }
}

.note { font-size: var(--tekst-meta); color: var(--tekst-blod); margin: .9rem 0 0; }

/* Datoer, læsetid og andet i små grader. */
.meta-linje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .7rem;
	font-size: var(--tekst-meta);
	color: var(--tekst-blod);
	margin: 0;
}

/* ==========================================================================
   3. Knapper, mærkater og små dele
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 54px;
	padding: .9rem 1.75rem;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .2s var(--kurve), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--sort); color: var(--hvid); }
.btn--primary:hover { background: var(--brun); color: var(--hvid); box-shadow: 0 12px 28px rgba(3, 3, 28, .22); }

.btn--orange { background: var(--orange-tekst); color: var(--hvid); }
.btn--orange:hover { background: #8F4108; color: var(--hvid); }

.btn--lys { background: var(--hvid); color: var(--sort); }
.btn--lys:hover { background: var(--creme); }

.btn--kant { background: transparent; color: var(--btn-kant-tekst); border-color: var(--btn-kant); }
.btn--kant:hover { background: var(--hvid); border-color: var(--sort); color: var(--sort); }

.btn--sm { min-height: 44px; padding: .55rem 1.2rem; font-size: .95rem; }

.btn-rad {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

/* ---------- Download: butiksmærke og QR-kode ---------- */
/*
 * Telefonen får butikkens eget mærke. Computeren får en QR-kode ved siden
 * af — man kan ikke installere en telefon-app på en computer, så en knap
 * ville føre til en butiksside, man ikke kan handle på. Koden flytter
 * folk over på telefonen med det samme.
 *
 * Skiftet ligger i CSS og ikke i en user-agent-test. En skærmbredde kan
 * måles; hvad for en slags maskine der står i den anden ende, kan kun
 * gættes — og en tablet eller en lille bærbar ville få gættet galt.
 * Begge dele står i HTML'en, og kun den ene bliver vist.
 */
.hent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.hent__maerker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

.hent__maerke {
	display: block;
	border-radius: 10px;
	transition: transform .2s var(--kurve);
}
.hent__maerke:hover { transform: translateY(-2px); }

/*
 * Mærkerne er Apples og Googles egne filer, og de må hverken beskæres
 * eller tegnes om. Googles har en luftkant bygget ind i selve filen, og
 * derfor skal den være højere end Apples for at se lige så stor ud —
 * 1,25 er forholdet mellem de to filers egen luft.
 */
.hent__maerke img { display: block; height: 52px; width: auto; }
.hent__maerke--play img { height: 65px; }

/* Koden findes kun på de brede skærme — se forklaringen ovenfor. */
.hent__qr { display: none; }

@media (min-width: 900px) {
	.hent__qr {
		display: flex;
		align-items: center;
		gap: .9rem;
	}

	/*
	 * Den hvide flade er ikke pynt: en QR-kode skal have en lys ramme
	 * omkring sig for at kunne læses, og fladerne på siden er orange og
	 * creme. Kodens egen hvide kant ligger inde i SVG'en, så afrundingen
	 * her skærer kun i polstringen.
	 */
	.hent__qr-kode {
		display: block;
		padding: 7px;
		border-radius: var(--radius-lille);
		background: var(--hvid);
		line-height: 0;
	}

	.hent__qr-tekst {
		margin: 0;
		max-width: 13ch;
		font-size: var(--tekst-meta);
		font-weight: 600;
		line-height: 1.35;
		color: var(--brun);
	}

	.hent__maerke img { height: 46px; }
	.hent__maerke--play img { height: 58px; }
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--hvid);
	border-radius: 999px;
	padding: .4rem .95rem .4rem .5rem;
	font-size: var(--tekst-meta);
	font-weight: 600;
	letter-spacing: .01em;
	margin: 0;
}
.pill__badge {
	background: var(--sort);
	color: var(--hvid);
	border-radius: 999px;
	padding: .18rem .65rem;
	font-size: var(--tekst-label);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/*
 * Lille mærkat — kategori på et blogkort. Kortene står altid på
 * sidebaggrunden, hvor creme giver 1,06 : 1: mærkaten havde reelt ingen
 * form nogen af de steder, den faktisk optræder. Hårstregen er den samme
 * regel som for alle andre varme flader.
 */
.mærkat {
	display: inline-block;
	background: var(--creme);
	border: 1px solid var(--linje-varm);
	color: var(--orange-tekst);
	border-radius: 999px;
	padding: .18rem .65rem;
	font-size: var(--tekst-label);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}
a.mærkat:hover { background: var(--orange); color: var(--brun); }
/* På en cremeflade forsvinder mærkaten i sin egen baggrund. */
.section--creme .mærkat,
.sidehoved .mærkat,
.artikel__hoved .mærkat { background: var(--hvid); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: var(--sort); }
.link-arrow svg { transition: transform .2s var(--kurve); }
.link-arrow:hover svg { transform: translateX(4px); }

.krumme {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	font-size: var(--tekst-meta);
	color: var(--tekst-blod);
	margin-bottom: 1.5rem;
}
.krumme a { text-decoration: none; }
.krumme a:hover { color: var(--orange-tekst); text-decoration: underline; }
.krumme__her { color: var(--tekst); }

/* ---------- Paneler ---------- */
/*
 * Sidebaggrunden er lys og neutral, så en hvid flade har reelt ingen form
 * uden en kant. Det gælder også de VARME flader: creme mod sand er
 * 1,06 : 1 og fersken 1,26 : 1 — sætter man dem uden kant, svæver de i en
 * grød af nærmest samme farve, og øjet kan ikke se, hvor kortet holder op.
 * Det var den enkeltfejl, der gjorde mest ved både forsiden og
 * undersiderne. Kun orange og sort kan klare sig selv.
 */
.panel {
	border-radius: var(--radius);
	padding: 1.75rem;
	background: var(--hvid);
	border: 1px solid var(--linje);
}
.panel--creme   { background: var(--creme);   border-color: var(--linje-varm); }
.panel--fersken { background: var(--fersken); border-color: var(--linje-varm); }
/* Hvid er .panel'ens standard. Klassen findes, så farvelisten i skabelonerne
   kan skrives ud uden en tom undtagelse — og så den ikke ligner en fejl. */
.panel--hvid    { background: var(--hvid);    border-color: var(--linje); }
.panel--orange  { background: var(--orange);  border-color: rgba(46, 37, 31, .22); }
.panel--sort    { background: var(--sort); color: var(--hvid); border-color: transparent; }
.panel--sort .lead,
.panel--sort .label { color: rgba(255, 255, 255, .66); }

@media (min-width: 900px) {
	.panel { border-radius: var(--radius-stor); padding: 2.75rem; }
}

/* ==========================================================================
   4. Topbjælke, menu og skuffe
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 245, 242, .86);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, background-color .25s ease;
}
.site-header.is-stuck {
	border-bottom-color: var(--linje);
	background: rgba(247, 245, 242, .96);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--bjaelke);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img, .brand svg { height: 26px; width: auto; }
@media (min-width: 900px) { .brand img, .brand svg { height: 30px; } }
.custom-logo { max-height: 34px; width: auto; }

/* Desktop-navigation */
.nav { display: none; }

@media (min-width: 1000px) {
	.nav { display: flex; align-items: center; gap: 2rem; }

	.nav__list {
		display: flex;
		align-items: center;
		gap: 1.9rem;
		list-style: none;
		margin: 0; padding: 0;
	}

	.nav__list > li { position: relative; }

	.nav__list > li > a {
		display: inline-flex;
		align-items: center;
		gap: .35rem;
		text-decoration: none;
		font-size: .98rem;
		font-weight: 500;
		padding-block: .55rem;
		border-bottom: 2px solid transparent;
		transition: border-color .2s ease;
	}
	.nav__list > li > a:hover,
	.nav__list > .current-menu-item > a,
	.nav__list > .current_page_parent > a { border-bottom-color: var(--orange); }
}

.nav__cta { display: none; }
@media (min-width: 1000px) { .nav__cta { display: block; } }

/*
 * Undermenu.
 *
 * Her lå før en mega-menu: et 780 px panel i tre spalter med beskrivelser
 * under hvert punkt og et cremefarvet reklamekort til højre. Den blev
 * aldrig vist. Menuen er flad med to punkter — og den er flad med vilje,
 * fordi en topbjælke med få valg gør download-knappen tydeligere.
 *
 * Tilbage står en almindelig rullemenu. Den er der, fordi menupunkterne
 * kommer fra Udseende → Menuer, og kunden derfor kan lave et underpunkt i
 * morgen. Uden den ville underpunktet stille og roligt forsvinde på
 * desktop og kun stå i mobilmenuen.
 */
.has-under > a::after {
	content: "";
	width: 7px; height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}
.has-under.is-open > a::after { transform: rotate(-135deg) translateY(-2px); }

.undermenu {
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: .5rem;
	background: var(--hvid);
	border-radius: var(--radius-lille);
	box-shadow: var(--skygge-let);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-under.is-open .undermenu { opacity: 1; visibility: visible; transform: translateY(0); }

.undermenu a {
	display: block;
	text-decoration: none;
	padding: .6rem .75rem;
	border-radius: 10px;
	font-size: .98rem;
	font-weight: 500;
	transition: background-color .15s ease;
}
.undermenu a:hover { background: var(--sand); }

/* Mobilmenu */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	background: transparent;
	border: 1.5px solid var(--linje);
	border-radius: 14px;
	cursor: pointer;
	color: var(--sort);
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 18px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .22s var(--kurve), opacity .22s ease;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: relative; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-4px) rotate(-45deg); }

.drawer {
	position: fixed;
	inset: var(--bjaelke) 0 0;
	z-index: 99;
	background: var(--sand);
	padding: 1.5rem var(--kant) 2.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, transform .22s var(--kurve), visibility .22s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1000px) { .drawer { display: none; } }

.drawer__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.drawer__list li { border-bottom: 1px solid var(--linje); }
.drawer__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem .25rem;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 600;
}
.drawer__list .sub-menu {
	list-style: none;
	margin: 0 0 .75rem;
	padding: 0 0 0 .9rem;
	border-left: 2px solid var(--orange);
}
.drawer__list .sub-menu li { border: 0; }
.drawer__list .sub-menu a { font-size: 1rem; font-weight: 500; padding: .6rem .25rem; color: var(--tekst-blod); }
/* Kun skuffens egen knap er fuld bredde — ikke "Søg" inde i søgefeltet. */
.drawer > .btn { width: 100%; }
.drawer .soegefelt { margin-bottom: 1.25rem; background: var(--hvid); }

/* ==========================================================================
   5. Hero
   --------------------------------------------------------------------------
   Fladen skal bære hele siden, så den er sat stort op: overskriften er det
   største på sitet, og telefonerne står i bunden og skæres af fladens egen
   kant. Det er samme greb som i prototypens funktionsblokke — dybde uden
   dekoration.

   Telefonerne er absolut placeret i deres egen kolonne. Kolonnen er lavere
   end billederne og har overflow: hidden, så beskæringen altid rammer i
   bunden, uanset skærmbredde.
   ========================================================================== */

.hero {
	position: relative;
	background: var(--orange);
	border-radius: 0 0 var(--radius-stor) var(--radius-stor);
	padding-top: 2.25rem;
	overflow: hidden;
}

.hero__inner { display: grid; gap: 0; }
.hero__inner > * { min-width: 0; }

.hero__text { min-width: 0; padding-bottom: .5rem; }

/*
 * Linjeafstanden er 1,18 og ikke .96. Overskriften er dansk: "Ét" har en
 * accent, der stikker OVER versalhøjden, og linjen over den ender på
 * "gavekort." med et g, der stikker under grundlinjen. De to står i samme
 * spalte, og med .96 lagde accenten sig ned i g'ets underlængde — det er
 * præcis det, man ser som "Ét dækker ind over gavekort".
 *
 * Tallet er målt og ikke gættet: 1,04 og 1,12 rører stadig ved hinanden,
 * 1,15 klarer det med en hårsbred, og først ved 1,18 er der luft nok til,
 * at man kan se, det er to linjer. Sætter du en ny overskrift ind, er det
 * her, du skal kigge, hvis den pludselig ser klemt ud.
 */
.hero__title {
	margin-block: 1.1rem .6rem;
	font-size: clamp(2.9rem, 12vw, 6.6rem);
	line-height: 1.18;
	letter-spacing: -.038em;
	max-width: 13ch;
}

/*
 * Det fremhævede ord er hvidt på orange. Det er en bevidst brandafvigelse
 * (kundens egen prototype), så farven bliver stående. I stedet får ordet
 * mest mulig masse: samme vægt som resten og en overskrift, der er stor nok
 * til, at fladen bærer.
 */
.hero .ord__i--frem { color: var(--hvid); }

.hero__lead {
	color: var(--brun);
	font-size: 1.1rem;
	max-width: var(--maal-lead-stor);
	margin-bottom: 0;
}

.hero__handling {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 2rem;
}

.hero__karakter {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-size: var(--tekst-meta);
	color: var(--brun);
}
.hero__karakter strong { font-size: 1rem; }
.hero__stjerner { display: flex; gap: .05rem; color: var(--brun); }

/* ---------- Telefonerne ---------- */
.hero__shots {
	position: relative;
	height: 310px;
	margin-top: 2.75rem;
	/*
	 * Går ud til vinduets kanter på telefonen, så klyngen får plads.
	 * Negativ margin — ikke width: 100vw. En grid-celle på 100vw ville
	 * gøre hele kolonnen 100vw bred og skubbe overskriften ud over kanten.
	 */
	margin-inline: calc(var(--kant) * -1);
	overflow: hidden;
	perspective: 1400px;
}

/* Skyggen er varm — se --skygge-telefon. Den var før sidens sorte, og det
 * er den grå dis omkring telefonerne, der blev til. Den er samtidig
 * strammere end før: telefonerne skal stå på fladen, ikke svæve.
 */
.hero__shot {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	max-width: 232px;
	filter: drop-shadow(var(--skygge-telefon));
	transform-style: preserve-3d;
	will-change: transform;
	transform:
		translateX(var(--x, -50%))
		translateY(var(--y, 0px))
		rotate(var(--drej, 0deg))
		scale(var(--skala, 1));
}
.hero__shot--1 { --x: -122%; --drej: -7deg; --skala: .84; top: 40px; z-index: 1; }
.hero__shot--2 { --x: -50%;  --drej: 0deg;  --skala: 1;   z-index: 3; }
.hero__shot--3 { --x: 22%;   --drej: 7deg;  --skala: .84; top: 40px; z-index: 2; }

/* ---------- Striben nederst ---------- */
.hero__fakta {
	list-style: none;
	margin: 0;
	padding: 1.1rem 0 1.35rem;
	border-top: 1px solid rgba(46, 37, 31, .2);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	font-size: var(--tekst-meta);
	font-weight: 600;
	color: var(--brun);
}
.hero__fakta li { display: flex; align-items: center; gap: .55rem; }
.hero__fakta li::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--brun);
	opacity: .5;
}

@media (min-width: 720px) {
	.hero__shots { margin-inline: 0; }
}

@media (min-width: 900px) {
	.hero { padding-top: 3.5rem; }

	.hero__inner {
		grid-template-columns: 1.05fr .95fr;
		gap: 3.5rem;
		align-items: center;
		min-height: min(72svh, 660px);
	}
	.hero__text { padding-bottom: 2rem; }
	.hero__title { margin-block: 1.4rem .8rem; max-width: 12ch; }
	.hero__lead { font-size: 1.2rem; }

	/*
	 * Beskæringen skal ske ved fladens kant — det er hele grebet. Med en
	 * fast højde i px skete den aldrig: telefonerne måles i procent af
	 * spalten, så de blev 427 px høje i en 540 px høj beholder, og der stod
	 * 113 px tom orange under dem.
	 *
	 * Derfor bindes beholderens højde til sin EGEN bredde. Telefonen er
	 * 44 % af spalten og dermed 90 % af spaltens bredde høj (700:1432);
	 * beholderen er 80 %. Forskellen er beskæringen, og den er den samme
	 * andel på alle skærmbredder.
	 *
	 * Tallet var 40 %, og beholderen 67,6 %. Begge er sat op: telefonerne
	 * bliver bredere, og der bliver skåret mindre af dem i bunden. Bemærk,
	 * at det er PROCENTEN, der bestemmer — på en almindelig bærbar er
	 * spalten omkring 520 px, så de 244 px, max-width lovede, aldrig blev
	 * nået. Loftet er der kun for de allerbredeste skærme.
	 */
	.hero__shots {
		height: auto;
		aspect-ratio: 1.25;
		margin-top: 0;
		align-self: end;
	}
	.hero__shot { max-width: 280px; width: 44%; }

	/*
	 * Klyngen strammes, når telefonerne vokser. Sidetelefonerne stod
	 * 72 % af deres egen bredde ude fra midten; med de nye 44 % ville de
	 * blive skåret af spaltens kant — og dér er der ingen kant at blive
	 * skåret af, kun orange flade, hvor snittet ligner en fejl.
	 * Beskæringen hører til i bunden, ved fladens egen kant.
	 *
	 * 60 % er målt og ikke gættet: de 7 graders drejning gør en telefon
	 * 23 px bredere, end den er, og det er den brede kasse, spalten
	 * skærer i. Med 60 % ligger begge yderkanter 4 px inde i spalten.
	 */
	.hero__shot--1 { --x: -110%; top: 42px; }
	.hero__shot--3 { --x: 10%;   top: 42px; }

	.hero__fakta {
		padding: 1.4rem 0 1.75rem;
		gap: .5rem 3rem;
		font-size: .9rem;
	}
}

/* ==========================================================================
   6. Anmeldelser — "Det siger andre brugere"
   --------------------------------------------------------------------------
   Karakteren står som ét stort tal, og udtalelserne ligger i en række, der
   driver let vandret, mens man ruller. På telefonen er rækken et swipe-spor
   med snap: kortet ved siden af kigger frem, så man kan se, at der er mere.
   ========================================================================== */

.anmeld__top { display: grid; gap: 2rem; }

.karakter {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.karakter__tal {
	font-size: clamp(3.6rem, 11vw, 5.2rem);
	font-weight: 700;
	line-height: .85;
	letter-spacing: -.05em;
	margin: 0;
}
.karakter__hoejre { display: grid; gap: .35rem; }
.karakter__stjerner { display: flex; gap: .1rem; color: var(--orange-tekst); }
.karakter__meta { font-size: var(--tekst-meta); color: var(--tekst-blod); margin: 0; }
.karakter__hoejre p:last-child { margin: 0; }

.anmeld__spor {
	margin-top: 2.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Kortene starter på linje med .wrap, også når sporet går ud til kanten. */
	padding-inline: max(var(--kant), calc((100vw - var(--bredde)) / 2 + var(--kant)));
	padding-block: .5rem 1rem;
}
.anmeld__spor::-webkit-scrollbar { display: none; }

.anmeld__raekke {
	display: flex;
	gap: 1rem;
	align-items: stretch;
}

.udtalelse {
	flex: 0 0 min(78%, 330px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin: 0;
	padding: 1.6rem;
	border-radius: var(--radius);
	background: var(--creme);
	border: 1px solid var(--linje-varm);
}
.udtalelse--2 { background: var(--hvid); border-color: var(--linje); }
.udtalelse--3 { background: var(--fersken); }

.review__stars { color: var(--orange-tekst); display: flex; gap: .1rem; }
.udtalelse__titel { font-size: 1.08rem; margin: 0; }
.udtalelse__citat { margin: 0; font-size: 1.02rem; color: var(--brun); }
.udtalelse__citat p:last-child { margin: 0; }
.udtalelse__af { margin-top: auto; padding-top: .5rem; font-size: var(--tekst-meta); color: var(--tekst-blod); }

@media (min-width: 900px) {
	.anmeld__top {
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: 3rem;
	}
	.anmeld__head .section-head { margin-bottom: 0; }

	.anmeld__spor {
		overflow: visible;
		margin-top: 3.25rem;
		padding-block: 0;
	}
	.anmeld__raekke { gap: 1.5rem; }
	.udtalelse { flex: 1 1 0; min-width: 0; padding: 2rem; }
}

/* ==========================================================================
   7. Påmindelsen
   --------------------------------------------------------------------------
   Her lå også funktionsblokkene (.fblock) — fire farvede flader i tre
   skiftende former. Afsnittet blev taget af forsiden, fordi det fortalte
   det samme som de tre trin lige ovenover, og reglerne stod tilbage som
   130 linjer CSS, ingen side brugte. Trinnene på undersiden lånte
   billedreglen; den står nu hos dem selv (.trin-stor__media).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Påmindelsen — den ene funktion, der står alene

   Den har ikke et nummer og ikke en overskrift over sig, fordi den ikke er
   ét punkt på en liste: den er sidens ene løfte ud over "gem dine
   gavekort". Derfor er den også den eneste sorte flade før foden — den
   skal kunne ses som noget andet end afsnittene omkring den, og den ligger
   mellem hero'ens orange og trin-scenens creme, hvor det syner mest.

   Telefonen skæres af fladens underkant. Det er det samme greb som i
   hero'en og i trinnene på undersiden: billedet fortsætter ud af rammen,
   så fladen læses som et udsnit og ikke som en kasse med et billede i.
   -------------------------------------------------------------------------- */

.paamindelse__flade {
	display: grid;
	gap: 2rem;
	align-items: center;
	background: var(--sort);
	color: var(--hvid);
	border-radius: var(--radius);
	padding: 2.5rem 1.5rem 0;
	overflow: hidden;
}
.paamindelse__flade .lead  { color: rgba(255, 255, 255, .72); }
.paamindelse__flade .label { color: rgba(255, 255, 255, .55); }
.paamindelse__flade h2 { font-size: clamp(1.9rem, 5.6vw, 2.8rem); max-width: 17ch; }

/*
 * Telefonen skæres over, lige under notifikationen. Under den er der kun
 * tom låseskærm, og tom låseskærm er tom flade: den gør fladen halvanden
 * gang så høj uden at sige noget. Beskeden er billedet.
 */
.paamindelse__media { display: flex; justify-content: center; align-self: end; }
.paamindelse__media img {
	width: min(66%, 230px);
	margin-bottom: -10rem;
	filter: drop-shadow(0 22px 34px rgba(3, 3, 28, .4));
}

@media (min-width: 900px) {
	.paamindelse__flade {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
		padding: 4rem 3.5rem 0;
		border-radius: var(--radius-stor);
	}
	.paamindelse__tekst { padding-bottom: 4rem; }
	.paamindelse__media img { width: min(78%, 280px); margin-bottom: -9rem; }
}

/* ==========================================================================
   8. Trin
   --------------------------------------------------------------------------
   Forsiden: en fastholdt scene. Telefonen bliver stående til venstre, mens
   trinnene ruller forbi, og skærmbilledet skifter til det trin, man er nået
   til. Effekten er bundet til rullen, ikke til en afspilning.

   På telefonen giver sticky ingen mening. Der bliver det en nummereret
   liste med en lodret streg, som tegner sig, efterhånden som man kommer
   igennem trinnene.
   ========================================================================== */

/*
 * På telefonen findes den fastholdte scene ikke — men dens INDHOLD skal
 * stadig med. Derfor `display: contents` frem for `display: none`:
 * skærmbilledet og knappen "Se hele gennemgangen" bliver direkte børn af
 * .scene, og rækkefølgen styres med order, så knappen lander EFTER
 * trinnene. Med display:none forsvandt linket til undersiden helt på
 * mobil, og trin-afsnittet var en nummereret liste uden ét billede.
 */
.scene {
	position: relative;
	display: flex;
	flex-direction: column;
}

.scene__fast { display: contents; }
.scene__telefon,
.scene__prikker { display: none; }

.scene__knap { order: 2; margin-top: 2rem; }

/*
 * Telefonens udgave: ét kort ad gangen, der swipes.
 *
 * Her stod før den samme lodrette liste som på desktop, bare uden den
 * fastholdte telefon — og med en orange streg, der skulle tegne sig,
 * efterhånden som man kom igennem trinnene. Den virkede ikke: stregen
 * blev tegnet oven i tallene i stedet for mellem dem, den kørte hele
 * vejen ned gennem afsnittet som en løs streg, og fremgangen blev
 * beregnet af den samme scroll-motor, som styrer den fastholdte scene —
 * en effekt, der ikke findes på en telefon. Afsnittet fyldte 2 250 px,
 * altså næsten tre skærmfulde, for at vise tre trin.
 *
 * Nu er det et swipe-spor med snap: ét trin fylder skærmen, det næste
 * kigger frem i kanten, og man kommer videre ved at trække, som man gør
 * på en telefon. Det er den samme idé som den fastholdte scene på
 * desktop — ét trin ad gangen — oversat til den bevægelse, en telefon
 * har. Det er også præcis samme greb som anmeldelserne længere nede, så
 * siden kun har ét mønster for "her er der mere ved siden af".
 *
 * Ingen JavaScript er involveret: browserens egen scroll-snap gør det
 * hele, og afsnittet virker derfor også, hvis scriptet ikke indlæses.
 */
.scene__trin {
	order: 1;
	list-style: none;
	margin: 0;

	/* Sporet går ud til skærmens kanter — ellers kan nabokortet ikke kigge frem. */
	margin-inline: calc(var(--kant) * -1);
	padding: .5rem var(--kant) 1rem;

	display: flex;
	gap: 1rem;
	align-items: stretch;

	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;

	/*
	 * Halen er den tomme strækning EFTER det sidste trin. Den er det, der
	 * holder telefonen fastgjort på desktop, mens man læser trinnet
	 * færdigt. Her er der ingen fastholdt scene, så den er nul.
	 */
	--hale: 0px;
}
.scene__trin::-webkit-scrollbar { display: none; }

.trin {
	flex: 0 0 min(84%, 340px);
	scroll-snap-align: start;
	position: relative;
	margin: 0;
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--hvid);
	border: 1px solid var(--linje);
}

/*
 * Nummeret ligger i kortets hjørne og er taget ud af tekstens spalte.
 * Fik det sin egen kolonne, kostede det 56 px af kortets 292 — og så
 * blev overskriften to linjer og brødteksten syv ord bred. Nu deler det
 * kun linje med overteksten, som alligevel er lav.
 */
.trin__nr {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 13px;
	background: var(--sort);
	color: var(--hvid);
	font-weight: 700;
}
.trin__krop > .label { min-height: 40px; padding-left: 3.4rem; }

.trin__krop p { color: var(--tekst-blod); }
.trin__krop > :last-child { margin-bottom: 0; }

/*
 * Skærmbilledet hører med i kortet. Man skal kunne SE, hvad trinnet
 * handler om — det er hele grunden til, at den fastholdte telefon findes
 * på desktop.
 */
.trin__shot {
	display: block;
	width: min(56%, 166px);
	height: auto;
	margin: 1.35rem 0 0;
}

@media (min-width: 900px) {
	.scene {
		display: grid;
		grid-template-columns: minmax(0, 340px) 1fr;
		gap: 3rem;
		align-items: start;
	}

	/*
	 * Telefonen står midt på skærmen, mens trinnene ruller forbi.
	 *
	 * Før stod spalten med sin egen højde (559 px) i en scene, der kun var
	 * 644 px høj. Sticky havde derfor 85 px at arbejde med: telefonen stod
	 * stille i et kort øjeblik og rullede så ud af billedet sammen med
	 * resten — og alle tre trin skiftede inden for den samme skærmfuld.
	 * Effekten var der i koden, men den kunne ikke ses.
	 *
	 * Den strækning, telefonen kan stå fast i, er trinnenes højde MINUS
	 * spaltens egen. Spalten skal derfor være så lav som muligt: hver px,
	 * den fylder for meget, skal trinnene betale tilbage i tom luft.
	 *
	 * Derfor er den ikke en skærmfuld høj — den er så høj som sit indhold,
	 * og den centreres med `top` i stedet. En skærmfuld ville koste 265 px
	 * ekstra, og de 265 px ville komme igen som mellemrum mellem trinnene.
	 * --scene-hoej er telefonen plus de 6,25 rem, prikkerne, mellemrummene
	 * og knappen fylder; rammer overslaget ved siden af, står telefonen en
	 * anelse skævt på skærmen, og der sker ikke andet.
	 */
	.scene__fast {
		--telefon:    min(50svh, 440px);
		--scene-hoej: calc(var(--telefon) + 6.25rem);

		display: grid;
		align-content: center;
		position: sticky;
		top: calc(var(--bjaelke) + (100svh - var(--bjaelke) - var(--scene-hoej)) / 2);
	}

	.scene__knap { margin-top: 0; }
	.trin__shot { display: none; }

	.scene__telefon {
		display: block;
		position: relative;
		height: var(--telefon);
		margin-bottom: 1.75rem;
	}
	.scene__shot {
		position: absolute;
		inset: 0;
		margin: 0 auto;
		width: auto;
		height: 100%;
		object-fit: contain;
		opacity: 0;
		transform: translateY(14px) scale(.97);
		transition: opacity .5s ease, transform .6s var(--kurve);
		filter: drop-shadow(var(--skygge-telefon));
	}
	.scene__shot.er-aktiv { opacity: 1; transform: none; }

	.scene__prikker {
		list-style: none;
		display: flex;
		gap: .5rem;
		margin: 0 0 1.5rem;
		padding: 0;
	}
	.scene__prikker li {
		width: 28px; height: 3px;
		border-radius: 2px;
		background: var(--linje);
		transition: background-color .3s ease, width .3s var(--kurve);
	}
	.scene__prikker li.er-aktiv { background: var(--sort); width: 44px; }

	/*
	 * Trinnet er en kasse med teksten stående MIDT i.
	 *
	 * Midten er det, der får scenen til at hænge sammen. Stod teksten
	 * øverst i sin kasse, ville to trins overskrifter være på skærmen
	 * samtidig — og så er der ikke ét trin, man er nået til, men to.
	 *
	 * Kassen er 40 svh. Det er nok til, at trinnene læses ét ad gangen, og
	 * ikke mere: et trin fylder omkring 250 px, så der står cirka 110 px
	 * luft omkring det. En halv skærmfuld gav 240 px, og så var afsnittet
	 * ikke længere luftigt — det var tomt.
	 *
	 * Opløbet foroven og halen forneden er de to ender af den samme sag:
	 * scenen låser først, når spalten når sin plads, og den slipper, når
	 * trinnene er kørt tør. Uden opløbet er trin 1 allerede passeret
	 * midten, når telefonen sætter sig fast — den ville stå stille og
	 * skifte til trin 2 i samme bevægelse. Uden halen slipper scenen i det
	 * øjeblik, det sidste trin kommer til syne. Begge er små, fordi
	 * spalten ovenfor er lav; det er den, der bestemmer prisen.
	 */
	/* Sporet fra telefonen rulles tilbage: her står trinnene under hinanden. */
	.scene__trin {
		display: block;
		overflow: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding: var(--hoved) 0 var(--hale) 0;
		--hoved: 7svh;
		--hale: 11svh;
	}

	.trin {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 1.5rem;
		align-content: center;
		align-items: start;
		min-height: 40svh;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.trin__krop > .label { min-height: 0; padding-left: 0; }

	/*
	 * Her betyder tallet noget andet end på telefonen. På telefonen er
	 * hvert trin sit eget kort, så alle numre er lige aktuelle. Her ruller
	 * trinnene forbi én fastholdt telefon, og nummeret er det, der siger,
	 * hvilket trin skærmbilledet hører til — derfor er kun det aktive
	 * fyldt, og resten står som tomme ringe.
	 */
	.trin__nr {
		position: static;
		width: 48px; height: 48px;
		border-radius: 16px;
		background: var(--hvid);
		border: 1.5px solid var(--linje);
		color: var(--tekst-blod);
		transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--kurve);
	}
	.trin.er-aktiv .trin__nr {
		background: var(--sort);
		border-color: var(--sort);
		color: var(--hvid);
		transform: scale(1.06);
	}
}

/*
 * Først her er der plads til den brede telefonspalte. Ved 900 px gav
 * 400 px + 5 rem gab kun 284 px læsbar tekst — telefonen var bredere end
 * den tekst, den skulle forklare.
 */
@media (min-width: 1100px) {
	.scene { grid-template-columns: minmax(0, 400px) 1fr; gap: 5rem; }
}

/* ---------- Trin i fuld bredde (undersiden "Sådan virker det") ---------- */
/*
 * Her er trinnene selve indholdet, ikke et supplement. Derfor står de i ét
 * gennemgående mønster — skiftevis billede til venstre og højre — så man
 * kan følge fortællingen uden at skulle finde sig til rette forfra.
 */
.trin-stor { display: grid; gap: 1.25rem; }

.trin-stor__trin {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}
.trin-stor__media { display: flex; justify-content: center; }
.trin-stor__media img { width: min(62%, 220px); filter: drop-shadow(var(--skygge-telefon)); }

.trin-stor__tekst h2 { font-size: clamp(1.7rem, 4.6vw, 2.4rem); }

/*
 * Undersidens uddybning. Den skal kunne kendes fra manchetten ovenover —
 * ellers ser trinnet bare ud til at have en meget lang brødtekst. Derfor
 * en hårstreg over og en grad mindre.
 */
.trin-stor__mere {
	margin-top: 1.4rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linje-varm);
	font-size: .97rem;
	color: var(--brun);
	max-width: var(--maal-brod);
}
.trin-stor__mere > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.trin-stor { gap: 2rem; }
	.trin-stor__trin { grid-template-columns: 1fr 1fr; gap: 3.5rem; padding: 3.5rem; }
	.trin-stor__trin--omvendt .trin-stor__media { order: 2; }
	.trin-stor__media img { width: min(72%, 260px); }
}

/* ==========================================================================
   10. Blog
   --------------------------------------------------------------------------
   Kortet er bygget til at fungere begge veje: med et fremhævet billede, der
   skubber sig langsomt bag rammen, mens man ruller — og uden, hvor
   indlæggets coverord bliver til fladen. Derfor kan kunden skrive et indlæg
   uden at skulle finde et billede først.
   ========================================================================== */

.post-grid { display: grid; gap: 2.25rem 1.5rem; }
@media (min-width: 720px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; } }

.blogkort { display: flex; flex-direction: column; gap: 1.1rem; }

.blogkort__flade {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 5 / 4;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--creme);
	border: 1px solid var(--linje-varm);
	text-decoration: none;
	padding: 1.75rem;
	text-align: center;
}
.blogkort--f1 .blogkort__flade { background: var(--orange); border-color: transparent; }
.blogkort--f2 .blogkort__flade { background: var(--sort); color: var(--hvid); border-color: transparent; }
.blogkort--f3 .blogkort__flade { background: var(--fersken); }
.blogkort--billede .blogkort__flade { background: var(--creme); padding: 0; border-color: transparent; }

.blogkort__ord {
	font-size: clamp(1.55rem, 3.6vw, 2.15rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.08;
}

.blogkort__ramme { position: absolute; inset: 0; overflow: hidden; display: block; }
/*
 * Billedet er 20 % højere end rammen og hænger 10 % ud i begge ender.
 * Det er den luft, parallaksen bevæger sig i — uden at der nogensinde
 * kommer en stribe bar flade til syne i toppen eller bunden.
 */
.blogkort__ramme img {
	position: absolute;
	top: -10%; left: 0;
	width: 100%;
	height: 120%;
	object-fit: cover;
	transition: transform .7s var(--kurve);
	will-change: transform;
}
.blogkort:hover .blogkort__ramme img { transform: scale(1.04); }

/* Kroppen strækker sig, så "Læs indlægget" står på linje i hele rækken. */
.blogkort__krop { display: flex; flex-direction: column; gap: .55rem; flex: 1; }

.blogkort__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem .6rem;
	font-size: var(--tekst-meta);
	color: var(--tekst-blod);
	margin: 0;
}

.blogkort__titel { font-size: 1.2rem; margin: 0; }
.blogkort__titel a { text-decoration: none; }
.blogkort__titel a:hover { text-decoration: underline; text-decoration-color: var(--orange); }

.blogkort__uddrag { color: var(--tekst-blod); font-size: 1rem; margin: 0; }

.blogkort__laes {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: .4rem;
	margin: auto 0 0;
	padding-top: .5rem;
	font-size: var(--tekst-meta);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--orange-tekst);
}
.blogkort__laes svg { transition: transform .25s var(--kurve); }
.blogkort:hover .blogkort__laes svg { transform: translateX(4px); }

/*
 * Uden billede og uden coverord bliver kortet et rent tekstkort: en tyk
 * streg over titlen i stedet for en tom farveflade. Det er en bevidst
 * variation i gitteret — ikke et hul.
 */
.blogkort--tekst { border-top: 3px solid var(--sort); padding-top: 1.35rem; }
.blogkort--tekst .blogkort__titel { font-size: 1.45rem; }
.blogkort--tekst .blogkort__uddrag { font-size: 1.05rem; }

@media (min-width: 900px) {
	.blogkort--stor.blogkort--tekst { display: block; max-width: 42rem; }
	.blogkort--stor.blogkort--tekst .blogkort__titel { font-size: clamp(2rem, 4vw, 3rem); }
}

/*
 * Forsidens blogafsnit: overskriften til venstre, "Se alle indlæg" i
 * højre kant på samme grundlinje. På telefonen falder linket ned under.
 */
.blogtop { display: grid; gap: .5rem; }
.blogtop .section-head { margin-bottom: 1.25rem; }
.blogtop__link { margin: 0 0 2rem; }

@media (min-width: 900px) {
	.blogtop {
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: 2rem;
		margin-bottom: 3.5rem;
	}
	.blogtop .section-head { margin-bottom: 0; }
	.blogtop__link { margin: 0; padding-bottom: .35rem; }
}

/* ---------- Det fremhævede indlæg øverst på blogsiden ---------- */
.blog-fremhaevet { margin-bottom: 3.5rem; }

@media (min-width: 900px) {
	.blog-fremhaevet { margin-bottom: 5rem; }

	.blogkort--stor {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: 3.5rem;
		align-items: center;
	}
	.blogkort--stor .blogkort__flade { aspect-ratio: 4 / 3; border-radius: var(--radius-stor); }
	.blogkort--stor .blogkort__ord { font-size: clamp(2rem, 4vw, 3.2rem); }
	.blogkort--stor .blogkort__titel { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
	.blogkort--stor .blogkort__uddrag { font-size: 1.1rem; max-width: var(--maal-lead); }
	.blogkort--stor .blogkort__krop { gap: .75rem; }
}

/* ---------- Værktøjslinjen: søgning og emner ---------- */
.blogvaerktoj { display: grid; gap: 1.25rem; margin-top: 2.25rem; }

.soegefelt {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--hvid);
	border: 1.5px solid var(--linje);
	border-radius: 999px;
	padding: .35rem .35rem .35rem 1.1rem;
	max-width: 34rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.soegefelt:focus-within { border-color: var(--sort); box-shadow: 0 6px 20px rgba(3, 3, 28, .08); }
.soegefelt__ikon { display: flex; color: var(--tekst-blod); flex: none; }
.soegefelt input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 1rem;
	color: var(--tekst);
	padding: .65rem .25rem;
	min-height: 44px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.soegefelt input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.soegefelt .btn { flex: none; }

.emner {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: .25rem;
	/* Kanterne skal ikke klippe den første og sidste knap på telefonen. */
	margin-inline: calc(var(--kant) * -1);
	padding-inline: var(--kant);
}
.emner::-webkit-scrollbar { display: none; }

.emne {
	flex: none;
	padding: .5rem 1.05rem;
	border-radius: 999px;
	border: 1px solid var(--linje);
	background: var(--hvid);
	text-decoration: none;
	font-size: .93rem;
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.emne:hover { border-color: var(--sort); }
.emne.er-aktiv { background: var(--sort); color: var(--hvid); border-color: var(--sort); }

/*
 * Søgefelt og emnefilter bor inde i blogsidens CREME hoved, ikke på
 * sidebaggrunden. Hvid mod creme er 1,15 : 1 og --linje-kanten 1,18 : 1 —
 * begge dele var reelt usynlige netop dér, hvor de står.
 */
.sidehoved .soegefelt,
.sidehoved .emne { border-color: rgba(46, 37, 31, .26); }
.sidehoved .emne:hover,
.sidehoved .soegefelt:focus-within { border-color: var(--sort); }

@media (min-width: 900px) {
	.blogvaerktoj {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2rem;
		margin-top: 2.75rem;
	}
	.emner { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; justify-content: flex-end; }
}

/* ---------- Artiklen ---------- */
.laesebar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 150;
	pointer-events: none;
	background: transparent;
}
.laesebar span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--orange-dyb);
	transform: scaleX(var(--laest, 0));
	transform-origin: 0 50%;
	transition: transform .1s linear;
}

.artikel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .7rem;
	font-size: var(--tekst-meta);
	color: var(--tekst-blod);
	margin: 0 0 1.1rem;
}
.artikel__titel { font-size: clamp(2.3rem, 7vw, 3.9rem); }
.artikel__manchet { font-size: 1.18rem; max-width: var(--maal-lead); margin: 0; }

/*
 * Coverbilledet må gerne være bredere end teksten — det er sådan, en
 * artikel får luft. Men ikke meget bredere: 1080 px mod tekstens 660 er
 * en forskel, man læser som et valg. 1400 ville bare være stort.
 */
.artikel__cover { margin-top: calc(var(--sektion) * .45); }
.artikel__cover > .wrap { max-width: calc(1080px + var(--kant) * 2); }
.artikel__coverramme {
	position: relative;
	border-radius: var(--radius-stor);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--creme);
}
.artikel__coverramme img {
	position: absolute;
	top: -10%; left: 0;
	width: 100%;
	height: 120%;
	object-fit: cover;
	will-change: transform;
}
.artikel__cover figcaption { font-size: var(--tekst-meta); color: var(--tekst-blod); margin-top: .75rem; }

.artikel__ordflade {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 6;
	border-radius: var(--radius-stor);
	padding: 2rem;
	text-align: center;
	background: var(--creme);
	font-size: clamp(2rem, 7vw, 4rem);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1.05;
}
.artikel__ordflade--f1 { background: var(--orange); }
.artikel__ordflade--f2 { background: var(--sort); color: var(--hvid); }
.artikel__ordflade--f3 { background: var(--fersken); }

/*
 * På telefonen falder deleknapperne ned under teksten som en vandret
 * række. De skal være der — folk deler oftere fra telefonen end fra en
 * skærm — men de må ikke stå i vejen for det, man kom for at læse.
 */
.artikel__krop {
	display: flex;
	flex-direction: column;
	padding-block: 2.5rem calc(var(--sektion) * .5);
}
/* Under 1000 px står tekst og skinne i én spalte i læsebredde. */
.artikel__krop > * { width: 100%; max-width: var(--bredde-laes); margin-inline: auto; }
.artikel__skinne { order: 2; margin-top: 2.5rem; }
.artikel__skinne .label { margin-bottom: .75rem; }
.artikel__skinne .del { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.artikel__tekst .prose { font-size: 1.1rem; }

.artikel__slut {
	margin-top: 3rem;
	padding: 1.75rem;
	border-radius: var(--radius);
	background: var(--creme);
	border: 1px solid var(--linje-varm);
}
.artikel__slut p { max-width: var(--maal-lead); }
.artikel__slut .btn-rad,
.artikel__slut .hent { margin-top: 1.25rem; }

.del { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--tekst-meta); }
.del a, .del__kopi {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--tekst-blod);
	text-decoration: none;
	cursor: pointer;
	text-align: left;
}
.del a:hover, .del__kopi:hover { color: var(--orange-tekst); }

@media (min-width: 1000px) {

	.artikel__krop {
		display: grid;
		grid-template-columns: 1fr minmax(0, var(--bredde-laes)) 1fr;
		gap: 0 3rem;
		padding-block: 4rem calc(var(--sektion) * .5);
	}
	.artikel__krop > * { margin-inline: 0; max-width: none; }
	/* 5,5 rem, ikke 9: ved 1000 px er sidesporet 90 px, og en 144 px skinne
	   voksede 54 px ud over .wrap. Først ved ~1108 px var der plads. */
	.artikel__skinne { grid-column: 1; justify-self: end; width: 5.5rem; order: 0; margin-top: 0; }
	.artikel__skinne .del { display: grid; gap: .5rem; }
	.artikel__skinne-fast { position: sticky; top: calc(var(--bjaelke) + 3rem); }
	.artikel__tekst { grid-column: 2; }
	.artikel__slut { padding: 2.5rem; }
}

/* Tom tilstand: ingen indlæg, ingen søgetræf. */
.tomtilstand {
	padding: 3rem 0 4rem;
	max-width: 44ch;
}
.tomtilstand h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
.tomtilstand__vej { margin-top: 1.5rem; }

/* ==========================================================================
   10b. Er det sikkert?
   --------------------------------------------------------------------------
   Et dokument, ikke kort. Spørgsmålet står til venstre og svarene under
   hinanden til højre, adskilt af hårstreger. Kort ville ligne
   funktionsblokkene lige ovenover, og afsnittet ville læses som "flere
   funktioner" i stedet for som et svar på en indvending.
   ========================================================================== */

.sikkerhed__inner { display: grid; gap: 2.5rem; }
.sikkerhed__hoved > :last-child { margin-bottom: 0; }
.sikkerhed__hoved h2 { max-width: 18ch; }
.sikkerhed__hoved .lead { color: var(--brun); max-width: var(--maal-lead); }
.sikkerhed__vej { margin: 1.5rem 0 0; }

.sikkerhed__svar { margin: 0; }

.sikkerhed__punkt {
	border-top: 1px solid rgba(46, 37, 31, .2);
	padding: 1.35rem 0;
}
.sikkerhed__punkt:last-child { border-bottom: 1px solid rgba(46, 37, 31, .2); }

.sikkerhed__svar dt {
	font-family: inherit;
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: -.012em;
	margin-bottom: .3rem;
}
.sikkerhed__svar dd {
	margin: 0;
	color: var(--brun);
	max-width: 52ch;
}

@media (min-width: 900px) {
	.sikkerhed__inner {
		grid-template-columns: 1fr 1.1fr;
		gap: 4.5rem;
		align-items: start;
	}
	.sikkerhed__punkt { padding: 1.6rem 0; }
	.sikkerhed__punkt:first-child { padding-top: .35rem; border-top: 0; }
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */

/*
 * Læsemål. Ved 58rem stod spørgsmålet i venstre tredjedel og plusset 600 px
 * længere ude, med bar flade imellem — man kunne ikke se, at de to hørte
 * sammen. En harmonika er et dokument, ikke et layout.
 */
.faq__list {
	border-top: 1px solid var(--linje);
	max-width: var(--bredde-doc);
}

.faq__item { border-bottom: 1px solid var(--linje); }

/*
 * Forsidens udgave: overskrift i venstre spalte, spørgsmål i højre. Uden
 * den ville harmonikaen — som skal holde sit læsemål på 46 rem — efterlade
 * over 400 px bar flade ned langs hele højresiden.
 */
.faq__inner { display: grid; gap: 2.5rem; }
.faq--delt .faq__hoved .section-head { margin-bottom: 0; }
.faq__vej { margin: 1.5rem 0 0; }

@media (min-width: 900px) {
	/* Forsiden: overskrift til venstre, spørgsmål til højre. */
	.faq--delt .faq__inner {
		grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
		gap: 4.5rem;
		align-items: start;
	}
	.faq--delt .faq__list { max-width: none; }
	.faq--delt .faq__hoved { position: sticky; top: calc(var(--bjaelke) + 3rem); }

	/*
	 * FAQ-siden: spørgsmålene beholder deres læsemål, og hjælpekortet
	 * fylder den spalte, der før stod tom. Kortet følger med ned, så det er
	 * inden for rækkevidde, uanset hvor langt nede i listen man er.
	 */
	/*
	 * Faste forhold, ikke minmax(0, 46rem): et spor med et maksimum bliver
	 * sat efter sit INDHOLD og standsede derfor ved ~600 px, så der stod
	 * 200 px ubrugt til højre for hjælpekortet. 1,9 : 1 giver listen ca.
	 * de 46 rem, den skal have, og kortet resten.
	 */
	.faq--side .faq__inner {
		grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}
	.faq--side .faq__list { max-width: none; }
	.faq--side .hjaelpekort { position: sticky; top: calc(var(--bjaelke) + 3rem); }
}

.faq__q {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.35rem .25rem;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.08rem;
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--orange-tekst); }

.faq__nr {
	flex: none;
	font-size: var(--tekst-label);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--tekst-blod);
	opacity: .55;
	font-variant-numeric: tabular-nums;
}
.faq__ord { flex: 1; }

.faq__sign { position: relative; flex: none; width: 16px; height: 16px; }
.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	top: 50%; left: 0; right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .3s var(--kurve);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0); }

.faq__a { padding: 0 .25rem 1.5rem; color: var(--tekst-blod); max-width: var(--maal-lead); }
.faq__a p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.faq__q { font-size: 1.18rem; padding: 1.6rem .25rem; gap: 1.5rem; }
	.faq__a { padding-left: 3.4rem; }
}

/*
 * Hjælpekortet står nu i FAQ-sidens højre spalte og er derfor smalt og
 * lodret. Det var før bredt og todelt (tekst | knapper) i den samme 46 rem
 * som listen — og der var overskriften og en knap med hele e-mailadressen
 * om de samme 330 px.
 */
.hjaelpekort {
	display: grid;
	gap: 1rem;
	justify-items: start;
	padding: 1.75rem;
	border-radius: var(--radius-stor);
	background: var(--creme);
	border: 1px solid var(--linje-varm);
	max-width: var(--bredde-doc);
}
.hjaelpekort h2 { font-size: clamp(1.35rem, 3.2vw, 1.6rem); margin: 0; }
.hjaelpekort p { margin: 0; color: var(--brun); }
.hjaelpekort__mail { font-size: var(--tekst-meta); }

/* ==========================================================================
   12. Sidehoveder, sider og formularer
   ========================================================================== */

/*
 * Sidehovedet.
 *
 * Undersiderne åbner nu med samme gestus som forsiden: en flade fra kant
 * til kant, der runder af i bunden. Forsiden bruger orange, fordi hero skal
 * bære hele sitet; undersiderne bruger creme, fordi de skal LIGNE forsiden
 * — ikke råbe lige så højt.
 *
 * Før begyndte en underside bogstavelig talt ingen steder: sort tekst på
 * sidebaggrunden, under en klæbende topbjælke i nøjagtig samme farve. Der
 * var ikke én eneste kant fra bjælkens underkant og ned til første sektion,
 * og derfor kunne øjet ikke se, hvor sidens hoved holdt op, og hvor
 * indholdet begyndte. Hårstregen i bunden er der, fordi creme mod sand kun
 * er 1,06 : 1 — fladen alene ville ikke kunne ses.
 *
 * Blogindlægget bruger den samme flade. Et indlæg er ikke en anden slags
 * side.
 */
.sidehoved,
.artikel__hoved {
	background: var(--creme);
	border-bottom: 1px solid var(--linje-varm);
	border-radius: 0 0 var(--radius-stor) var(--radius-stor);
	padding-block: 2.5rem 2.75rem;
}

/*
 * Den første sektion under et sidehoved er en FORTSÆTTELSE af hovedet, ikke
 * et nyt kapitel. Den skal derfor have sin egen luft — ikke summen af
 * hovedets bundmargen og sektionens egen padding, som gav 9 rem bar flade
 * mellem en overskrift og det første, den handlede om.
 */
.sidehoved + .section,
.artikel__hoved + .section { padding-top: calc(var(--sektion) * .62); }

/*
 * ... men reglen ovenfor har specificitet 0-2-0 og slog derfor
 * .section--tight (0-1-0) ihjel: sektionen fik 0,62 × foroven og 0,3 ×
 * forneden — 5,58 rem mod 2,7 rem. Syv skabeloner stod med asymmetrisk
 * luft. En fortsættelse af hovedet skal have SAMME luft i begge ender.
 */
.sidehoved + .section--tight,
.artikel__hoved + .section--tight { padding-block: calc(var(--sektion) * .45); }

.sidehoved .lead,
.artikel__manchet { color: var(--brun); }
/* Samme manchetmål som forsidens sektionshoveder — ellers brækker de to sider forskelligt. */
.sidehoved .lead { font-size: 1.15rem; max-width: var(--maal-lead); }
/* Undersidens h1 var det eneste hoved uden bredde og løb de fulde 1156 px. */
.sidehoved h1 { max-width: 16ch; }
.sidehoved__handling { margin-top: 2rem; }
/* Værktøjslinjen på bloggen ligger inde i hovedet og skal have sin egen luft. */
.sidehoved--blog .blogvaerktoj { margin-top: 2rem; }

@media (min-width: 900px) {
	.sidehoved,
	.artikel__hoved { padding-block: 3.75rem 4rem; }
	.sidehoved .lead { font-size: 1.22rem; }
}

/* Om Gavo — de tre grundsætninger */
.grundsaetninger { display: grid; gap: 1.25rem; }
.grundsaetning h2 { font-size: 1.35rem; }
.grundsaetning p { color: var(--brun); }
.grundsaetning > :last-child { margin-bottom: 0; }
.grundsaetning__nr {
	font-size: var(--tekst-label);
	font-weight: 700;
	letter-spacing: .12em;
	opacity: .5;
	margin: 0 0 1.5rem;
	font-variant-numeric: tabular-nums;
}
@media (min-width: 760px) {
	.grundsaetninger { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
	.grundsaetning { display: flex; flex-direction: column; }
	.grundsaetning__nr { margin-bottom: 3rem; }
}

/* Om Gavo — historien */
/*
 * Historien er ren tekst på en cremeflade. Der stod før en telefon ved
 * siden af, men den viste appens splash-skærm — et logo på en skærm.
 * Sitets øvrige afsnit bærer alle en telefon; her får teksten lov at stå
 * alene, og afsnittet får sin egen karakter i stedet for at være endnu en
 * blok med et produktbillede.
 */
.historie {
	background: var(--creme);
	border: 1px solid var(--linje-varm);
	border-radius: var(--radius-stor);
	padding: 2.25rem 1.75rem;
}
.historie h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); max-width: 16ch; }
.historie .prose { color: var(--brun); max-width: var(--maal-brod); }
.historie .prose > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.historie { padding: 4rem; }
}

.info-grid { display: grid; gap: 1rem; }
/* Faste spalter frem for auto-fit: fire kort blev ellers 3 + 1 mellem 900 og 1140 px. */
@media (min-width: 720px)  { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }

.info-card {
	background: var(--hvid);
	border: 1px solid var(--linje);
	border-radius: var(--radius);
	padding: 1.5rem;
	text-decoration: none;
	display: grid;
	gap: .3rem;
	align-content: start;
	transition: border-color .2s ease, transform .2s var(--kurve);
}
a.info-card:hover { border-color: var(--sort); transform: translateY(-3px); }
.info-card svg { color: var(--orange-tekst); margin-bottom: .6rem; }
.info-card strong { font-size: 1.05rem; }
.info-card span { color: var(--tekst-blod); font-size: var(--tekst-meta); }

/* Kontaktformular */
.contact-panel { display: grid; gap: 2rem; }
.contact-panel__mail { margin-top: 1.25rem; }
.kontaktform__send { margin-top: 1.25rem; margin-bottom: 0; }
@media (min-width: 900px) { .contact-panel { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; } }

.form-row { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 620px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; margin: 0; align-content: start; }
.field--luft { margin-top: 1rem; }
.field label { font-size: var(--tekst-meta); font-weight: 600; }
.field input,
.field textarea {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	padding: .85rem 1rem;
	border: 1.5px solid var(--linje);
	border-radius: var(--radius-lille);
	background: var(--hvid);
	color: var(--sort);
	min-height: 52px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--sort); outline: none; }
.form-svar { padding: 1rem 1.15rem; border-radius: var(--radius-lille); font-size: 1rem; margin-bottom: 1.25rem; }
.form-svar--ok { background: var(--hvid); border: 1.5px solid var(--orange); }
.form-svar--fejl { background: #FDE2E2; }
.form-hp { position: absolute; left: -9999px; }

/* 404 — søgefeltet under sidehovedet. */
.fejlside { max-width: 34rem; }

/* Brødtekst i editoren */
.prose { max-width: var(--maal-brod); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.55rem, 4vw, 2.05rem); margin-top: 2em; margin-bottom: .5em; }
.prose h3 { margin-top: 1.8em; margin-bottom: .5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--radius); }
.prose blockquote {
	margin: 2.25rem 0;
	padding: 1.4rem 1.6rem;
	background: var(--creme);
	border-radius: var(--radius-lille);
	font-size: 1.08rem;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.prose a:hover { text-decoration-color: var(--sort); }
.prose hr { border: 0; border-top: 1px solid var(--linje); margin: 2.5rem 0; }

/* ==========================================================================
   13. Afslutningsbåndet
   --------------------------------------------------------------------------
   Hver eneste side ender på samme måde: et orange bånd fra kant til kant,
   der støder direkte op til den sorte sidefod.

   Før var der to afslutninger. Forsiden sluttede med et sort download-kort,
   der svævede på sidebaggrunden; undersiderne med et orange bånd, som lå
   inde i en .wrap og brød ud igen med margin-inline: calc(50% - 50vw) plus
   en negativ bundmargen, der skulle æde sektionens egen luft. To
   komponenter, to former, to slutninger — og siderne så ud, som om de var
   sat op hver for sig. Det er dét, man mærker, når "kompositionen ikke
   sidder i skabet".

   Nu er der én. Forsiden bruger den fyldige udgave (punktliste og begge
   knapper), undersiderne den korte. Det er det samme tilbud, det samme
   sted, på den samme flade. Orange mod sort er sidens hårdeste kant, så
   siden LUKKER i stedet for at fise ud — og sammen med den orange hero
   øverst rammer båndet hele sitet ind i den samme farve.

   Telefonen skæres af båndets underkant. Samme greb som i hero og i
   funktionsblokkene: dybde uden dekoration. Derfor har båndet ingen
   bundluft af sig selv — den ligger i tekstspalten.
   ========================================================================== */

.cta-band {
	overflow: hidden;
	padding-bottom: 0;
}

.cta-band__inner { display: grid; gap: 2.5rem; }

.cta-band__tekst > :last-child { margin-bottom: 0; }
.cta-band__title { font-size: clamp(2rem, 6.5vw, 3.4rem); max-width: 15ch; }
.cta-band__lead { max-width: var(--maal-lead-stor); }

/* Punktlisten står kun i den fyldige udgave — altså på forsiden. */
.cta-band__liste {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	gap: .7rem;
	color: var(--brun);
}
.cta-band__liste li { display: flex; align-items: center; gap: .75rem; }
.cta-band__liste svg { flex: none; opacity: .65; }

.cta-band__knapper { margin-top: 1.75rem; }

.cta-band__media { display: flex; justify-content: center; align-self: end; }
.cta-band__media img {
	width: min(58%, 210px);
	/* Skæres af båndets underkant — båndet har overflow: hidden. */
	margin-bottom: -2.5rem;
	filter: drop-shadow(var(--skygge-telefon));
}

@media (min-width: 900px) {
	.cta-band__inner {
		grid-template-columns: 1.15fr .85fr;
		gap: 3rem;
		align-items: end;
	}
	/* På desktop ligger båndets bundluft i teksten, så telefonen kan nå kanten. */
	.cta-band__tekst { padding-bottom: calc(var(--sektion) * .72); }
	.cta-band__media img { width: min(76%, 270px); margin-bottom: -3rem; }
}

/* ---------- Knapper på varme flader ---------- */
/*
 * --linje er sat til at kunne ses på den neutrale sidebaggrund. På creme,
 * fersken og orange forsvinder den (1,18 : 1 mod creme), så kantknappen
 * ville stå uden kant. Fladen sætter derfor sine egne værdier, og knappen
 * behøver ikke vide, hvor den står.
 *
 * Listen dækker HVER flade, knappen faktisk optræder på — ikke kun de tre
 * bånd-klasser. Det var fejlen før.
 */
.hero,
.sidehoved,
.artikel__hoved,
.hjaelpekort,
.artikel__slut,
.tomtilstand,
.panel--creme,
.panel--fersken,
.panel--orange,
.section--orange,
.section--fersken,
.section--creme {
	--btn-kant:       rgba(46, 37, 31, .3);
	--btn-kant-tekst: var(--brun);
}

/* Sorte flader vender den om: kanten skal ses mod mørkt, ikke mod lyst. */
.section--sort,
.panel--sort {
	--btn-kant:       rgba(255, 255, 255, .34);
	--btn-kant-tekst: var(--hvid);
}
.section--sort .btn--kant:hover,
.panel--sort .btn--kant:hover {
	background: var(--hvid);
	border-color: var(--hvid);
	color: var(--sort);
}

/* ==========================================================================
   14. Sidefod og paginering
   ========================================================================== */

.site-footer {
	background: var(--sort);
	color: rgba(255, 255, 255, .72);
	padding-top: 3.5rem;
}
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.site-footer__inner { display: grid; gap: 2.25rem; padding-bottom: 2.5rem; }
.site-footer__brand img { height: 30px; width: auto; }
.site-footer__about { margin-top: 1rem; max-width: 34ch; font-size: var(--tekst-meta); }
.site-footer__heading {
	font-size: var(--tekst-label);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-bottom: .9rem;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: 1rem; }
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 1.25rem 2rem;
	font-size: var(--tekst-meta);
	color: rgba(255, 255, 255, .45);
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	justify-content: space-between;
}

@media (min-width: 760px) {
	.site-footer__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 2.5rem 3rem;
	}
	.site-footer__brand { flex: 1 1 260px; max-width: 30rem; }
	.site-footer__inner > div:not(.site-footer__brand) { flex: 0 1 10rem; }
}

.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3.5rem; }
.pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 48px; height: 48px;
	padding-inline: .7rem;
	border-radius: 999px;
	background: var(--hvid);
	border: 1px solid var(--linje);
	text-decoration: none;
	font-weight: 600;
	transition: border-color .2s ease;
}
.pagination a.page-numbers:hover { border-color: var(--sort); }
.pagination .current { background: var(--sort); color: var(--hvid); border-color: transparent; }

.page-links { display: flex; gap: .5rem; margin-top: 2rem; font-weight: 600; }

/* ==========================================================================
   15. Bevægelse
   --------------------------------------------------------------------------
   Siden har ÉT bevægelsessprog. Tre regler, og ikke flere:

     1. Fremtoning (data-reveal). Alt indhold træder frem på samme måde:
        et kort løft og en indtoning, samme længde og samme kurve overalt.
        Det er den eneste effekt, der gentages ned gennem siden.

     2. Ét ankomstøjeblik pr. side (data-ord). Sidens hovedoverskrift — og
        kun den — stiger op ord for ord. Sættes den på hver eneste
        underoverskrift, holder øjet op med at læse og begynder at se på
        effekten i stedet.

     3. Dybde (data-scroll). Parallakse er det eneste sted, hvor rullen selv
        driver bevægelsen, og den bruges kun til lag, der ligger bag
        hinanden: telefonerne i hero, og billeder inde i en fast ramme.
        Udslaget er lille nok til, at man mærker det uden at kunne pege
        på det.

   To effekter er taget ud, og det er værd at vide hvorfor:

     · 3D-vippet på skærmbillederne. Vinklen var regnet direkte ud fra
       rullepositionen, så produktbilledet aldrig stod lige. Hver blok viste
       telefonen i sin egen tilfældige vinkel, afhængigt af hvor på siden
       den lå, og i de smalle blokke skubbede vippet billedet ud over
       kanten, så telefonen blev skåret over. Et skærmbillede er indhold —
       det skal vises lige.

     · Den vandrette drift på anmeldelserne. Den trak rækken ud af den
       lodrette linje, resten af siden står på, og flyttede indhold på
       tværs af den retning, man både læser og ruller i.

   Tre ting gør resten forsvarligt:
     · Alt bevægelse er bundet til klassen .js på <html>. Kører JavaScript
       ikke, står siden helt normalt — intet skjult indhold.
     · prefers-reduced-motion: reduce slår alle transformationer fra.
     · Løkken springer elementer over, der er langt uden for skærmen.
   ========================================================================== */

/* ---------- 1. Fremtoning ---------- */
/*
 * Løftet er kort med vilje. 28 px var nok til, at man så elementet flytte
 * sig i stedet for at se det komme til syne, og med otte sektioner under
 * hinanden blev det til otte ryk på vej ned.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s var(--kurve), transform .55s var(--kurve);
}
.js [data-reveal].er-synlig { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal-delay="2"] { transition-delay: .14s; }
[data-reveal-delay="3"] { transition-delay: .21s; }

/*
 * Ord for ord. Hvert ord ligger i en maske og starter under kanten.
 *
 * Masken har luft i begge ender og trækkes tilbage med negativ margin, så
 * den ikke ændrer linjeafstanden. Luften er der af to grunde: nedadtil
 * skærer masken ellers underlængderne af på g, j og y — opadtil skærer den
 * accenten af på É og Å, og dansk er fuldt af begge dele.
 *
 * Startpositionen er 130 %, ikke 100 %: ordet skal være helt ude af den
 * højere maske, før det stiger op.
 */
.ord { display: inline-block; }
.js [data-ord] .ord {
	overflow: hidden;
	vertical-align: bottom;
	padding: .2em 0 .18em;
	margin: -.2em 0 -.18em;
}
.js [data-ord] .ord__i {
	display: inline-block;
	transform: translateY(130%);
	transition: transform .65s var(--kurve);
	transition-delay: calc(var(--ord, 0) * 40ms);
}
.js [data-ord].er-synlig .ord__i { transform: none; }

/* ---------- 2. Dybde ---------- */

/*
 * Hero: telefonerne ligger i lag og flytter sig med hver sin hastighed,
 * mens man ruller.
 *
 * Bevægelsen går KUN nedad, og den starter på nul. Det er begge dele
 * bevidst:
 *
 *   · Nul ved sidens top betyder, at parallaksen tager over præcis dér,
 *     hvor åbningsanimationen slipper. Ingen af telefonerne hopper.
 *   · Nedad, fordi de bagerste lag skal sakke bagud i forhold til siden —
 *     det er dét, der er parallakse. Opad ville de to yderste telefoner
 *     desuden blive skåret over foroven af beholderens egen kant.
 *
 * Udslaget er sat efter, hvornår lagene skiller sig synligt fra hinanden.
 * Det gjorde de ikke før: --p løb kun fra 0,49 til 1 på en flade, der
 * ligger øverst på siden, så de 52 px blev til 25 — og de 20 px på den
 * forreste telefon til ni. Tre telefoner, der flytter sig lige meget og
 * næsten ingenting, er ikke dybde. Nu er forskellen MELLEM lagene 50-70 px,
 * og det er forskellen, øjet ser.
 */
.js [data-scroll="hero"] .hero__shot { --y: calc(var(--p, 0) * var(--løft, 30px)); }
.js [data-scroll="hero"] .hero__shot--1 { --løft: 44px; }
.js [data-scroll="hero"] .hero__shot--2 { --løft: 14px; }
.js [data-scroll="hero"] .hero__shot--3 { --løft: 56px; }

/* På den brede skærm er klyngen større, og udslaget må følge med. */
@media (min-width: 900px) {
	.js [data-scroll="hero"] .hero__shot--1 { --løft: 76px; }
	.js [data-scroll="hero"] .hero__shot--2 { --løft: 26px; }
	.js [data-scroll="hero"] .hero__shot--3 { --løft: 96px; }
}

/* Telefonerne rejser sig, når siden åbner — i samme takt som teksten. */
.js .hero__shot {
	animation: gavo-hero-ind .7s var(--kurve) backwards;
}
.js .hero__shot--1 { animation-delay: .04s; }
.js .hero__shot--2 { animation-delay: .12s; }
.js .hero__shot--3 { animation-delay: .08s; }

@keyframes gavo-hero-ind {
	from {
		opacity: 0;
		transform:
			translateX(var(--x, -50%))
			translateY(44px)
			rotate(var(--drej, 0deg))
			scale(var(--skala, 1));
	}
}

/*
 * Parallakse i en ramme: billedet skubber sig langsomt opad, mens rammen
 * ruller forbi. Billedet er 120 % højt og hænger ud i hver ende, så der
 * aldrig kommer bar flade til syne. Fordi bevægelsen sker inde i en ramme,
 * der klipper, kan den ikke skubbe noget ud af layoutet — modsat vippet.
 */
.js [data-scroll="parallax"] img {
	transform: translate3d(0, calc((var(--p, .5) - .5) * var(--dybde, -28px)), 0);
}
.js .blogkort:hover [data-scroll="parallax"] img {
	transform: translate3d(0, calc((var(--p, .5) - .5) * var(--dybde, -28px)), 0) scale(1.04);
}

/* ---------- 3. Når brugeren har bedt om mindre bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-delay: 0ms !important;
		transition-duration: .001ms !important;
		transition-delay: 0ms !important;
	}

	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.js [data-ord] .ord__i { transform: none !important; }
	.js [data-ord] .ord { overflow: visible; }
	[data-scroll] *, [data-scroll] { transform: none !important; }
	.js [data-scroll="hero"] .hero__shot {
		transform:
			translateX(var(--x, -50%))
			rotate(var(--drej, 0deg))
			scale(var(--skala, 1)) !important;
	}
	.scene__shot { transition: none; }
	.laesebar { display: none; }
}