/* ByDalsgaard – forside
   Palet og skala er foreløbige (se docs/branding/BRAND_IDENTITY.md: farvekoder og fonte er ikke endeligt fastlagt). */

/* Albert Sans (SIL Open Font License) hostes lokalt – se fonts/LICENS.txt */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/albert-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/albert-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F7F3EA;
  --bg-sand: #EBE3D3;
  --bg-lys: #EFE9DC;
  --kort: #FBF8F1;
  --tekst: #33291F;
  --tekst-dæmpet: #5C5044;
  --tekst-blød: #4F4438;
  --streg: #D9CFBC;
  --accent: #4A6351;
  --sol: #E8EADC;
  --salvie-lys: #DEE1CF;
  --salvie: #BCC8B0;
  --groen-moerk: #314334; /* samme grøn som logoets skrift */
  --skel: #7A9484;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-ud: cubic-bezier(.16, .8, .24, 1);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: 'Albert Sans', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

a { color: var(--tekst); }
a:hover { color: var(--accent); }

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
  box-sizing: border-box;
}

/* ---------- Header og menu ---------- */

.site-header { position: relative; z-index: 10; }
.header-in {
  padding-block: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 40px;
}
/* Logo: ved indlæsning glider skriften ud af cirklen, mens cirklen rykker lidt mod venstre.
   Ved mouseover tegnes en streg ned mellem cirkel og skrift, og "Digitale løsninger" toner ind. */
.logo {
  --d: clamp(42px, 3.7vw, 52px);
  --gap: calc(var(--d) * .25);
  --logo-lys: #587360;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.logo-cirkel {
  position: relative;
  z-index: 2;
  flex: none;
  width: var(--d);
  height: var(--d);
  animation: cirkel-ind 1.2s var(--ease-ud) .25s both;
}
.logo-cirkel img { display: block; width: 100%; height: 100%; }
.logo-skrift {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: var(--d);
  margin-left: calc(var(--d) * -.5);
  padding-left: calc(var(--d) * .5 + var(--gap));
  overflow: hidden;
}
.logo-linjer {
  position: relative;
  top: calc(var(--d) * .035);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: skrift-ud 1.2s var(--ease-ud) .25s both;
  transition: top .7s var(--ease);
}
.logo-navn { display: block; width: auto; height: calc(var(--d) * .66); }
.logo-under {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .22em; /* reserve – js/main.js spreder teksten, så den fylder ordmærkets bredde */
  line-height: 1;
  font-size: clamp(10px, calc(var(--d) * .2), 11px);
  font-weight: 300;
  color: var(--logo-lys);
  transition: height .7s var(--ease), margin-top .7s var(--ease), opacity .6s ease;
}
.logo-under-t { display: inline-block; white-space: nowrap; }
.logo:hover .logo-linjer,
.logo:focus-visible .logo-linjer { top: 0; }
.logo:hover .logo-under,
.logo:focus-visible .logo-under {
  height: calc(var(--d) * .2);
  margin-top: calc(var(--d) * .06);
  opacity: 1;
  transition-delay: 0s, 0s, .2s;
}
.logo-streg {
  position: absolute;
  z-index: 3;
  top: calc(50% - var(--d) * .4);
  left: calc(var(--d) + var(--gap) / 2);
  width: 1px;
  height: calc(var(--d) * .8);
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--ease);
}
.logo:hover .logo-streg,
.logo:focus-visible .logo-streg { transform: scaleY(1); }
@keyframes cirkel-ind { from { transform: translateX(calc(var(--d) * .28)); } to { transform: none; } }
@keyframes skrift-ud { from { transform: translateX(calc(-100% - var(--d))); } to { transform: none; } }
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  font-size: 16px;
}
.nl {
  position: relative;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nl:hover::after,
.nl:focus-visible::after,
.dd:hover > .nl::after { transform: scaleX(1); transform-origin: left; }
.nl-accent { color: var(--accent); font-weight: 500; }

.dd { position: relative; }
.dd-p {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: -14px;
  width: min(320px, 82vw);
  box-sizing: border-box;
  padding: 8px;
  background: var(--kort);
  border: 1px solid var(--streg);
  border-radius: 12px;
  box-shadow: 0 20px 44px -28px rgba(51, 41, 31, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .38s var(--ease), visibility .28s;
}
.dd:hover .dd-p,
.dd:focus-within .dd-p { opacity: 1; visibility: visible; transform: none; }
.dd-i {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .34s ease, transform .4s var(--ease), background-color .2s;
}
.dd:hover .dd-i,
.dd:focus-within .dd-i { opacity: 1; transform: none; }
.dd-i:nth-child(2) { transition-delay: .05s, .05s, 0s; }
.dd-i:nth-child(3) { transition-delay: .1s, .1s, 0s; }
.dd-i:hover { background: var(--bg-sand); }
.dd-t { display: block; font-weight: 500; }
.dd-s { display: block; font-size: 15px; color: var(--tekst-dæmpet); }

/* ---------- Knap ---------- */

.knap {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--kort);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.knap:hover { color: var(--kort); }
.knap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 24, 18, .24);
  transform: translateX(-101%);
  transition: transform .5s var(--ease);
}
.knap:hover::before,
.knap:focus-visible::before { transform: none; }
.kt, .kp { position: relative; }
.kp {
  display: inline-block;
  box-sizing: border-box;
  width: 0;
  padding-left: .6em;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width .4s var(--ease), opacity .3s;
}
.knap:hover .kp,
.knap:focus-visible .kp { width: 1.7em; opacity: 1; }

/* ---------- Hero ---------- */

