/* ==========================================================================
   Cookiesamtykke — banner

   !! LÆS DETTE, FØR DU RETTER I KNAPPERNE !!

   .cs-knap-lige er ÉN regel for BEGGE knapper. Der findes ikke en
   .cs-knap-primaer og en .cs-knap-sekundaer, og de skal ikke laves.

   Vejledningen fra Digitaliseringsstyrelsen siger, at forskellige farver på
   svarknapper efter omstændighederne kan påvirke brugerens valg, og at en knap,
   der går i ét med baggrunden, kan være i strid med bekendtgørelsen. Muligheden
   for at afslå skal fremstå lige så tydelig som muligheden for at acceptere.

   Derfor er ligheden bygget ind i strukturen frem for at være en indstilling,
   nogen skal huske at lade være med at ændre. Skal knapperne se anderledes ud,
   ændres reglen for BEGGE på én gang — det er umuligt at give den ene et
   fortrin uden at slette denne kommentar først.

   Alle værdier er variabler, så et site kan skifte farve uden at røre reglerne.
   ========================================================================== */

/*
 * !! box-sizing SÆTTES SELV — DER ARVES IKKE FRA TEMAET !!
 *
 * Måler man ikke, opdages det ikke: uden denne regel blev boksen 428 px bred
 * på en 380 px skærm, fordi de 24 px indvendige margener blev lagt oven i
 * width:100%. Boksen hang 24 px ud over venstre skærmkant, og „Afvis“-knappen
 * lå delvis uden for skærmen — netop den knap, der skal være lige så let at
 * ramme som den anden.
 *
 * De fleste temaer sætter border-box, men ikke alle, og et plugin må ikke være
 * afhængigt af det. Reglen gælder også ::before og ::after, som kontakten bruger.
 */
#cookiesamtykke,
#cookiesamtykke *,
#cookiesamtykke *::before,
#cookiesamtykke *::after,
.cs-genkald,
.cs-genkald * { box-sizing: border-box; }

/*
 * VARIABLERNE BOR PÅ :root, IKKE PÅ BANNERET.
 *
 * Pladsholderne for blokeret indhold og genkald-ikonet står ude i sidens eget
 * indhold, ikke inde i #cookiesamtykke. Lå variablerne på banneret, ville de to
 * ikke arve temaet, og et mørkt banner ville få lyse pladsholdere.
 *
 * Sitets egne værdier skrives som et lille <style> i wp_head og overskriver
 * disse. De står ikke i denne fil, fordi den skal kunne cachelagres på tværs af
 * sites — ellers bliver en farverettelse til en cache-tømning.
 */
