:root{
  /* lyst tema */
  --bg:#f4f6f8;
  --bg-2:#eaeef2;
  --flade:#ffffff;
  --kant:#e0e5ea;
  --kant-2:#ccd4dc;
  --blaek:#0d1116;
  --blaek-2:#3d4854;
  --graa:#6b7784;
  --graa-2:#95a0ac;
  /* moerke flader til kontrastsektioner */
  --staal:#12161b;
  --staal-2:#1b2128;
  --staal-kant:#2b333c;
  --cream:#eef1f4;
  /* brand */
  --o:#e06400;          /* SAMZONs primaerfarve — --e-global-color-primary paa samzon.com */
  --o-ink:#b85005;      /* samme kuloer, moerknet saa den er laesbar som tekst paa lys bund */
  --o-blod:#ffeedd;
  --daempet:#4e5a68;    /* foerste overskriftslinje — daempet, men laesbar */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--blaek);
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--o-ink);outline-offset:3px;border-radius:3px}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1400px;margin-inline:auto;padding-inline:clamp(18px,3vw,40px)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blaek);color:#fff;padding:12px 20px}
.skip:focus{left:12px;top:12px}

h1,h2,h3{margin:0;letter-spacing:-.035em;font-weight:600;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}

/* ============ pill-navigation ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:16px;
  transition:padding .35s cubic-bezier(.4,0,.2,1)}
.nav.tight{padding-top:9px}
.nav__in{display:flex;align-items:center;gap:10px}
.grp{display:flex;align-items:center;gap:3px;padding:5px;min-height:52px;
  background:rgba(255,255,255,.82);border:1px solid var(--kant);border-radius:100px;
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 2px 10px rgba(13,17,22,.05),0 12px 30px -18px rgba(13,17,22,.16)}
.grp--logo{padding:0 20px 0 18px}
.grp--logo img{height:21px;width:auto}
.grp a,.grp button{padding:9px 15px;border-radius:100px;font-size:14px;font-weight:500;
  color:var(--blaek-2);transition:color .2s,background .2s;white-space:nowrap}
.grp a:hover,.grp button:hover{color:var(--blaek);background:var(--bg-2)}
.nav .spacer{flex:1}
.nav .cta{background:var(--o);color:#14181c;font-weight:600;padding:0 24px;
  min-height:52px;display:inline-flex;align-items:center;
  border-radius:100px;font-size:14px;transition:.2s;
  box-shadow:0 3px 14px rgba(224,100,0,.32)}
.nav .cta:hover{background:var(--blaek);color:#fff;box-shadow:0 3px 12px rgba(13,17,22,.22)}
@media(max-width:1120px){.grp--skjul{display:none}}

/* ---- markedsvaelger ----
   Egen boble til hoejre for menuen. Flagene vises i en fast lille ramme med
   object-fit:cover, saa de forskellige flagformater ikke straekkes. */
.grp--sprog{padding:5px 9px 5px 5px;flex:none}
.flagik{width:21px;height:14px;object-fit:cover;border-radius:2px;display:block;
  box-shadow:0 0 0 1px rgba(13,17,22,.14);flex:none}
.drop--sprog > a{gap:8px}
.sprogkode{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em}
/* Ni markeder, ét flag pr. raekke. Bredden daekker det laengste navn
   (Deutschland) plus sprognavn, flag og landekode. */
/* De korte menuer maa gerne vaere let gennemsigtige, men markedspanelet er ni
   raekker hoejt og lander oven paa hero-overskriften — der slaar de store
   bogstaver igennem og gaar ud over laesbarheden. Dette ene panel er derfor
   helt daekkende. Dobbelt klasse, saa den slaar .drop__panel laengere nede. */
.drop__panel.drop__panel--sprog{min-width:276px;left:auto;right:0;
  background:var(--flade)}
.drop__panel--sprog a{display:flex;align-items:center;gap:13px;padding:10px 15px}
/* Vaelgeren viser hvert marked paa dets eget sprog, saa den er den ene
   plads paa sitet hvor etiopisk og devanagari optraeder uanset hvilken
   sprogversion man staar paa. Uden disse to reserver tegnes ኢትዮጵያ som
   tomme kasser overalt undtagen paa /et/. --skrift saettes af den enkelte
   sprogversion; uden den er det sidens egen Instrument Sans. */
.sprogtekst{display:flex;flex-direction:column;gap:2px;min-width:0;
  font-family:var(--skrift,'Instrument Sans'),'Noto Sans Ethiopic','Noto Sans Devanagari',system-ui,sans-serif}
.sprogtekst b{font-weight:600;font-size:14px;letter-spacing:-.01em}
.sprogtekst small{font-size:11px;color:var(--graa-2);line-height:1.3;white-space:nowrap}
.drop__panel--sprog a[aria-current] b{color:var(--o-ink)}
.drop__panel--sprog a[aria-current]{background:var(--bg-2)}
.drop__panel--sprog em{margin-left:auto;font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--graa-2)}
@media(max-width:520px){.grp--sprog .sprogkode{display:none}}

/* ---- undermenuer ----
   Aabner paa hover og paa :focus-within, saa de ogsaa kan naas med tab
   uden JavaScript. Panelet laaner glas og kant fra .grp, men med mindre
   radius — 100px ville se forkert ud paa en firkantet liste. */
.drop{position:relative;display:inline-flex}
.drop>a{display:inline-flex;align-items:center;gap:6px}
.drop__pil{width:9px;height:6px;opacity:.5;transition:transform .2s}
.drop:hover .drop__pil,.drop:focus-within .drop__pil{transform:rotate(180deg);opacity:.8}

