/* ============================================================================
   Wondat Site
   Alt er scopet under .wd-scope, så pluginnet aldrig kan smitte af på temaet
   eller på Elementors egne widgets. Undtagelsen er knap-effekten nederst, som
   med vilje skal kunne sættes på en almindelig Elementor-knap.
   ========================================================================= */

:root {
	/* ── Farver ──
	   Lyst tema. Teksten er næsten sort frem for helt sort, for ren sort på
	   rent hvidt giver en hård kant som øjet læser som billigt tryk. */
	--wd-bg:            #ffffff;
	--wd-bg-2:          #f6f7f9;
	--wd-bg-3:          #eef0f4;
	--wd-surface:       #ffffff;
	--wd-moerk:         #0e0f13;
	--wd-moerk-2:       #1a1c22;

	--wd-text:          #0e0f13;
	--wd-text-muted:    #5b6070;
	--wd-text-faint:    #8c92a3;
	--wd-text-paa-moerk: #ffffff;

	--wd-border:        #e5e7ec;
	--wd-border-strong: #d2d5dd;

	--wd-primary:       #6c4cf1;
	--wd-primary-moerk: #5a3ad9;
	--wd-primary-svag:  #f1edfe;

	--wd-success:       #16a34a;
	--wd-danger:        #dc2626;

	/* ── Form ── */
	--wd-radius:        16px;
	--wd-radius-sm:     10px;
	--wd-radius-lg:     24px;
	--wd-radius-xl:     32px;

	/* ── Skrift ── */
	--wd-font: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* ── Skygger ──
	   Neutrale, ikke blåtonede. En blåtonet skygge under en hvid flade læses
	   som et farveskær og ikke som dybde. */
	--wd-skygge-sm: 0 2px 8px rgba(14, 15, 19, .06);
	--wd-skygge:    0 8px 28px rgba(14, 15, 19, .10);
	--wd-skygge-lg: 0 20px 56px rgba(14, 15, 19, .14);

	/* ── Header ── */
	--wd-header-hoejde: 76px;
}

.wd-scope {
	font-family: var(--wd-font);
	color: var(--wd-text);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

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

.wd-scope img {
	max-width: 100%;
}

/* Pilen i tekstsammenhæng. Margenen er der, fordi den normalt står efter et
   ord. Står den alene i en knap eller en firkant, nulstilles den dér. */
.wd-scope .wd-arrow {
	display: inline-block;
	vertical-align: -3px;
	margin-left: 6px;
	flex-shrink: 0;
}
.wd-scope .wd-arrow.wd-arrow-left {
	margin-left: 0;
	margin-right: 6px;
}


/* ═══ KNAPPER ═══════════════════════════════════════════════════════════════ */

.wd-scope .wd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: var(--wd-radius-sm);
	font-family: var(--wd-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
}

.wd-scope .wd-btn-primary {
	background: var(--wd-moerk);
	color: var(--wd-text-paa-moerk);
}
.wd-scope .wd-btn-primary:hover {
	background: var(--wd-moerk-2);
}

.wd-scope .wd-btn-lilla {
	background: var(--wd-primary);
	color: #fff;
}
.wd-scope .wd-btn-lilla:hover {
	background: var(--wd-primary-moerk);
}

.wd-scope .wd-btn-secondary {
	background: var(--wd-bg-2);
	color: var(--wd-text);
	border-color: var(--wd-border);
}
.wd-scope .wd-btn-secondary:hover {
	background: var(--wd-bg-3);
	border-color: var(--wd-border-strong);
}

/* Glas. Kun til brug oven på et billede eller en mørk hero. */
.wd-scope .wd-btn-glas {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
	backdrop-filter: blur(6px);
}
.wd-scope .wd-btn-glas:hover {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .5);
}

.wd-scope .wd-btn-hvid {
	background: #fff;
	color: var(--wd-moerk);
}
.wd-scope .wd-btn-hvid:hover {
	background: rgba(255, 255, 255, .86);
}

.wd-scope .wd-btn-stor {
	padding: 17px 32px;
	font-size: 16px;
}
.wd-scope .wd-btn-lille {
	padding: 10px 18px;
	font-size: 14px;
}


/* ═══ PIL-EFFEKTEN I KNAPPER ════════════════════════════════════════════════
   Sættes på en Elementor-knap med klassen wd-knap eller dx-knap i Advanced →
   CSS Classes. Begge navne virker: dx-knap er det du er vant til at skrive fra
   Diginaxion, wd-knap er det rigtige navn her.

   Elementor lægger klassen på widget-wrapperen, ikke på selve <a>, og derfor
   står klassen uden for .elementor-button i selektorerne. Pluginnets egne
   knapper bruger samme klasse med en .wd-knap-tekst inden i.

   ── Sådan virker det ────────────────────────────────────────────────────────
   Der er to pile på samme plads. Pil A står der i hvile. Ved hover glider den
   ud til højre og toner væk, mens pil B kommer ind fra venstre.

   Det er transitions og ikke en keyframe. En transition kender vejen tilbage,
   så når man forlader knappen, kører præcis samme bevægelse baglæns af sig
   selv. Også hvis man går væk midt i det. Så vender pilene om derfra, hvor de
   står, i stedet for at springe på plads.

   De to pile flytter sig på hver sin måde, og det er med vilje. A skal ud til
   højre, hvor der kun er luft, og flyttes med transform. B kommer ind fra
   venstre, hvor teksten er. Flyttede vi den med transform, ville den nå at
   være synlig hen over de sidste bogstaver på vej ind. I stedet står B's
   kasse stille fra tekstens højre kant og ud, og det er MASKEN inde i kassen
   der glider. Alt uden for kassen bliver ikke tegnet, så pilen kommer frem
   bagved teksten og kan slet ikke ligge oven på et bogstav.
   ========================================================================= */

/* Pladsen til pilen. Pilene ligger uden for flowet og kan derfor ikke selv
   skabe plads.

   PÅ ELEMENTOR-KNAPPEN lægges pladsen som polstring på indholds-wrapperen,
   altså INDE i knappen. Knappens egen polstring bliver stående.

   PÅ PLUGINNETS EGNE KNAPPER lægges den som margen på tekst-spanden og IKKE
   som padding-right på selve knappen. Padding-right ville overskrive .wd-btn
   sin egen polstring på 26 px og skrumpe luften i højre side til de 23 px,
   pilen fylder. Så stod pilen klods op ad kanten, og det var præcis dét, der
   så forkert ud. */
.wd-knap .elementor-button-content-wrapper,
.dx-knap .elementor-button-content-wrapper {
	padding-right: 1.55em;
}

.wd-scope .wd-knap .wd-knap-tekst {
	margin-right: 1.55em;
}

/* Pilen må ikke kunne forlade knappen under bevægelsen. Kanten klipper den,
   så den glider ud UNDER kanten i stedet for at flyve ud i luften ved siden
   af knappen. Radius respekteres af overflow, så hjørnerne holder. */