.hero-in { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(40px, 5vw, 72px); }
.hero-title {
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  column-gap: .24em;
  font-size: clamp(44px, 6.4vw, 92px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.hero-lead {
  margin-top: 32px;
  max-width: 560px;
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--tekst-dæmpet);
}
.hero-in .ind2 { margin-top: 40px; }

.o { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.o > span { display: block; animation: ordop 1.05s var(--ease-ud) both; }
.o:nth-child(2) > span { animation-delay: .07s; }
.o:nth-child(3) > span { animation-delay: .14s; }
.o:nth-child(4) > span { animation-delay: .21s; }
.o:nth-child(5) > span { animation-delay: .34s; }
.o:nth-child(6) > span { animation-delay: .41s; }
.o:nth-child(7) > span { animation-delay: .48s; }
@keyframes ordop { from { transform: translateY(112%); } to { transform: none; } }

.ind { animation: ind .9s var(--ease) both; }
.ind1 { animation-delay: .72s; }
.ind2 { animation-delay: .86s; }
@keyframes ind { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Dalen: solen står op, bakkerne hæver sig, og ved scroll går solen ned */
.dal { position: relative; overflow: hidden; height: clamp(130px, 18vw, 260px); }
.dal svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ned {
  position: absolute;
  left: 72%; top: 9%;
  width: clamp(30px, 3.7vw, 54px);
  transform: translateY(calc(var(--p, 0) * 170px));
}
.sol {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sol);
  animation: sol 2.8s var(--ease-ud) .45s both;
}
@keyframes sol { from { transform: translateY(200px); } to { transform: none; } }
.b1 { animation: bakke 1.7s var(--ease-ud) .1s both; }
.b2 { animation: bakke 1.7s var(--ease-ud) .22s both; }
@keyframes bakke { from { transform: translateY(90px); } to { transform: none; } }
.sa { transform: translateY(calc(var(--p, 0) * 56px)); }
.sb { transform: translateY(calc(var(--p, 0) * 24px)); }

/* ---------- Fælles sektionselementer ---------- */

.label { font-size: 16px; font-weight: 500; color: var(--tekst-dæmpet); margin-bottom: 32px; }
.h2 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 300; letter-spacing: -0.02em; }
.h2-stor { margin-bottom: 56px; }
.lead { font-size: clamp(19px, 1.6vw, 22px); color: var(--tekst-dæmpet); }
.note { font-size: 16px; color: var(--tekst-dæmpet); }

.sek-intro { padding-block: clamp(56px, 8vw, 110px); }
.intro {
  max-width: 820px;
  font-size: clamp(25px, 2.8vw, 38px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* ---------- Ydelser ---------- */

.sek-ydelser { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 90px); }
.rader { display: flex; flex-direction: column; border-top: 1px solid var(--streg); }
.rk {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 48px;
  padding: 32px 0;
  border-bottom: 1px solid var(--streg);
  text-decoration: none;
}
.rk::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.rk:hover::after,
.rk:focus-visible::after { transform: scaleX(1); }
.rk-n {
  flex: 1 1 340px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: -0.015em;
  transition: transform .5s var(--ease);
}
.rk:hover .rk-n,
.rk:focus-visible .rk-n { transform: translateX(14px); }
.rk-t { flex: 2 1 420px; color: var(--tekst-dæmpet); }
.rk-p {
  flex: 0 0 24px;
  font-size: 22px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .3s, transform .5s var(--ease);
}
.rk:hover .rk-p,
.rk:focus-visible .rk-p { opacity: 1; transform: none; }

/* ---------- Priser ---------- */

.sek-priser { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.sek-priser .h2 { margin-bottom: 12px; }
.sek-priser .lead { margin-bottom: 40px; max-width: 620px; font-size: 18px; }
.pakker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.pk {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 32px;
  border: 1px solid var(--streg);
  border-radius: 12px;
  background: var(--kort);
  text-decoration: none;
  transition: transform .5s var(--ease), box-shadow .5s, border-color .3s;
}
.pk:hover,
.pk:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -28px rgba(51, 41, 31, .5);
  border-color: var(--accent);
  color: var(--tekst);
}
.pk-navn { font-size: 34px; font-weight: 300; letter-spacing: -0.015em; }
.pk-type { margin: 2px 0 14px; font-size: 16px; font-weight: 500; color: var(--accent); }
.pk-tekst { margin-bottom: 30px; color: var(--tekst-dæmpet); }
.pk-pris { margin-top: auto; font-size: 34px; font-weight: 300; letter-spacing: -0.015em; }
.pk-cta { margin-top: 14px; font-size: 16px; font-weight: 500; }
.pk-g { display: inline-block; transition: transform .4s var(--ease); }
.pk:hover .pk-g,
.pk:focus-visible .pk-g { transform: translateX(6px); }


/* ---------- Principper ---------- */

.band-sand { background: var(--bg-sand); }
.band-lys { background: var(--bg-lys); }
.principper {
  padding-block: clamp(64px, 8vw, 104px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 48px;
}
.principper h3 { margin-bottom: 12px; font-size: 27px; font-weight: 400; letter-spacing: -0.01em; }
.principper p { color: var(--tekst-blød); }

/* ---------- Proces ---------- */

.sek-proces { padding-block: clamp(64px, 9vw, 120px); }
/* Fire trin på en sammenhængende linje med numre; linjen tegner sig ved scroll (js/main.js sætter --p og --len) */
.trin { --g: 32px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--g); }
.trin::before, .trin::after { content: ""; position: absolute; left: 15px; top: 14px; width: var(--len, calc(75% + 24px)); height: 2px; background: var(--streg); }
.trin::before { content: none; } /* ingen permanent grå streg: linjen findes kun, i takt med at den tegner sig */
.trin::after { background: var(--accent); transform: scaleX(var(--p, 1)); transform-origin: left; }
.tr { position: relative; }
.trin-nr { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box; margin-bottom: 18px; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--bg); color: var(--accent); font-size: 15px; font-weight: 500; transition: background-color .5s ease, color .5s ease; }
.tr.naaet .trin-nr { background: var(--accent); color: var(--kort); }
.tr h3 { margin-bottom: 8px; font-size: 21px; font-weight: 500; }
.tr p { font-size: 17px; color: var(--tekst-dæmpet); }
@media (max-width: 760px) {
  .trin { grid-template-columns: 1fr; gap: 30px; }
  .trin::before, .trin::after { width: 2px; height: var(--len, calc(100% - 150px)); left: 14px; top: 15px; }
  .trin::after { transform: scaleY(var(--p, 1)); transform-origin: top; }
  .tr { padding-left: 54px; }
  .tr .trin-nr { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- Om: portræt i fuld bredde ---------- */

.om-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.om-foto { margin: 0; min-height: 460px; overflow: hidden; background: #CDB9A4; }
.om-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.om-indhold { align-self: center; box-sizing: border-box; max-width: 660px; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 80px); }
.om-indhold .h2 { margin-bottom: 20px; }
.om-citat { margin: 0 0 26px; padding: 0; }
.om-citat p { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 300; line-height: 1.28; letter-spacing: -0.015em; color: var(--groen-moerk); }
@media (min-width: 821px) {
  .om-citat p { margin-right: calc(-1 * clamp(24px, 4vw, 56px)); } /* lidt ekstra bredde, så "til" ikke står alene på sidste linje */
}
.om-citat footer { font-size: 15px; color: var(--tekst-dæmpet); }
.om-indhold > p { margin-bottom: 16px; color: var(--tekst-blød); }
.om-indhold .nl { min-height: 0; }
@media (max-width: 820px) {
  .om-band { grid-template-columns: 1fr; }
  .om-foto { min-height: 0; aspect-ratio: 3 / 2; }
  .om-indhold { max-width: none; }
}

/* ---------- Pakkekort: små æsker, fremhævet Standard ---------- */

.pk { position: relative; }
.pk-aeske { display: block; width: 150px; height: 132px; object-fit: contain; object-position: left bottom; margin: -6px 0 14px -6px; mix-blend-mode: multiply; transition: transform .7s var(--ease); }
.pk:hover .pk-aeske, .pk:focus-visible .pk-aeske { transform: translateY(-8px) scale(1.04); }
.pk-anbefalet { border-color: var(--accent); box-shadow: 0 16px 36px -30px rgba(51, 41, 31, .55); }
.pk-badge { position: absolute; top: 18px; right: 18px; padding: 2px 12px; border-radius: 999px; background: var(--accent); color: var(--kort); font-size: 13px; font-weight: 500; }
.sammenlign-rk { display: flex; flex-wrap: wrap; gap: 12px; }
.side-pakke-kol { min-width: 0; }
.pris-boks { margin: 8px 0 0; padding: 20px 24px; border-radius: 12px; background: var(--salvie-lys); color: var(--groen-moerk); }
.pris-boks p { margin: 0; font-size: 17px; line-height: 1.55; }
.pris-boks strong { display: block; margin-bottom: 4px; font-size: 19px; font-weight: 500; }

/* ---------- Eksempler ---------- */

.eks-in { padding-block: clamp(64px, 8vw, 104px); }
.eks-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  margin-bottom: 40px;
}
.demo { border-radius: 12px; background: var(--kort); border: 1px solid var(--streg); overflow: hidden; }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #E5DCCB; }
.demo-prikker { display: flex; gap: 7px; }
.demo-prikker span { width: 10px; height: 10px; border-radius: 50%; background: var(--streg); }
.demo-mark { font-size: 13px; line-height: 1.3; text-align: right; color: var(--tekst-dæmpet); }
.demo-pakke { display: inline-flex; align-items: center; margin-bottom: 14px; padding: 3px 12px; border: 1px solid var(--accent); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.demo-pakke:hover { background: var(--accent); color: var(--kort); }
.demo-pakke:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.demo-visual { flex: 1 1 340px; min-width: 0; }

/* Karussel: browserens egen rulning med scroll-snap (swipe virker uden JavaScript); JS tilføjer pile, prikker og tastatur */
.kar-spor { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.kar-spor::-webkit-scrollbar { display: none; }
.kar-spor:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.kar-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.kar-slide .demo { height: 100%; box-sizing: border-box; }
.kar-kontrol { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; }
.kar-kontrol[hidden] { display: none; }
.kar-pil { position: relative; flex: none; width: 48px; height: 48px; border: 1px solid var(--streg); border-radius: 50%; background: var(--kort); color: var(--groen-moerk); cursor: pointer; transition: background-color .3s ease, border-color .3s ease, opacity .3s ease; }
.kar-pil::before { content: ""; position: absolute; left: 14px; top: 18px; width: 9px; height: 9px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.kar-forrige::before { left: 21px; transform: rotate(-135deg); }
.kar-pil:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--kort); }
.kar-pil:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kar-pil:disabled { opacity: .35; cursor: default; }
.kar-prikker { display: flex; align-items: center; }
.kar-prik { position: relative; width: 36px; height: 44px; border: 0; background: none; cursor: pointer; }
.kar-prik::before { content: ""; position: absolute; left: 13px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--salvie); transition: background-color .4s ease, transform .4s var(--ease); }
.kar-prik[aria-current="true"]::before { background: var(--accent); transform: scale(1.3); }
.kar-prik:hover::before { background: var(--accent); }
.kar-prik:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .kar-spor { scroll-behavior: auto; } }

/* Enkle mockups (farveflader og tekst i HTML/CSS, ingen billeder) */
.mock { overflow: hidden; border: 1px solid var(--streg); border-radius: 10px; background: var(--bg); font-size: 13px; line-height: 1.35; color: var(--tekst); }
.m-nav { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--streg); background: var(--kort); font-size: 12px; color: var(--tekst-dæmpet); }
.m-nav b { margin-right: auto; font-weight: 600; font-size: 13px; color: var(--groen-moerk); }
.m-hero { padding: 22px 18px; background: linear-gradient(135deg, var(--salvie-lys), var(--salvie)); }
.m-h { font-size: 20px; font-weight: 300; letter-spacing: -0.01em; color: var(--groen-moerk); }
.m-p { margin: 4px 0 12px; font-size: 12.5px; color: var(--tekst-blød); }
.m-knap { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--accent); color: var(--kort); font-size: 12px; font-weight: 500; transition: background-color .35s ease, transform .35s var(--ease); }
.m-knap:hover { background: var(--groen-moerk); transform: translateY(-1px); }
.m-bar { padding: 9px 14px; border-top: 1px solid var(--streg); background: var(--kort); font-size: 12px; color: var(--tekst-dæmpet); }
.mock { transition: box-shadow .5s ease, transform .5s var(--ease); }
.mock:hover { box-shadow: 0 18px 40px -26px rgba(51, 41, 31, .55); transform: translateY(-2px); }
.m-nav span { position: relative; transition: color .3s ease; }
.m-nav span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.m-nav span:hover { color: var(--accent); }
.m-nav span:hover::after { transform: scaleX(1); transform-origin: left; }