:root {
	--cs-baggrund: #ffffff;
	--cs-tekst: #16191d;
	--cs-daempet: #4a5058;
	--cs-kant: #c9ced6;
	--cs-knap-flade: #16191d;
	--cs-knap-tekst: #ffffff;
	--cs-fokus: #0b57d0;
	/* Rundhed i em, så hjørnet følger skriften i stedet for at stå fast. */
	--cs-radius: 0.62em;
	--cs-kantbredde: 0.125em;   /* 2 px ved 16 px skrift */

	/*
	 * „Inaktiv“ flade og tekst.
	 *
	 * Bruges af mærkatet „Altid aktiv“, af kontaktens spor og af dens knop.
	 * De hænger sammen med vilje: mærkatets tekst står på mærkatets flade, og
	 * knoppen står på sporet — samme farvepar begge steder, så én kontrol af
	 * kontrasten dækker dem begge.
	 *
	 * Fladen var hårdkodet lysegrå indtil nu, mens teksten fulgte temaet. På et
	 * mørkt tema gav det lys tekst på lys flade.
	 */
	--cs-inaktiv-flade: #eef0f3;
	--cs-inaktiv-tekst: #4a5058;
	--cs-taeppe-farve: rgba(12, 14, 18, .55);

	/*
	 * Baggrundsbillede med slør. Sat af PHP som ét lag:
	 *   linear-gradient(slør, slør), url(billede)
	 * Sløret ligger øverst og er ikke valgfrit — se CS_Temaer::billedlag().
	 */
	--cs-billede-lag: none;

	/* Bredde i vw. Loftet på 78ch sidder i reglen for .cs-boks. */
	--cs-bredde: 53vw;

	/*
	 * SKRIFTEN VOKSER GLIDENDE MED SKÆRMEN.
	 *
	 * --cs-skala er et rent tal, som brugeren sætter i procent (100 % = 1).
	 * Det ganges på hele clamp-udtrykket, så en procentændring flytter både
	 * bunden, midten og loftet — ellers ville 130 % ikke gøre noget på en lille
	 * skærm, hvor bunden allerede var nået.
	 *
	 * Der bruges px og vw, IKKE rem. rem afhænger af temaets rodskrift, og så
	 * ville bannerets størrelse springe, når kunden skifter tema — uden at
	 * nogen kunne se hvorfor.
	 *
	 * Bunden på 14 px er ikke tilfældig: derunder bliver en samtykketekst svær
	 * at læse på en telefon, og et samtykke, der ikke kan læses, er ikke
	 * informeret.
	 */
	--cs-skala: 1;

	/*
	 * Linjeafstand som et rent tal.
	 *
	 * 1,5 er udgangspunktet, fordi WCAG 1.4.12 forventer, at tekst kan læses
	 * ved den afstand. Den kan sættes ned herfra — det er sitets valg — men
	 * kontrollen siger til, hvis den bliver så tæt, at en samtykketekst bliver
	 * svær at læse.
	 *
	 * Værdien indeholder ikke andre variabler og kan derfor godt stå her alene:
	 * almindelige værdier nedarves uden videre. Det var kun --cs-skrift, der
	 * skulle gentages, fordi den regner på --cs-skala.
	 */
	--cs-linjehoejde: 1.5;
}

/*
 * !! --cs-skrift SKAL ERKLÆRES DÉR, HVOR --cs-skala KAN VÆRE SAT !!
 *
 * En custom property, der bruger en anden custom property, bliver løst dér hvor
 * den ERKLÆRES — ikke dér hvor den bruges. Stod --cs-skrift kun på :root, ville
 * clamp-udtrykket være regnet færdigt med :root's værdi af --cs-skala, og et
 * senere --cs-skala på et element længere nede ville ikke gøre noget som helst.
 *
 * Det ramte forhåndsvisningen i admin, som sætter variablerne på selve
 * bannerelementet i stedet for på :root: skriftstørrelsen ændrede sig aldrig,
 * mens alt andet gjorde. På forsiden virkede det, fordi PHP skriver til :root.
 *
 * Prøven satte --cs-skala på documentElement og ramte derfor heller ikke fejlen.
 *
 * Ved at gentage erklæringen på hvert af pluginnets rodelementer bliver
 * udtrykket regnet forfra dér, og --cs-skala virker, uanset hvor den sættes.
 */
:root,
#cookiesamtykke,
.cs-plads,
.cs-genkald {
	--cs-skrift: clamp(
		calc(14px * var(--cs-skala)),
		calc((13px + 0.35vw) * var(--cs-skala)),
		calc(20px * var(--cs-skala))
	);
}

#cookiesamtykke {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;

	/* Egen skriftstak. Temaets skrift kan mangle tegn eller være ulæselig i
	   små størrelser, og en samtykketekst, der ikke kan læses, er ikke
	   informeret. */
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--cs-skrift);
	line-height: var(--cs-linjehoejde);
	color: var(--cs-tekst);
}

#cookiesamtykke.cs-vis { display: block; }

/*
 * !! hidden SKAL GENERKLÆRES !!
 *
 * Browserens egen regel [hidden]{display:none} er en UA-regel, og ENHVER
 * regel fra os slår den — også .cs-genkald{display:flex}. Uden linjerne
 * herunder står genkald-ikonet fremme, før brugeren har svaret, og det så ud,
 * som om der allerede var taget stilling. Fundet ved måling, ikke ved læsning.
 */
#cookiesamtykke[hidden],
.cs-genkald[hidden],
.cs-lag[hidden] { display: none !important; }