.wd-scope .wd-knap,
.wd-knap .elementor-button,
.dx-knap .elementor-button {
	overflow: hidden;
}

/* Uden det her ville teksten i nogle Elementor-versioner strække sig ud i hele
   knappens bredde, og så ville pilen sætte sig ude ved kanten i stedet for
   lige efter teksten. */
.wd-knap .elementor-button-text,
.dx-knap .elementor-button-text,
.wd-scope .wd-knap .wd-knap-tekst {
	position: relative;
	flex-grow: 0;
}

.wd-knap .elementor-button-text::before,
.wd-knap .elementor-button-text::after,
.dx-knap .elementor-button-text::before,
.dx-knap .elementor-button-text::after,
.wd-scope .wd-knap .wd-knap-tekst::before,
.wd-scope .wd-knap .wd-knap-tekst::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	height: 1.05em;
	pointer-events: none;
	/* currentColor: pilen får knappens egen tekstfarve. Så følger den med af
	   sig selv, også når du skifter tekstfarve på hover inde i Elementor. Et
	   baggrundsbillede kunne ikke det, for en SVG i background arver ikke
	   currentColor. */
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 1.05em 1.05em;
	mask-size: 1.05em 1.05em;
}

/* Pil A: den der står på pladsen i hvile. Kassen er selve pladsen, masken
   fylder den helt, og A flytter sig med transform og bliver aldrig klippet. */
.wd-knap .elementor-button-text::after,
.dx-knap .elementor-button-text::after,
.wd-scope .wd-knap .wd-knap-tekst::after {
	width: 1.05em;
	margin-left: .5em;
	-webkit-mask-position: center;
	mask-position: center;
	transform: translate(0, -50%);
	opacity: 1;
	transition-property: transform, opacity;
	transition-duration: .26s;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
	transition-delay: .2s;
}

/* Pil B: kassen starter ved tekstens højre kant og går ud til pladsens højre
   kant. Kassen står stille. Masken glider fra helt ude til venstre, hvor den
   er skjult bag tekstkanten, og ind til højre, hvor den lander nøjagtig oven i
   A's plads. */
.wd-knap .elementor-button-text::before,
.dx-knap .elementor-button-text::before,
.wd-scope .wd-knap .wd-knap-tekst::before {
	width: 1.55em;
	margin-left: 0;
	transform: translate(0, -50%);
	-webkit-mask-position: -1.05em center;
	mask-position: -1.05em center;
	opacity: 0;
	transition-property: -webkit-mask-position, mask-position, opacity;
	transition-duration: .26s;
	transition-timing-function: cubic-bezier(.55, 0, 1, .45);
	transition-delay: 0s;
}

/* Hover. Bemærk at kurve og forsinkelse bytter plads mellem hvile og hover.
   Den pil der skal VÆK, går med det samme og accelererer. Den der skal IND,
   venter et øjeblik og bremser blødt op. Uden forsinkelsen ville begge bevæge
   sig samtidig, og så stod der to halve pile ved siden af hinanden midtvejs.
   Fordi rollerne byttes, er bevægelsen ens begge veje. */
.wd-knap .elementor-button:hover .elementor-button-text::after,
.wd-knap .elementor-button:focus-visible .elementor-button-text::after,
.dx-knap .elementor-button:hover .elementor-button-text::after,
.dx-knap .elementor-button:focus-visible .elementor-button-text::after,
.wd-scope .wd-knap:hover .wd-knap-tekst::after,
.wd-scope .wd-knap:focus-visible .wd-knap-tekst::after {
	transform: translate(165%, -50%);
	opacity: 0;
	transition-timing-function: cubic-bezier(.55, 0, 1, .45);
	transition-delay: 0s;
}

.wd-knap .elementor-button:hover .elementor-button-text::before,
.wd-knap .elementor-button:focus-visible .elementor-button-text::before,
.dx-knap .elementor-button:hover .elementor-button-text::before,
.dx-knap .elementor-button:focus-visible .elementor-button-text::before,
.wd-scope .wd-knap:hover .wd-knap-tekst::before,
.wd-scope .wd-knap:focus-visible .wd-knap-tekst::before {
	-webkit-mask-position: right center;
	mask-position: right center;
	opacity: 1;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
	transition-delay: .2s;
}

/* Variant: du vil hellere bruge Elementor-widgetens eget ikon. Sæt wd-knap-ikon
   i stedet, vælg selv et ikon og sæt dets position til højre. Her er der kun
   ét ikon at arbejde med, så det glider frem og tilbage. */
.wd-knap-ikon .elementor-button-icon {
	transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.wd-knap-ikon .elementor-button:hover .elementor-button-icon,
.wd-knap-ikon .elementor-button:focus-visible .elementor-button-icon {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.wd-knap .elementor-button-text::before,
	.wd-knap .elementor-button-text::after,
	.dx-knap .elementor-button-text::before,
	.dx-knap .elementor-button-text::after,
	.wd-scope .wd-knap .wd-knap-tekst::before,
	.wd-scope .wd-knap .wd-knap-tekst::after,
	.wd-knap-ikon .elementor-button-icon {
		transition: none;
	}
	.wd-knap .elementor-button:hover .elementor-button-text::after,
	.dx-knap .elementor-button:hover .elementor-button-text::after,
	.wd-scope .wd-knap:hover .wd-knap-tekst::after {
		transform: translate(0, -50%);
		opacity: 1;
	}
	.wd-knap .elementor-button:hover .elementor-button-text::before,
	.dx-knap .elementor-button:hover .elementor-button-text::before,
	.wd-scope .wd-knap:hover .wd-knap-tekst::before {
		-webkit-mask-position: -1.05em center;
		mask-position: -1.05em center;
		opacity: 0;
	}
	.wd-knap-ikon .elementor-button:hover .elementor-button-icon {
		transform: none;
	}
}


/* ═══ HERO-BAGGRUND ═════════════════════════════════════════════════════════
   [wondat_hero_bg]. Laget lægger sig bag Elementor-sektionens indhold, så du
   kan bygge oven på den som normalt.
   ========================================================================= */

.wd-hero-bg {
	position: relative;
	overflow: hidden;
	/* Reserve hvis WebGL ikke er til rådighed. Den skal matche standardfarverne
	   i shortcoden, ellers springer sektionen i farve på en maskine uden WebGL.
	   Bedre en rolig gradient end en tom kasse, hvor hvid tekst pludselig står
	   på ingenting. */
	background: linear-gradient(135deg, #070911 0%, #2a3c6b 45%, #6d8ae6 100%);
}

/* Fyld-tilstanden. Laget rives ud af sit eget flow af JS og lægges bag
   sektionens indhold. Værten får position: relative, så laget har noget at
   måle sig efter. */
.wd-hero-bg.wd-hero-bg-fyld {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.wd-hero-bg-vaert {
	position: relative;
}

/* Alt indhold i sektionen skal ligge OVEN PÅ baggrunden. Uden det her ville
   Elementors egne lag lægge sig bagved, og hero-teksten ville forsvinde. */
.wd-hero-bg-vaert > *:not(.wd-hero-bg) {
	position: relative;
	z-index: 1;
}

.wd-hero-bg canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Et ekstra, grovere kornlag oven på shaderens eget fine korn. Det er dét, der
   tager den sidste plastikagtige glathed af gradienten. */
.wd-hero-bg-korn {
	position: absolute;
	inset: -50%;
	pointer-events: none;
	opacity: .10;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
	.wd-hero-bg-korn { display: none; }
}


/* ═══ HEADER ════════════════════════════════════════════════════════════════
   Designet og bevægelserne er Bysignes, indholdet er Diginaxions Ydelser-menu.
   ========================================================================= */

.wd-scope.wd-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--wd-bg);
	border-bottom: 1px solid var(--wd-border);
}

/* Overgangene tændes først, når JS har sat wd-klar.

   Uden det ville den gennemsigtige header fade fra hvid til gennemsigtig i det
   øjeblik siden blev vist, fordi browseren tæller starttilstanden som en
   ændring. Man så headeren skifte udseende lige efter første billede. */
.wd-scope.wd-header.wd-klar,
.wd-header.wd-klar .wd-nav-link,
.wd-header.wd-klar .wd-nav-btn,
.wd-header.wd-klar .wd-burger,
.wd-header.wd-klar .wd-logo-lag,
.wd-header.wd-klar .wd-header-kontakt,
.wd-header.wd-klar .wd-header-cta {
	transition: background-color .32s ease, border-color .32s ease, color .32s ease, opacity .32s ease,
	            transform .2s ease, box-shadow .2s ease;
}

.wd-header-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px;
	height: var(--wd-header-hoejde);
}

