/* =====================================================================
   Rezycl · fælles stilark (design V1 «Opstrammet»)
   Samme opbygning og farver som den gamle side, men strammet op:
   én skrift (Figtree), én afstandsskala, ét 12-kolonners gitter.
   Forsidens top («hero») har sit eget stilark: hero.css.
   ===================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("../fonte/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Farver: hvid · lys grå · mørk antracit · Rezycl-grøn */
  --gronn: #008137;          /* mærkefarven fra logoet (5,0:1 på hvid) */
  --gronn-moerk: #00692c;    /* hover på grønne knapper */
  --gronn-lys: #4fbf7b;      /* grøn på mørk baggrund (7,1:1) */
  --gronn-tint: #e9f4ed;     /* kvitteringsflade */
  --antracit: #1c2023;       /* mørke sektioner */
  --antracit-dyb: #15181a;   /* footer */
  --antracit-felt: #22272a;  /* formularfelter på mørk */
  --graa: #f3f4f1;           /* lys grå sektion */
  --linje: #dcdfda;
  --linje-moerk: rgba(255, 255, 255, 0.14);
  --tekst: #15181a;
  --tekst-broed: #33393c;
  --tekst-2: #5a6166;
  --tekst-inv: #ffffff;
  --tekst-inv-2: #a9b0b4;
  --fejl: #b42318;
  --fejl-moerk: #ff9d8f;
  --fokus: var(--gronn);

  /* Afstandsskala (4-8-12-16-24-32-48-64-96-128) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --sek: clamp(72px, 8.5vw, 128px);          /* lodret luft i sektioner */
  --kant: clamp(20px, 4vw, 48px);            /* sidemargin */
  --maks: 1280px;
  --spalte: clamp(16px, 2.2vw, 32px);        /* gitterets mellemrum */
  --top-h: 76px;                             /* headerens højde */
  --bjaelke-h: 0px;                          /* kontaktbjælken på telefon (sættes ≤ 640 px) */

  /* Typografisk skala */
  --t-xs: 0.8125rem;   /* 13 */
  --t-s: 0.875rem;     /* 14 */
  --t-m: 1rem;         /* 16 */
  --t-b: 1.0625rem;    /* 17 – brødtekst */
  --t-l: 1.25rem;      /* 20 – ingress */
  --t-h3: 1.5rem;      /* 24 */
  --t-h2: clamp(2rem, 1.45rem + 1.9vw, 3.125rem);        /* 32 → 50 */
  --t-h1: clamp(2.5rem, 1.25rem + 4.3vw, 4.875rem);      /* 40 → 78 */
  --t-xl: clamp(2.875rem, 1.2rem + 5.6vw, 6.25rem);      /* 46 → 100 */

  --r: 4px;
  --font: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Grundlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px);
  /* Mens cookie-baren står der, må et element med tastaturfokus ikke gemme sig bag den */
  scroll-padding-bottom: calc(var(--cookie-h, 0px) + var(--bjaelke-h) + 16px); }
body {
  margin: 0;
  background: #fff;
  color: var(--tekst);
  font-family: var(--font);
  font-size: var(--t-b);
  line-height: 1.6;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.laast, html.laast body { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, address, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
b, strong { font-weight: 650; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
/* Lange sammensatte ord (fx «affaldshåndtering») må ikke skubbe siden ud til siden.
   Kun som nødløsning: ordet brydes først, når det ikke kan stå på én linje (ingen automatisk orddeling). */
h1, h2, h3, h4 { overflow-wrap: break-word; }
/* Nogle oversættelser har hele overskriften i <strong> – vægten styres af overskriften, ikke af mærket */
h1 strong, h2 strong, h3 strong, h4 strong, h1 b, h2 b, h3 b, h4 b { font-weight: inherit; }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ikon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ikon--lille { width: 16px; height: 16px; stroke-width: 2; }

.wrap { width: 100%; max-width: calc(var(--maks) + 2 * var(--kant)); margin-inline: auto; padding-inline: var(--kant); }
.gitter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); }

/* Synlighed pr. skærmstørrelse, hvor indholdet på den gamle side var forskelligt
   (fx en kortere overskrift på telefon). «Mobil» = højst 640 px bred. */
@media (max-width: 640px) { .vis-desktop { display: none !important; } }
@media (min-width: 641px) { .vis-mobil { display: none !important; } }

/* Skip-link */
.spring {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px; background: #fff; color: var(--tekst); font-weight: 600;
  border-radius: var(--r); transform: translateY(-160%); transition: transform .15s;
}
.spring:focus-visible { transform: none; }
/* «Go to Top» med mus/touch flytter fokus til headeren (site.js) – den skal ikke have en ramme */
.top:focus, .top:focus-visible { outline: none; }

/* ---------- Knapper ---------- */
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--r);
  font-size: var(--t-m); font-weight: 600; line-height: 1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knap--gronn { background: var(--gronn); color: #fff; }
.knap--gronn:hover { background: var(--gronn-moerk); }
.knap--omrids { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.knap--omrids:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.knap--lille { min-height: 38px; padding: 0 16px; font-size: var(--t-s); }
.knap[aria-busy="true"] { opacity: .7; cursor: progress; }

.pil-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gronn); font-weight: 600; text-decoration: none;
  padding-block: 6px; border-bottom: 1.5px solid currentColor;
}
.pil-link:hover { color: var(--gronn-moerk); }

/* =====================================================================
   Header
   ===================================================================== */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: #fff;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.top__inner { display: flex; align-items: center; height: var(--top-h); gap: var(--s5); }
.logo { display: block; flex: none; width: 124px; margin-right: var(--s5); }
.logo img { width: 124px; height: auto; }
.logo__moerk { display: none !important; }