/* Håndværker: foto i toppen, der fades ned mod bunden, så tekst og knap står tydeligt */
.m-hero-foto { position: relative; display: flex; align-items: flex-end; min-height: 215px; padding: 0; overflow: hidden; isolation: isolate; background: var(--bg); }
/* Zoomen ændrer billedets størrelse i stedet for at bruge transform, så browseren ikke lægger billedet i et eget lag med en tynd kant i bunden */
.m-hero-bil { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 28% 30%; transition: width 1.4s var(--ease), height 1.4s var(--ease), top 1.4s var(--ease), left 1.4s var(--ease); }
.m-hero-foto::after { content: ""; position: absolute; inset: 0 0 -1px; background: linear-gradient(to bottom, rgba(247, 243, 234, 0) 8%, rgba(247, 243, 234, .55) 38%, rgba(247, 243, 234, .92) 60%, rgba(247, 243, 234, 1) 100%); }
.m-hero-tekst { position: relative; z-index: 1; padding: 0 18px 16px; }
.mock-haand:hover .m-hero-bil { top: -2.5%; left: -2.5%; width: 105%; height: 105%; }
.m-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; }
.m-tile { position: relative; display: block; height: 76px; overflow: hidden; border-radius: 6px; background: var(--bg-lys); }
.m-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.m-tile b { position: absolute; left: 6px; bottom: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(251, 248, 241, .92); color: var(--groen-moerk); font-size: 11px; font-weight: 500; transition: background-color .35s ease, color .35s ease; }
.m-tile:hover img { transform: scale(1.1); }
.m-tile:hover b { background: var(--accent); color: var(--kort); }