/* ── Navigationen ── */
.wd-header .wd-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-self: start;
}

.wd-header .wd-nav-link,
.wd-header .wd-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 14px;
	border-radius: var(--wd-radius-sm);
	font-family: var(--wd-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-text);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}
.wd-header .wd-nav-link:hover,
.wd-header .wd-nav-btn:hover {
	background: var(--wd-bg-2);
}

.wd-nav-chevron {
	transition: transform .22s ease;
	opacity: .55;
}
.wd-mega-aktiv .wd-nav-chevron {
	transform: rotate(180deg);
}
.wd-header .wd-mega-aktiv .wd-nav-btn {
	background: var(--wd-bg-2);
}

/* ── Logoet ── */
.wd-header-logo {
	justify-self: center;
	display: block;
	position: relative;
	line-height: 0;
	text-decoration: none;
}
.wd-logo-tekst {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--wd-text);
	line-height: 1;
}
/* To klasser og ikke én. Grundreglen er .wd-scope img, altså én klasse plus et
   elementnavn, og den slår en enkelt klasse. Skrev vi bare .wd-logo-billede,
   ville max-width: none tabe, og logoet ville blive ved med at være usynligt. */
.wd-scope .wd-logo-billede {
	display: block;
	height: 30px;
	width: auto;
	/* max-width: none er IKKE til pynt.
	   .wd-scope img har max-width: 100 %, og logoet sidder i en grid-kolonne
	   på auto. Så afhænger kolonnens bredde af billedet, mens billedets
	   max-width afhænger af kolonnen. Den cirkel løser browseren til nul, og
	   logoet blev 0 px bredt og dermed usynligt, selvom filen var hentet. */
	max-width: none;
}

/* To lag oven på hinanden. Det ene tones ud mens det andet tones ind, så
   logoet aldrig når at forsvinde midt i skiftet. Ét logo der skiftede src
   ville blinke. */
.wd-logo-lag {
	display: block;
}
.wd-header-trans .wd-logo-lys {
	position: absolute;
	inset: 0;
}
.wd-header-trans:not(.wd-header-fast) .wd-logo-moerk { opacity: 0; }
.wd-header-trans:not(.wd-header-fast) .wd-logo-lys   { opacity: 1; }
.wd-header-trans.wd-header-fast .wd-logo-moerk       { opacity: 1; }
.wd-header-trans.wd-header-fast .wd-logo-lys         { opacity: 0; }

/* ── De to handlinger ── */
.wd-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-self: end;
}

.wd-header .wd-header-kontakt,
.wd-header .wd-header-cta {
	flex-shrink: 0;
}

.wd-burger {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: var(--wd-radius-sm);
	border: 1px solid var(--wd-border);
	background: var(--wd-bg-2);
	color: var(--wd-text);
	cursor: pointer;
	flex-shrink: 0;
}
.wd-burger:hover { background: var(--wd-bg-3); }

/* ── Den gennemsigtige udgave ──
   KANTEN ER 1 PX I ALLE TILSTANDE, også når den er usynlig. En gennemsigtig
   kant fylder nøjagtig det samme som en farvet, så ved kun at skifte farven
   står headerens indhold helt stille, når den fyldes ud. */
.wd-scope.wd-header-trans {
	background: transparent;
	border-bottom-color: transparent;
}
.wd-scope.wd-header-trans.wd-header-fast {
	background: var(--wd-bg);
	border-bottom-color: var(--wd-border);
}

.wd-header-trans:not(.wd-header-fast) .wd-nav-link,
.wd-header-trans:not(.wd-header-fast) .wd-nav-btn,
.wd-header-trans:not(.wd-header-fast) .wd-logo-tekst {
	color: #fff;
}
.wd-header-trans:not(.wd-header-fast) .wd-nav-link:hover,
.wd-header-trans:not(.wd-header-fast) .wd-nav-btn:hover {
	background: rgba(255, 255, 255, .14);
}

.wd-header-trans:not(.wd-header-fast) .wd-header-kontakt {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
	backdrop-filter: blur(6px);
}
.wd-header-trans:not(.wd-header-fast) .wd-header-kontakt:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .5);
}
.wd-header-trans:not(.wd-header-fast) .wd-header-cta {
	background: #fff;
	color: var(--wd-moerk);
}
.wd-header-trans:not(.wd-header-fast) .wd-header-cta:hover {
	background: rgba(255, 255, 255, .86);
}
.wd-header-trans:not(.wd-header-fast) .wd-burger {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
	backdrop-filter: blur(6px);
}


/* ═══ MEGA-PANELET ══════════════════════════════════════════════════════════
   Foldes ud med max-height, præcis som på Bysigne. Højden måles af JS og
   sættes som --wd-mega-hoejde, for max-height kan ikke animere til auto.
   80vh er reserven, hvis JS ikke når at måle: så er udfoldningen lidt
   hurtigere end de 0,3 sekunder, men panelet ÅBNER, og det er dét der tæller.
   ========================================================================= */

.wd-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	overflow: hidden;
	max-height: 0;
	background: var(--wd-bg);
	border-bottom: 1px solid var(--wd-border);
	z-index: 950;
	visibility: hidden;
	pointer-events: none;
	/* Skygge kun NEDAD. Med mere sløring end forskydning ville den brede sig
	   op over panelets top og lægge sig som en grå stribe under menupunkterne.
	   Den negative spredning krymper skyggen først, så dens overkant ligger
	   inde under panelet og er skjult af det. */
	box-shadow: 0 16px 22px -16px rgba(14, 15, 19, .10);
	transition:
		max-height .3s cubic-bezier(.4, 0, .2, 1),
		visibility 0s linear .3s;
}