/* Fast (hvid) header: efter scroll, når en menu er åben, eller altid på sider uden mørk top */
.top.er-fast { background: #fff; color: var(--tekst); box-shadow: 0 1px 0 var(--linje); }
.top.er-fast .logo__lys { display: none; }
.top.er-fast .logo__moerk { display: block !important; }
.top:not(.er-fast) { --fokus: #fff; }
/* Sider uden mørk top (juridiske sider, 404): hvid header allerede før site.js har kørt – ingen hvid tekst på lys top */
.top[data-altid-fast] { background: #fff; color: var(--tekst); box-shadow: 0 1px 0 var(--linje); --fokus: var(--gronn); }
.top[data-altid-fast] .logo__lys { display: none; }
.top[data-altid-fast] .logo__moerk { display: block !important; }

.nav { flex: 1; }
.nav__liste { display: flex; align-items: center; gap: var(--s1); }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border: 0; background: none;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  border-radius: var(--r);
}
.nav__link:hover, .nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.nav__knap .ikon { transition: transform .2s; }
.nav__knap[aria-expanded="true"] .ikon { transform: rotate(180deg); }

/* Mega-menu (desktop, engelsk: branchernes beskrivelser) */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; color: var(--tekst);
  border-top: 1px solid var(--linje); box-shadow: 0 1px 0 var(--linje), 0 24px 40px -24px rgba(21, 24, 26, 0.18);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s;
}
.nav__punkt--under.er-aaben .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s var(--ease); }
.mega__gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalte); padding-block: var(--s6) var(--s8); }
.mega__punkt {
  display: block; padding: var(--s5) var(--s5) var(--s5) 0; text-decoration: none;
  border-top: 2px solid var(--linje); transition: border-color .15s;
}
.mega__punkt:hover, .mega__punkt:focus-visible, .mega__punkt[aria-current="page"] { border-top-color: var(--gronn); }
.mega__titel { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; }
.mega__titel .ikon { color: var(--gronn); }
.mega__tekst { display: block; margin-top: var(--s2); font-size: 0.9375rem; line-height: 1.55; color: var(--tekst-2); max-width: 44ch; }

/* Lille undermenu (de andre sprog: kun branchernes navne, som på den gamle side) */
.nav__punkt--under { position: relative; }
.nav__punkt--mega { position: static; }
.undermenu {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 220px;
  background: #fff; color: var(--tekst); border: 1px solid var(--linje); border-radius: var(--r);
  box-shadow: 0 12px 32px -12px rgba(21, 24, 26, 0.25); padding: 6px;
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s;
}
.nav__punkt--under.er-aaben .undermenu { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s var(--ease); }
.undermenu a {
  display: block; padding: 10px 12px; border-radius: 3px;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.undermenu a:hover { background: var(--graa); }
.undermenu a[aria-current="page"] { color: var(--gronn); }

.top__hoejre { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }
.top__login { font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding: 10px 4px; }
.top__login:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* Sprogvælger */
.sprog { position: relative; }
.sprog__knap {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  font-size: var(--t-s); font-weight: 600; letter-spacing: 0.04em;
}
.sprog__knap:hover { border-color: currentColor; }
.sprog__knap img, .sprog__liste img, .sprog-raekke img { width: 20px; height: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.sprog__knap .ikon { transition: transform .2s; }
.sprog__knap[aria-expanded="true"] .ikon { transform: rotate(180deg); }
.sprog__liste {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 176px;
  background: #fff; color: var(--tekst); border: 1px solid var(--linje); border-radius: var(--r);
  box-shadow: 0 12px 32px -12px rgba(21, 24, 26, 0.25); padding: 6px;
}
.sprog__liste a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 3px;
  font-size: var(--t-s); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.sprog__liste a:hover { background: var(--graa); }
.sprog__liste a[aria-current="true"] { color: var(--gronn); font-weight: 600; }

.knap--top { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.menuknap { display: none; }
.kun-mobil { display: none; }

/* =====================================================================
   Sektioner (forsidens komponenter – genbruges på undersiderne)
   ===================================================================== */
.sek { padding-block: var(--sek); }

/* Tekst + billede («Take control») */
.kontrol .gitter { align-items: start; }
.kontrol__titel { grid-column: 1 / span 7; max-width: 14ch; }
.kontrol__tekst { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--s6); }
.broed { color: var(--tekst-broed); max-width: 33rem; }   /* ≈ 66 tegn pr. linje ved 17 px */
.broed p + p { margin-top: var(--s4); }
.broed__ingress { font-size: var(--t-l); line-height: 1.5; color: var(--tekst); }
.broed b, .broed strong { color: var(--tekst); }
.kontrol .knap { margin-top: var(--s7); }
/* Billedet centreres lodret ud for teksten (som på den gamle side), så der ikke står et tomt felt under det */
.kontrol__billede { grid-column: 8 / span 5; grid-row: 2; margin-top: var(--s6); align-self: center; }
.kontrol__billede img { width: 100%; max-width: 560px; margin-left: auto; }

/* Foto til kanten + tekst med tjekliste («Challenges») */
.udfordring { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--graa); }
.udfordring__foto { position: relative; min-height: 560px; min-width: 0; }
.udfordring__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.udfordring__tekst {
  padding-block: var(--sek);
  padding-left: clamp(32px, 6vw, 96px);
  padding-right: max(var(--kant), calc((100vw - var(--maks)) / 2));
  align-self: center;
}
.udfordring h2 { max-width: 18ch; }
.udfordring .knap { margin-top: var(--s7); }

/* Tjeklister */
.tjek { margin-top: var(--s6); display: grid; gap: var(--s4); max-width: 46ch; }
.tjek li { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--s3); align-items: start; line-height: 1.5; }
.tjek .ikon { width: 20px; height: 20px; margin-top: 2px; color: var(--gronn); stroke-width: 2.25; }
.tjek--moerk .ikon { color: var(--gronn-lys); }

/* Løsningen (mørk) med tre produktbilleder */
.loesning { background: var(--antracit); color: var(--tekst-inv); --fokus: #fff; }
.loesning__top { align-items: start; }
.loesning__titel { grid-column: 1 / span 7; font-size: var(--t-xl); line-height: 0.98; letter-spacing: -0.035em; }
.loesning .tjek { grid-column: 8 / span 5; margin-top: var(--s3); max-width: none; color: #e7eaeb; }
.produkter {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--spalte);
  margin-top: var(--s9); padding-top: var(--s8); border-top: 1px solid var(--linje-moerk);
}
.produkt img { width: 100%; max-width: 420px; }
.produkt figcaption { margin-top: var(--s5); font-size: var(--t-m); line-height: 1.6; color: var(--tekst-inv-2); max-width: 40ch; }
.loesning .knap { margin-top: var(--s8); }

/* Opfordring («Ready to get on board?») */
.klar { background: var(--graa); padding-block: clamp(64px, 7vw, 104px); }
.klar .gitter { align-items: end; }
.klar__titel { grid-column: 1 / span 6; }
.samlet { display: inline-block; text-wrap: balance; }
.klar__hoejre { grid-column: 8 / span 5; }
.klar__hoejre p { color: var(--tekst-broed); max-width: 44ch; }
.klar__hoejre b, .klar__hoejre strong { color: var(--tekst); }
.klar .knap { margin-top: var(--s5); }

/* Brancher */
.brancher__gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--spalte); margin-top: var(--s7); }
.branche { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--s5); border-top: 1px solid var(--linje); }
.branche h3 { color: var(--gronn); }
.branche p { flex: 1; margin: var(--s3) 0 var(--s5); color: var(--tekst-broed); max-width: 40ch; }

