/* EUDR-tjek — koncept "Konnossementet" (fragtdokumentet / bill of lading), 8. okt. 2026.
   Lys stålgrå grund og hvidt papir, marineblå tekst, containerorange som eneste accent.
   Grøn og rød bruges KUN som status pr. jordlod. Intet mørkt tema, ingen gradienter. */
:root {
  --grund: #EEF2F6;
  --papir: #FFFFFF;
  --blaek: #0B2545;
  --blaek-2: #3D506A;
  --linje: #C9D3DF;
  --linje-2: #8FA2B8;
  --accent: #E4572E;
  --accent-2: #CC4520;
  --ok: #1D7347;
  --ok-bg: #E2F1E8;
  --fejl: #B3261E;
  --fejl-bg: #FBE7E5;
  --overskrift: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --tekst: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maks: 1160px;
  --gutter: 24px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--blaek); font: 400 17px/1.6 var(--tekst); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--blaek); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }
h1, h2, h3 { font-family: var(--overskrift); font-weight: 800; line-height: .98; letter-spacing: .005em; margin: 0 0 .4em; text-transform: uppercase; hyphens: manual; overflow-wrap: break-word; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.55rem; }
p { margin: 0 0 1em; }
.mono, code { font-family: var(--mono); }
.wrap { max-width: var(--maks); margin: 0 auto; padding: 0 var(--gutter); }
.small { font-size: .9rem; color: var(--blaek-2); }
.skjult { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- top ---------- */
.top { background: var(--papir); border-bottom: 2px solid var(--blaek); position: sticky; top: 0; z-index: 20; }
.top__in { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 1.6rem/1 var(--overskrift); text-transform: uppercase; text-decoration: none; color: var(--blaek); letter-spacing: .02em; }
.logo__mark { width: 26px; height: 18px; background: var(--accent); border: 2px solid var(--blaek); position: relative; flex: none; }
.logo__mark::before, .logo__mark::after { content: ""; position: absolute; top: 2px; bottom: 2px; width: 2px; background: var(--blaek); }
.logo__mark::before { left: 6px; } .logo__mark::after { right: 6px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: .95rem; }
.nav a { text-decoration: none; font-weight: 500; }
.nav a:hover { text-decoration: underline; }
.top__cta { flex: none; }

/* ---------- knapper ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border: 2px solid var(--blaek); background: var(--accent); color: var(--blaek); font: 600 1rem/1.2 var(--tekst); text-decoration: none; cursor: pointer; box-shadow: 3px 3px 0 var(--blaek); transition: transform .08s, box-shadow .08s; }
.btn:hover { color: var(--blaek); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--blaek); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn--top { min-height: 40px; padding: 8px 16px; font-size: .92rem; box-shadow: 2px 2px 0 var(--blaek); }
.btn--hvid { background: var(--papir); }
.btn--lille { min-height: 40px; padding: 8px 16px; font-size: .95rem; }
.pil { font-family: var(--mono); }

/* ---------- hero ---------- */
.hero { padding: 56px 0 0; }
.hero__top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.kicker { font: 500 .8rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blaek-2); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kicker b { color: var(--accent-2); font-weight: 500; }
.hero h1 { margin: 0; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead { font-size: 1.15rem; margin-bottom: 22px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.tillid { font-size: .88rem; color: var(--blaek-2); margin: 18px 0 0; }

/* ---------- konnossementet (dokumentet) ---------- */
.bl { position: relative; background: var(--papir); border: 2px solid var(--blaek); box-shadow: 6px 6px 0 var(--blaek); margin-bottom: -70px; z-index: 2; }
.bl__titel { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 22px; border-bottom: 2px solid var(--blaek); flex-wrap: wrap; }
.bl__titel strong { font: 800 1.35rem/1 var(--overskrift); text-transform: uppercase; letter-spacing: .06em; }
.bl__titel span { font: 500 .8rem/1.2 var(--mono); color: var(--blaek-2); }
.bl__felter { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid var(--blaek); }
.felt { padding: 10px 22px 12px; border-right: 1px solid var(--linje); min-width: 0; }
.felt:last-child { border-right: 0; }
.felt__l { display: block; font: 500 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blaek-2); margin-bottom: 4px; }
.felt__v { font-weight: 600; font-size: .98rem; line-height: 1.35; }
.stempel { position: absolute; top: -20px; right: 30px; border: 3px solid var(--accent); color: var(--accent); font: 800 1.15rem/1 var(--overskrift); letter-spacing: .12em; padding: 6px 12px 5px; transform: rotate(-7deg); background: var(--papir); text-transform: uppercase; pointer-events: none; }
.rk { display: grid; grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.25fr) 76px minmax(0, 1.3fr); gap: 0 18px; align-items: center; padding: 12px 22px; border-bottom: 1px dashed var(--linje); }
.rk--hoved { font: 500 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blaek-2); padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linje); }
.rk__nr { font: 500 .85rem/1 var(--mono); color: var(--blaek-2); }
.rk__lod strong { display: block; font: 500 .95rem/1.3 var(--mono); }
.rk__lod span { display: block; font-size: .82rem; color: var(--blaek-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk__koord { font: 400 .95rem/1.3 var(--mono); overflow-wrap: anywhere; }
.rk__ha { font: 400 .92rem/1 var(--mono); text-align: right; }
.rk__ha small { font-size: .75rem; color: var(--blaek-2); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; line-height: 1.25; padding: 5px 10px 5px 8px; border: 1.5px solid; }
.status::before { content: ""; width: 9px; height: 9px; flex: none; background: currentColor; }
.status--ok { color: var(--ok); background: var(--ok-bg); }
.status--fejl { color: var(--fejl); background: var(--fejl-bg); }
.status--advarsel { color: var(--blaek); background: var(--papir); border-style: dashed; }
.status--advarsel::before { background: transparent; border: 2px solid currentColor; width: 9px; height: 9px; }
.bl__fod { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 18px 22px 22px; }
.bl__sum { font: 500 .85rem/1.5 var(--mono); color: var(--blaek-2); margin: 0; }
.bl__sum b { color: var(--blaek); font-weight: 500; }
.bl__note { font-size: .82rem; color: var(--blaek-2); padding: 0 22px 18px; margin: 0; }

/* ---------- sektioner ---------- */
.sek { padding: 84px 0; }
.sek--hvid { background: var(--papir); border-top: 2px solid var(--blaek); border-bottom: 2px solid var(--blaek); }
.sek--efter-bl { padding-top: 140px; }
.sek__hoved { max-width: 760px; margin-bottom: 36px; }
.sek__hoved p { font-size: 1.08rem; color: var(--blaek-2); }
.etiket { display: inline-block; font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--blaek); color: var(--papir); padding: 6px 9px; margin-bottom: 16px; }

/* gratis tjek: to fragtsedler */
.sedler { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.seddel { background: var(--papir); border: 2px solid var(--blaek); border-left: 10px solid var(--accent); padding: 22px 24px 24px; }
.seddel h3 { margin-bottom: .2em; }
.seddel p { color: var(--blaek-2); font-size: .97rem; }
.form { display: grid; gap: 8px; }
.form label, .lbl { font: 500 .74rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blaek-2); margin-top: 8px; }
.form input[type=text], .form input[type=email], .form input[type=file], .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1rem/1.3 var(--tekst); color: var(--blaek); background: var(--papir); border: 1.5px solid var(--linje-2); border-radius: 0; }
.form input.mono { font-family: var(--mono); }
.form input:focus, .form select:focus { border-color: var(--blaek); outline: 2px solid var(--accent); outline-offset: 0; }
.form .to { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .to > div { display: grid; gap: 8px; }
.valg { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .95rem; padding: 4px 0; }
.valg label { font: 400 .95rem/1.4 var(--tekst); text-transform: none; letter-spacing: 0; color: var(--blaek); margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.form .btn { margin-top: 14px; justify-self: start; }
.samtykke { display: flex !important; gap: 10px; align-items: flex-start; font: 400 .92rem/1.45 var(--tekst) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--blaek) !important; }
.samtykke input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* rute: sådan virker det */
.rute { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.rute::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; border-top: 2px dashed var(--linje-2); }
.rute li { position: relative; padding-right: 32px; }
.rute__nr { display: grid; place-items: center; width: 60px; height: 60px; background: var(--accent); border: 2px solid var(--blaek); font: 800 1.9rem/1 var(--overskrift); margin-bottom: 18px; position: relative; }
.rute h3 { font-size: 1.45rem; }
.rute p { color: var(--blaek-2); font-size: .98rem; }

/* lastliste: leverancen */
.last { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.lastliste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--blaek); }
.lastliste li { display: grid; grid-template-columns: 38px 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px dashed var(--linje-2); }
.lastliste .n { font: 500 .85rem/1.5 var(--mono); color: var(--accent-2); grid-column: 1; grid-row: 1 / span 2; }
.lastliste code, .lastliste a:has(code) { grid-column: 2; font: 500 .95rem/1.4 var(--mono); overflow-wrap: anywhere; }
.lastliste span { color: var(--blaek-2); font-size: .95rem; grid-column: 2; }
.udsnit { background: var(--papir); border: 2px solid var(--blaek); padding: 18px 20px; }
.udsnit .rk { padding: 12px 0; display: block; }
.udsnit .rk__lod { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.udsnit .rk__lod span { white-space: normal; }
.udsnit p { margin: 10px 0 0; font-size: .9rem; color: var(--blaek-2); }

/* pris: fragtmærket */
.pris { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.maerke { position: relative; background: var(--papir); border: 2px solid var(--blaek); padding: 34px 32px 30px 76px; box-shadow: 6px 6px 0 var(--blaek); }
.maerke::before { content: ""; position: absolute; left: 26px; top: 34px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blaek); background: var(--grund); }
.maerke__navn { font: 500 .78rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blaek-2); margin: 0 0 6px; }
.maerke__beloeb { font: 800 4.6rem/.9 var(--overskrift); margin: 0; }
.maerke__enhed { margin: 8px 0 18px; color: var(--blaek-2); }
.flueben { list-style: none; padding: 0; margin: 0 0 22px; }
.flueben li { position: relative; padding: 6px 0 6px 28px; border-bottom: 1px dashed var(--linje); }
.flueben li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }

/* tillid */
.fakta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--blaek); border-bottom: 2px solid var(--blaek); }
.fakta div { padding: 22px 22px 20px 0; border-right: 1px solid var(--linje); }
.fakta div + div { padding-left: 22px; }
.fakta div:last-child { border-right: 0; }
.fakta strong { display: block; font: 800 1.35rem/1.05 var(--overskrift); text-transform: uppercase; margin-bottom: 6px; }
.fakta span { font-size: .92rem; color: var(--blaek-2); }

/* faq */
.faq { border-top: 2px solid var(--blaek); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linje-2); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; font-weight: 600; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 1.6rem/1 var(--mono); color: var(--accent-2); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 18px; color: var(--blaek-2); max-width: 760px; }

/* afslutning */
.slut { text-align: left; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end; }
.slut h2 { font-size: clamp(2.3rem, 5vw, 4rem); margin: 0; }

/* ---------- undersider ---------- */
.side-hoved { padding: 56px 0 30px; }
.side-hoved .lead { font-size: 1.15rem; max-width: 760px; color: var(--blaek-2); }
.prosa { max-width: 780px; }
.prosa h2 { font-size: 2rem; margin-top: 1.6em; }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: .4em; }
.papir { background: var(--papir); border: 2px solid var(--blaek); padding: 26px 28px; }
.alarm { border: 2px solid var(--fejl); background: var(--fejl-bg); color: var(--fejl); padding: 12px 16px; font-weight: 500; margin: 0 0 16px; }
.besked { border: 2px dashed var(--blaek); padding: 12px 16px; margin: 0 0 16px; background: var(--papir); }
.svar { display: grid; gap: 22px; }
.svar__linje { display: grid; grid-template-columns: 180px 1fr; gap: 6px 20px; padding: 10px 0; border-bottom: 1px dashed var(--linje); }
.svar__linje dt { font: 500 .74rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blaek-2); }
.svar__linje dd { margin: 0; }
.stort-svar { font: 800 2.4rem/1 var(--overskrift); text-transform: uppercase; margin: 0 0 8px; }
.stort-svar--ja { color: var(--accent-2); }
.noter { list-style: none; padding: 0; margin: 8px 0 0; }
.noter li { padding: 6px 0 6px 18px; position: relative; font-size: .95rem; }
.noter li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; }
.noter .n-fejl::before { background: var(--fejl); }
.noter .n-advarsel::before { border: 2px solid var(--blaek); width: 8px; height: 8px; }
.noter .n-info::before { background: var(--linje-2); }
.taelling { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--blaek); background: var(--papir); }
.taelling div { padding: 16px 18px; border-right: 1px solid var(--linje); }
.taelling div:last-child { border-right: 0; }
.taelling b { display: block; font: 800 2.6rem/1 var(--overskrift); }
.taelling span { font-size: .88rem; color: var(--blaek-2); }
.taelling .t-fejl b { color: var(--fejl); } .taelling .t-ok b { color: var(--ok); }
.slor { position: relative; }
.slor__tekst { border: 2px dashed var(--blaek); background: var(--grund); padding: 18px 20px; margin-top: -1px; }
.koeb { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.filer { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }

/* ---------- bund ---------- */
.fod { background: var(--papir); border-top: 2px solid var(--blaek); padding: 48px 0 28px; margin-top: 0; font-size: .93rem; }
.fod__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.fod h4 { font: 500 .74rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blaek-2); margin: 4px 0 10px; }
.fod ul { list-style: none; padding: 0; margin: 0; }
.fod li { margin-bottom: 6px; }
.fod__om { color: var(--blaek-2); margin-top: 12px; max-width: 320px; }
.fod__jura { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--linje); display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--blaek-2); font-size: .85rem; }