.wd-mega.wd-mega-aaben {
	max-height: var(--wd-mega-hoejde, 80vh);
	visibility: visible;
	pointer-events: auto;
	transition:
		max-height .3s cubic-bezier(.4, 0, .2, 1),
		visibility 0s;
}

.wd-mega-indre {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 28px;
}

.wd-mega-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	align-content: start;
}

/* Kortene glider ind et efter et, når panelet er foldet ud.

   FORSINKELSEN ER POINTEN. Panelet folder sig ud over 0,3 sekund, og før var
   kortenes trin på 24 ms, så alle seks var færdige efter 120 ms, altså midt i
   udfoldningen. De lå bag panelets overflow hele vejen, og derfor så man dem
   bare dukke op sammen med gardinet i stedet for et efter et.

   Nu venter de 0,22 sekund, så udfoldningen er næsten færdig, når det første
   kort begynder. Trinnet er hævet til 45 ms, så seks kort fordeler sig over
   225 ms i stedet for 120. Det er dét, der gør at øjet når at følge med.

   De to tal står som variabler, så de kan justeres ét sted. */
.wd-mega {
	--wd-mega-vent: .22s;
	--wd-mega-trin: 45ms;
}

.wd-mega-aaben .wd-mega-kort {
	animation: wd-mega-ind .28s cubic-bezier(.22, 1, .36, 1) both;
	animation-delay: calc(var(--wd-mega-vent) + var(--i, 0) * var(--wd-mega-trin));
}

/* Panelet til højre kommer sidst, som var det det syvende kort. Før stod det
   fuldt fremme, mens kortene ved siden af tonede ind, og det så ud som om det
   var glemt. */
.wd-mega-aaben .wd-mega-panel {
	animation: wd-mega-ind .28s cubic-bezier(.22, 1, .36, 1) both;
	animation-delay: calc(var(--wd-mega-vent) + 6 * var(--wd-mega-trin));
}

@keyframes wd-mega-ind {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Har brugeren slået animationer fra, skal indholdet bare stå der. En
   forsinkelse på et kvart sekund uden bevægelse ligner en langsom side. */
@media (prefers-reduced-motion: reduce) {
	.wd-mega-aaben .wd-mega-kort,
	.wd-mega-aaben .wd-mega-panel { animation: none; }
}

.wd-header .wd-mega-kort {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: var(--wd-radius);
	text-decoration: none;
	color: var(--wd-text);
}
/* Baggrunden som et lag frem for som background. Så kan den tones ind uden at
   kortets egen farve skal animere, og teksten flytter sig ikke en pixel. */
.wd-header .wd-mega-kort::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wd-radius);
	background: var(--wd-bg-2);
	opacity: 0;
	transition: opacity .16s ease;
}
.wd-header .wd-mega-kort:hover::before,
.wd-header .wd-mega-kort:focus-visible::before { opacity: 1; }

.wd-mega-ikon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--wd-primary-svag);
	color: var(--wd-primary);
	flex-shrink: 0;
}

.wd-mega-tekst { position: relative; display: block; min-width: 0; }
.wd-mega-titel {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: 2px;
}
.wd-mega-desc {
	display: block;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--wd-text-muted);
}

.wd-mega-pil {
	position: relative;
	align-self: center;
	margin-left: auto;
	flex-shrink: 0;
	color: var(--wd-text-faint);
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity .16s ease, transform .16s ease;
}
.wd-header .wd-mega-kort:hover .wd-mega-pil,
.wd-header .wd-mega-kort:focus-visible .wd-mega-pil {
	opacity: 1;
	transform: translateX(0);
}
.wd-header .wd-mega-kort:hover .wd-mega-titel { color: var(--wd-primary); }

/* ── Panelet til højre ── */
.wd-mega-panel {
	background: var(--wd-bg-2);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius);
	padding: 22px;
	align-self: start;
}
.wd-mega-panel-label {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: 8px;
}
.wd-mega-panel-tekst {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wd-text-muted);
	margin: 0 0 16px;
}
.wd-header .wd-mega-panel-cta {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	border-radius: var(--wd-radius-sm);
	background: var(--wd-moerk);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease;
}
.wd-header .wd-mega-panel-cta:hover { background: var(--wd-moerk-2); }
.wd-mega-panel-note {
	font-size: 11.5px;
	color: var(--wd-text-faint);
	margin-top: 12px;
	line-height: 1.5;
}


/* ═══ MOBILMENUEN ═══════════════════════════════════════════════════════════ */

.wd-mobil {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--wd-bg);
	border-bottom: 1px solid var(--wd-border);
	box-shadow: var(--wd-skygge);
	z-index: 960;
	max-height: calc(100vh - var(--wd-header-hoejde));
	overflow-y: auto;
}
.wd-mobil[hidden] { display: none; }

.wd-mobil-indre { padding: 14px 20px 22px; }

.wd-mobil-sektion,
.wd-header .wd-mobil-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 2px;
	border: none;
	border-bottom: 1px solid var(--wd-border);
	background: none;
	font-family: var(--wd-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--wd-text);
	text-decoration: none;
	cursor: pointer;
	text-align: left;
}
.wd-mobil-sektion svg { transition: transform .22s ease; opacity: .55; }
.wd-mobil-sektion.wd-foldet-ud svg { transform: rotate(180deg); }

.wd-mobil-fold { padding: 4px 0 10px; }
.wd-mobil-fold[hidden] { display: none; }
.wd-header .wd-mobil-fold a {
	display: block;
	padding: 11px 2px 11px 14px;
	font-size: 15px;
	color: var(--wd-text-muted);
	text-decoration: none;
	border-left: 2px solid var(--wd-border);
}
.wd-header .wd-mobil-fold a:hover {
	color: var(--wd-primary);
	border-left-color: var(--wd-primary);
}

.wd-mobil-knapper {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}
.wd-mobil-knapper .wd-btn { width: 100%; }

.wd-scrim {
	position: fixed;
	inset: var(--wd-header-hoejde) 0 0;
	background: rgba(14, 15, 19, .32);
	z-index: 940;
}
.wd-scrim[hidden] { display: none; }


/* ═══ HEADER: SMALLERE SKÆRME ═══════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.wd-mega-indre { grid-template-columns: 1fr; }
	.wd-mega-panel { display: none; }
	.wd-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	/* Under den her bredde er der ikke plads til navigationen OG to knapper.
	   Navigationen flytter ind i mobilmenuen, og mega-panelet skal ikke kunne
	   åbne, for der er ikke noget at åbne det med. */
	.wd-header .wd-nav { display: none; }
	.wd-mega { display: none; }
	.wd-burger { display: inline-flex; }
	.wd-header .wd-header-kontakt { display: none; }
	.wd-header-bar {
		grid-template-columns: 1fr auto 1fr;
		padding: 0 18px;
	}
	.wd-header-logo { justify-self: center; }
}