/* =====================================================================
   Undersidernes komponenter (løsningssiden, branchesiderne, «Om os»)
   Samme tokens, gitter, knapper og afstande som forsiden – intet nyt formsprog.
   Hver komponent har sine egne skærmbredde-regler lige under sig.
   ===================================================================== */

/* Overtitel: lille versal-linje over en overskrift («INCREASE EFFICIENCY:») */
.overtitel {
  margin-bottom: var(--s4);
  font-size: var(--t-s); font-weight: 650; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gronn);
}

/* ---------- Top på undersiderne: foto + mørk skygge, tekst nederst til venstre (som forsidens top) ---------- */
.sidetop {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: max(540px, min(78svh, 740px));
  padding-block: calc(var(--top-h) + var(--s9)) var(--s8);
  background: var(--antracit); color: #fff;
  --fokus: #fff;
}
/* Løsningssiden: næsten fuld skærm; bunden holder fri af cookie-baren, mens den står der */
.sidetop--hoej { min-height: max(620px, min(100svh, 900px)); padding-bottom: calc(var(--s8) + var(--cookie-bar-h, 0px)); }
.sidetop--lav { min-height: max(420px, min(56svh, 540px)); padding-bottom: var(--s7); }
.sidetop__medie { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--antracit); }
.sidetop__medie picture, .sidetop__medie img { width: 100%; height: 100%; }
.sidetop__medie img { object-fit: cover; object-position: 50% 50%; filter: saturate(.8); }
.sidetop--motiv-hoejre .sidetop__medie img { object-position: 70% 50%; }
.sidetop--motiv-venstre .sidetop__medie img { object-position: 30% 50%; }
.sidetop--motiv-top .sidetop__medie img { object-position: 50% 25%; }
.sidetop--motiv-bund .sidetop__medie img { object-position: 50% 80%; }
/* Tættere udsnit fra højre (fast beskæring, ingen bevægelse): de yderste ca. 10 % af fotoets venstre kant
   falder uden for toppen i alle bredder – også når fotoet fylder hele bredden (lave toppe) */
.sidetop--motiv-hoejre-taet .sidetop__medie img { object-position: 70% 50%; transform: scale(1.15); transform-origin: 70% 50%; }
/* Samme diskrete mørke skygge som forsidens top – for læsbarhedens skyld, ikke en farveovergang.
   Øverst (--toning-top) en ekstra mørk toning bag headeren, så den altid står på en rolig flade: på lyse
   fotos (himlen på Hospitality, @-ikonet på Kontakt) havde «Login» og sprogvælgeren ellers under 4,5:1
   i kontrast (QA1-FT-03), og på udtalelserne lyste en grøn måler lige bag logoet (QA1-D06) */