/* Fotograf: portfolio med fotos, der zoomer og viser en billedtekst ved mouseover */
.m-galleri { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 62px; gap: 6px; padding: 8px; }
.ph { position: relative; margin: 0; overflow: hidden; border-radius: 4px; background: var(--salvie); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s ease; }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px; background: linear-gradient(to top, rgba(26, 34, 28, .6), rgba(26, 34, 28, 0)); color: #FBF8F1; font-size: 11px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s var(--ease); }
.ph:hover img { transform: scale(1.08); }
.ph:hover figcaption { opacity: 1; transform: none; }
.ph-a { grid-row: span 2; }
.ph-a img { object-position: 52% 30%; }
.ph-b img { object-position: 50% 22%; }
.ph-e { grid-row: span 2; }
.ph-e img { object-position: 62% 25%; }
.ph-f { grid-column: 1 / span 2; }
@media (max-width: 560px) { .demo-top { flex-wrap: wrap; } .demo-mark { text-align: left; } }
.demo-in { display: flex; flex-wrap: wrap; gap: 40px 72px; padding: clamp(28px, 5vw, 64px); align-items: center; }
.demo-tekst { flex: 1 1 320px; min-width: 0; }
.demo-tekst h3 { margin-bottom: 14px; font-size: clamp(28px, 3vw, 42px); font-weight: 300; letter-spacing: -0.02em; }
.demo-tekst p { color: var(--tekst-dæmpet); }
.demo-kal { flex: 1 1 340px; min-width: 0; }
.demo-label { margin-bottom: 12px; font-size: 16px; font-weight: 500; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dag {
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: #F3EEE3;
  color: #6B5F52;
  transition: transform .25s var(--ease);
}
.dag.fri { background: var(--salvie-lys); color: var(--tekst); }
.dag.valgt { background: var(--accent); color: var(--kort); }
.dag:hover { transform: scale(1.08); }
.cal[data-shown] .valgt { animation: pop .7s var(--ease) .7s both; }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- Kontakt og afslutning ---------- */

.kontakt-in { padding-top: clamp(72px, 10vw, 130px); padding-bottom: clamp(40px, 5vw, 64px); }
.kontakt-titel,
.side-titel {
  font-size: clamp(40px, 5.2vw, 74px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.kontakt-in .lead { margin-top: 22px; max-width: 540px; }

/* Undersider (pakkesider): logoet står roligt, uden indlæsningsanimation */
.underside { min-height: 100vh; display: flex; flex-direction: column; }
.underside main { flex: 1; }
.underside .logo-cirkel,
.underside .logo-linjer { animation: none; }
.side-in { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(48px, 7vw, 104px); }
.side-hoved { padding-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--salvie); }
.side-titel { color: var(--groen-moerk); }
/* Den lodrette streg i overskriften er lige så tynd og lysegrøn som linjen under den */
.side-skel {
  display: inline-block;
  width: 1px;
  height: .8em;
  margin-inline: .08em;
  vertical-align: -.06em;
  background: var(--salvie);
}
/* Selve produktnavnet er mørkest; resten af overskriften har en lidt lysere grøn */
.side-titel-sub { color: var(--accent); }

/* Pakkebillede til venstre, pakkens tekst til højre */
/* Billederne er beskåret lige over æsken og tæt på dens højre kant, så teksten kan stå i toppen ud for æsken */
.side-pakke {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 40px;
}
@media (min-width: 860px) {
  .side-pakke {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 clamp(32px, 5vw, 72px);
  }
}
.side-pakke-bil {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply; /* billedets hvide baggrund bliver til sidens baggrund */
}
.side-pakke-tekst { max-width: 440px; padding-top: 6px; }
.side-pakke-tekst h2 { margin-bottom: 14px; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--groen-moerk); }
.side-pakke-tekst .lead { margin-bottom: 28px; }
.side-liste { border-bottom: 1px solid var(--streg); }
.side-liste li { padding: 16px 0; border-top: 1px solid var(--streg); }
.side-liste-t { display: block; font-weight: 500; }
.side-liste-s { display: block; font-size: 16px; color: var(--tekst-dæmpet); }
.side-pris { margin-top: 28px; font-size: 34px; font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; color: var(--groen-moerk); }
.pris-note { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--tekst-dæmpet); }
.sek-priser .pris-note { margin-top: 18px; }
.side-mere { padding-top: clamp(56px, 7vw, 104px); }

/* Pakkesider: beskrivelse, knap, tabel over indhold og liste over det, der ikke er med */
.pakke-ny > p { margin-bottom: 14px; color: var(--tekst-blød); }
.pakke-ny > .lead { font-size: clamp(21px, 2vw, 25px); font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--groen-moerk); }
.pakke-ny > .side-pris { margin-bottom: 0; }
.pakke-ny > .pris-note { margin-bottom: 4px; font-size: 14px; color: #766B5F; transition: color .4s ease; } /* afdæmpet, men stadig læsbar (kontrast over 4,5:1) */
.pakke-ny > .pris-note:hover { color: var(--tekst-dæmpet); }
.pakke-ny .pris-note a { color: var(--accent); white-space: nowrap; } /* "generelle forretningsbetingelser" holdes samlet på én linje */
@media (min-width: 1100px) {
  .pakke-ny > .pris-note { margin-right: -70px; } /* lidt mere bredde til noterne end til brødteksten */
}
@media (min-width: 1200px) {
  .pakke-ny > .pris-note-bred { margin-right: -120px; } /* Max: "jf. betalingen nedenfor" skal stå på samme linje */
}
.pakke-ny > .side-knap { margin: 24px 0 0; }
.skjult { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Tre bånd: creme (præsentation), gennemgående lys salvie (tabel), creme (ikke med) */
.pakke-band { background: var(--salvie-lys); }
.pakke-band-in { padding-block: clamp(56px, 8vw, 104px); }
.pakke-ikke { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 104px); box-sizing: border-box; }
.pakke-band h2, .pakke-ikke h2 { margin-bottom: 22px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; letter-spacing: -0.015em; color: var(--groen-moerk); }
.pakke-band .pakke-tabel thead th { color: var(--tekst-blød); }
.pakke-band .pakke-tabel tbody th, .pakke-band .pakke-tabel td { border-top-color: var(--salvie); }
.pakke-band .pakke-tabel tbody tr:last-child th, .pakke-band .pakke-tabel tbody tr:last-child td { border-bottom-color: var(--salvie); }
.pakke-band .mark.ja { background: var(--kort); }
.pakke-band.lys { background: var(--bg-lys); }
.pakke-band.lys .fremhaev { background: var(--kort); }
.pakke-band.lys .mark.ja { background: var(--salvie-lys); }
/* Mulighed: en lille, udfyldt grøn prik, præcist centreret i markørens 22 px */
.mark.mulig { background: none; }
.mark.mulig::before { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* Heltals-linjehøjde i tabellerne, så alle tegn lander på samme hele pixel i hver række */
.pakke-tabel tbody th, .pakke-tabel td { line-height: 28px; }
.pakke-slut { max-width: 860px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--streg); color: var(--tekst-dæmpet); }
.max-trin { display: grid; gap: 0; max-width: 860px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: trin; }
.max-trin li { counter-increment: trin; display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--streg); color: var(--tekst-blød); }
.max-trin li::before { content: counter(trin); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--salvie-lys); color: var(--groen-moerk); font-size: 15px; font-weight: 500; line-height: 28px; text-align: center; }
.max-trin li strong { color: var(--groen-moerk); font-weight: 500; }
.pakke-ikke .fremhaev + .pakke-note, .pakke-band .fremhaev { max-width: 860px; }
.pakke-h2-igen { margin-top: clamp(40px, 5vw, 64px); }