.drop__panel{position:absolute;top:calc(100% + 13px);left:0;z-index:5;
  display:flex;flex-direction:column;min-width:214px;padding:7px;
  background:rgba(255,255,255,.94);border:1px solid var(--kant);border-radius:16px;
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 2px 10px rgba(13,17,22,.05),0 18px 40px -20px rgba(13,17,22,.3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.drop:hover .drop__panel,.drop:focus-within .drop__panel{
  opacity:1;visibility:visible;transform:none}

/* bro over mellemrummet, saa musen ikke taber menuen paa vej ned */
.drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:15px}

.drop__panel a{padding:9px 14px;border-radius:11px;font-size:14px;font-weight:500;
  color:var(--blaek-2);white-space:nowrap;transition:color .2s,background .2s}
.drop__panel a:hover,.drop__panel a:focus-visible{color:var(--blaek);background:var(--bg-2)}
@media(prefers-reduced-motion:reduce){.drop__panel,.drop__pil{transition:none}}


/* ============ hero ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding-top:108px;padding-bottom:26px;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--bg) 46%,var(--bg-2) 100%)}
/* varm aura bag maskinen */
.hero::before{content:"";position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);
  width:min(1180px,124vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,100,0,.15) 0%,rgba(224,100,0,.05) 36%,transparent 66%);
  animation:aande 19s ease-in-out infinite}
@keyframes aande{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-47%,-53%) scale(1.1)}
}
/* fint teknisk gitter */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(13,17,22,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,17,22,.045) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 78% 60% at 50% 46%,#000 26%,transparent 76%);
  animation:drift 26s linear infinite}
@keyframes drift{to{background-position:76px 76px}}

/* anden, koeligere aura der driver modsat — giver dybde i fladen */
.atmos{position:absolute;left:50%;top:52%;width:min(880px,100vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(70,120,220,.09) 0%,transparent 62%);
  animation:sving 23s ease-in-out infinite}
@keyframes sving{
  0%,100%{transform:translate(-50%,-50%) scale(1.04)}
  50%{transform:translate(-55%,-46%) scale(.92)}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.atmos{animation:none}
}
.hero__in{position:relative;z-index:2;text-align:center;min-width:0}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blaek-2);border:1px solid var(--kant);
  padding:7px 16px 7px 12px;border-radius:100px;background:rgba(255,255,255,.8);
  margin-bottom:clamp(16px,2.2vw,26px);box-shadow:0 1px 6px rgba(13,17,22,.04)}
.prik{width:6px;height:6px;border-radius:50%;background:var(--o);
  box-shadow:0 0 0 3px rgba(224,100,0,.22);animation:puls 2.6s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 3px rgba(224,100,0,.22)}50%{box-shadow:0 0 0 7px rgba(224,100,0,0)}}
@media(prefers-reduced-motion:reduce){.prik{animation:none}}

h1{font-size:clamp(2.5rem,8vw,7.2rem);line-height:.93;letter-spacing:-.046em;position:relative;z-index:1}
h1 .dim{color:var(--daempet)}
h1 .o{color:var(--o-ink)}

.maskine{position:relative;z-index:3;margin:clamp(22px,3vw,44px) auto clamp(18px,2.4vw,34px);
  /* 100% ift. containeren, ikke vw — ellers presser maskinen wrappen ud paa mobil */
  width:min(1100px,100%);height:clamp(320px,45vh,560px);display:grid;place-items:center}
.maskine img{position:absolute;max-height:100%;max-width:96%;width:auto;
  filter:drop-shadow(0 30px 42px rgba(13,17,22,.26)) drop-shadow(0 6px 12px rgba(13,17,22,.1));
  opacity:0;transform:scale(.965) translateY(10px);
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.maskine img.vis{opacity:1;transform:none}
.gulv{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);
  width:56%;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(13,17,22,.17) 0%,transparent 70%);filter:blur(9px)}

/* flydende maalebadges omkring maskinen */
.maskineomraade{position:relative}
.merker{position:absolute;inset:0;pointer-events:none;z-index:6}
.merke{position:absolute;background:rgba(255,255,255,.93);border:1px solid var(--kant);
  border-radius:13px;padding:10px 15px;backdrop-filter:blur(10px);text-align:left;
  box-shadow:0 8px 24px -10px rgba(13,17,22,.3),0 1px 3px rgba(13,17,22,.06);
  opacity:0;transform:translateY(7px) scale(.97);
  transition:opacity .34s cubic-bezier(.2,.8,.3,1),transform .34s cubic-bezier(.2,.8,.3,1)}
.merke.ind{opacity:1;transform:none}
.merke dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--graa);
  margin-bottom:3px}
.merke dd{margin:0;font-size:1.02rem;font-weight:600;letter-spacing:-.025em;line-height:1.15;
  white-space:nowrap;transition:opacity .3s}
.merke dd.skift{opacity:0}
/* prik der peger ind mod maskinen */
.merke::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--o);box-shadow:0 0 0 4px rgba(224,100,0,.2);transform:translateY(-50%)}
.merke--1{left:15%;top:30%}          .merke--1::after{right:-4px}
.merke--2{right:14%;top:12%}         .merke--2::after{left:-4px}
.merke--3{right:18%;bottom:16%}      .merke--3::after{left:-4px}
@media(max-width:1400px){
  .merke--1{left:9%}.merke--2{right:8%}.merke--3{right:12%}
}
@media(max-width:1150px){
  .merke--1{left:2%}.merke--2{right:1%}.merke--3{right:5%}
}
.merke--1{transition-delay:.02s} .merke--2{transition-delay:.07s} .merke--3{transition-delay:.12s}
@media(max-width:980px){
  /* minmax(0,1fr) — ellers kan cellerne ikke krympe under indholdets bredde
     og badges bliver klippet i hoejre kant paa smalle skaerme */
  .merker{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
    margin:18px auto 0;max-width:600px;pointer-events:auto}
  .merke{position:static;opacity:1;transform:none;transition-delay:0s;padding:10px 12px;
    min-width:0}
  .merke::after{display:none}
  .merke dt{font-size:9px;letter-spacing:.1em}
  .merke dd{font-size:.9rem;white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:400px){
  .merke dd{font-size:.82rem}
  .merke{padding:9px 10px}
}

.hero__tekst{max-width:52ch;margin:clamp(-4px,-.3vw,6px) auto 0;color:var(--blaek-2);
  font-size:clamp(.98rem,1.15vw,1.1rem);position:relative;z-index:4;transition:opacity .19s}

.vaelg{position:relative;z-index:5;margin-top:clamp(20px,2.8vw,34px)}
.vaelg__spor{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;padding:5px;
  background:rgba(255,255,255,.86);border:1px solid var(--kant);border-radius:100px;
  backdrop-filter:blur(14px);width:fit-content;margin-inline:auto;max-width:100%;
  box-shadow:0 2px 12px rgba(13,17,22,.06)}
.vaelg button{padding:10px 18px;border-radius:100px;font-size:13.5px;font-weight:500;
  color:var(--blaek-2);transition:.22s;white-space:nowrap}
.vaelg button:hover{color:var(--blaek);background:var(--bg-2)}
.vaelg button[aria-selected="true"]{background:var(--blaek);color:#fff;font-weight:600}
@media(max-width:700px){.vaelg__spor{border-radius:18px}.vaelg button{font-size:12.5px;padding:9px 13px}}

.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--kant);
  border:1px solid var(--kant);border-radius:14px;overflow:hidden;
  max-width:740px;margin:clamp(22px,3vw,36px) auto 0;position:relative;z-index:5;
  box-shadow:0 4px 20px rgba(13,17,22,.06)}