.cs-taeppe {
	position: absolute;
	inset: 0;
	background: var(--cs-taeppe-farve);
}

.cs-boks {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	/*
	 * MOBIL FØRST: FULD BREDDE, PUNKTUM.
	 *
	 * --cs-bredde gælder først fra 700 px og opefter. Var den med her, ville en
	 * bredde på fx 53vw give 201 px på en telefon — en spalte, der er smallere
	 * end den tekst, den skal bære. Det er den klassiske måde at gøre et
	 * banner ulæseligt på uden at opdage det, fordi man selv sidder ved en stor
	 * skærm.
	 */
	width: 100%;
	max-height: 88vh;

	/*
	 * !! KNAPPERNE MÅ ALDRIG KUNNE RULLE UD AF BILLEDET !!
	 *
	 * Før var hele boksen ét rulleområde. På mellemstore vinduer — smal boks,
	 * lav vindueshøjde — blev indholdet højere end de 88vh, og så kom der et
	 * rullepanel. I værste fald stod „Accepter alle“ synlig, mens „Afvis alle“
	 * lå under kanten. Det er nøjagtig den skævhed, resten af pluginnet er
	 * bygget for at undgå, og den opstod af sig selv ved en bestemt
	 * vinduesstørrelse.
	 *
	 * Nu er boksen en søjle: teksten ruller, knapperne står fast i bunden.
	 * Uanset hvor lavt vinduet er, er begge svarmuligheder på skærmen samtidig.
	 */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: contain;
	/*
	 * Farven ligger UNDER billedet.
	 *
	 * Kan billedet ikke hentes — spærret CDN, dødt link, langsom forbindelse —
	 * står teksten på bannerets almindelige baggrundsfarve i stedet for på
	 * ingenting. Uden den ville et fejlende billede give sort tekst på
	 * gennemsigtigt, altså direkte oven på sidens indhold.
	 */
	background-color: var(--cs-baggrund);
	background-image: var(--cs-billede-lag);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	border-radius: var(--cs-radius) var(--cs-radius) 0 0;
	box-shadow: 0 -2px 40px rgba(0, 0, 0, .3);
	padding: 24px;
}

/* ==========================================================================
   Placeringer

   !! PLACERINGEN MÅ ALDRIG RØRE DEN ENKELTE KNAP !!

   Reglerne herunder flytter og former KASSEN. Ingen af dem nævner
   [data-cs-afvis] eller [data-cs-accepter], og det skal de blive ved med at
   lade være med. Skal knapperne stables på en smal skærm, stables de begge.

   Under 700 px falder alle placeringer tilbage til en bundplade i fuld bredde.
   Et hjørnekort på en telefon er enten for lille at læse eller dækker alligevel
   hele skærmen, og så er der ingen grund til at lade som om.
   ========================================================================== */

@media (min-width: 700px) {

	/*
	 * Bredden er en procent af SKÆRMEN, ikke et pixeltal — og den er
	 * yderligere låst af 78ch.
	 *
	 * ch er bredden af et nul i den aktuelle skrift, så loftet er en
	 * linjelængde og ikke en afstand. Skruer nogen skriften op, følger loftet
	 * med, og linjerne bliver ved med at være til at læse. Et loft i px ville
	 * give længere og længere linjer, jo større skriften blev — stik imod
	 * hensigten.
	 */
	.cs-boks {
		border-radius: var(--cs-radius);
		width: min(var(--cs-bredde), 100%, 78ch);
	}

	/* Bjælke i bunden, fuld bredde */
	.cs-placering-bund-bred .cs-boks {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		transform: none;
		border-radius: 0;
	}
	.cs-placering-bund-bred .cs-lag {
		max-width: min(var(--cs-bredde), 78ch);
		margin: 0 auto;
	}

	/* Bjælke i toppen, fuld bredde */
	.cs-placering-top-bred .cs-boks {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: 100%;
		transform: none;
		border-radius: 0;
		box-shadow: 0 2px 40px rgba(0, 0, 0, .3);
	}
	.cs-placering-top-bred .cs-lag {
		max-width: min(var(--cs-bredde), 78ch);
		margin: 0 auto;
	}

	/* Boks i bunden, midtfor */
	.cs-placering-bund-boks .cs-boks { bottom: 24px; }

	/* Kort i hjørnerne */
	.cs-placering-hjoerne-venstre .cs-boks {
		left: 24px;
		bottom: 24px;
		transform: none;
	}
	.cs-placering-hjoerne-hoejre .cs-boks {
		left: auto;
		right: 24px;
		bottom: 24px;
		transform: none;
	}

	/* Midt på skærmen */
	.cs-placering-midte .cs-boks {
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -50%);
		max-height: 82vh;
	}
}