/* Scroll-indikator nederst i produktpræsentationen (erstatter en del af sektionens bundluft, så siden ikke bliver højere) */
.side-in:has(.scroll-ned) { padding-bottom: clamp(16px, 2.5vw, 28px); }
.scroll-ned { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
.scroll-link { display: inline-flex; align-items: center; gap: 17px; min-height: 44px; padding: 0 8px; color: var(--accent); font-size: 16px; font-weight: 500; text-decoration: none; }
.scroll-link:hover { color: var(--groen-moerk); }
.scroll-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* Facebook-ikon: næsten gennemsigtigt, tydeligt ved mouseover/fokus med et halvt sekunds fade */
.fb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 14px; color: var(--accent); opacity: .35; vertical-align: middle; transition: opacity .5s ease; }
.fb:hover, .fb:focus-visible { opacity: 1; }
.fb svg { display: block; }
.fb-kontakt { margin: -10px -6px -10px 4px; }
.kontakt-link { color: inherit; text-decoration: underline; text-decoration-color: var(--salvie); text-underline-offset: 3px; transition: text-decoration-color .3s ease, color .3s ease; }
.kontakt-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.scroll-pil { position: relative; width: 22px; height: 22px; animation: pil-ned 2.6s ease-in-out infinite; }
.scroll-pil::before { content: ""; position: absolute; left: 5px; top: 2px; width: 11px; height: 11px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; border-radius: 1px; transform: rotate(45deg); }
@keyframes pil-ned { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(7px); } }
.omfang-liste { max-width: 860px; margin: 0; padding-left: 1.2em; list-style: disc; color: var(--tekst-blød); }
.omfang-liste li { margin-bottom: 8px; }
.omfang-liste li::marker { color: var(--salvie); }
.pakke-band .pakke-slut { border-top-color: var(--salvie); }
.pakke-slut .sammenlign-link { margin-left: 18px; }

/* Sammenlign pakker: knapper/links og overlay (<dialog>) */
.side-knap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.sammenlign-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: 999px; color: var(--groen-moerk); font-size: 16px; font-weight: 500; text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.sammenlign-link:hover { background: var(--accent); color: var(--kort); }
.sammenlign-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sek-priser .sammenlign-rk { margin-top: 28px; }
.dlg { width: 100%; max-width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--tekst); overflow: visible; }
.dlg::backdrop { background: rgba(26, 34, 28, .55); }
.dlg[open] { animation: dlg-ind .4s var(--ease) both; }
.dlg[open]::backdrop { animation: dlg-bag .4s ease both; }
@keyframes dlg-ind { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes dlg-bag { from { opacity: 0; } to { opacity: 1; } }
.dlg-in { box-sizing: border-box; max-height: calc(100vh - 24px); overflow: auto; padding: 0 clamp(18px, 3.5vw, 40px) clamp(22px, 3vw, 36px); border-radius: 16px; background: var(--kort); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.dlg-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.5vw, 28px) 0 14px; background: var(--kort); }
.dlg-top h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; letter-spacing: -0.015em; color: var(--groen-moerk); }
.dlg-luk { position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--streg); border-radius: 50%; background: var(--kort); cursor: pointer; }
.dlg-luk::before, .dlg-luk::after { content: ""; position: absolute; left: 13px; top: 21px; width: 16px; height: 1.5px; background: var(--groen-moerk); transform: rotate(45deg); }
.dlg-luk::after { transform: rotate(-45deg); }
.dlg-luk:hover { background: var(--salvie-lys); }
.dlg-luk:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html:has(dialog[open]) { overflow: hidden; }
.sml-intro { margin: 0 0 8px; max-width: 640px; color: var(--tekst-dæmpet); }
.sml-bil { display: block; width: 100%; height: auto; margin: 0 0 8px; mix-blend-mode: multiply; }
.sml-wrap { overflow-x: auto; }
.sml-tabel { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.45; }
.sml-tabel thead th { padding: 10px 8px; text-align: left; font-size: 17px; font-weight: 500; color: var(--groen-moerk); border-bottom: 1px solid var(--accent); }
.sml-tabel thead th:first-child { width: 24%; padding-left: 0; }
.sml-tabel thead a { color: inherit; text-decoration: none; }
.sml-tabel thead a:hover, .sml-tabel thead a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.sml-tabel tbody th, .sml-tabel td { padding: 11px 8px; vertical-align: top; text-align: left; border-top: 1px solid var(--streg); }
.sml-tabel tbody th { padding-left: 0; font-weight: 500; color: var(--groen-moerk); }
.sml-tabel td { color: var(--tekst-blød); }
.sml-tabel tbody tr:last-child th, .sml-tabel tbody tr:last-child td { border-bottom: 1px solid var(--streg); }
.sml-tabel .mark { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.sml-tabel .mark.ja::after { left: 6px; top: 3px; width: 4px; height: 8px; }
.sml-tabel .mark.nej::after { left: 4px; top: 8px; width: 8px; }
.sml-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--tekst-dæmpet); }
@media (max-width: 640px) {
  /* Tabellen er bredere end skærmen og kan stryges vandret; rækkenavnene bliver stående til venstre */
  .sml-tabel { min-width: 580px; font-size: 14px; }
  .sml-tabel thead th { font-size: 15px; }
  .sml-tabel thead th:first-child, .sml-tabel tbody th { position: sticky; left: 0; z-index: 1; background: var(--kort); padding-right: 10px; }
  .sml-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media (max-width: 520px) {
  .pakke-tabel tbody th, .pakke-tabel td { padding-right: 8px; }
  .pakke-tabel tbody th .mark { margin-right: 8px; }
}
.pakke-band .pakke-note { color: var(--tekst-blød); }
.pakke-tabel { width: 100%; max-width: 860px; border-collapse: collapse; table-layout: fixed; }
.pakke-tabel thead th { padding: 0 12px 10px 0; font-size: 14px; font-weight: 500; text-align: left; color: var(--tekst-dæmpet); }
.pakke-tabel thead th:first-child { width: 40%; padding-left: 0; }
.pakke-tabel tbody th, .pakke-tabel td { padding: 14px 12px 14px 0; vertical-align: top; border-top: 1px solid var(--streg); text-align: left; }
.pakke-tabel tbody th { font-weight: 500; color: var(--groen-moerk); }
.pakke-tabel tbody th .mark { margin-right: 10px; vertical-align: -5px; }
.pakke-tabel td { color: var(--tekst-blød); }
.pakke-tabel tbody tr:last-child th, .pakke-tabel tbody tr:last-child td { border-bottom: 1px solid var(--streg); }
.pakke-note { max-width: 860px; margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--tekst-dæmpet); }
.pakke-note-top { margin: 0 0 18px; font-size: 17px; }
.mark { display: inline-block; position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; }
.mark.ja { background: var(--salvie-lys); }
.mark.ja::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mark.nej { border: 1px solid var(--streg); }
.mark.nej::after { content: ""; position: absolute; left: 6px; top: 10px; width: 8px; height: 2px; background: var(--tekst-dæmpet); }
.ikke-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 40px; max-width: 860px; margin: 0 0 22px; padding: 0; list-style: none; }
.ikke-liste li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--streg); color: var(--tekst-blød); }
.pakke-ikke .fremhaev { max-width: 860px; }