/* ---------- mobil ---------- */
@media (max-width: 980px) {
  .nav { display: none; }
  .top__cta { margin-left: auto; }
  .hero__top, .last, .pris, .slut, .koeb { grid-template-columns: 1fr; gap: 26px; }
  .bl__felter { grid-template-columns: 1fr 1fr; }
  .felt:nth-child(2) { border-right: 0; }
  .felt:nth-child(-n+2) { border-bottom: 1px solid var(--linje); }
  .fakta, .taelling { grid-template-columns: 1fr 1fr; }
  .fakta div:nth-child(2) { border-right: 0; }
  .fakta div:nth-child(3) { padding-left: 0; }
  .fakta div:nth-child(-n+2), .taelling div:nth-child(-n+2) { border-bottom: 1px solid var(--linje); }
  .taelling div:nth-child(2) { border-right: 0; }
  .fod__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .top__in { min-height: 58px; gap: 12px; }
  .logo { font-size: 1.35rem; }
  .btn--top { padding: 6px 10px; font-size: .85rem; }
  .hero { padding-top: 34px; }
  .stempel { top: -27px; right: 10px; font-size: .95rem; }
  .hero h1 br { display: none; }
  .bl { box-shadow: 4px 4px 0 var(--blaek); }
  .bl__titel, .felt, .bl__fod, .bl__note { padding-left: 14px; padding-right: 14px; }
  .rk { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "nr lod ha" "nr koord koord" "nr st st"; gap: 4px 10px; padding: 12px 14px; }
  .rk--hoved { display: none; }
  .rk__nr { grid-area: nr; align-self: start; padding-top: 3px; }
  .rk__lod { grid-area: lod; min-width: 0; }
  .rk__koord { grid-area: koord; }
  .rk__ha { grid-area: ha; align-self: start; }
  .rk__st { grid-area: st; margin-top: 4px; }
  .udsnit .rk { display: block; }
  .udsnit .rk__lod { margin-bottom: 8px; }
  .pris { gap: 40px; }
  .sedler, .rute { grid-template-columns: 1fr; gap: 26px; }
  .rute::before { left: 29px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dashed var(--linje-2); }
  .rute li { padding: 0 0 0 80px; min-height: 60px; }
  .rute__nr { position: absolute; left: 0; top: 0; }
  .sek { padding: 60px 0; }
  .sek--efter-bl { padding-top: 120px; }
  .form .to { grid-template-columns: 1fr; }
  .maerke { padding: 28px 20px 24px 60px; }
  .maerke::before { left: 18px; top: 30px; }
  .maerke__beloeb { font-size: 3.6rem; }
  .svar__linje { grid-template-columns: 1fr; }
  .fod__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
/* 8. okt. 2026 (brief B): hvad man får, og hvad det koster ikke at have det */
.koster { margin: 18px 0 14px; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--papir); }
.koster p { margin: 6px 0 0; }
.koeb__start { margin: 0 0 8px; }
.koeb-kort { margin-top: 22px; padding: 14px 16px; border: 1.5px dashed var(--linje-2); background: var(--grund); }
.koeb-kort p { margin: 0 0 6px; }