/*
 * UDEN TÆPPE MÅ BANNERET IKKE SPÆRRE SIDEN.
 *
 * Rodelementet ligger over hele skærmen. Uden tæppe ville det opfange alle klik
 * på siden bagved, og brugeren ville tro, at hjemmesiden var gået i stå. Derfor
 * slukkes museindfangningen på roden og tændes igen på selve kassen.
 */
.cs-uden-taeppe .cs-taeppe { display: none; }
.cs-uden-taeppe { pointer-events: none; }
.cs-uden-taeppe .cs-boks { pointer-events: auto; }

.cs-titel {
	margin: 0 0 12px;
	font-size: calc(var(--cs-skrift) * 1.25);
	line-height: calc(var(--cs-linjehoejde) * 0.867);
	font-weight: 600;
	color: var(--cs-tekst);
}

.cs-broedtekst p {
	margin: 0 0 10px;
	font-size: calc(var(--cs-skrift) * 0.9375);
	color: var(--cs-daempet);
}

.cs-broedtekst strong { color: var(--cs-tekst); }

/* ---------- Søjleopbygning: tekst ruller, knapper står fast ---------- */

.cs-lag {
	display: flex;
	flex-direction: column;
	min-height: 0;   /* uden denne nægter en flex-boks at krympe under sit indhold */
}

.cs-lag[hidden] { display: none !important; }

/*
 * Det RULLENDE område.
 *
 * Kun brødteksten i lag 1 og kategorilisten i lag 2. Alt andet — titel,
 * knapper, links — bliver stående.
 */
.cs-broedtekst,
.cs-kategorier {
	overflow-y: auto;
	overscroll-behavior: contain;
	min-height: 0;
	flex: 1 1 auto;
}

.cs-titel,
.cs-knapper,
.cs-under { flex: 0 0 auto; }

/*
 * En hårfin streg over knapperne.
 *
 * Den viser, hvor det faste område begynder, når teksten ovenover ruller. Uden
 * den ser en afskåret tekstlinje ud som om siden er i stykker.
 */
.cs-knapper { border-top: 1px solid var(--cs-kant); padding-top: 16px; }

/* ---------- Knapperne ---------- */

.cs-knapper {
	display: flex;
	gap: 12px;
	margin: 18px 0 12px;
}

/* DEN ENE REGEL. Se hovedkommentaren øverst. */
.cs-knap-lige {
	flex: 1 1 0;          /* Samme bredde. Ikke „ca. samme“. */
	min-width: 0;
	padding: 14px 16px;
	font: inherit;
	font-size: var(--cs-skrift);
	font-weight: 600;
	line-height: calc(var(--cs-linjehoejde) * 0.8);
	color: var(--cs-knap-tekst);
	background: var(--cs-knap-flade);

	/*
	 * Kanten er valgbar, så man kan lave knapper med kontur.
	 *
	 * Begge knapper deler reglen, så en kant kan ikke gøre den ene tydeligere
	 * end den anden — det er stadig den samme regel for begge.
	 */
	/*
	 * !! FALLBACK HØRER TIL PÅ BRUGSSTEDET, IKKE I EN ERKLÆRING !!
	 *
	 * Første forsøg erklærede --cs-knap-kant: var(--cs-knap-flade) på både
	 * :root og #cookiesamtykke — efter samme mønster som --cs-skrift. Det
	 * virkede ikke: erklæringen på #cookiesamtykke vandt over enhver værdi
	 * sat på :root, så en valgt kantfarve blev aldrig brugt.
	 *
	 * Mønstret passer kun, når det er en ANDEN variabel, PHP skriver
	 * (--cs-skala for --cs-skrift). Skriver PHP variablen selv, skal
	 * fallbacken stå i var() på brugsstedet, hvor den løses på elementet.
	 */
	border: var(--cs-kantbredde) solid var(--cs-knap-kant, var(--cs-knap-flade));
	border-radius: 6px;
	cursor: pointer;
	text-align: center;
}