/* Privatlivspolitik */
.politik { max-width: 720px; padding-top: clamp(28px, 3.5vw, 44px); }
.politik p { margin-bottom: 14px; color: var(--tekst-blød); }
.politik-intro { font-size: clamp(19px, 1.6vw, 22px); color: var(--tekst-dæmpet); }
.politik-dato { font-size: 15px; color: var(--tekst-dæmpet); }
.politik h2 { margin: clamp(36px, 4vw, 52px) 0 14px; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--groen-moerk); }
.politik ul { margin: 0 0 14px; padding-left: 1.2em; list-style: disc; }
.politik li { margin-bottom: 10px; color: var(--tekst-blød); }
.politik li::marker { color: var(--salvie); }
.footer-in a { color: inherit; }

/* Generelle forretningsbetingelser */
.politik h3 { margin: 26px 0 8px; font-size: 19px; font-weight: 500; color: var(--groen-moerk); }
.politik a { color: var(--accent); }
.kat-nav { margin: clamp(28px, 3.5vw, 40px) 0 0; }
.politik .kat-titel { margin: 0 0 14px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--tekst-dæmpet); }
.kat-nav ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kat-nav li { margin: 0; padding: 0; }
.politik .kat-knap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  box-sizing: border-box;
  border: 1px solid var(--salvie);
  border-radius: 999px;
  background: var(--salvie-lys);
  color: var(--groen-moerk);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.politik .kat-knap:hover { background: var(--accent); border-color: var(--accent); color: var(--kort); }
.politik .kat-knap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vilkaar-sek { margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--streg); scroll-margin-top: 24px; }
.vilkaar-sek h2 { margin-top: 0; }
.fremhaev { margin: 18px 0; padding: 18px 22px; border-radius: 12px; background: var(--bg-lys); }
.fremhaev h3 { margin-top: 0; }
.fremhaev p, .fremhaev ul { margin-bottom: 8px; }
.fremhaev p:last-child, .fremhaev ul:last-child, .fremhaev-liste:last-child { margin-bottom: 0; }
.fremhaev-liste { margin: 0 0 8px; }
.fremhaev-liste div { display: flex; flex-wrap: wrap; gap: 2px 20px; padding: 8px 0; border-top: 1px solid var(--streg); }
.fremhaev-liste div:first-child { border-top: 0; padding-top: 0; }
.fremhaev-liste dt { flex: 0 0 200px; white-space: nowrap; font-weight: 500; color: var(--groen-moerk); }
.fremhaev-liste dd { flex: 1 1 260px; margin: 0; color: var(--tekst-blød); }
.kontakt-rk { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.slut { display: block; width: 100%; height: clamp(80px, 11vw, 160px); }
.slut .sl1, .slut .sl2 { transition: transform 1.5s var(--ease-ud); }

.site-footer { background: var(--salvie); color: #2B2A22; }
/* BD-ikonet (gennemsigtig PNG) står midt i footeren uden at gøre den højere; på smalle skærme, hvor teksterne ville ramme det, kommer det i stedet over dem */
.site-footer { position: relative; display: flow-root; }
.footer-logo { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); }
@media (max-width: 860px) {
  .footer-logo { position: static; display: block; margin: 22px auto -6px; transform: none; }
}
.footer-in {
  padding-block: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  font-size: 15px;
}

/* ---------- Scroll-animation: elementer kommer ind, når de rulles frem ---------- */

.motion [data-reveal]:not([data-shown]) { opacity: 0; transform: translateY(26px); }
.motion [data-reveal][data-shown] { transition: opacity .9s var(--ease), transform 1s var(--ease); }
.rad > [data-shown]:nth-child(2) { transition-delay: .11s; }
.rad > [data-shown]:nth-child(3) { transition-delay: .22s; }
.rad > [data-shown]:nth-child(4) { transition-delay: .33s; }

.motion [data-reveal].zoom:not([data-shown]) { transform: translateY(26px) scale(.965); }


.motion .slut:not([data-shown]) { opacity: 1; transform: none; }
.motion .slut:not([data-shown]) .sl1 { transform: translateY(70px); }
.motion .slut:not([data-shown]) .sl2 { transform: translateY(40px); }

@media (max-width: 760px) {
  .rk-p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ned, .sa, .sb { transform: none; }
}

/* ---------- Pakkevælger ---------- */

.dlg-smal { max-width: min(820px, calc(100vw - 24px)); }
.vaelger-form { margin: 18px 0 8px; }
.vq { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.vq legend { margin-bottom: 10px; padding: 0; font-size: 18px; font-weight: 500; color: var(--groen-moerk); }
.vq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.vq legend { grid-column: 1 / -1; }
.vv { position: relative; display: block; cursor: pointer; }
.vv input { position: absolute; opacity: 0; pointer-events: none; }
.vv-t { display: block; height: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--streg); border-radius: 10px; background: var(--kort); font-weight: 500; line-height: 1.35; color: var(--tekst); transition: border-color .3s ease, background-color .3s ease; }
.vv-t small { display: block; margin-top: 3px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--tekst-dæmpet); }
.vv:hover .vv-t { border-color: var(--accent); }
.vv input:checked + .vv-t { border-color: var(--accent); background: var(--salvie-lys); box-shadow: inset 0 0 0 1px var(--accent); }
.vv input:focus-visible + .vv-t { outline: 2px solid var(--accent); outline-offset: 3px; }
.vaelger-svar { margin-top: 6px; padding: 20px 22px; border-radius: 12px; background: var(--bg-lys); }
.vaelger-svar[hidden] { display: none; }
.vs-h { margin: 0 0 8px; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--groen-moerk); }
.vs-pakke { color: var(--accent); font-weight: 500; }
.vs-forklaring { margin: 0 0 8px; color: var(--tekst-blød); }
.vs-pris { margin: 0 0 18px; font-size: 15px; color: var(--tekst-dæmpet); }
.vaelger-mail-titel { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--groen-moerk); }
.vaelger-mail { display: block; width: 100%; box-sizing: border-box; padding: 14px; border: 1px solid var(--streg); border-radius: 10px; background: var(--kort); font: inherit; font-size: 16px; line-height: 1.55; color: var(--tekst); resize: vertical; }
.vaelger-mail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vaelger-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 0; }
.knap-kopier { min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--kort); font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; transition: background-color .3s ease; }
.knap-kopier:hover { background: var(--groen-moerk); }
.knap-kopier:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vk-status { font-size: 15px; color: var(--tekst-dæmpet); }