@media (max-width: 560px) {
	.wd-header .wd-header-cta { display: none; }
	/* Også to klasser her. Grundreglen ovenfor har to, og med kun én ville
	   de 30 px vinde, og logoet ville ikke skrumpe på telefonen. */
	.wd-scope .wd-logo-billede { height: 26px; }
	.wd-logo-tekst { font-size: 21px; }
}


/* ═══ FOOTER ════════════════════════════════════════════════════════════════
   Opbygningen følger Morningtrains: logo til venstre, spalter med links, en
   streg, sociale ikoner og adresse, en streg til, og nederst copyright med de
   juridiske links.
   ========================================================================= */

.wd-scope.wd-footer {
	background: var(--wd-bg);
	border-top: 1px solid var(--wd-border);
	padding: 72px 0 32px;
}

.wd-footer-indre {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px;
}

/* Logospalten er bredere end de andre, og den får sin egen luft til højre.
   Uden den satte brødteksten sig helt op ad den første linkspalte. */
.wd-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	padding-bottom: 48px;
}

.wd-footer-logo {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
	margin-bottom: 18px;
}
.wd-footer-brandtekst {
	font-size: 14px;
	line-height: 1.65;
	color: var(--wd-text-muted);
	margin: 0;
	max-width: 34ch;
}

.wd-footer-overskrift {
	font-size: 13px;
	font-weight: 700;
	color: var(--wd-text-faint);
	margin-bottom: 18px;
	letter-spacing: -.005em;
}

.wd-footer-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
}
.wd-scope .wd-footer-liste a {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--wd-text);
	text-decoration: none;
	transition: color .18s ease;
}
.wd-scope .wd-footer-liste a:hover { color: var(--wd-primary); }

/* ── Midten ── */
.wd-footer-midt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 24px 0;
	border-top: 1px solid var(--wd-border);
}

.wd-footer-social { display: flex; align-items: center; gap: 6px; }
.wd-scope .wd-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--wd-radius-sm);
	color: var(--wd-text);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.wd-scope .wd-footer-social a:hover {
	background: var(--wd-bg-2);
	color: var(--wd-primary);
}

.wd-footer-kontakt {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--wd-text-muted);
}
.wd-scope .wd-footer-kontakt a {
	color: var(--wd-text-muted);
	text-decoration: none;
	transition: color .18s ease;
}
.wd-scope .wd-footer-kontakt a:hover { color: var(--wd-primary); }

/* ── Bunden ── */
.wd-footer-bund {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid var(--wd-border);
	font-size: 13px;
	color: var(--wd-text-faint);
}

.wd-footer-jura { display: flex; gap: 22px; flex-wrap: wrap; }
.wd-scope .wd-footer-jura a {
	color: var(--wd-text-faint);
	text-decoration: none;
	transition: color .18s ease;
}
.wd-scope .wd-footer-jura a:hover { color: var(--wd-text); }

@media (max-width: 900px) {
	.wd-footer-top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 28px;
	}
	/* Logoet fylder hele den første række for sig selv. To spalter ved siden
	   af et logo plus brødtekst bliver for trangt. */
	.wd-footer-brand { grid-column: 1 / -1; }
}

/* ═══ CASE-KORT ═════════════════════════════════════════════════════════════
   Elementor-widgeten "Case-kort". Skyderne kommer ind som CSS-variabler på
   selve elementet, og CSS'en vælger selv i sine media queries. En inline
   variabel slår Elementor-kittets selektorer uden !important.

   DET DER VAR GALT MED DE GAMLE KORT: infoboksen kom kun frem ved hover, og på
   en telefon findes hover ikke. Derfor kunne man slet ikke se værktøjer og
   varighed på mobil. Her ligger boksen fast fremme på små skærme.
   ========================================================================= */

.wd-scope.wd-kkort {
	--wd-kk-kol: 3;
	--wd-kk-h:   560px;
	--wd-kk-r:   24px;
	--wd-kk-gab: 14px;
}

.wd-kkort-grid {
	display: grid;
	grid-template-columns: repeat(var(--wd-kk-kol, 3), minmax(0, 1fr));
	gap: var(--wd-kk-gab, 14px);
}

.wd-scope .wd-kkort-item {
	display: block;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.wd-kkort-media {
	position: relative;
	display: block;
	height: var(--wd-kk-h, 560px);
	border-radius: var(--wd-kk-r, 24px);
	overflow: hidden;
	background: var(--wd-bg-3);
	isolation: isolate;
}

.wd-scope .wd-kkort-billede {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Både object-fit og max-width skal sættes her. Temaets og Elementors egne
	   img-regler har højere specificitet end én klasse, og uden de to linjer
	   hænger billedet ud af kortet eller bliver trukket skævt. */
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.wd-kkort-item:hover .wd-kkort-billede { transform: scale(1.04); }

.wd-kkort-tom {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wd-bg-3), var(--wd-bg-2));
}

/* ── Case-fanen i hjørnet ──
   Fanen sidder i toppen til højre, og hjørnerne ved siden af den buer den
   MODSATTE vej, så fanen ser ud til at være skåret ud af kortet.

   Sådan laves et omvendt hjørne: et kvadrat med en radial gradient, der er
   gennemsigtig indtil radius og fanefarvet derefter. Der findes ingen
   border-radius der buer udad, så det er vejen. */
.wd-kkort-fane {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	background: var(--wd-bg);
	border-bottom-left-radius: 18px;
	padding: 12px 20px 14px 22px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wd-text);
	line-height: 1;
}
.wd-kkort-fane::before,
.wd-kkort-fane::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	background-color: transparent;
}
/* Buen til venstre for fanen */
.wd-kkort-fane::before {
	top: 0;
	left: -18px;
	background-image: radial-gradient(circle at 0 100%, transparent 18px, var(--wd-bg) 18.5px);
}
/* Buen under fanen, ude ved kortets højre kant */
.wd-kkort-fane::after {
	right: 0;
	bottom: -18px;
	background-image: radial-gradient(circle at 0 100%, transparent 18px, var(--wd-bg) 18.5px);
}

/* ── Infoboksen der glider op ── */
.wd-kkort-info {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 16px;
	background: rgba(14, 15, 19, .72);
	backdrop-filter: blur(14px);
	color: #fff;
	/* 16 px ekstra, så boksen er helt ude af billedet i hvile. Uden dem
	   kiggede dens øverste kant frem under kortets nederste kant. */
	transform: translateY(calc(100% + 16px));
	opacity: 0;
	transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.wd-kkort-item:hover .wd-kkort-info,
.wd-kkort-item:focus-visible .wd-kkort-info {
	transform: translateY(0);
	opacity: 1;
}

.wd-kkort-blok { display: block; min-width: 0; }
.wd-kkort-label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	margin-bottom: 8px;
}
.wd-kkort-vaerdi { display: block; font-size: 15px; font-weight: 700; }