.cs-knap-lige:hover { opacity: .88; }

.cs-knap-lige:focus-visible {
	outline: 3px solid var(--cs-fokus);
	outline-offset: 2px;
}

.cs-under {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
}

.cs-tekstknap {
	padding: 6px 0;
	font: inherit;
	font-size: calc(var(--cs-skrift) * 0.9375);
	color: var(--cs-fokus);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.cs-tekstknap:focus-visible {
	outline: 3px solid var(--cs-fokus);
	outline-offset: 2px;
}

/* ---------- Lag 2 ---------- */

.cs-kategori {
	padding: 16px 0;
	border-top: 1px solid var(--cs-kant);
}

.cs-kategori:first-child { border-top: 0; }

.cs-kontakt {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.cs-kontakt input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cs-kontakt-spor {
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	border-radius: 13px;
	background: var(--cs-inaktiv-flade);
	position: relative;
	transition: background .15s;
}

.cs-kontakt-spor::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cs-inaktiv-tekst);
	transition: transform .15s;
}

.cs-kontakt input:checked + .cs-kontakt-spor { background: var(--cs-fokus); }

/*
 * Knoppen på et tændt spor bruger bannerets baggrundsfarve.
 *
 * Det tændte spor er fokusfarven, som er en anden flade end den inaktive.
 * Beholdt knoppen sin inaktive farve, kunne den forsvinde i fokusfarven på et
 * tema, hvor de to ligger tæt.
 */
.cs-kontakt input:checked + .cs-kontakt-spor::after { background: var(--cs-baggrund); }
.cs-kontakt input:checked + .cs-kontakt-spor::after { transform: translateX(18px); }
.cs-kontakt input:disabled + .cs-kontakt-spor { background: var(--cs-inaktiv-flade); cursor: not-allowed; }

/*
 * Den LÅSTE kontakt bruger samme farvepar som mærkatet „Altid aktiv“.
 *
 * Den er både checked og disabled. Uden denne linje vandt checked-reglen for
 * knoppen, som så brugte bannerets baggrundsfarve mod et spor i den inaktive
 * flade — et par, ingen kontrolregel ser på. Med den bruger spor og knop
 * inaktiv-flade og inaktiv-tekst, og kontrollen af mærkatet dækker dem begge.
 */
.cs-kontakt input:disabled + .cs-kontakt-spor::after { background: var(--cs-inaktiv-tekst); }

.cs-kontakt input:focus-visible + .cs-kontakt-spor {
	outline: 3px solid var(--cs-fokus);
	outline-offset: 2px;
}

.cs-kategori-navn { font-weight: 600; }

.cs-maerkat {
	margin-left: 8px;
	padding: 2px 8px;
	font-size: calc(var(--cs-skrift) * 0.75);
	font-weight: 500;
	color: var(--cs-inaktiv-tekst);
	background: var(--cs-inaktiv-flade);
	border-radius: 10px;
}

.cs-kategori-kort {
	margin: 8px 0 0 56px;
	font-size: calc(var(--cs-skrift) * 0.875);
	color: var(--cs-daempet);
}

.cs-detaljer { margin: 10px 0 0 56px; }

.cs-detaljer > summary {
	font-size: calc(var(--cs-skrift) * 0.875);
	color: var(--cs-fokus);
	cursor: pointer;
	padding: 4px 0;
}

.cs-lag-1 .cs-detaljer { margin-left: 0; }