/* Find din pakke (overlay): mørkegrøn top, der bryder det hvide og slutter lige over spørgsmålene */
.dlg-smal { --pad: clamp(18px, 3.5vw, 40px); }
.dlg-smal .dlg-in { padding: 0; }
.dlg-smal .dlg-top { padding: clamp(20px, 3vw, 30px) var(--pad) 10px; background: var(--groen-moerk); }
.dlg-smal .dlg-top h2 { color: var(--kort); }
.dlg-smal .dlg-luk { border-color: rgba(251, 248, 241, .4); background: transparent; }
.dlg-smal .dlg-luk::before, .dlg-smal .dlg-luk::after { background: var(--kort); }
.dlg-smal .dlg-luk:hover { background: rgba(251, 248, 241, .14); }
.dlg-smal .dlg-luk:focus-visible { outline-color: var(--kort); }
.dlg-smal .sml-intro { max-width: none; margin: 0; padding: 0 var(--pad) 30px; background: var(--groen-moerk); color: #DCE3D3; }
.dlg-smal .vaelger-form { margin: 0; padding: 26px var(--pad) 8px; }
.dlg-smal .vaelger-svar { margin: 6px var(--pad) clamp(22px, 3vw, 32px); }

/* ---------- Andre digitale løsninger: kort pr. kategori ---------- */

.adl-lead { max-width: 640px; margin-top: clamp(24px, 3vw, 36px); }
.adl-ret { margin: clamp(32px, 4vw, 52px) 0 0; }
.adl-ret-knap {
  padding: 10px 20px;
  border: 0;
  border-radius: 14px;
  background: #CFD8BE;
  color: var(--groen-moerk);
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s ease;
}
.adl-ret-knap::after { content: "→"; margin-left: 10px; }
.adl-ret-knap:hover { background: #C0CCAB; }
.adl-ret-knap:focus-visible { outline: 2px solid var(--groen-moerk); outline-offset: 3px; }
.dlg.dlg-ret { max-width: min(640px, calc(100vw - 24px)); }
.dlg-ret-krop { padding: 22px var(--pad) clamp(24px, 3.5vw, 36px); background: var(--kort); }
.dlg-ret-krop p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--tekst-blød); }
.dlg-ret-krop h3 { margin: 28px 0 8px; color: var(--groen-moerk); font-size: 19px; font-weight: 500; }
.dlg-ret-krop .adl-ret-ai { margin: 32px 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--salvie); font-size: 15px; }

.adl-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3.4vw, 44px); }
.adl-nav a {
  padding: 8px 18px;
  border: 1px solid var(--streg);
  border-radius: 999px;
  color: var(--groen-moerk);
  font-size: 16px;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease;
}
.adl-nav a:hover,
.adl-nav a:focus-visible { background: var(--kort); border-color: var(--salvie); }

.adl { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 32px); margin-top: clamp(32px, 4vw, 52px); }

.adl-kort {
  --adl-bg: var(--bg-sand);
  --adl-tekst: var(--tekst-blød);
  --adl-h: var(--groen-moerk);
  --adl-streg: rgba(49, 67, 52, .2);
  --adl-panel: var(--sol);
  --adl-fyld: var(--accent);
  --adl-vindue: var(--kort);
  --adl-pil: #CFD8BE;
  --adl-pil-tekst: var(--groen-moerk);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(22px, 4vw, 56px);
  border-radius: 28px;
  background: var(--adl-bg);
  color: var(--adl-tekst);
  scroll-margin-top: 24px;
}
.adl-moerk {
  --adl-bg: var(--groen-moerk);
  --adl-tekst: #DDE3D3;
  --adl-h: #F7F3EA;
  --adl-streg: rgba(247, 243, 234, .22);
  --adl-panel: #3F5443;
  --adl-fyld: #BCC8B0;
  --adl-vindue: #2A3B2D;
  --adl-pil: #BCC8B0;
  --adl-pil-tekst: #243427;
}
.adl-salvie {
  --adl-bg: var(--salvie-lys);
  --adl-panel: var(--salvie);
  --adl-fyld: var(--groen-moerk);
  --adl-pil: #F7F3EA;
  --adl-pil-tekst: var(--groen-moerk);
}
.adl-vend { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.adl-vend .adl-billede { order: 2; }

.adl-billede {
  display: grid;
  place-items: center;
  align-self: start;
  position: sticky;
  top: 24px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: var(--adl-panel);
  color: var(--adl-h);
}
.adl-billede svg, .adl-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.adl-moerk .adl-billede { color: #DDE3D3; }

.adl-indhold h2 { color: var(--adl-h); font-size: clamp(30px, 3.2vw, 44px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
.adl-intro { margin-top: 12px; max-width: 560px; font-size: 18px; color: var(--adl-tekst); }
.adl-liste { margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; list-style: none; }

.adl-erfaring {
  margin-top: 20px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--adl-fyld);
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--adl-tekst);
}

/* Prisen står i en lysere grøn kapsel; i smalle kort kommer den lige under overskriften */
.adl-indhold { container-type: inline-size; }
.adl-punkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titel" "pris" "tekst";
  justify-items: start;
  align-content: start;
  gap: 6px 24px;
  padding: 20px 0 22px;
  border-top: 1px solid var(--adl-streg);
}
.adl-punkt h3 { grid-area: titel; margin: 0; color: var(--adl-h); font-size: 20px; font-weight: 500; line-height: 1.3; }
.adl-punkt > p:not(.adl-pris) { grid-area: tekst; margin: 4px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.55; }
.adl-pris {
  grid-area: pris;
  margin: 0;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--adl-pil);
  color: var(--adl-pil-tekst);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.adl-pris span { display: block; white-space: nowrap; }
.adl-pris small { display: block; font-size: 14px; font-weight: 400; opacity: .85; }
@container (min-width: 440px) {
  .adl-punkt {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titel pris" "tekst tekst";
    justify-items: stretch;
    align-items: start;
  }
  .adl-pris { justify-self: end; text-align: right; }
}
@container (min-width: 530px) {
  .adl-punkt.adl-flere { grid-template-areas: "titel pris" "tekst pris"; }
  .adl-punkt.adl-flere > p:not(.adl-pris) { max-width: 38ch; }
}

/* Softwarekortet: dashboardet står centreret øverst, teksten og priserne under det */
.adl-top { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.5vw, 48px); }
.adl-skaerm { justify-self: center; width: min(100%, 820px); padding-top: 6px; }
.adl-skaerm img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), box-shadow .55s ease;
}
.adl-skaerm:hover img { transform: translateY(-10px) scale(1.035); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.adl-top .adl-indhold { width: 100%; }
.adl-top .adl-indhold > h2 { text-align: center; }
.adl-top .adl-intro { margin-inline: auto; text-align: center; }
.adl-top .adl-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
@media (max-width: 900px) {
  .adl-top .adl-liste { grid-template-columns: minmax(0, 1fr); }
}

/* I kort med to kolonner er hvert punkt smallere end kortet: prisen står ved overskriften, og teksten fylder hele bredden */
.adl-top .adl-punkt.adl-flere { grid-template-areas: "titel pris" "tekst tekst"; }
.adl-top .adl-punkt.adl-flere > p:not(.adl-pris) { max-width: 56ch; }

/* Video og lyd øverst i kortet "Grafik, musik og video" */
.adl-top .adl-erfaring { margin-inline: auto; }
.adl-medier { width: 100%; }
.adl-klip-raekke { display: flex; gap: 12px; justify-content: center; align-items: flex-start; }
.adl-klip {
  display: block;
  min-width: 0;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  background: var(--adl-panel);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(49, 67, 52, .18);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s ease;
}
.adl-lodret { flex: 0.5625 1 0; aspect-ratio: 9 / 16; }
.adl-vandret { flex: 1.7778 1 0; aspect-ratio: 16 / 9; }
.adl-klip:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 36px rgba(49, 67, 52, .26); }
.adl-klip:focus-visible { outline: 2px solid var(--adl-h); outline-offset: 3px; }