.wd-kkort-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-kkort-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .18);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.wd-kkort-bund {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.wd-kkort-knap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 18px;
	border-radius: var(--wd-radius-sm);
	background: #fff;
	color: var(--wd-moerk);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s ease;
}
.wd-kkort-item:hover .wd-kkort-knap { background: rgba(255, 255, 255, .88); }
.wd-scope .wd-kkort-knap .wd-arrow { margin-left: 2px; vertical-align: 0; }

/* ── Titel under kortet ── */
.wd-kkort-under { display: block; padding: 18px 2px 0; }
.wd-kkort-titel {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--wd-text);
}
.wd-kkort-kunde {
	display: block;
	font-size: 14px;
	color: var(--wd-text-muted);
	margin-top: 5px;
}

/* Fuld bredde: kortene går helt ud til skærmkanten. Kræver at sektionen selv
   er i fuld bredde, ellers klipper dens polstring dem alligevel. */
.wd-kkort-fuld .wd-kkort-grid { padding: 0 var(--wd-kk-gab, 14px); }

/* ── Tablet og mobil ──
   VIGTIGT: her omdefineres variablerne IKKE. Widgeten skriver dem inline på
   elementet, og en inline-variabel kan ikke overskrives af en media query i
   stylesheetet. Skrev vi --wd-kk-kol om herinde, ville den inline værdi vinde,
   og kortene ville blive ved med at stå i tre spalter på en telefon.

   I stedet skifter BRUGEN navn: her læses -t og -m i stedet. Widgeten skriver
   altid alle tre ud, så der altid er en værdi at læse. */
@media (max-width: 1024px) {
	.wd-kkort-grid {
		grid-template-columns: repeat(var(--wd-kk-kol-t, var(--wd-kk-kol, 2)), minmax(0, 1fr));
		gap: var(--wd-kk-gab-t, var(--wd-kk-gab, 12px));
	}
	.wd-kkort-media {
		height: var(--wd-kk-h-t, var(--wd-kk-h, 480px));
		border-radius: var(--wd-kk-r-t, var(--wd-kk-r, 20px));
	}
	.wd-kkort-fuld .wd-kkort-grid { padding: 0 var(--wd-kk-gab-t, var(--wd-kk-gab, 12px)); }
}

/* Her er den vigtige rettelse på mobil. Infoboksen ligger fast fremme, for
   uden hover var den før helt uden for rækkevidde på en telefon. Chipsene
   ruller vandret i stedet for at brække ned i fire linjer og æde hele kortet. */
@media (max-width: 767px) {
	.wd-kkort-grid {
		grid-template-columns: repeat(var(--wd-kk-kol-m, var(--wd-kk-kol-t, var(--wd-kk-kol, 1))), minmax(0, 1fr));
		gap: var(--wd-kk-gab-m, var(--wd-kk-gab-t, var(--wd-kk-gab, 12px)));
	}
	.wd-kkort-media {
		height: var(--wd-kk-h-m, var(--wd-kk-h-t, var(--wd-kk-h, 380px)));
		border-radius: var(--wd-kk-r-m, var(--wd-kk-r-t, var(--wd-kk-r, 18px)));
	}
	.wd-kkort-fuld .wd-kkort-grid { padding: 0 var(--wd-kk-gab-m, var(--wd-kk-gab, 12px)); }

	.wd-kkort-info {
		transform: translateY(0);
		opacity: 1;
		gap: 12px;
		padding: 14px 16px;
	}
	.wd-kkort-item:hover .wd-kkort-billede { transform: none; }

	.wd-kkort-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.wd-kkort-chips::-webkit-scrollbar { display: none; }

	.wd-kkort-bund { align-items: center; }
	.wd-kkort-knap { padding: 10px 15px; font-size: 13.5px; }
	.wd-kkort-fane { padding: 10px 16px 12px 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.wd-kkort-billede,
	.wd-kkort-info { transition: none; }
}


/* ═══ CASE-KARRUSEL ═════════════════════════════════════════════════════════
   Off canvas-slider. Kortene løber ud over kanten, og det er dét der
   signalerer at der er flere.

   Klipningen sker på .wd-kar. Ligger sektionen i fuld bredde, er dens højre
   kant skærmens kant, og det halve kort løber ud af skærmen. Ligger den i en
   boks, klippes den ved boksen. Begge dele ser rigtige ud, og det kræver
   ingen udregning på vinduesbredde.
   ========================================================================= */

.wd-scope.wd-kar {
	--wd-kar-vis: 2.5;
	--wd-kar-h:   460px;
	--wd-kar-r:   18px;
	--wd-kar-gab: 20px;
	overflow: hidden;
	width: 100%;
}

.wd-kar-slider {
	position: relative;
	overflow: visible;
	cursor: grab;
	/* pan-y: lodret scroll paa telefonen skal stadig virke, mens vandret
	   er vores. Uden den kan man ikke scrolle forbi karrusellen. */
	touch-action: pan-y;
	/* Uden den her begynder browseren en tekstmarkering i det øjeblik man
	   trykker og bevæger sig. Markeringen sender et pointercancel, og så dør
	   trækket med det samme. */
	user-select: none;
	-webkit-user-select: none;
}
.wd-kar-slider.wd-traekker { cursor: grabbing; }

.wd-kar-spor {
	display: flex;
	gap: var(--wd-kar-gab, 20px);
	transition: transform .55s cubic-bezier(.4, 0, .2, 1) !important;
	will-change: transform;
}

/* Regnestykket: ved 2,5 kort er der 2 mellemrum, ved 1,5 er der 1. Antallet
   er altså vis minus en halv, og så holder bredden uanset hvad vis sættes til. */
.wd-kar-item {
	flex: 0 0 auto;
	width: calc(
		(100% - var(--wd-kar-gab, 20px) * (var(--wd-kar-vis, 2.5) - 0.5))
		/ var(--wd-kar-vis, 2.5)
	);
}

.wd-scope .wd-kar-kort {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wd-kar-media {
	position: relative;
	display: block;
	height: var(--wd-kar-h, 460px);
	border-radius: var(--wd-kar-r, 18px);
	overflow: hidden;
	background: var(--wd-bg-3);
	isolation: isolate;
}

.wd-scope .wd-kar-billede {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	/* Billedet må ikke kunne trækkes ud som et indbygget browser-træk. Det
	   sender også et pointercancel og slår vores eget træk ihjel. */
	-webkit-user-drag: none;
	user-select: none;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.wd-kar-kort:hover .wd-kar-billede { transform: scale(1.04); }

.wd-kar-tom {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wd-bg-3), var(--wd-bg-2));
}

/* Infoboksen der glider op. Enklere end på case-kortene: kun varighed og en
   knap, for karrusellen er et overblik og ikke en præsentation. */
.wd-kar-info {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(14, 15, 19, .72);
	backdrop-filter: blur(14px);
	color: #fff;
	/* 16 px ekstra, så boksen er helt ude af billedet i hvile. Uden dem kigger
	   dens øverste kant frem under kortets nederste kant. */
	transform: translateY(calc(100% + 16px));
	opacity: 0;
	transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.wd-kar-kort:hover .wd-kar-info,
.wd-kar-kort:focus-visible .wd-kar-info {
	transform: translateY(0);
	opacity: 1;
}

.wd-kar-blok { display: block; min-width: 0; }
.wd-kar-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	margin-bottom: 5px;
}
.wd-kar-vaerdi { display: block; font-size: 15px; font-weight: 700; }

.wd-kar-knap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: var(--wd-radius-sm);
	background: #fff;
	color: var(--wd-moerk);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	margin-left: auto;
	transition: background .2s ease;
}
.wd-kar-kort:hover .wd-kar-knap { background: rgba(255, 255, 255, .88); }
.wd-scope .wd-kar-knap .wd-arrow { margin-left: 2px; vertical-align: 0; }