.sidetop { --toning-top: linear-gradient(180deg, rgba(9, 16, 12, 0.55) 0, rgba(9, 16, 12, 0.35) var(--top-h), rgba(9, 16, 12, 0) calc(var(--top-h) + 96px)); }
.sidetop__medie::after {
  content: ""; position: absolute; inset: 0;
  background:
    var(--toning-top),
    linear-gradient(90deg, rgba(9, 16, 12, 0.7) 0%, rgba(9, 16, 12, 0.52) 55%, rgba(9, 16, 12, 0.38) 100%),
    linear-gradient(0deg, rgba(9, 16, 12, 0.45) 0%, rgba(9, 16, 12, 0) 50%);
}
.sidetop__indhold { width: 100%; }
.sidetop__tekst { grid-column: 1 / span 8; }
.sidetop h1 { font-size: var(--t-h1); font-weight: 600; line-height: 1.02; letter-spacing: -0.028em; max-width: 17ch; }
/* Hvid (ikke grøn) på foto: lysende skærme bag teksten ville ellers give for lidt kontrast */
.sidetop__overtitel { color: rgba(255, 255, 255, 0.9); }
.sidetop__deck {
  margin-top: var(--s5); max-width: 54ch;
  font-size: var(--t-s); font-weight: 500; line-height: 1.6; letter-spacing: 0.045em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.sidetop__deck strong { font-weight: 650; color: #fff; }
.sidetop .knap { margin-top: var(--s6); }
/* Uden foto (fx sider med lang juridisk tekst): lys top og mørk tekst – siden har altid hvid header */
.sidetop--lys { min-height: 0; padding-block: calc(var(--top-h) + var(--s8)) var(--s7); background: var(--graa); color: var(--tekst); --fokus: var(--gronn); }
.sidetop--lys .sidetop__overtitel { color: var(--gronn); }
.sidetop--lys .sidetop__deck { color: var(--tekst-2); }
.sidetop--lys .sidetop__deck strong { color: var(--tekst); }
@media (max-width: 960px) {
  .sidetop, .sidetop--hoej, .sidetop--lav { min-height: 0; padding-block: calc(var(--top-h) + var(--s9)) var(--s7); }
  .sidetop--hoej { padding-top: calc(var(--top-h) + var(--s10)); }
  .sidetop__medie::after { background: var(--toning-top), rgba(9, 16, 12, 0.6); }
  .sidetop__tekst { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sidetop h1 { font-size: 2.25rem; letter-spacing: -0.022em; }   /* 36 px: lange ord (fx «recyclingstation») skal kunne stå hele */
  .sidetop--lav { padding-top: calc(var(--top-h) + var(--s8)); }
}

/* ---------- Tekst + billede: overtitel, spejlvendt udgave og lys grå flade ---------- */
.kontrol__titel--gruppe { max-width: none; }
.kontrol__titel--gruppe h2 { max-width: 20ch; }
.kontrol--graa { background: var(--graa); }
.kontrol--spejlet .kontrol__titel, .kontrol--spejlet .kontrol__tekst { grid-column: 7 / span 6; }
.kontrol--spejlet .kontrol__titel { grid-row: 1; }
.kontrol--spejlet .kontrol__billede { grid-column: 1 / span 5; grid-row: 1 / span 2; margin-top: 0; }
.kontrol--spejlet .kontrol__billede img { margin-left: 0; margin-right: auto; }
@media (max-width: 960px) {
  .kontrol--spejlet .kontrol__titel, .kontrol--spejlet .kontrol__tekst, .kontrol--spejlet .kontrol__billede { grid-column: 1 / -1; grid-row: auto; }
  .kontrol--spejlet .kontrol__billede { margin-top: var(--s8); }
}

/* ---------- To spalter: overskrift til venstre, tekst + knap eller signatur til højre ---------- */
.tospalter .gitter { align-items: start; }
.tospalter__titel { grid-column: 1 / span 5; max-width: 15ch; }
.tospalter__tekst { grid-column: 7 / span 6; }
.tospalter .knap { margin-top: var(--s7); }
@media (max-width: 960px) {
  .tospalter__titel, .tospalter__tekst { grid-column: 1 / -1; }
  .tospalter__titel { max-width: 18ch; }
  .tospalter__tekst { margin-top: var(--s6); }
}

/* Signatur (brevet på «Om os»): hilsen, underskrift og navnelinje */
.signatur { margin-top: var(--s7); color: var(--tekst-broed); }
.signatur__underskrift { width: 220px; height: auto; margin: var(--s2) 0 var(--s1) -6px; }   /* underskriften står lige over navnet uden at røre det */
.signatur__navn strong { color: var(--tekst); }

/* ---------- Mørkt bånd med tre produktskærme (branchesiderne) – bygger på løsningssektionen ---------- */
.produktbaand__titel { grid-column: 1 / span 7; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.028em; max-width: 14ch; }
.produktbaand__tekst { grid-column: 8 / span 5; align-self: end; }
.produktbaand__tekst p { font-size: var(--t-l); line-height: 1.5; color: #e7eaeb; max-width: 36ch; }
.produktbaand__tekst strong { color: #fff; }
@media (max-width: 960px) {
  .produktbaand__titel, .produktbaand__tekst { grid-column: 1 / -1; }
  .produktbaand__tekst { margin-top: var(--s5); }
  .produkter.produkter--rene { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalte); }
  .produkter--rene > .produkt { display: block; }
}
@media (max-width: 640px) {
  .produkter.produkter--rene { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .produkter--rene > .produkt img { max-width: 360px; }
}

/* ---------- Nøglefunktioner (løsningssiden): mørk, svag databaggrund, seks funktioner ---------- */
.funktioner { position: relative; isolation: isolate; overflow: hidden; background: var(--antracit); color: var(--tekst-inv); --fokus: #fff; }
.funktioner__medie { position: absolute; inset: 0; z-index: -1; }
/* Videoen er kun en tekstur: den ses svagt gennem den mørke flade (som på den gamle side) */
.funktioner__video { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }
.funktioner__titel { max-width: 24ch; }
.fremhaevet { color: var(--gronn-lys); }
.funktioner__gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8) var(--spalte); margin-top: var(--s8); }
.funktion { padding-top: var(--s5); border-top: 1px solid var(--linje-moerk); }
.funktion__ikon { width: 28px; height: 28px; color: var(--gronn-lys); stroke-width: 1.5; }
.funktion h3 { margin-top: var(--s5); color: #fff; }
.funktion p { margin-top: var(--s3); color: var(--tekst-inv-2); max-width: 40ch; }
/* Pauseknap til baggrundsvideoen – samme lille firkant som citaternes pauseknap på forsiden */
.videopause {
  position: absolute; right: max(var(--kant), calc((100% - var(--maks)) / 2)); bottom: var(--s6);
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--r); background: none; color: rgba(255, 255, 255, 0.8);
}
.videopause:hover { border-color: #fff; color: #fff; }
.videopause .ikon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.videopause__afspil { display: none; }
.videopause.er-pauset .videopause__pause { display: none; }
.videopause.er-pauset .videopause__afspil { display: block; }
/* Overskriftens fremhævede del toner roligt frem én gang (kun større skærme; sektioner.js sætter klasserne) */
@media (min-width: 641px) {
  .fremhaevet { display: inline-block; }
  .afsloer--klar { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 1.2s var(--ease), clip-path 1.2s var(--ease); }
  .afsloer--klar.er-vist { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (max-width: 960px) {
  .funktioner__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--spalte); }
}
@media (max-width: 640px) {
  .funktioner__gitter { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .funktion { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s4); }
  .funktion__ikon { grid-row: 1 / span 2; }
  .funktion h3 { margin-top: 0; font-size: 1.25rem; }
  .funktion p { margin-top: var(--s2); }
}
/* Reducer bevægelse og telefon: videoen afspilles ikke (kun stillbilledet), så pauseknappen er overflødig */
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .videopause { display: none; }
}

/* =====================================================================
   Fase 3: kontaktsiden, udtalelserne, de juridiske sider og 404-siden
   Samme byggeklodser som resten: tynde linjer over punkter, grønne Lucide-ikoner,
   brødtekst i én spalte med god linjelængde. Ingen nye former.
   ===================================================================== */

/* Top med en overskrift, der er en hel sætning (udtalelserne, 404): lidt mindre skrift, bredere linje */
.sidetop--lang-titel h1 { font-size: clamp(2.25rem, 1.35rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 24ch; }
@media (max-width: 640px) {
  .sidetop--lang-titel h1 { font-size: 1.875rem; }
}

/* ---------- Kontaktsiden: overskrift + kontaktoplysninger til venstre, formularen til højre ---------- */
.kontaktside .gitter { align-items: start; }
.kontaktside__info { grid-column: 1 / span 5; }
.kontaktside__titel { max-width: 14ch; }
.kontaktside__info > p { margin-top: var(--s5); color: var(--tekst-broed); max-width: 40ch; }
.kontaktliste { margin-top: var(--s7); }
.kontaktliste ul { display: grid; gap: var(--s4); }
.kontaktliste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s4); align-items: start; font-size: var(--t-l); line-height: 1.45; }
.kontaktliste li > :only-child { grid-column: 2; }
.kontaktliste .ikon { width: 24px; height: 24px; margin-top: 1px; color: var(--gronn); stroke-width: 1.75; }
.kontaktliste a {
  justify-self: start; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: #b8bdb8;
}
.kontaktliste a:hover { color: var(--gronn); text-decoration-color: currentColor; }
.kontaktside__formular { grid-column: 7 / span 6; }
.kontaktside__formular .formular { margin-top: 0; }
.kontaktside__formular .valg { margin-top: var(--s3); }
@media (max-width: 960px) {
  .kontaktside__info, .kontaktside__formular { grid-column: 1 / -1; }
  .kontaktside__formular { margin-top: var(--s8); }
}

/* ---------- Udtalelserne: ét kort pr. artikel under en tynd linje (som forsidens brancher) ---------- */
.udtalelser__gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--spalte); }
.udtalelse { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--s5); border-top: 1px solid var(--linje); }
.udtalelse__titel { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; max-width: 30ch; }
.udtalelse p { flex: 1; margin: var(--s4) 0 var(--s5); color: var(--tekst-broed); max-width: 56ch; }
@media (max-width: 960px) {
  .udtalelser__gitter { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
}

/* ---------- Udtalelsens tekst: én spalte, ingress, mellemrubrikker, kundens citater ---------- */
.artikeltekst__spalte { grid-column: 1 / span 8; }
.artikeltekst__broed { max-width: 36rem; }   /* ≈ 68 tegn pr. linje */
.artikeltekst__broed h2 { margin-top: var(--s7); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); line-height: 1.2; letter-spacing: -0.012em; }
.artikeltekst__broed h2 + p { margin-top: var(--s4); }
/* Kundens egne ord: en tynd grøn linje i margenen (kursiv står, hvor originalen har den) */
.artikeltekst__citat { padding-left: var(--s5); border-left: 2px solid var(--gronn); color: var(--tekst); }
.artikeltekst .knap { margin-top: var(--s7); }
@media (max-width: 960px) {
  .artikeltekst__spalte { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .artikeltekst__citat { padding-left: var(--s4); }
}

/* ---------- Juridisk tekst: indholdsfortegnelse til venstre, én spalte tekst med hængende punktnumre ---------- */
.juridisk { padding-top: var(--s8); }
.juridisk .gitter { align-items: start; }
.juridisk__indhold {
  grid-column: 1 / span 3; position: sticky; top: calc(var(--top-h) + var(--s6));
  max-height: calc(100svh - var(--top-h) - var(--s7) - var(--cookie-h, 0px)); overflow-y: auto; overscroll-behavior: contain;
}
.juridisk__indhold ol { margin: 0; padding: 0; list-style: none; }
.juridisk__indhold a {
  display: block; padding: 7px 0 7px var(--s4); border-left: 1px solid var(--linje);
  font-size: var(--t-s); line-height: 1.45; color: var(--tekst-2); text-decoration: none;
}
.juridisk__indhold a:hover { color: var(--tekst); border-left-color: var(--gronn); }
.juridisk__indhold a:focus-visible { outline-offset: -2px; }
.juridisk__tekst { grid-column: 5 / span 8; max-width: 44rem; color: var(--tekst-broed); line-height: 1.65; overflow-wrap: break-word; }
.juridisk__tekst > * + * { margin-top: var(--s4); }
.juridisk__tekst h2 {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--linje);
  font-size: var(--t-h3); line-height: 1.25; color: var(--tekst);
}
/* Cookie-valget (privatlivssiden) er noget, man kan gøre – derfor på en lys grå flade, ikke som løbende tekst */
.juridisk__tekst .samtykkevalg { max-width: none; padding: var(--s2) var(--s5) var(--s5); background: var(--graa); border-radius: var(--r); }
.juridisk__tekst .samtykkevalg__raekke:first-child { border-top: 0; }
.juridisk__tekst > h2:first-child { margin-top: 0; }
.juridisk__tekst > .juridisk__meta + h2 { margin-top: var(--s6); }
.juridisk__tekst h2 + * { margin-top: var(--s4); }
.juridisk__meta { font-size: var(--t-s); color: var(--tekst-2); }
.juridisk__tekst strong, .juridisk__tekst b { color: var(--tekst); }
.juridisk__tekst a { color: var(--gronn); text-underline-offset: 3px; }
.juridisk__tekst .punktliste { display: grid; gap: var(--s2); padding-left: 1.25rem; list-style: disc; }
.juridisk__tekst .punktliste li::marker { color: var(--gronn); }
/* Punktnumre (1.1, 1.2 …) hænger i margenen, så teksten står i én lige kant */
.klausul { display: grid; grid-template-columns: 3rem minmax(0, 1fr); }
.klausul-fortsat { padding-left: 3rem; }
.klausul__nr { font-weight: 650; color: var(--tekst); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .juridisk__indhold { display: none; }
  .juridisk__tekst { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* Lange sammensatte ord (fx hollandsk «schadevergoedingsaansprakelijkheid») deles med bindestreg på telefon.
     Kun ord på mindst 12 bogstaver og med mindst 5 bogstaver på hver side af stregen, så brandnavnet og korte
     ord («Re-zycl», «pay-ment», «ud-gør») aldrig deles (QA1-D02). Engelsk har ikke de lange sammensatte ord,
     så dér deles slet ikke (som på den gamle side) – et meget langt ord brydes i stedet først som nødløsning */
  .juridisk__tekst p, .juridisk__tekst li, .artikeltekst__broed p {
    hyphens: auto; -webkit-hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
    -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
  }
  :lang(en) .juridisk__tekst p, :lang(en) .juridisk__tekst li, :lang(en) .artikeltekst__broed p { hyphens: manual; -webkit-hyphens: manual; }
  .artikeltekst__broed { overflow-wrap: break-word; }
  .juridisk__tekst h2 { margin-top: var(--s7); font-size: 1.375rem; }
  .klausul { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .klausul-fortsat { padding-left: 2.5rem; }
}

/* ---------- 404-siden: nyttige links i et gitter under tynde linjer ---------- */
.fejlside__titel { font-size: var(--t-h3); }
.linkliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalte); margin-top: var(--s5); }
.linkliste a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) 0; border-top: 1px solid var(--linje);
  font-size: var(--t-l); font-weight: 600; line-height: 1.3; text-decoration: none;
}
.linkliste .ikon { color: var(--gronn); }
.linkliste a:hover { color: var(--gronn); }
@media (max-width: 960px) {
  .linkliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .linkliste { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Footer
   ===================================================================== */
.fod {
  background: var(--antracit-dyb); color: var(--tekst-inv-2);
  padding-top: clamp(64px, 7vw, 104px);
  /* plads under de sidste links, så cookie-baren og kontaktbjælken ikke dækker dem */
  padding-bottom: calc(var(--cookie-h, 0px) + var(--bjaelke-h));
  --fokus: #fff;
}
.fod__firma { grid-column: 1 / span 4; }
.fod__logo { display: inline-block; }
.fod__logo img { width: 148px; }
.fod address { margin-top: var(--s6); font-size: var(--t-m); line-height: 1.65; }
.fod address p + p { margin-top: var(--s4); }
.fod address a { color: #fff; text-decoration: none; }
.fod address a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fod__cvr { font-size: var(--t-s); }
.fod__kontakt { grid-column: 6 / span 7; }
.fod__intro { font-size: var(--t-l); line-height: 1.45; color: var(--tekst-inv); max-width: 38ch; }
.fod__intro strong { font-weight: 650; }
.fod__bund { margin-top: clamp(56px, 6vw, 88px); }
.fod__bund-indre { display: flex; justify-content: flex-start; padding-block: var(--s5); border-top: 1px solid var(--linje-moerk); }
.fod__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-s); }
.fod__links a, .fod__links button { text-decoration: none; }
.fod__links button { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; }
.fod__links a:hover, .fod__links button:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Formularer ---------- */
.formular { margin-top: var(--s6); }
.formular__felter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.felt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.felt--bred { grid-column: 1 / -1; }
.felt label, .felt legend { font-size: var(--t-s); font-weight: 600; color: var(--tekst); }
.felt input[type="text"], .felt input[type="email"], .felt input[type="tel"], .felt textarea, .felt select {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: #fff; border: 1px solid #c3c8c3; border-radius: var(--r);
  font-size: var(--t-m); line-height: 1.4; color: var(--tekst);
  transition: border-color .15s;
}
.felt textarea { resize: vertical; min-height: 112px; }
.felt textarea::placeholder { color: #6b7276; }
.felt input:hover, .felt textarea:hover { border-color: #8e959a; }
.felt input:focus-visible, .felt textarea:focus-visible { outline: 2px solid var(--gronn); outline-offset: 1px; border-color: var(--gronn); }
.felt [aria-invalid="true"] { border-color: var(--fejl) !important; }
.felt__fejl { font-size: var(--t-xs); font-weight: 600; color: var(--fejl); }
.formular > .knap { margin-top: var(--s5); }
/* Spamfælde: skjult for mennesker, men et felt som robotter udfylder */
.felt--faelde { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Valgfelter (radioknapper) */
.valg { border: 0; padding: 0; min-width: 0; }
.valg legend { padding: 0; margin-bottom: var(--s3); font-size: var(--t-m); line-height: 1.45; }
/* Fast gitter: to valg pr. række (2 × 2), ét pr. linje på telefon – ikke skæve rækker efter tekstlængden (QA1-D05) */
.valg__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5); }
.valg__liste label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 500; font-size: var(--t-m); cursor: pointer; }
.valg__liste input { width: 18px; height: 18px; margin: 0; accent-color: var(--gronn); }

.samtykke { display: flex; align-items: flex-start; gap: var(--s3); }
.samtykke input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gronn); flex: none; }
.samtykke label { font-weight: 500; font-size: var(--t-s); line-height: 1.5; }
.samtykke a { color: var(--gronn); text-underline-offset: 3px; }