.cs-parter {
	margin: 8px 0 0;
	padding-left: 20px;
	font-size: calc(var(--cs-skrift) * 0.875);
	color: var(--cs-daempet);
}

.cs-service {
	margin-top: 14px;
	padding: 14px;
	background: #f6f7f9;
	border-radius: 8px;
}

.cs-service h4 { margin: 0 0 10px; font-size: calc(var(--cs-skrift) * 0.9375); }

.cs-service dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(90px, auto) 1fr;
	gap: 4px 12px;
	font-size: calc(var(--cs-skrift) * 0.8125);
}

.cs-service dt { font-weight: 600; color: var(--cs-daempet); }
.cs-service dd { margin: 0; }

.cs-teknologier {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	font-size: calc(var(--cs-skrift) * 0.75);
}

.cs-teknologier th,
.cs-teknologier td {
	padding: 6px 8px;
	text-align: left;
	border-bottom: 1px solid var(--cs-kant);
	vertical-align: top;
}

.cs-teknologier th { font-weight: 600; color: var(--cs-daempet); }
.cs-teknologier code { font-size: calc(var(--cs-skrift) * 0.75); word-break: break-all; }

.cs-bemaerkning {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: calc(var(--cs-skrift) * 0.8125);
	color: var(--cs-daempet);
	background: #fff;
	border-left: 3px solid var(--cs-kant);
}

/* ---------- Genkald ---------- */

.cs-genkald {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 2147482000;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--cs-knap-tekst);
	background: var(--cs-knap-flade);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
	cursor: pointer;
}

.cs-genkald:focus-visible {
	outline: 3px solid var(--cs-fokus);
	outline-offset: 3px;
}

.cs-genkald-link {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
}

/* ==========================================================================
   Pladsholdere for blokeret indlejret indhold

   Pladsholderen skal FORKLARE, ikke bare være tom. Et hul på siden, som ingen
   kan forklare, ligner en fejl på hjemmesiden, og så bliver blokeringen slået
   fra af den, der skulle have gavn af den.

   Derfor står tjenestens navn, kategorien og hvem der får IP-adressen — og en
   knap, der giver samtykke til NETOP den kategori og ikke til alt.
   ========================================================================== */

.cs-plads {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 24px;
	margin: 0 0 1em;
	background: var(--cs-baggrund);
	border: 1px dashed var(--cs-kant);
	border-radius: var(--cs-radius);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--cs-skrift);
	color: var(--cs-tekst);
}

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

.cs-plads-indhold {
	max-width: 460px;
	text-align: center;
}

.cs-plads-titel {
	margin: 0 0 8px;
	font-size: var(--cs-skrift);
	font-weight: 600;
	color: var(--cs-tekst);
}

.cs-plads-tekst {
	margin: 0 0 16px;
	font-size: calc(var(--cs-skrift) * 0.875);
	line-height: var(--cs-linjehoejde);
	color: var(--cs-daempet);
}

.cs-plads-knapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Samme lighedsprincip som i banneret: begge knapper deler regel. Den ene må
   ikke få forrang, heller ikke her, hvor den ene fører til et samtykke. */
.cs-plads-knap {
	padding: 10px 16px;
	font: inherit;
	font-size: calc(var(--cs-skrift) * 0.875);
	font-weight: 600;
	color: var(--cs-knap-tekst);
	background: var(--cs-knap-flade);
	border: var(--cs-kantbredde) solid var(--cs-knap-kant, var(--cs-knap-flade));
	border-radius: 6px;
	cursor: pointer;
}

.cs-plads-knap:hover { opacity: .88; }

.cs-plads-knap:focus-visible {
	outline: 3px solid var(--cs-fokus);
	outline-offset: 2px;
}

/* Et blokeret billede er som regel en sporingspixel på 1×1. Den skal ikke
   efterlade en ramme eller en alt-tekst midt i indholdet. */
img[data-cs-blokeret] {
	display: none !important;
}


/* ---------- Lave vinduer ----------

   Ved lav vindueshøjde strammes luften, før der rulles. Et bredt banner med
   mindre luft er lettere at læse end et smalt med et rullepanel. */