.wd-kar-under { display: block; padding: 16px 2px 0; }
.wd-kar-titel {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--wd-text);
}
.wd-kar-kunde {
	display: block;
	font-size: 13.5px;
	color: var(--wd-text-muted);
	margin-top: 4px;
}

/* ── Pile og prikker ──
   Samme udseende som navigationen i Diginaxions karrusel: afrundede
   firkanter i sort og hvidt, med to pile i hver knap til hover-løkken. */
.wd-kar-styring {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 26px;
}

.wd-scope .wd-kar-pil {
	position: relative;
	overflow: hidden;
	width: 44px;
	height: 44px;
	border-radius: var(--wd-radius-sm);
	border: 1px solid rgba(14, 15, 19, .18);
	background: transparent;
	color: var(--wd-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.wd-scope .wd-kar-pil:hover:not(:disabled) {
	background: var(--wd-moerk);
	border-color: var(--wd-moerk);
	color: #fff;
}
.wd-scope .wd-kar-pil:disabled {
	/* Ikke opacity på hele knappen. Det slår også kanten ned, og så forsvinder
	   formen. Kun pilen dæmpes, så man stadig kan se at knappen er der. */
	border-color: rgba(14, 15, 19, .18);
	color: rgba(14, 15, 19, .48);
	cursor: default;
}

/* To pile i hver knap, så de kan bytte plads ved hover. Kanten klipper dem,
   så den ene glider ud under kanten og den anden kommer frem bagved den
   modsatte. Samme mekanik som knapperne. */
.wd-scope .wd-kar-pil .wd-arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	vertical-align: 0;
	transition-property: transform, opacity;
	transition-duration: .26s;
}
.wd-scope .wd-kar-pil .wd-arrow:first-of-type {
	transform: translateX(0);
	opacity: 1;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
	transition-delay: .2s;
}
.wd-scope .wd-kar-pil .wd-arrow:last-of-type {
	opacity: 0;
	transition-timing-function: cubic-bezier(.55, 0, 1, .45);
	transition-delay: 0s;
}
.wd-scope .wd-kar-pil[data-wd-kar="naeste"] .wd-arrow:last-of-type { transform: translateX(-34px); }
.wd-scope .wd-kar-pil[data-wd-kar="forrige"] .wd-arrow:last-of-type { transform: translateX(34px); }

.wd-scope .wd-kar-pil[data-wd-kar="naeste"]:hover:not(:disabled) .wd-arrow:first-of-type { transform: translateX(34px); }
.wd-scope .wd-kar-pil[data-wd-kar="forrige"]:hover:not(:disabled) .wd-arrow:first-of-type { transform: translateX(-34px); }
.wd-scope .wd-kar-pil:hover:not(:disabled) .wd-arrow:first-of-type {
	opacity: 0;
	transition-timing-function: cubic-bezier(.55, 0, 1, .45);
	transition-delay: 0s;
}
.wd-scope .wd-kar-pil:hover:not(:disabled) .wd-arrow:last-of-type {
	transform: translateX(0);
	opacity: 1;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
	transition-delay: .2s;
}

.wd-kar-prikker { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; }
.wd-scope .wd-kar-prik {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	background: rgba(14, 15, 19, .22);
	transition: background .2s ease, width .2s ease;
}
.wd-scope .wd-kar-prik.wd-aktiv {
	background: var(--wd-moerk);
	width: 22px;
	border-radius: 4px;
}

/* ── Hintet der følger markøren ──
   To lag med vilje. Det ydre flyttes med markøren, det indre laver
   indgangen. De kan ikke dele samme transform uden at slås om den. */
.wd-kar-hint {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease;
}
.wd-kar-hint.wd-vis { opacity: 1; }

.wd-kar-hint-pille {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transform: translate(-50%, -140%) scale(.92);
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--wd-moerk);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.wd-kar-hint.wd-vis .wd-kar-hint-pille { transform: translate(-50%, -140%) scale(1); }

/* Den vej man ikke kan gå dæmpes frem for at blive fjernet. Fjernede vi
   pilen, ville pillen skifte bredde hver gang man nåede en ende. */
.wd-kar-hint-v, .wd-kar-hint-h { opacity: .25; transition: opacity .2s ease; }
.wd-kar-hint.wd-kan-venstre .wd-kar-hint-v { opacity: 1; }
.wd-kar-hint.wd-kan-hoejre .wd-kar-hint-h { opacity: 1; }

@media (max-width: 1024px) {
	.wd-kar-item {
		width: calc(
			(100% - var(--wd-kar-gab-t, var(--wd-kar-gab, 16px)) * (var(--wd-kar-vis-t, var(--wd-kar-vis, 1.5)) - 0.5))
			/ var(--wd-kar-vis-t, var(--wd-kar-vis, 1.5))
		);
	}
	.wd-kar-spor { gap: var(--wd-kar-gab-t, var(--wd-kar-gab, 16px)); }
	.wd-kar-media {
		height: var(--wd-kar-h-t, var(--wd-kar-h, 400px));
		border-radius: var(--wd-kar-r-t, var(--wd-kar-r, 18px));
	}
}

@media (max-width: 767px) {
	.wd-kar-item {
		width: calc(
			(100% - var(--wd-kar-gab-m, var(--wd-kar-gab, 14px)) * (var(--wd-kar-vis-m, var(--wd-kar-vis, 1.1)) - 0.5))
			/ var(--wd-kar-vis-m, var(--wd-kar-vis, 1.1))
		);
	}
	.wd-kar-spor { gap: var(--wd-kar-gab-m, var(--wd-kar-gab, 14px)); }
	.wd-kar-media {
		height: var(--wd-kar-h-m, var(--wd-kar-h, 340px));
		border-radius: var(--wd-kar-r-m, var(--wd-kar-r, 14px));
	}

	/* Uden hover på en telefon ville infoboksen aldrig kunne ses. */
	.wd-kar-info {
		transform: translateY(0);
		opacity: 1;
		padding: 13px 15px;
	}
	.wd-kar-kort:hover .wd-kar-billede { transform: none; }
	/* Hintet giver ingen mening uden en markør. */
	.wd-kar-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wd-kar-spor { transition: none !important; }
	.wd-kar-info,
	.wd-kar-billede,
	.wd-scope .wd-kar-pil .wd-arrow { transition: none; }
}


/* ═══ CASE-SIDEN ════════════════════════════════════════════════════════════
   Widgets der læser fra den case, man står på. Bruges i en Single-skabelon
   under Elementors Theme Builder.
   ========================================================================= */

.wd-scope .wd-case-tom {
	padding: 22px;
	border: 1px dashed var(--wd-border-strong);
	border-radius: var(--wd-radius-sm);
	background: var(--wd-bg-2);
	color: var(--wd-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.wd-scope .wd-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wd-text-faint);
	margin-bottom: 14px;
}

.wd-scope .wd-label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wd-text-faint);
	margin-bottom: 6px;
}
.wd-scope .wd-vaerdi { display: block; font-size: 16px; font-weight: 700; }