.specs div{background:var(--flade);padding:17px 20px 18px;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:15px;
  align-items:center;transition:background .2s}
/* et ikon pr. noegletal — gor striben til mere end fire tal paa hvid */
.specs .ik{grid-row:1 / 3;align-self:center;
  width:24px;height:24px;color:var(--o);margin:0}
.specs dt{grid-column:2}
.specs dd{grid-column:2}
.specs div:hover{background:#fffaf5}
.specs dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--graa);margin-bottom:6px}
.specs dd{margin:0;font-size:clamp(1.05rem,1.8vw,1.45rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.1;transition:opacity .3s}
.specs dd.skift{opacity:0}

/* ============ faelles sektionsdele ============ */
.sek{padding-block:clamp(58px,8vw,118px)}
.sek--flade{background:var(--flade);border-block:1px solid var(--kant)}
.sek--staal{background:var(--staal);color:var(--cream)}
.sek--staal h2,.sek--staal h3{color:#fff}
.hd{max-width:680px;margin-bottom:clamp(30px,4vw,52px)}
.hd--bred{max-width:none;display:grid;gap:20px 48px;align-items:end}
.hd--midt{margin-inline:auto;text-align:center}
@media(min-width:900px){.hd--bred{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.mrk{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--o-ink);margin-bottom:16px;font-weight:600}
.mrk::before{content:"";width:24px;height:1px;background:currentColor}
.sek--staal .mrk{color:var(--o)}
h2{font-size:clamp(1.85rem,3.9vw,3.1rem)}
.hd p{color:var(--blaek-2);margin:16px 0 0;font-size:1.06rem}
.sek--staal .hd p{color:#aeb8c2}

.knap{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:100px;
  font-size:14.5px;font-weight:600;transition:.18s;border:1px solid transparent}
.knap--fyld{background:var(--blaek);color:#fff}
.knap--fyld:hover{background:var(--o);color:#12161b}
.knap--kant{border-color:var(--kant-2);color:var(--blaek)}
.knap--kant:hover{border-color:var(--blaek);background:var(--blaek);color:#fff}
.sek--staal .knap--kant{border-color:var(--staal-kant);color:var(--cream)}
.sek--staal .knap--kant:hover{background:#fff;color:var(--staal);border-color:#fff}
.gaa{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--o-ink);transition:gap .25s}
.sek--staal .gaa{color:var(--o)}

/* ============ brancher (erstatter tickeren) ============ */
.brancher{display:grid;gap:1px;background:var(--kant);border:1px solid var(--kant);
  border-radius:16px;overflow:hidden}
@media(min-width:600px){.brancher{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.brancher{grid-template-columns:repeat(4,1fr)}}
.branche{background:var(--flade);padding:26px 24px 30px;transition:background .2s}
.branche:hover{background:#fcfdfe}
.branche .n{font-size:11px;letter-spacing:.12em;color:var(--graa-2);display:block;margin-bottom:14px}
.branche h3{font-size:1.08rem;letter-spacing:-.02em;margin-bottom:8px}
.branche p{margin:0;font-size:.92rem;color:var(--graa);line-height:1.5}

/* ============ valget: to kort ============ */
.duo{display:grid;gap:16px}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.kort{position:relative;border:1px solid var(--kant);border-radius:20px;padding:32px 32px 36px;
  background:var(--flade);overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.kort:hover{border-color:var(--kant-2);transform:translateY(-3px);
  box-shadow:0 20px 44px -26px rgba(13,17,22,.3)}
.kort::before{content:"";position:absolute;top:-38%;right:-22%;width:58%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,100,0,.16),transparent 68%)}
.kort--alt::before{background:radial-gradient(circle,rgba(70,110,220,.11),transparent 68%)}
.grad{font-size:clamp(3rem,6.2vw,4.8rem);font-weight:600;letter-spacing:-.05em;line-height:.9;
  color:var(--o-ink)}
.kort--alt .grad{color:#2f5bc4}
.kort .rolle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graa);
  margin:6px 0 22px}
.kort h3{font-size:1.4rem;margin-bottom:12px}
.kort>p{margin:0;color:var(--blaek-2);font-size:.99rem;max-width:44ch}
.kort ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--kant)}
.kort li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--kant);font-size:13.8px}
.kort li b{color:var(--graa);font-weight:400}
.kort li span{font-weight:600;text-align:right}
.kort .gaa{margin-top:24px}
.kort:hover .gaa{gap:13px}

/* ============ mission og vision ============
   Laa foer som to ens kort side om side, hvilket fik sidens staerkeste udsagn
   til at ligne en produktsammenligning. Nu sat som udsagn: overskriften bliver
   staaende til venstre, mens de to holdninger stables til hoejre — hver med en
   foerende saetning i stoerre grad end den uddybende tekst. */
.tro{display:grid;gap:clamp(30px,4vw,52px)}
@media(min-width:960px){
  .tro{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:clamp(44px,5.5vw,96px);align-items:start}
  .tro__hd{position:sticky;top:118px}
}
.tro__hd h2{margin:0}
.tro__hd p{margin:18px 0 0;color:var(--graa);line-height:1.65;max-width:30ch}
.tro__hd .knap{margin-top:clamp(20px,2.4vw,26px)}
.tro__liste{display:grid;gap:clamp(28px,3.6vw,44px)}
.tro__del{padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--kant)}
.tro__del:first-child{padding-top:0;border-top:0}
.tro__k{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--o-ink);margin-bottom:15px}
.tro__lead{font-size:clamp(1.2rem,1.85vw,1.5rem);line-height:1.42;letter-spacing:-.02em;
  font-weight:500;color:var(--blaek);margin:0 0 16px;max-width:34ch}
.tro__del > p:last-child{margin:0;color:var(--graa);line-height:1.68;max-width:50ch}

/* ============ modeltabel ============
   Med tre til seks modeller, der kun adskiller sig paa tal, er en tabel
   rigtigere end kort — man kan sammenligne lodret. Ruller vandret paa
   smal skaerm frem for at presse spalterne sammen. */
.modeltabel{border:1px solid var(--kant);border-radius:16px;overflow:hidden;
  background:var(--flade)}
.modeltabel > table{width:100%;border-collapse:collapse;font-size:.96rem}
.modeltabel th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--graa);font-weight:500;
  padding:15px 20px;background:var(--bg-2);border-bottom:1px solid var(--kant)}