@media (max-height: 720px) {
	.cs-boks { padding: 16px; max-height: 92vh; }
	.cs-titel { margin-bottom: 8px; }
	.cs-broedtekst p { margin-bottom: 8px; }
	.cs-knapper { margin: 12px 0 8px; padding-top: 12px; }
	.cs-detaljer { margin-top: 6px; }
}

@media (max-height: 560px) {
	.cs-boks { padding: 12px; }
	.cs-knapper { margin: 10px 0 6px; }
	.cs-under { gap: 12px; }
}

/* ---------- Hensyn ---------- */

@media (prefers-reduced-motion: reduce) {
	.cs-kontakt-spor,
	.cs-kontakt-spor::after { transition: none; }
}

@media (prefers-contrast: more) {
	#cookiesamtykke { --cs-kant: #000; --cs-daempet: #000; }
}

/* ==========================================================================
   Cookiedeklarationen

   Egen typografi og egne tabeller. Deklarationen er et dokument, ikke et
   indholdsafsnit, og temaets tabelstil er sjældent bygget til fire kolonner
   med lange tekster.
   ========================================================================== */

.cs-deklaration {
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.6;
}

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

.cs-dekl-dato {
	font-size: 14px;
	color: #4a5058;
}

.cs-dekl-status {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	margin: 0 0 32px;
	background: #f2f4f7;
	border: 1px solid #c9ced6;
	border-radius: 10px;
}

.cs-dekl-status-tekst { margin: 0; font-size: 15px; }

.cs-dekl-knap {
	padding: 10px 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: #16191d;
	border: 2px solid #16191d;
	border-radius: 6px;
	cursor: pointer;
}

.cs-dekl-knap:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }

.cs-dekl-kategori { margin: 0 0 40px; }
.cs-dekl-kategori > h2 { margin: 0 0 8px; }

.cs-dekl-beskriv { margin: 0 0 6px; color: #4a5058; }

.cs-dekl-samtykke {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 600;
}

.cs-dekl-service {
	padding: 20px;
	margin: 0 0 20px;
	border: 1px solid #c9ced6;
	border-radius: 10px;
}

.cs-dekl-service > h3 { margin: 0 0 14px; font-size: 18px; }

.cs-dekl-fakta {
	margin: 0 0 18px;
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	gap: 6px 16px;
	font-size: 14px;
}

.cs-dekl-fakta dt { font-weight: 600; color: #4a5058; }
.cs-dekl-fakta dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 600px) {
	.cs-dekl-fakta { grid-template-columns: 1fr; }
	.cs-dekl-fakta dd { margin: 0 0 8px; }
}

.cs-dekl-rulle {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cs-dekl-rulle:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}

.cs-dekl-tabel {
	width: 100%;
	min-width: 480px;   /* Under dette bliver cellerne ulæselige. Så hellere rulle. */
	border-collapse: collapse;
	font-size: 13px;
}

.cs-dekl-tabel caption {
	text-align: left;
	font-weight: 600;
	color: #4a5058;
	padding: 0 0 8px;
}

.cs-dekl-tabel th,
.cs-dekl-tabel td {
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
	border: 1px solid #c9ced6;
}

.cs-dekl-tabel thead th { background: #f2f4f7; }
.cs-dekl-tabel code { word-break: break-all; font-size: 12px; }

.cs-dekl-bemaerkning {
	margin: 16px 0 0;
	padding: 12px 14px;
	font-size: 14px;
	color: #4a5058;
	background: #f6f7f9;
	border-left: 3px solid #c9ced6;
}

.cs-dekl-tom { color: #4a5058; font-style: italic; }

/*
 * Manglende pligtoplysninger vises MED VILJE grimt.
 *
 * En tom celle ser pæn ud og betyder, at ingen opdager, at oplysningspligten
 * ikke er opfyldt. „IKKE OPLYST“ med rødt bliver bemærket og rettet.
 */
.cs-mangler {
	color: #b32d2e;
	font-weight: 700;
	letter-spacing: .02em;
}