.wd-scope .wd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-scope .wd-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--wd-bg-2);
	border: 1px solid var(--wd-border);
	font-size: 12.5px;
	font-weight: 600;
}

/* ── Hero ── */
.wd-scope.wd-case-hero { --wd-ch-h: 520px; }

.wd-case-hero-top {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin-bottom: 48px;
}
.wd-case-hero-titel {
	font-size: clamp(32px, 4.4vw, 56px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
	margin: 0;
	color: var(--wd-text);
}
.wd-case-hero-manchet {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wd-text-muted);
	margin: 0 0 28px;
}
.wd-case-hero-meta { display: flex; gap: 40px; flex-wrap: wrap; }
.wd-case-meta-blok { min-width: 0; }

.wd-case-hero-billede {
	height: var(--wd-ch-h, 520px);
	border-radius: var(--wd-radius-lg);
	overflow: hidden;
	background: var(--wd-bg-3);
}
.wd-scope .wd-case-hero-billede img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* ── Problem, plan og resultat ── */
.wd-scope.wd-case-punkter {
	--wd-cp-kol: 3;
	display: grid;
	grid-template-columns: repeat(var(--wd-cp-kol, 3), minmax(0, 1fr));
	gap: 40px;
}
.wd-case-punkt-titel {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wd-border);
	color: var(--wd-text);
}
.wd-case-punkt-tekst { font-size: 14.5px; line-height: 1.7; color: var(--wd-text-muted); }
.wd-case-punkt-tekst p { margin: 0 0 12px; }
.wd-case-punkt-tekst p:last-child { margin-bottom: 0; }

/* ── Billedsektion ── */
.wd-scope.wd-case-galleri {
	--wd-cg-kol: 2;
	--wd-cg-h: 420px;
	--wd-cg-r: 18px;
	display: grid;
	grid-template-columns: repeat(var(--wd-cg-kol, 2), minmax(0, 1fr));
	gap: 14px;
}
.wd-case-galleri-item {
	margin: 0;
	height: var(--wd-cg-h, 420px);
	border-radius: var(--wd-cg-r, 18px);
	overflow: hidden;
	background: var(--wd-bg-3);
}
.wd-scope .wd-case-galleri-item img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* ── Løsningen og Processen ──
   Samme todelte opsætning: overskrift til venstre, tekst til højre. */
.wd-scope.wd-case-loesning,
.wd-scope.wd-case-proces {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 48px;
	align-items: start;
}
.wd-scope.wd-case-loesning-en { grid-template-columns: minmax(0, 1fr); gap: 20px; }

.wd-case-loesning-titel,
.wd-case-proces-titel {
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--wd-text);
}

.wd-case-loesning-tekst,
.wd-case-proces-tekst {
	font-size: 16px;
	line-height: 1.75;
	color: var(--wd-text-muted);
}
.wd-case-loesning-tekst p,
.wd-case-proces-tekst p { margin: 0 0 16px; }
.wd-case-loesning-tekst p:last-child,
.wd-case-proces-tekst p:last-child { margin-bottom: 0; }

.wd-scope .wd-case-loesning-knap { margin-top: 26px; }

/* ── Flere cases ── */
.wd-case-flere-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.wd-case-flere-titel {
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--wd-text);
}

@media (max-width: 1024px) {
	.wd-case-hero-top,
	.wd-scope.wd-case-loesning,
	.wd-scope.wd-case-proces { gap: 32px; }
	.wd-scope.wd-case-galleri {
		grid-template-columns: repeat(var(--wd-cg-kol-t, var(--wd-cg-kol, 2)), minmax(0, 1fr));
	}
	.wd-case-galleri-item {
		height: var(--wd-cg-h-t, var(--wd-cg-h, 360px));
		border-radius: var(--wd-cg-r-t, var(--wd-cg-r, 18px));
	}
	.wd-scope.wd-case-punkter {
		grid-template-columns: repeat(var(--wd-cp-kol-t, var(--wd-cp-kol, 3)), minmax(0, 1fr));
		gap: 28px;
	}
	/* Variablen omdefineres IKKE her. Widgeten skriver --wd-ch-h inline, og
	   inline slår altid stylesheetet. Det er brugen der skifter navn. */
	.wd-case-hero-billede { height: var(--wd-ch-h-t, var(--wd-ch-h, 420px)); }
}

@media (max-width: 767px) {
	/* Alt bliver til én spalte. To spalter med 40 px mellemrum på en telefon
	   giver spalter på under 150 px, og så brækker hvert ord for sig. */
	.wd-case-hero-top,
	.wd-scope.wd-case-loesning,
	.wd-scope.wd-case-proces { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	.wd-case-hero-top { margin-bottom: 28px; }
	.wd-case-hero-meta { gap: 24px; }

	.wd-scope.wd-case-punkter {
		grid-template-columns: repeat(var(--wd-cp-kol-m, var(--wd-cp-kol-t, 1)), minmax(0, 1fr));
		gap: 22px;
	}
	.wd-scope.wd-case-galleri {
		grid-template-columns: repeat(var(--wd-cg-kol-m, var(--wd-cg-kol-t, 1)), minmax(0, 1fr));
		gap: 12px;
	}
	.wd-case-galleri-item {
		height: var(--wd-cg-h-m, var(--wd-cg-h-t, 240px));
		border-radius: var(--wd-cg-r-m, var(--wd-cg-r, 14px));
	}
	.wd-case-hero-billede { height: var(--wd-ch-h-m, var(--wd-ch-h-t, var(--wd-ch-h, 260px))); }
	.wd-case-flere-top { margin-bottom: 20px; }
}


@media (max-width: 560px) {
	.wd-scope.wd-footer { padding: 52px 0 28px; }
	.wd-footer-indre { padding: 0 18px; }
	.wd-footer-top { grid-template-columns: 1fr; gap: 30px; }
	.wd-footer-midt,
	.wd-footer-bund { flex-direction: column; align-items: flex-start; }
	.wd-footer-kontakt { gap: 10px; flex-direction: column; align-items: flex-start; }
}