.modeltabel td{padding:15px 20px;border-bottom:1px solid var(--kant);color:var(--blaek-2)}
.modeltabel tbody tr:last-child td{border-bottom:0}
.modeltabel tbody tr:hover td{background:#fffaf5}
.modeltabel td:first-child{font-weight:600;color:var(--blaek);white-space:nowrap}
.modeltabel a{color:var(--o-ink);font-weight:600;white-space:nowrap}
.modeltabel a:hover{text-decoration:underline}
@media(max-width:760px){
  .modeltabel{overflow-x:auto}
  .modeltabel > table{min-width:560px}
}

/* ============ brugte maskiner ============ */
.brugtgitter{display:grid;gap:clamp(16px,2vw,22px)}
@media(min-width:700px){.brugtgitter{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.brugtgitter{grid-template-columns:repeat(3,1fr)}}
.brugt{display:flex;flex-direction:column;border:1px solid var(--kant);
  border-radius:18px;overflow:hidden;background:var(--flade);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.brugt:hover{border-color:var(--kant-2);transform:translateY(-3px);
  box-shadow:0 16px 34px -22px rgba(13,17,22,.4)}
.brugt__fig{position:relative;flex:none;background:var(--bg-2);aspect-ratio:4/3}
.brugt__fig img{position:absolute;inset:14px;width:calc(100% - 28px);
  height:calc(100% - 28px);object-fit:contain}
.brugt__ind{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.brugt__aar{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;
  color:var(--o-ink)}
.brugt h3{font-size:1.16rem;letter-spacing:-.02em;margin:7px 0 3px}
.brugt__type{margin:0;font-size:.9rem;color:var(--graa)}
.brugt ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--kant)}
.brugt li{padding:8px 0;border-bottom:1px solid var(--kant);font-size:13.6px;
  color:var(--blaek-2)}
.brugt li:last-child{border-bottom:0}
.brugt .gaa{margin-top:auto;padding-top:16px}

/* Syv maskiner i tre spalter giver 3+3+1. Kontaktflisen fylder de to tomme
   celler, saa raekken gaar op — og det tomme rum bliver til en vej videre. */
.brugt--kontakt{position:relative;justify-content:space-between;gap:22px;
  padding:clamp(26px,3vw,34px);background:linear-gradient(150deg,#fff,#fff7f1);
  border-color:var(--kant-2)}
.brugt--kontakt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/hero-vaerksted-crop.webp") center/cover;
  opacity:.085;
  -webkit-mask-image:linear-gradient(105deg,transparent 6%,#000 58%);
  mask-image:linear-gradient(105deg,transparent 6%,#000 58%)}
.brugt--kontakt > *{position:relative;z-index:1}
.brugt--kontakt:hover{transform:none;box-shadow:none;border-color:var(--kant-2)}
.brugt--kontakt h3{margin:8px 0 10px;font-size:1.32rem}
.brugt--kontakt p{margin:0;color:var(--graa);line-height:1.6;max-width:46ch}
.brugt--kontakt__akt{display:flex;flex-wrap:wrap;gap:10px}
@media(min-width:1100px){.brugt--kontakt{grid-column:span 2}}

/* ============ styring: to spalter ============
   Overskriften bliver staaende til venstre sammen med QR-kortet, mens de
   fire niveauer stables til hoejre. Giver QR'en et naturligt sted at bo
   og loefter maaleren op ved siden af navnet i stedet for langt ude. */
.styring{display:grid;gap:clamp(30px,4vw,42px)}
@media(min-width:980px){
  .styring{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:clamp(44px,5vw,84px);align-items:start}
  .styring__hd{position:sticky;top:118px}
}
.styring__hd h2{margin:0}
.styring__hd > p{margin:18px 0 0;color:var(--graa);line-height:1.65;max-width:34ch}
.styring__hd .qrkat{margin-top:clamp(24px,3vw,30px)}

/* YouTube-klip: rammen faar plads til iframen, og knappen fjernes naar
   videoen er indlaest, saa den ikke ligger og blokerer for klik. */
.klip__ramme iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.klip[data-yt].spiller .klip__btn{display:none}

/* ============ grupperede fordele ============
   Elleve punkter i én flad liste kunne ikke skimmes. Delt i tre spalter
   med hver sin overskrift, saa man kan gaa direkte til det, der er
   relevant — likviditet, regnskab eller fleksibilitet. */
.grupper{display:grid;gap:clamp(30px,3.6vw,42px)}
@media(min-width:900px){.grupper{grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3.4vw,48px)}}
.gruppe__k{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--o-ink)}
.grupper .punkter{margin-top:12px}

/* ============ proces ============ */
.trin{display:grid;gap:1px;background:var(--kant);border:1px solid var(--kant);
  border-radius:16px;overflow:hidden}
@media(min-width:760px){.trin{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.trin{grid-template-columns:repeat(4,1fr)}}
.trin > div{background:var(--flade);padding:30px 28px 34px;position:relative}
.trin .nr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--o-ink);
  letter-spacing:.1em;margin-bottom:20px;display:block}
.trin h3{font-size:1.1rem;margin-bottom:9px;letter-spacing:-.02em}
.trin p{margin:0;font-size:.94rem;color:var(--graa);line-height:1.55}

/* ============ video ============ */
.film{display:grid;gap:16px}
@media(min-width:820px){.film{grid-template-columns:repeat(3,1fr)}}
.klip{margin:0;border-radius:16px;overflow:hidden;background:var(--staal-2);
  border:1px solid var(--staal-kant);position:relative}
.klip__ramme{position:relative;aspect-ratio:16/10}
.klip__ramme img,.klip__ramme video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.klip__ramme video{opacity:0;transition:opacity .35s}
.klip.spiller video{opacity:1}
.klip.spiller img{opacity:0}
.klip__ramme img{transition:opacity .35s,transform 1s cubic-bezier(.2,.8,.3,1)}
.klip:hover img{transform:scale(1.04)}
.klip__btn{position:absolute;inset:0;width:100%;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(10,12,15,.12),rgba(10,12,15,.42));transition:background .3s}
.klip__btn:hover{background:linear-gradient(180deg,rgba(10,12,15,.02),rgba(10,12,15,.22))}
.klip.spiller .klip__btn{background:transparent}
.klip.spiller .klip__btn i{opacity:0}
.klip__btn i{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:var(--o);color:#12161b;transition:opacity .3s,transform .3s;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6)}
.klip__btn:hover i{transform:scale(1.08)}
.klip__btn svg{width:15px;height:17px;margin-left:2px}
.klip figcaption{padding:14px 18px;font-size:12.5px;letter-spacing:.05em;color:#a9b3bd;
  border-top:1px solid var(--staal-kant)}

/* ============ video + argument ============
   Videoen laa centreret i fuld bredde, mens overskrift og tekst stod i to
   andre justeringer — tre kanter i én sektion. Nu to spalter: klippet til
   venstre, argumentet til hoejre. Punktlisten skal have moerke toner,
   ellers forsvinder stregerne og fluebenene paa staalbunden. */
.film-split{display:grid;gap:clamp(30px,4vw,44px)}
@media(min-width:960px){
  .film-split{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(40px,4.5vw,68px);align-items:center}
}
.film-split h2{margin-bottom:14px}
.film-split__lede{margin:0;color:#aeb8c2;font-size:1.04rem;line-height:1.6}
.film-split .punkter{margin-top:22px}
.sek--staal .punkter li{border-color:var(--staal-kant)}
.sek--staal .punkter svg{color:var(--o)}
.sek--staal .punkter b{color:#fff}
.sek--staal .punkter p{color:#a9b3bd}

/* ============ fabrik / split ============ */
.split{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:940px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.split__fig{border-radius:20px;overflow:hidden;position:relative;background:var(--bg-2)}
.split__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* --lige: teksten saetter hoejden, billedet fylder soejlen ud.
   Billedet tages ud af flowet — ellers dikterer dets egen portraetform
   raekkehoejden i stedet for teksten. */
@media(min-width:940px){
  .split--lige{align-items:stretch}
  .split--lige .split__fig{height:auto;min-height:26rem}
  /* kun det direkte billede — ikke flaget inde i .mrkat */
  .split--lige .split__fig > img{position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover}
}
.mrkat{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-radius:12px;padding:13px 18px;
  box-shadow:0 8px 24px -10px rgba(13,17,22,.35);
  display:flex;align-items:center;gap:13px}
.mrkat .flag{width:29px;height:22px;flex-shrink:0;border-radius:2px;
  box-shadow:0 0 0 1px rgba(13,17,22,.1)}
.mrkat b{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.mrkat span{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--graa)}
.punkter{list-style:none;margin:26px 0 0;padding:0}
.punkter li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 0;
  border-top:1px solid var(--kant);align-items:start}
.punkter li:last-child{border-bottom:1px solid var(--kant)}
.sek--staal .punkter li:last-child{border-bottom:0}
.punkter svg{width:18px;height:18px;color:var(--o-ink);margin-top:3px}
.punkter b{display:block;font-weight:600;font-size:1rem;margin-bottom:3px;letter-spacing:-.01em}
.punkter p{margin:0;font-size:.94rem;color:var(--graa)}

/* ============ punkter i to spalter ============
   To selvstaendige lister frem for én liste med kolonneflow — saa faar hver
   spalte sin egen streg i top og bund. Naar de stables paa smal skaerm,
   fjernes den nederste streg i foerste liste, ellers bliver den dobbelt. */
.punkter-to{display:grid;gap:0 clamp(30px,4vw,56px)}
@media(min-width:820px){.punkter-to{grid-template-columns:1fr 1fr}}
.punkter-to .punkter{margin-top:0}
.punkter-to ul:first-child li:last-child{border-bottom:0}
@media(min-width:820px){
  .punkter-to ul:first-child li:last-child{border-bottom:1px solid var(--kant)}
}

/* ============ tal ============ */
.tal{display:grid;gap:1px;background:var(--staal-kant);border:1px solid var(--staal-kant);
  border-radius:16px;overflow:hidden}
@media(min-width:640px){.tal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tal{grid-template-columns:repeat(4,1fr)}}
.tal > div{background:var(--staal-2);padding:30px 28px 34px}
.tal b{display:block;font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:600;letter-spacing:-.045em;
  line-height:1;color:#fff}
.tal .k{display:block;margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--o)}
.tal p{margin:8px 0 0;font-size:.93rem;color:#a9b3bd}

/* ============ cyklus ============
   Fire trin med tipvinklen som baerende tal. Én linje binder dem sammen, saa
   det laeses som én bevaegelse frem for fire uafhaengige felter. Linjen vises
   kun, naar trinnene faktisk staar paa raekke. */
.cyklus{position:relative;display:grid;gap:clamp(26px,3vw,32px)}
.cyklus__trin{position:relative;padding-top:36px}
.cyklus__trin::after{content:"";position:absolute;top:5px;left:0;width:12px;height:12px;
  border-radius:50%;background:var(--flade);border:2px solid var(--o);box-sizing:border-box}
.cyklus__grad{display:block;font-size:clamp(1.8rem,2.9vw,2.5rem);font-weight:600;
  letter-spacing:-.045em;line-height:1;color:var(--o-ink);margin-bottom:13px}
.cyklus h3{font-size:1.06rem;letter-spacing:-.02em;margin-bottom:8px}
.cyklus p{margin:0;font-size:.94rem;color:var(--graa);line-height:1.55;max-width:34ch}
@media(min-width:900px){
  .cyklus{grid-template-columns:repeat(4,1fr);gap:0}
  .cyklus__trin{padding:36px clamp(16px,2vw,30px) 0 0}
  .cyklus::before{content:"";position:absolute;top:10px;left:0;right:0;
    height:1px;background:var(--kant)}
}

/* ============ tilvalg ============ */
/* to spalter tilvalg — to selvstaendige .tilvalg-blokke, saa hver spalte
   faar sin egen streg i top. Naar de stables, fjernes den anden blok's
   topstreg, ellers bliver den dobbelt. */
.tilvalg-to{display:grid;gap:0 clamp(30px,4vw,56px)}
@media(min-width:860px){.tilvalg-to{grid-template-columns:1fr 1fr}}
.tilvalg-to > .tilvalg:last-child{border-top:0}
@media(min-width:860px){
  .tilvalg-to > .tilvalg:last-child{border-top:1px solid var(--kant)}
}

.tilvalg{border-top:1px solid var(--kant)}
.tilvalg details{border-bottom:1px solid var(--kant)}
.tilvalg summary{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 0;cursor:pointer;list-style:none;font-size:1.08rem;font-weight:600;
  letter-spacing:-.015em}
.tilvalg summary::-webkit-details-marker{display:none}
.tilvalg summary:hover{color:var(--o-ink)}
.tilvalg .ic{position:relative;width:20px;height:20px;flex-shrink:0}
.tilvalg .ic::before,.tilvalg .ic::after{content:"";position:absolute;background:var(--o-ink);
  transition:transform .28s}
.tilvalg .ic::before{top:50%;left:0;right:0;height:1.6px;transform:translateY(-50%)}
.tilvalg .ic::after{left:50%;top:0;bottom:0;width:1.6px;transform:translateX(-50%)}
.tilvalg details[open] .ic::after{transform:translateX(-50%) scaleY(0)}
.tilvalg details > div{padding-bottom:22px;max-width:62ch;color:var(--blaek-2);font-size:.98rem}
.tilvalg details > div p{margin:0 0 10px}
.tilvalg details > div p:last-child{margin:0}

/* ============ forhandlere ============ */
.flag{display:grid;gap:1px;background:var(--kant);border:1px solid var(--kant);
  border-radius:16px;overflow:hidden}
@media(min-width:560px){.flag{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.flag{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1200px){.flag{grid-template-columns:repeat(6,1fr)}}
.flag a{background:var(--flade);padding:15px 16px;display:flex;align-items:center;gap:11px;
  transition:background .18s}
.flag a:hover{background:var(--bg-2)}
.flag img{width:26px;height:17px;object-fit:cover;border:1px solid var(--kant);flex-shrink:0}
.flag span{font-size:13.5px;font-weight:500}

/* ============ formular ============ */
.form-grid{display:grid;gap:clamp(26px,4vw,52px);align-items:start}
@media(min-width:960px){.form-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}}
.felt{margin-bottom:18px}
.felt > label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--blaek-2);margin-bottom:7px}
.felt input,.felt textarea{width:100%;background:var(--flade);border:1px solid var(--kant-2);
  border-radius:11px;padding:13px 15px;font:inherit;font-size:15.5px;color:var(--blaek);
  transition:border-color .2s,box-shadow .2s}
.felt input:focus,.felt textarea:focus{outline:0;border-color:var(--o);
  box-shadow:0 0 0 3px var(--o-blod)}
.felt textarea{min-height:96px;resize:vertical}
.raekke{display:grid;gap:18px}
@media(min-width:520px){.raekke{grid-template-columns:1fr 1fr}}
fieldset{border:0;margin:0 0 20px;padding:0}
legend{font-size:12.5px;font-weight:600;color:var(--blaek-2);margin-bottom:9px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{padding:9px 16px;border:1px solid var(--kant-2);border-radius:100px;font-size:14px;
  cursor:pointer;background:var(--flade);transition:.16s}
.chips label:hover{border-color:var(--graa)}
.chips input:checked + label{background:var(--blaek);border-color:var(--blaek);color:#fff;font-weight:500}
.chips input:focus-visible + label{outline:2.5px solid var(--o-ink);outline-offset:3px}
.sidekort{background:var(--flade);border:1px solid var(--kant);border-radius:20px;
  padding:30px 30px 34px}
.sidekort h2,.sidekort h3{font-size:1.2rem;margin-bottom:14px;letter-spacing:-.02em}
.sidekort .linje{display:flex;align-items:center;gap:11px;padding:12px 0;
  border-bottom:1px solid var(--kant);font-size:15px}
.sidekort .linje:last-of-type{border-bottom:0}
.sidekort .linje svg{width:17px;color:var(--o-ink);flex-shrink:0}
.sidekort .linje b{font-weight:600}
/* forloebet som en tidslinje — trinene haenger sammen */
.forloeb{list-style:none;margin:0;padding:0;counter-reset:n}
.forloeb li{counter-increment:n;position:relative;display:grid;
  grid-template-columns:32px minmax(0,1fr);gap:0 15px;padding-bottom:22px}
.forloeb li:last-child{padding-bottom:0}
/* cirklen */
.forloeb li::before{content:counter(n);grid-row:1/3;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  background:var(--o-blod);color:var(--o-ink);border:1px solid #f6d9bd;
  transition:background .25s,color .25s,border-color .25s}
/* linjen der forbinder */
.forloeb li::after{content:"";position:absolute;left:15.5px;top:34px;bottom:6px;width:1px;
  background:linear-gradient(var(--kant-2),var(--kant))}
.forloeb li:last-child::after{display:none}
.forloeb b{display:block;font-size:14.5px;font-weight:600;color:var(--blaek);
  letter-spacing:-.01em;padding-top:6px}
.forloeb span{display:block;font-size:13px;color:var(--graa);margin-top:3px;line-height:1.5}
/* foerste trin fremhaevet — det er der, brugeren staar */
.forloeb li:first-child::before{background:var(--o);color:#14181c;border-color:var(--o);
  box-shadow:0 3px 10px -3px rgba(224,100,0,.5)}

/* praktisk-liste */
.fakta{list-style:none;margin:0;padding:0}
.fakta li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--kant);font-size:14px}
.fakta li:last-child{border-bottom:0;padding-bottom:0}
.fakta b{color:var(--graa);font-weight:400}
.fakta span{font-weight:600;text-align:right}
.fakta a:hover{color:var(--o-ink)}

/* skillelinje mellem kortets to afsnit */
.sidekort__del + .sidekort__del{margin-top:26px;padding-top:24px;
  border-top:1px solid var(--kant)}

/* ============ afslutning ============ */
.slut{background:var(--staal);color:var(--cream);position:relative;overflow:hidden}
.slut::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(900px,110vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,100,0,.17),transparent 62%)}
.slut__in{position:relative;z-index:2;text-align:center;padding-block:clamp(60px,8vw,110px)}
.slut h2{font-size:clamp(1.9rem,4.4vw,3.4rem);max-width:20ch;margin-inline:auto;color:#fff}
.slut p{color:#aeb8c2;max-width:48ch;margin:18px auto 0;font-size:1.05rem}
.slut__akt{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.slut .knap--fyld{background:var(--o);color:#12161b}
.slut .knap--fyld:hover{background:#fff}
/* .slut er moerk, men baerer ikke .sek--staal — kantknappen skal have lys skrift */
.slut .knap--kant{border-color:var(--staal-kant);color:var(--cream)}
.slut .knap--kant:hover{background:#fff;color:var(--staal);border-color:#fff}

/* ============ footer ============ */
.fod{background:var(--staal-2);color:#a9b3bd;padding-block:clamp(44px,6vw,68px) 26px;
  border-top:1px solid var(--staal-kant)}
.fod__grid{display:grid;gap:34px}
@media(min-width:720px){.fod__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.fod img{height:26px;width:auto;margin-bottom:16px}
.fod h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8b96a2;
  margin:0 0 14px;font-weight:600}
.fod ul{list-style:none;margin:0;padding:0}
.fod li{margin-bottom:9px}
.fod a{font-size:14.5px;transition:color .2s}
.fod a:hover{color:var(--o)}
.fod address{font-style:normal;font-size:14.5px;line-height:1.75}
.fod__bund{margin-top:40px;padding-top:20px;border-top:1px solid var(--staal-kant);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:12.5px;color:#8b96a2}

/* ============ reveal ============ */
.op{transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.js .op{opacity:0;transform:translateY(20px)}
.js .op.ind{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .op{opacity:1;transform:none}}

/* ============================================================
   UNDERSIDER
   ============================================================ */

/* sidehoved — samme sprog som forsidens hero, men lavere */
.ph{position:relative;overflow:hidden;padding-top:132px;padding-bottom:clamp(38px,5vw,64px);
  background:linear-gradient(180deg,#fff 0%,var(--bg) 62%,var(--bg-2) 100%)}
.ph::before{content:"";position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);
  width:min(1000px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,100,0,.11) 0%,rgba(224,100,0,.04) 38%,transparent 66%);
  animation:aande 19s ease-in-out infinite}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(13,17,22,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,17,22,.045) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 76% 70% at 46% 40%,#000 22%,transparent 74%);
  animation:drift 26s linear infinite}
@media(prefers-reduced-motion:reduce){.ph::before,.ph::after{animation:none}}
.ph__in{position:relative;z-index:2;max-width:none;display:grid;gap:22px 56px;align-items:end}
@media(min-width:900px){.ph__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.ph h1{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.04em;line-height:1.02}
.ph .lede{color:var(--blaek-2);font-size:1.06rem;margin:0}

/* ---- produkt-hero ----
   .ph__in stiller to tekstsoejler op mod hinanden. Produktsiden skal have
   maskinen med, saa den faar sin egen raekke med billedet til hoejre. */
.ph__prod{position:relative;z-index:2;display:grid;gap:30px 56px;align-items:center}
@media(min-width:900px){
  .ph__prod{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
}
.ph__slogan{font-size:clamp(1.12rem,1.85vw,1.45rem);font-weight:500;color:var(--blaek);
  letter-spacing:-.022em;margin:14px 0 0}
.ph__prod .lede{margin:14px 0 0;max-width:46ch}
.ph__akt{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ph__fig{position:relative;display:flex;justify-content:center;align-items:center}
.ph__fig > img{width:auto;height:auto;max-width:100%;
  max-height:var(--hero-billede,clamp(280px,40vw,520px));display:block;
  filter:drop-shadow(0 30px 44px rgba(13,17,22,.18))}

/* QR-badge over produktbilledet. Koden skal kunne scannes fra en telefon,
   saa den maa ikke skrumpe under ~110px. Samzons egen QR paa samzon.com er
   udloebet (tredjepartstjeneste) — denne er statisk og peger direkte paa PDF'en. */
.qrkat{display:inline-flex;align-items:center;gap:15px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border:1px solid var(--kant);border-radius:15px;padding:12px 20px 12px 12px;
  box-shadow:0 12px 32px -12px rgba(13,17,22,.4);
  transition:transform .2s,box-shadow .2s}
.qrkat:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(13,17,22,.46)}
.qrkat img{width:112px;height:112px;display:block;border-radius:7px}
.qrkat b{display:block;font-size:1.06rem;font-weight:600;letter-spacing:-.025em;
  line-height:1.1;color:var(--blaek)}
.qrkat em{display:block;margin-top:6px;font-style:normal;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--graa)}
/* placeres over et billede med denne */
.qrkat--hjoerne{position:absolute;top:0;left:0}
@media(max-width:900px){.qrkat--hjoerne{position:static;margin-top:18px}}

/* specs i fuld bredde — den centrerede variant stod skaevt under en
   venstrestillet overskrift */
.specs--fuld{max-width:none;margin-inline:0;margin-top:clamp(18px,3vw,44px);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.specs--fuld{grid-template-columns:repeat(4,1fr)}}

/* ---- automatiseringstrappe ----
   Fire niveauer med en maaler, der viser hvor meget maskinen selv klarer.
   Maaleren baerer oplysningen; den er ikke pynt. */
.trappe{border-top:1px solid var(--kant)}
.trappe__r{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:7px 20px;padding:20px 0;border-bottom:1px solid var(--kant);align-items:center}
.trappe__r p{grid-column:1 / -1}
.trappe__note{margin:22px 0 0;color:var(--graa);font-size:.95rem;max-width:56ch}
.trappe__navn{font-weight:600;font-size:1.06rem;letter-spacing:-.02em}
.trappe__r p{margin:0;color:var(--graa);font-size:.95rem;line-height:1.55}
.trappe__maal{display:flex;gap:4px;flex-shrink:0}
.trappe__maal i{width:24px;height:4px;border-radius:2px;background:var(--kant-2)}
.trappe__maal i.p{background:var(--o)}

/* broedkrumme */
.krumme{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;
  color:var(--graa);margin-bottom:20px}
.krumme a{color:var(--blaek-2)}
.krumme a:hover{color:var(--o-ink)}
.krumme .sep{opacity:.5}

/* formularkvittering */
.form__status{margin-top:18px;padding:13px 17px;border-radius:12px;font-size:14.5px;display:none}
.form__status.is-ok{display:block;background:#e9f6ee;color:#14603a;border:1px solid #bfe0cc}
.form__status.is-error{display:block;background:#fdecea;color:#8a2b20;border:1px solid #f2c9c3}
.form__status a{text-decoration:underline;text-underline-offset:2px}
.btn[aria-busy="true"],.knap[aria-busy="true"]{opacity:.65;pointer-events:none}

/* kontaktkort — tre lige felter */
.kontaktkort{display:grid;gap:1px;background:var(--kant);border:1px solid var(--kant);
  border-radius:16px;overflow:hidden}
@media(min-width:760px){.kontaktkort{grid-template-columns:repeat(3,1fr)}}
.kkort{background:var(--flade);padding:28px 26px 32px;display:flex;flex-direction:column;
  transition:background .18s}
a.kkort:hover{background:#fbfcfd}
.kkort .ikon{width:38px;height:38px;border-radius:11px;background:var(--o-blod);
  display:grid;place-items:center;color:var(--o-ink);margin-bottom:18px}
.kkort .ikon svg{width:19px;height:19px}
.kkort .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--graa);
  margin-bottom:7px}
.kkort b{font-size:1.18rem;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.kkort p{margin:9px 0 0;font-size:.93rem;color:var(--graa);line-height:1.5}


/* kort/adresse */
.kortramme{border-radius:18px;overflow:hidden;border:1px solid var(--kant);background:var(--bg-2);
  aspect-ratio:16/9}
.kortramme iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25)}

/* ============================================================
   FORMULAR
   ============================================================ */
.formkort{background:var(--flade);border:1px solid var(--kant);border-radius:24px;
  padding:clamp(26px,3.2vw,44px);
  box-shadow:0 1px 2px rgba(13,17,22,.04),0 28px 56px -40px rgba(13,17,22,.28)}

/* spoergsmaal: nummer + tekst til venstre, svar til hoejre */
.spm{margin-top:clamp(26px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--kant)}
.spmr{display:grid;gap:14px;padding:22px 0;border-bottom:1px solid var(--kant)}
.spmr:first-child{padding-top:0}
.spmr:last-child{border-bottom:0;padding-bottom:0}
@media(min-width:780px){
  .spmr{grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);gap:16px 26px;align-items:start}
}
.spmr__q{margin:0;display:flex;gap:11px;align-items:baseline;font-size:15px;font-weight:600;
  letter-spacing:-.012em;color:var(--blaek);line-height:1.45}
@media(min-width:780px){.spmr__q{padding-top:8px}}
.spmr__q .nr{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  color:var(--o-ink);flex-shrink:0;padding-top:2px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{padding:9px 17px;border:1px solid var(--kant-2);border-radius:100px;
  font-size:14px;font-weight:500;cursor:pointer;background:var(--flade);color:var(--blaek-2);
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s}
.chips label:hover{border-color:var(--graa);color:var(--blaek)}
.chips input:checked + label{background:var(--blaek);border-color:var(--blaek);color:#fff;
  box-shadow:0 2px 8px -2px rgba(13,17,22,.3)}
.chips input:focus-visible + label{outline:2.5px solid var(--o-ink);outline-offset:3px}

/* kontaktfelter */
.kontaktfelter{display:grid;gap:20px}
.raekke{display:grid;gap:20px}
@media(min-width:560px){.raekke{grid-template-columns:1fr 1fr}}
.felt{display:flex;flex-direction:column;gap:8px}
.felt > label{font-size:13px;font-weight:600;letter-spacing:.005em;color:var(--blaek-2)}
.felt > label span{color:var(--o-ink)}
.felt input,.felt textarea{width:100%;background:#fbfcfd;border:1px solid var(--kant-2);
  border-radius:12px;padding:13px 15px;font:inherit;font-size:15.5px;color:var(--blaek);
  transition:border-color .18s,box-shadow .18s,background .18s}
.felt input::placeholder,.felt textarea::placeholder{color:#626e7a;opacity:1}
.felt input:hover,.felt textarea:hover{border-color:var(--graa-2)}
.felt input:focus,.felt textarea:focus{outline:0;background:var(--flade);
  border-color:var(--o);box-shadow:0 0 0 3px var(--o-blod)}
.felt textarea{min-height:112px;resize:vertical}

.formkort .knap{margin-top:clamp(26px,3vw,34px)}
.formkort .note{font-size:13px;color:var(--blaek-2);margin:14px 0 0;line-height:1.5}

/* samme vaegt som sidekortets overskrifter, saa de to kort matcher */
.formkort__titel{font-size:1.15rem;letter-spacing:-.025em;margin:0 0 20px;
  padding-bottom:16px;border-bottom:1px solid var(--kant)}

/* sidekortet foelger med ned langs den lange formular */
@media(min-width:960px){
  .form-grid > .sidekort{position:sticky;top:96px}
}
.sidekort{background:var(--flade);border:1px solid var(--kant);border-radius:24px;
  padding:clamp(26px,3vw,34px);
  box-shadow:0 1px 2px rgba(13,17,22,.04),0 28px 56px -44px rgba(13,17,22,.24)}
.sidekort h2,.sidekort h3{font-size:1.15rem;margin-bottom:16px;letter-spacing:-.025em}
.sidekort h2:first-child,.sidekort h3:first-child{margin-top:0}