.adl-fuld { margin: 22px 0 0; text-align: center; }
.adl-fuld-knap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1px solid var(--adl-streg);
  border-radius: 999px;
  background: transparent;
  color: var(--adl-h);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s ease;
}
.adl-fuld-knap::before { content: "▶"; font-size: 11px; }
.adl-fuld-knap:hover { background: rgba(255, 255, 255, .45); }
.adl-fuld-knap:focus-visible { outline: 2px solid var(--adl-h); outline-offset: 3px; }
.dlg.dlg-video { max-width: min(460px, calc(100vw - 24px)); }
.dlg-video .dlg-video-krop { display: grid; place-items: center; padding: 16px var(--pad) clamp(18px, 3vw, 26px); background: var(--kort); }
.dlg-video video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 170px); aspect-ratio: 9 / 16; border-radius: 12px; background: #000; }

.adl-lyd-panel { margin-top: clamp(32px, 4vw, 52px); padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; background: var(--adl-panel); }
.adl-lyd-h { margin: 0; color: var(--adl-h); font-size: 20px; font-weight: 500; }
.adl-lyd-sub { margin: 4px 0 0; font-size: 15px; }
.adl-spiller { margin: 14px 0 0; padding: 0; list-style: none; }
/* Lille afspiller under et punkt i en kategori */
.adl-punkt > .adl-spiller { grid-column: 1 / -1; width: 100%; margin: 12px 0 0; padding: 4px clamp(12px, 3vw, 18px); box-sizing: border-box; border-radius: 16px; background: var(--adl-panel); }
.adl-spiller-lille .adl-spor { border-top: 0; }
.adl-spor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "knap titel tid" "knap soeg soeg";
  align-items: center;
  gap: 2px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--adl-streg);
}
.adl-spil {
  grid-area: knap;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--adl-fyld);
  color: var(--adl-bg);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.adl-spil:hover { transform: scale(1.08); }
.adl-spil:focus-visible { outline: 2px solid var(--adl-h); outline-offset: 3px; }
.adl-spil svg { width: 22px; height: 22px; fill: currentColor; }
.adl-spil .ik-s, .adl-spil[aria-pressed="true"] .ik-p { display: none; }
.adl-spil[aria-pressed="true"] .ik-s { display: block; }
.adl-spor-titel { grid-area: titel; min-width: 0; color: var(--adl-h); font-weight: 500; line-height: 1.3; }
.adl-tid { grid-area: tid; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adl-soeg { grid-area: soeg; width: 100%; margin: 0; accent-color: var(--adl-fyld); }
.adl-soeg:disabled { opacity: .55; }

@media (min-width: 701px) and (max-width: 900px) {
  .adl-klip-raekke { flex-wrap: wrap; }
  .adl-vandret { flex: 0 0 calc(50% - 6px); order: 1; }
  .adl-lodret { flex: 0 0 calc(27% - 6px); order: 2; }
}
@media (max-width: 700px) {
  .adl-klip-raekke { flex-wrap: wrap; }
  .adl-lodret { flex: 0 0 calc(50% - 6px); order: 1; }
  .adl-vandret { flex: 0 0 100%; order: 2; }
}

.adl-slut { max-width: 640px; padding-top: clamp(48px, 6vw, 88px); }
.adl-slut h2 { color: var(--groen-moerk); font-size: clamp(28px, 3vw, 40px); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.adl-slut > p { margin-top: 12px; font-size: 18px; color: var(--tekst-dæmpet); }
.adl-slut > p:has(.knap) { margin-top: 26px; }
.adl-note { margin-top: 28px !important; font-size: 14px !important; line-height: 1.55; color: #766B5F !important; }
.adl-note a { color: var(--accent); }

@media (max-width: 860px) {
  .adl-kort, .adl-vend { grid-template-columns: minmax(0, 1fr); }
  .adl-billede, .adl-vend .adl-billede { order: 0; position: static; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .adl-kort { border-radius: 22px; }
  .adl-pris span { white-space: normal; }
}

/* Små animationer i billedfladerne (slås fra ved reduceret bevægelse) */
.adl-billede svg * { transform-box: fill-box; transform-origin: center; }
.adl-ring { animation: adl-ring 3.6s ease-out infinite; opacity: 0; }
.adl-ring2 { animation-delay: 1.8s; }
.adl-flyd { animation: adl-flyd 6s ease-in-out infinite; }
.adl-flyd2 { animation-duration: 7.5s; animation-delay: -2s; }
.adl-flyd3 { animation-duration: 8s; animation-delay: -4s; }
.adl-bar { transform-origin: 50% 100%; animation: adl-bar 4.8s var(--ease) infinite; }
.adl-b2 { animation-delay: .25s; }
.adl-b3 { animation-delay: .5s; }
.adl-b4 { animation-delay: .75s; }
.adl-linje { stroke-dasharray: 1; animation: adl-linje 4.8s ease-in-out infinite; }
.adl-lyd { animation: adl-lyd 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes adl-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes adl-flyd { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes adl-bar { 0%, 12% { transform: scaleY(.12); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.12); } }
@keyframes adl-linje { 0%, 20% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes adl-lyd { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }