/* Dansk Tagmaling – nye elementer. Præfiks dt-. Farver og skrifter følger Elementor-kittet (Figtree/Manrope, #22875B). */
:root {
	--dt-groen: #22875B;
	--dt-groen-lys: #2BB579;
	--dt-groen-mork: #175E3F;
	--dt-mos: #EAF4EE;
	--dt-blaek: #222222;
	--dt-graa: #5E6763;
	--dt-linje: #D6E4DC;
	--dt-tagsort: #1B1F1E;
	--dt-papir: #FFFFFF;
	--dt-radius: 18px;
	--dt-bredde: 1350px;
	--dt-skrift-h: "Figtree", "Manrope", system-ui, sans-serif;
	--dt-skrift-b: "Manrope", "Figtree", system-ui, sans-serif;
	--dt-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- fælles ---------- */
.dt-overlinje { font: 600 14px/1.4 var(--dt-skrift-b); color: var(--dt-groen); margin: 0 0 10px; letter-spacing: .01em; }
.dt-overlinje--lys { color: var(--dt-groen-lys); }
.dt-h2 { font: 700 clamp(28px, 3.2vw, 42px)/1.12 var(--dt-skrift-h); color: var(--dt-blaek); margin: 0 0 14px; letter-spacing: -.01em; max-width: 22ch; }
.dt-intro { font: 400 clamp(16px, 1.25vw, 19px)/1.6 var(--dt-skrift-b); color: var(--dt-graa); margin: 0; max-width: 60ch; }
.dt-knap { display: inline-flex; align-items: center; gap: 10px; background: var(--dt-groen); color: #fff !important; font: 600 16px/1 var(--dt-skrift-b); padding: 16px 26px; border-radius: 999px; text-decoration: none !important; border: 2px solid var(--dt-groen); transition: background .25s var(--dt-ease), border-color .25s var(--dt-ease), transform .3s var(--dt-ease); will-change: transform; }
.dt-knap:hover { background: var(--dt-groen-mork); border-color: var(--dt-groen-mork); }
.dt-knap:focus-visible { outline: 3px solid var(--dt-groen-lys); outline-offset: 3px; }
.dt-knap--lys { background: transparent; color: var(--dt-groen) !important; border-color: var(--dt-groen); }
.dt-knap--lys:hover { background: var(--dt-mos); color: var(--dt-groen-mork) !important; }
.dt-knap .dt-ikon { width: 20px; height: 20px; }
.dt-ikon { width: 44px; height: 44px; display: block; }
.dt-ikon path, .dt-ikon circle, .dt-ikon rect { stroke-dasharray: 200; stroke-dashoffset: 0; }
.dt-tegn .dt-ikon path, .dt-tegn .dt-ikon circle, .dt-tegn .dt-ikon rect { stroke-dashoffset: 200; }
.dt-tegn.dt-tegn--i .dt-ikon path, .dt-tegn.dt-tegn--i .dt-ikon circle, .dt-tegn.dt-tegn--i .dt-ikon rect { animation: dt-tegn 1.1s var(--dt-ease) forwards; animation-delay: calc(var(--i, 0) * .15s + .1s); }
@keyframes dt-tegn { to { stroke-dashoffset: 0; } }
.dt-kun-touch { display: none; }
@media (hover: none) { .dt-kun-mus { display: none; } .dt-kun-touch { display: inline; } }

/* Elementor-widgetten, der bærer shortcoden: fuld bredde, ingen ekstra margin */
.elementor-widget-shortcode .elementor-widget-container > .dt-hero,
.elementor-widget-shortcode .elementor-widget-container > .dt-tagtjek,
.elementor-widget-shortcode .elementor-widget-container > .dt-proces,
.elementor-widget-shortcode .elementor-widget-container > .dt-fakta,
.elementor-widget-shortcode .elementor-widget-container > .dt-faq { max-width: var(--dt-bredde); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

/* ---------- HERO: du maler selv taget ---------- */
.dt-hero-vaert { position: relative; isolation: isolate; overflow: hidden; }
.dt-hero-vaert > .elementor-widget-shortcode.dt-hero-widget { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; width: 100% !important; max-width: none !important; }
.dt-hero-vaert > .elementor-widget-shortcode.dt-hero-widget > .elementor-widget-container { height: 100%; }
.dt-hero-vaert > .elementor-element:not(.dt-hero-widget) { position: relative; z-index: 2; }
.dt-hero-vaert::before { z-index: 1 !important; pointer-events: none; }
.elementor-widget-shortcode .elementor-widget-container > .dt-hero { max-width: none; padding: 0; }
.dt-hero { position: absolute; inset: 0; overflow: hidden; background: var(--dt-tagsort); cursor: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.dt-hero-foer, .dt-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-hero-canvas { pointer-events: none; }
.dt-hero-skygge { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.72) 100%); }
.dt-hero-cursor { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: 0; transition: opacity .25s; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); z-index: 3; }
.dt-hero-cursor svg { width: 100%; height: 100%; transform: rotate(-20deg); }
.dt-hero.dt-hero--aktiv .dt-hero-cursor { opacity: 1; }
.dt-hero-ui { position: absolute; right: 24px; bottom: 22px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.dt-hero-hint { margin: 0; font: 500 14px/1.3 var(--dt-skrift-b); color: #fff; background: rgba(27,31,30,.55); backdrop-filter: blur(6px); padding: 8px 14px; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--dt-ease) 1.9s, transform .5s var(--dt-ease) 1.9s; }
.dt-hero--klar .dt-hero-hint { opacity: 1; transform: none; }
.dt-hero--malet .dt-hero-hint { opacity: 0; transition-delay: 0s; }
.dt-hero-vis { pointer-events: auto; cursor: pointer; font: 600 14px/1 var(--dt-skrift-b); color: #fff; background: rgba(27,31,30,.55); border: 1.5px solid rgba(255,255,255,.55); padding: 11px 16px; border-radius: 999px; backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.dt-hero-vis:hover, .dt-hero-vis[aria-pressed="true"] { background: var(--dt-groen); border-color: var(--dt-groen); }
.dt-hero-vis:focus-visible { outline: 3px solid var(--dt-groen-lys); outline-offset: 3px; }
@media (hover: none) { .dt-hero { cursor: auto; } .dt-hero-cursor { display: none; } }
@media (max-width: 767px) { .dt-hero-ui { right: 14px; bottom: 14px; } .dt-hero-hint { font-size: 12px; max-width: 220px; text-align: right; } }
@media (prefers-reduced-motion: reduce) { .dt-hero-canvas, .dt-hero-cursor, .dt-hero-hint { display: none; } .dt-hero-foer { content: var(--dt-efter-url); } }

/* ---------- Tillidsbånd ---------- */
.elementor-widget-shortcode .elementor-widget-container > .dt-baand { max-width: none; padding: 0; }
.dt-baand { display: flex; overflow: hidden; background: var(--dt-groen); color: #fff; padding: 14px 0; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.dt-baand-spor { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; flex: none; min-width: 100%; animation: dt-baand 46s linear infinite; }
.dt-baand:hover .dt-baand-spor, .dt-baand:focus-within .dt-baand-spor { animation-play-state: paused; }
.dt-baand-punkt { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 0 28px; font: 600 15px/1 var(--dt-skrift-b); }
.dt-baand-punkt .dt-ikon { width: 24px; height: 24px; opacity: .95; }
.dt-baand-punkt + .dt-baand-punkt { border-left: 1px solid rgba(255,255,255,.28); }
@keyframes dt-baand { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .dt-baand { mask-image: none; -webkit-mask-image: none; } .dt-baand-spor { animation: none; flex-wrap: wrap; row-gap: 10px; min-width: 0; justify-content: center; } .dt-baand-spor[aria-hidden="true"] { display: none; } }

/* ---------- Tag-tjek ---------- */
.dt-tagtjek { padding: 72px 24px; }
.dt-tagtjek-hoved { margin-bottom: 34px; }
.dt-tagtjek-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; }
.dt-tagtjek-trin { border: 0; margin: 0; padding: 0; min-width: 0; }
.dt-tagtjek-trin legend { display: flex; align-items: center; gap: 10px; font: 700 18px/1.3 var(--dt-skrift-h); color: var(--dt-blaek); margin: 0 0 14px; padding: 0; }
.dt-tagtjek-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dt-mos); color: var(--dt-groen); font: 700 14px/1 var(--dt-skrift-b); flex: none; transition: background .25s, color .25s; }
.dt-tagtjek-trin.dt-trin--valgt .dt-tagtjek-nr { background: var(--dt-groen); color: #fff; }
.dt-valg { display: grid; gap: 10px; }
.dt-valg label { position: relative; display: block; cursor: pointer; }
.dt-valg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dt-valg span { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--dt-linje); border-radius: 14px; background: #fff; font: 500 16px/1.3 var(--dt-skrift-b); color: var(--dt-blaek); transition: border-color .2s, background .2s, transform .2s var(--dt-ease); }
.dt-valg .dt-ikon { width: 28px; height: 28px; color: var(--dt-groen); flex: none; }
.dt-valg label:hover span { border-color: var(--dt-groen-lys); }
.dt-valg input:checked + span { border-color: var(--dt-groen); background: var(--dt-mos); box-shadow: inset 0 0 0 1px var(--dt-groen); }
.dt-valg input:focus-visible + span { outline: 3px solid var(--dt-groen-lys); outline-offset: 2px; }
.dt-tagtjek-svar { margin-top: 28px; }
.dt-tagtjek-svar[hidden] { display: none; }
.dt-tagtjek-kort { background: var(--dt-tagsort); color: #fff; border-radius: var(--dt-radius); padding: 34px 36px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px 40px; animation: dt-ind .5s var(--dt-ease); }
.dt-tagtjek-kort .dt-overlinje { grid-column: 1 / -1; margin-bottom: 4px; }
.dt-tagtjek-titel { font: 700 clamp(24px, 2.6vw, 34px)/1.15 var(--dt-skrift-h); margin: 0 0 8px; color: #fff; grid-column: 1; }
.dt-tagtjek-tekst { margin: 0; font: 400 17px/1.6 var(--dt-skrift-b); color: rgba(255,255,255,.86); grid-column: 1; }
.dt-tagtjek-punkter { grid-column: 2; grid-row: 2 / 4; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.dt-tagtjek-punkter li { display: flex; gap: 10px; font: 500 15px/1.45 var(--dt-skrift-b); color: rgba(255,255,255,.92); }
.dt-tagtjek-punkter li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--dt-groen-lys) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5 9.5l2.5 2.5L13 6.5" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/14px no-repeat; }
.dt-tagtjek-knapper { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dt-tagtjek-knapper .dt-knap--lys { color: #fff !important; border-color: rgba(255,255,255,.6); }
.dt-tagtjek-knapper .dt-knap--lys:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.dt-tagtjek-note { grid-column: 1 / -1; margin: 10px 0 0; font: 400 13px/1.5 var(--dt-skrift-b); color: rgba(255,255,255,.6); }
@keyframes dt-ind { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .dt-tagtjek-form { grid-template-columns: 1fr; gap: 26px; } .dt-valg { grid-template-columns: repeat(2, 1fr); } .dt-tagtjek-kort { grid-template-columns: 1fr; } .dt-tagtjek-punkter { grid-column: 1; grid-row: auto; margin-top: 12px; } }
@media (max-width: 560px) { .dt-tagtjek { padding: 56px 20px; } .dt-valg { grid-template-columns: 1fr; } .dt-tagtjek-kort { padding: 26px 22px; } }

/* ---------- Proces ---------- */
.dt-proces { padding: 72px 24px; }
.dt-proces-hoved { margin-bottom: 44px; }
.dt-proces-liste { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; counter-reset: trin; }
.dt-proces--start .dt-proces-liste { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.dt-proces-linje { position: absolute; left: 36px; right: 36px; top: 35px; height: 3px; background: var(--dt-linje); border-radius: 3px; overflow: hidden; }
.dt-proces-linje-fyld { position: absolute; inset: 0; background: var(--dt-groen); transform-origin: left; transform: scaleX(var(--dt-fremdrift, 0)); transition: transform .35s linear; }
.dt-proces-trin { position: relative; min-width: 0; }
.dt-proces-ikon { position: relative; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 3px solid var(--dt-linje); display: grid; place-items: center; color: var(--dt-groen); margin-bottom: 20px; transition: border-color .4s var(--dt-ease), box-shadow .4s var(--dt-ease); }
.dt-proces-trin.dt-trin--naaet .dt-proces-ikon { border-color: var(--dt-groen); box-shadow: 0 0 0 6px var(--dt-mos); }
.dt-proces-ikon .dt-ikon { width: 36px; height: 36px; }
.dt-proces-nr { position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--dt-groen); color: #fff; font: 700 13px/26px var(--dt-skrift-b); text-align: center; }
.dt-proces-titel { font: 700 19px/1.25 var(--dt-skrift-h); color: var(--dt-blaek); margin: 0 0 8px; }
.dt-proces--start .dt-proces-titel { font-size: 22px; }
.dt-proces-tekst { font: 400 15px/1.55 var(--dt-skrift-b); color: var(--dt-graa); margin: 0; }
.dt-proces--start .dt-proces-tekst { font-size: 16px; max-width: 34ch; }
@media (max-width: 1100px) { .dt-proces-liste { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } .dt-proces-linje { display: none; } }
@media (max-width: 680px) {
	.dt-proces { padding: 56px 20px; }
	.dt-proces-liste, .dt-proces--start .dt-proces-liste { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
	.dt-proces-linje { display: block; left: 35px; right: auto; top: 36px; bottom: 36px; width: 3px; height: auto; }
	.dt-proces-linje-fyld { transform-origin: top; transform: scaleY(var(--dt-fremdrift, 0)); }
	.dt-proces-trin { display: grid; grid-template-columns: 72px 1fr; gap: 0 18px; padding-bottom: 34px; }
	.dt-proces-ikon { margin-bottom: 0; grid-row: 1 / 3; }
	.dt-proces-titel { align-self: end; margin: 0 0 6px; }
}

/* ---------- Fakta ---------- */
.dt-fakta { padding: 72px 24px; }
.dt-fakta-hoved { margin-bottom: 36px; }
.dt-fakta-net { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dt-flise { background: var(--dt-mos); border-radius: var(--dt-radius); padding: 30px 28px 32px; }
.dt-flise-ikon { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; color: var(--dt-groen); margin-bottom: 22px; }
.dt-flise-ikon .dt-ikon { width: 36px; height: 36px; }
.dt-flise-titel { font: 700 22px/1.2 var(--dt-skrift-h); color: var(--dt-blaek); margin: 0 0 10px; }
.dt-flise-tekst { font: 400 16px/1.6 var(--dt-skrift-b); color: var(--dt-graa); margin: 0; }
@media (max-width: 900px) { .dt-fakta-net { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dt-fakta { padding: 56px 20px; } }

/* ---------- Kort ---------- */
.elementor-widget-shortcode .elementor-widget-container > .dt-kort { max-width: none; padding: 0; }
.dt-kort { background: var(--dt-tagsort); color: #fff; }
.dt-kort-indre { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: var(--dt-bredde); margin: 0 auto; padding: 80px 24px; align-items: center; }
.dt-kort .dt-h2 { color: #fff; }
.dt-kort .dt-intro { color: rgba(255,255,255,.8); }
.dt-kort-tal { display: grid; grid-template-columns: repeat(3, auto); gap: 24px 32px; margin: 32px 0 34px; justify-content: start; }
.dt-kort-tal dt { font: 700 clamp(30px, 3vw, 44px)/1 var(--dt-skrift-h); color: var(--dt-groen-lys); margin: 0 0 6px; white-space: nowrap; }
.dt-kort-tal dd { margin: 0; font: 500 14px/1.4 var(--dt-skrift-b); color: rgba(255,255,255,.72); max-width: 14ch; }
.dt-kort-figur { position: relative; }
.dt-kort-svg { width: 100%; height: auto; display: block; }
.dt-kort-land { fill: #2A3230; stroke: #3B4542; stroke-width: 1.2; stroke-linejoin: round; transition: fill .4s; }
.dt-kort-prik { fill: var(--dt-groen-lys); }
.dt-kort-puls { fill: none; stroke: var(--dt-groen-lys); stroke-width: 2; opacity: 0; transform-origin: center; animation: dt-puls 2.6s ease-out infinite; }
.dt-kort-puls2 { animation-delay: 1.3s; }
.dt-kort-tekst { font: 600 13px var(--dt-skrift-b); fill: #fff; }
@keyframes dt-puls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dt-kort-puls { animation: none; opacity: .5; transform: scale(2.2); } }
@media (max-width: 900px) { .dt-kort-indre { grid-template-columns: 1fr; padding: 60px 20px; gap: 28px; } .dt-kort-figur { max-width: 420px; } .dt-kort-tal { grid-template-columns: repeat(3, auto); gap: 18px; } }
@media (max-width: 560px) { .dt-kort-tal { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ ---------- */
.dt-faq { padding: 72px 24px; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.dt-faq-hoved { position: sticky; top: 110px; align-self: start; }
.dt-faq-liste { display: grid; gap: 10px; }
.dt-faq-punkt { border: 1.5px solid var(--dt-linje); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .25s; }
.dt-faq-punkt[open] { border-color: var(--dt-groen); }
.dt-faq-punkt summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font: 600 17px/1.35 var(--dt-skrift-h); color: var(--dt-blaek); }
.dt-faq-punkt summary::-webkit-details-marker { display: none; }
.dt-faq-punkt summary:focus-visible { outline: 3px solid var(--dt-groen-lys); outline-offset: -3px; border-radius: 14px; }
.dt-faq-pil { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--dt-mos); position: relative; transition: background .25s, transform .35s var(--dt-ease); }
.dt-faq-pil::before, .dt-faq-pil::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--dt-groen); transform: translate(-50%, -50%); transition: transform .35s var(--dt-ease); }
.dt-faq-pil::after { transform: translate(-50%, -50%) rotate(90deg); }
.dt-faq-punkt[open] .dt-faq-pil { background: var(--dt-groen); }
.dt-faq-punkt[open] .dt-faq-pil::before, .dt-faq-punkt[open] .dt-faq-pil::after { background: #fff; }
.dt-faq-punkt[open] .dt-faq-pil::after { transform: translate(-50%, -50%) rotate(0deg); }
.dt-faq-svar { padding: 0 22px 20px; }
.dt-faq-svar p { margin: 0; font: 400 16px/1.6 var(--dt-skrift-b); color: var(--dt-graa); max-width: 62ch; }
.dt-faq-punkt[open] .dt-faq-svar { animation: dt-ind .35s var(--dt-ease); }
.dt-faq-mere { grid-column: 2; margin: 6px 0 0; font: 500 15px/1.5 var(--dt-skrift-b); color: var(--dt-graa); }
.dt-faq-mere a { color: var(--dt-groen); font-weight: 700; }
@media (max-width: 900px) { .dt-faq { grid-template-columns: 1fr; gap: 24px; } .dt-faq-hoved { position: static; } .dt-faq-mere { grid-column: 1; } }
@media (max-width: 560px) { .dt-faq { padding: 56px 20px; } .dt-faq-punkt summary { padding: 15px 16px; font-size: 16px; } .dt-faq-svar { padding: 0 16px 16px; } }

/* ---------- Magnetiske knapper (kun mus) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.dt-magnet { transition: transform .35s var(--dt-ease); will-change: transform; }
}
@media (prefers-reduced-motion: reduce) { .dt-tegn .dt-ikon path, .dt-tegn .dt-ikon circle, .dt-tegn .dt-ikon rect { stroke-dashoffset: 0 !important; animation: none !important; } .dt-proces-linje-fyld { transition: none; } .dt-tagtjek-kort, .dt-faq-punkt[open] .dt-faq-svar { animation: none; } }