.besked {
  display: grid; grid-template-columns: 20px 1fr auto; gap: var(--s3); align-items: start;
  margin-top: var(--s5); padding: var(--s4); border-radius: var(--r);
  font-size: var(--t-m); line-height: 1.5;
}
.besked:focus { outline: none; }
.besked { scroll-margin: var(--s6) 0; }   /* luft om beskeden, når den rulles i syne */
.besked--ok { background: var(--gronn-tint); color: #0d4a26; border: 1px solid #b9dcc6; }
.besked--fejl { background: #fdeceb; color: #7a1a12; border: 1px solid #f3c2bd; }
.besked .ikon { margin-top: 2px; }
.besked__luk { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; padding: 0; border: 0; background: none; border-radius: var(--r); }
.besked__luk:hover { background: rgba(0, 0, 0, 0.06); }

/* Formular på mørk baggrund (footer) */
.formular--moerk .felt label { color: #d5dadc; }
.formular--moerk .felt input[type="text"], .formular--moerk .felt input[type="email"] {
  background: var(--antracit-felt); border-color: #3b4246; color: #fff;
}
.formular--moerk .felt input:hover { border-color: #5d666b; }
.formular--moerk .felt input:focus-visible { outline-color: var(--gronn-lys); border-color: var(--gronn-lys); }
.formular--moerk .felt [aria-invalid="true"] { border-color: var(--fejl-moerk) !important; }
.formular--moerk .felt__fejl { color: var(--fejl-moerk); }

/* =====================================================================
   Cookie-samtykke: bar i bunden + indstillinger (nødvendige · statistik)
   ===================================================================== */
.cookie {
  position: fixed; inset: auto 0 0; z-index: 60;
  background: var(--antracit); color: #e7eaeb; font-size: var(--t-s);
  border-top: 1px solid var(--linje-moerk);
  --fokus: #fff;
}
.cookie__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); padding-block: var(--s3); flex-wrap: wrap; }
.cookie__bar p { line-height: 1.5; }
.cookie__settings {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none;
  font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.cookie__settings .ikon { transition: transform .2s; }
.cookie__settings[aria-expanded="true"] .ikon { transform: rotate(180deg); }
.cookie__knapper { display: flex; gap: var(--s2); }
.cookie__indstillinger { max-height: min(64vh, 520px); overflow-y: auto; border-bottom: 1px solid var(--linje-moerk); padding-block: var(--s6) var(--s5); }
.cookie__overskrift { font-size: var(--t-l); font-weight: 650; line-height: 1.3; letter-spacing: -0.005em; color: #fff; }
.cookie__intro { margin-top: var(--s2); color: var(--tekst-inv-2); line-height: 1.55; max-width: 60ch; }
.cookie__grupper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--spalte); margin-top: var(--s5); }
.cookie__gruppe {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); align-items: start;
  padding-top: var(--s4); border-top: 1px solid var(--linje-moerk); min-width: 0;
}
.cookie__titel { display: block; font-size: var(--t-m); font-weight: 650; line-height: 1.4; color: #fff; cursor: default; }
label.cookie__titel { cursor: pointer; }
.cookie__tekst { grid-column: 1; margin-top: var(--s2); color: var(--tekst-inv-2); line-height: 1.55; max-width: 60ch; }
.cookie__gruppe .kontakt, .cookie__altid { grid-column: 2; grid-row: 1 / span 2; }
.cookie__altid { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--gronn-lys); white-space: nowrap; padding-top: 2px; }
.cookie__fod { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.cookie__mere { color: var(--tekst-inv-2); }
.cookie__mere a { color: #fff; text-underline-offset: 3px; }

/* Kontakt (tænd/sluk) – et almindeligt afkrydsningsfelt med role="switch" */
.kontakt { position: relative; display: inline-flex; align-items: center; }
.kontakt input {
  -webkit-appearance: none; appearance: none; margin: 0; cursor: pointer;
  width: 44px; height: 26px; border-radius: 13px; flex: none;
  background: #4a5357; border: 1px solid #6b7478;
  transition: background-color .15s, border-color .15s;
}
.kontakt input::before {
  content: ""; display: block; width: 20px; height: 20px; margin: 2px; border-radius: 50%;
  background: #fff; transition: transform .15s var(--ease);
}
.kontakt input:checked { background: var(--gronn); border-color: var(--gronn-lys); }
.kontakt input:checked::before { transform: translateX(18px); }
.kontakt input:disabled { cursor: not-allowed; opacity: .6; }
.kontakt input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

/* Cookie-valget på privatlivssiden (samme kategorier som baren; styres af samtykke.js) */
.samtykkevalg { display: grid; gap: var(--s4); max-width: 44rem; margin-top: var(--s5); }
.samtykkevalg__raekke { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); align-items: start; padding-top: var(--s4); border-top: 1px solid var(--linje); }
.samtykkevalg__titel { display: block; font-weight: 650; color: var(--tekst); }
label.samtykkevalg__titel { cursor: pointer; }
.samtykkevalg__tekst { grid-column: 1; margin-top: var(--s1); color: var(--tekst-broed); }
.samtykkevalg__raekke > .kontakt, .samtykkevalg__altid { grid-column: 2; grid-row: 1 / span 2; }
.samtykkevalg__altid { font-size: var(--t-xs); font-weight: 600; color: var(--gronn); white-space: nowrap; padding-top: 2px; }
.samtykkevalg .kontakt input:not(:checked) { background: #c9cec9; border-color: #7d857f; }   /* kanten 3:1 mod baggrunden (WCAG 1.4.11) */
.samtykkevalg > .knap { justify-self: start; margin-top: var(--s2); }
.samtykkevalg__gemt { color: var(--gronn-moerk); font-weight: 600; }

/* ---------- Go to Top ---------- */
.optil {
  position: fixed; right: var(--s5); bottom: calc(var(--s5) + var(--cookie-h, 0px) + var(--bjaelke-h)); z-index: 40;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--antracit); color: #fff; border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s, bottom .2s;
  --fokus: var(--gronn);
}
.optil.er-synlig { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease), bottom .2s; }
.optil:hover { background: var(--gronn); }

/* ---------- Kontaktbjælke (kun telefon): ring eller skriv med ét tryk ---------- */
.kontaktbjaelke { display: none; }

/* =====================================================================
   Skuffer: «Book a demo» og nyhedsbrevet – glider ind fra højre
   ===================================================================== */
.skuffe {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(520px, 100%); height: 100%; max-width: 100%; max-height: 100%;
  padding: 0; border: 0; background: #fff; color: var(--tekst);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(0); transition: transform .32s var(--ease);
}
.skuffe::backdrop { background: rgba(12, 16, 14, 0.55); transition: opacity .32s; }
@starting-style {
  .skuffe[open] { transform: translateX(100%); }
  .skuffe[open]::backdrop { opacity: 0; }
}
.skuffe.lukker { transform: translateX(100%); }
.skuffe.lukker::backdrop { opacity: 0; }
.skuffe__indre { padding: var(--s5) clamp(20px, 5vw, 48px) var(--s7); }
.skuffe__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s5); margin-bottom: var(--s7); border-bottom: 1px solid var(--linje); }
.skuffe__top img { width: 110px; }
.skuffe__luk { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; border-radius: var(--r); color: var(--tekst); }
.skuffe__luk:hover { background: var(--graa); }
.skuffe h2 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); }
.skuffe__ingress { margin-top: var(--s4); font-size: var(--t-l); line-height: 1.5; }
.skuffe__ingress + p { margin-top: var(--s3); color: var(--tekst-2); }
.skuffe .formular { margin-top: var(--s6); }

/* =====================================================================
   Responsivt
   ===================================================================== */
@media (max-width: 1180px) {
  .udfordring { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .nav__link { padding-inline: 9px; }
  .top__hoejre { gap: var(--s3); }
}

/* Smal desktop (961–1120 px): stram headeren, så alt kan være på én linje */
@media (min-width: 961px) and (max-width: 1120px) {
  .top__inner { gap: var(--s3); }
  .logo { width: 108px; margin-right: 0; }
  .logo img { width: 108px; }
  .nav__link { padding-inline: 7px; font-size: 0.875rem; }
  .top__hoejre { gap: var(--s2); }
  .top__login { font-size: 0.875rem; }
  .sprog__knap { padding: 0 6px; gap: 6px; }
  .knap--top { padding: 0 14px; font-size: 0.875rem; }
}

/* Mobilmenu ≤ 960 px */
@media (max-width: 960px) {
  :root { --top-h: 64px; }
  .logo, .logo img { width: 108px; }
  .kun-desktop { display: none !important; }
  .kun-mobil { display: block; }
  .menuknap {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0;
    border: 0; background: none; border-radius: var(--r);
  }
  .menuknap .ikon { width: 24px; height: 24px; }
  .menuknap .ikon--luk { display: none; }
  .menuknap[aria-expanded="true"] .ikon--aaben { display: none; }
  .menuknap[aria-expanded="true"] .ikon--luk { display: block; }
  .knap--top { min-height: 38px; padding: 0 14px; font-size: var(--t-s); }

  .nav {
    position: fixed; inset: var(--top-h) 0 0; z-index: 49;
    background: #fff; color: var(--tekst);
    border-top: 1px solid var(--linje);
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s2) var(--kant) calc(var(--s8) + var(--cookie-h, 0px));
    visibility: hidden; opacity: 0; transition: opacity .18s, visibility 0s .18s;
    --fokus: var(--gronn);
  }
  .nav.er-aaben { visibility: visible; opacity: 1; transition: opacity .18s; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__punkt { border-bottom: 1px solid var(--linje); }
  .nav__punkt:last-child { border-bottom: 0; }
  .nav__link { width: 100%; justify-content: space-between; padding: 18px 0; font-size: 1.25rem; font-weight: 600; border-radius: 0; }
  .nav__link:hover { text-decoration: none; color: var(--gronn); }
  .nav__link[aria-current="page"] { text-decoration: none; color: var(--gronn); }
  .nav__knap .ikon { width: 20px; height: 20px; }

  /* Mega-menuen og undermenuen bliver en harmonika i mobilmenuen */
  .mega, .undermenu {
    position: static; border: 0; box-shadow: none; transform: none; opacity: 1;
    display: none; visibility: visible; transition: none; min-width: 0; padding: 0; border-radius: 0;
  }
  .nav__punkt--under.er-aaben .mega, .nav__punkt--under.er-aaben .undermenu { display: block; }
  .mega .wrap { padding: 0; }
  .mega__gitter { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 var(--s4); }
  .mega__punkt, .undermenu a { padding: var(--s4) 0 var(--s4) var(--s4); border-top: 0; border-left: 2px solid var(--linje); border-radius: 0; }
  .mega__punkt + .mega__punkt, .undermenu li + li a { margin-top: var(--s2); }
  .mega__punkt:hover, .mega__punkt:focus-visible, .undermenu a:hover, .undermenu a:focus-visible { border-left-color: var(--gronn); background: none; }
  .undermenu { padding-bottom: var(--s4); }
  .undermenu a { font-size: 1.0625rem; font-weight: 600; white-space: normal; }
  .mega__titel { font-size: 1.0625rem; }

  .sprog-raekke { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); padding: var(--s5) 0; max-width: 420px; }
  .sprog-raekke a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60px; padding: 8px 4px;
    border: 1px solid var(--linje); border-radius: var(--r);
    font-size: var(--t-s); font-weight: 600; letter-spacing: 0.04em; text-decoration: none;
  }
  .sprog-raekke a[aria-current="true"] { border-color: var(--gronn); color: var(--gronn); }

  .kontrol__titel, .kontrol__tekst, .kontrol__billede { grid-column: 1 / -1; grid-row: auto; }
  .kontrol__billede { margin-top: var(--s8); }
  .kontrol__billede img { margin-inline: 0; }

  .udfordring { grid-template-columns: minmax(0, 1fr); }
  .udfordring__foto { min-height: 0; aspect-ratio: 16 / 10; }
  .udfordring__tekst { padding-inline: var(--kant); }

  .loesning__titel, .loesning .tjek { grid-column: 1 / -1; }
  .loesning .tjek { margin-top: var(--s6); max-width: 52ch; }
  .produkter { grid-template-columns: minmax(0, 1fr); margin-top: var(--s8); padding-top: var(--s7); gap: var(--s8); }
  .produkt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spalte); align-items: center; }
  .produkt figcaption { margin-top: 0; }

  .klar__titel, .klar__hoejre { grid-column: 1 / -1; }
  .klar__hoejre { margin-top: var(--s5); }

  .brancher__gitter { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }

  .fod__firma, .fod__kontakt { grid-column: 1 / -1; }
  .fod__kontakt { margin-top: var(--s8); }

  .cookie__grupper { grid-template-columns: minmax(0, 1fr); }
}

/* Meget smalle telefoner (under 360 px): logo, «Book a demo» og menuknap skal stadig kunne stå på én linje */
@media (max-width: 960px) {
  .logo { margin-right: 0; }
  .top__inner { gap: var(--s3); }
}
@media (max-width: 359px) {
  .top__hoejre { gap: var(--s2); }
  .knap--top { padding: 0 12px; }
  .logo, .logo img { width: 96px; }
}

@media (min-width: 641px) and (max-width: 960px) {
  .branche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--spalte); align-items: start; }
  .branche h3 { grid-row: 1 / span 2; }
  .branche p { margin-top: 0; max-width: 52ch; }
  .branche .pil-link { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
  :root { --bjaelke-h: 52px; }
  /* «Go to Top» er en smal tredje celle yderst til højre i kontaktbjælken – ikke en knap, der svæver
     oven på teksten (QA1-D04). Den står der altid på telefon, så bjælken ikke skifter udseende */
  .optil {
    right: 0; bottom: 0; z-index: 46; width: var(--bjaelke-h); height: var(--bjaelke-h);
    background: none; border-radius: 0; box-shadow: none; border-left: 1px solid var(--linje-moerk);
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .optil:hover { background: none; }
  .optil:active { background: rgba(255, 255, 255, 0.08); }
  .optil:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  /* Cookie-valget: status/kontakt ud for titlen, forklaringen i hele bredden (ikke en smal spalte) (QA1-D03) */
  .samtykkevalg__raekke > .kontakt, .samtykkevalg__altid, .cookie__gruppe .kontakt, .cookie__altid { grid-row: 1; }
  .samtykkevalg__tekst, .cookie__tekst { grid-column: 1 / -1; }
  .juridisk__tekst .samtykkevalg { padding-inline: var(--s4); }
  /* Branchevalget på kontaktsiden: ét valg pr. linje (QA1-D05) */
  .valg__liste { grid-template-columns: minmax(0, 1fr); }
  .produkt { display: block; }
  .produkt figcaption { margin-top: var(--s4); }
  .formular__felter { grid-template-columns: minmax(0, 1fr); }
  .cookie__bar { padding-block: var(--s3) var(--s4); }
  .cookie__knapper { width: 100%; }
  .cookie__knapper .knap { flex: 1; }

  /* Kontaktbjælken: fast i bunden, telefon og e-mail med ét tryk (erstatter den gamle grønne bundbjælke) */
  .kontaktbjaelke {
    position: fixed; inset: auto 0 0; z-index: 45; height: var(--bjaelke-h);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) var(--bjaelke-h);   /* sidste celle: «Go to Top» */
    background: var(--antracit); border-top: 1px solid var(--linje-moerk);
    --fokus: #fff;
  }
  .kontaktbjaelke a {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0;
    color: #fff; font-size: var(--t-s); font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .kontaktbjaelke a + a { border-left: 1px solid var(--linje-moerk); }
  .kontaktbjaelke a:active { background: rgba(255, 255, 255, 0.08); }
  .kontaktbjaelke .ikon { color: var(--gronn-lys); }
  .kontaktbjaelke a:focus-visible { outline-offset: -4px; }
  /* Mens cookie-baren står der, ligger den oven på bjælken – så er bjælken (og «Go to Top» i den) skjult,
     også for tastaturet, i stedet for at kunne få fokus bag baren */
  body:has(> .cookie:not([hidden])) .kontaktbjaelke, body:has(> .cookie:not([hidden])) .optil { visibility: hidden; }
}

/* Meget smalle telefoner: kontaktbjælken har tre celler (telefon · e-mail · «Go to Top») – lidt mindre skrift og
   ikoner, så e-mailadressen kan stå hel (står efter ≤ 640 px-blokken, så den vinder) */
@media (max-width: 359px) {
  .kontaktbjaelke a { gap: 6px; font-size: var(--t-xs); }
  .kontaktbjaelke .ikon { width: 18px; height: 18px; }
}

/* Reducer bevægelse: ingen glid, ingen overtoninger */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}