/* Arctonia: the sub pages' own sheet, on top of the frame (arctonia-ramme.css,
   whose tokens it uses). Paper, the page head, the form drawn as the title
   block of a technical drawing, and the contact page's paths and company
   data. The pieces are the front page's: the hairline cards of its contact
   sheet, its spaced labels, Bodoni numerals and Geist headings.

   Everything is prefixed ar-. .ar-side goes on the element that holds the
   whole page (body on a static page, the layout's wrapper in React). */

.ar-side{margin:0;background:var(--ar-paper);color:var(--ar-ink);
  font-family:var(--ar-sans);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
.ar-side *,.ar-side *::before,.ar-side *::after{box-sizing:border-box}
.ar-side :where(h1,h2,h3,p,dl,dd,ol,ul,fieldset,legend,figure){margin:0;padding:0}
.ar-side :where(ol,ul){list-style:none}
.ar-side :where(fieldset){border:0;min-width:0}
.ar-side [hidden]{display:none!important}
.ar-side a:focus-visible,.ar-side button:focus-visible{outline:2px solid #7fb2d8;outline-offset:3px;border-radius:2px}

/* paper, with the front page's grain (drawn by arctonia-ramme.js) */
.ar-papir{position:relative;min-height:100vh;min-height:100svh;
  background:radial-gradient(84% 70% at 30% 28%, #ffffff 0%, #eef2f3 56%, #e2e8ec 100%);
  padding:calc(168*var(--ar-u)) calc(64*var(--ar-u)) calc(150*var(--ar-u))}
.ar-papir::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--ar-grain, none);background-size:220px 220px;opacity:.5;mix-blend-mode:multiply}
.ar-papir > *{position:relative}
.ar-bred{max-width:calc(1472*var(--ar-u));margin:0 auto}

/* ── type ──────────────────────────────────────────────────────────── */
.ar-blocknum{display:flex;gap:calc(16*var(--ar-u));align-items:baseline}
.ar-num{font-family:var(--ar-serif);font-weight:400;font-size:max(11px, calc(13*var(--ar-u)));
  color:#5d6874;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ar-lab{font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.9*var(--ar-u));
  text-transform:uppercase;color:#5d6874;font-weight:400;line-height:1.4}
.ar-titel{font-family:var(--ar-display);font-weight:400;letter-spacing:-.03em;color:#080b0e;
  font-size:calc(60*var(--ar-u));line-height:1.04;margin-top:calc(18*var(--ar-u));text-wrap:balance}
.ar-titel:focus{outline:none}
.ar-lede{margin-top:calc(18*var(--ar-u));max-width:calc(430*var(--ar-u));
  font-size:max(14px, calc(16*var(--ar-u)));line-height:max(23px, calc(26*var(--ar-u)));color:#4d5864}
.ar-lede a,.ar-note a{color:#141b22;text-decoration:none;border-bottom:1px solid rgba(13,17,23,.28)}
.ar-lede a:hover,.ar-note a:hover{border-color:#141b22}

/* the dark pill from the frame, a quieter text button beside it */
.ar-tekstknap{display:inline-flex;align-items:center;gap:calc(10*var(--ar-u));min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;color:#3b4652;text-decoration:none;
  font:400 max(11px, calc(11.5*var(--ar-u)))/1 var(--ar-sans);letter-spacing:calc(1.9*var(--ar-u));text-transform:uppercase;
  transition:color .2s}
.ar-tekstknap:hover{color:#0d1117}
.ar-tekstknap[hidden]{display:none}
.ar-pil{display:inline-block;width:calc(18*var(--ar-u));min-width:14px;height:1px;background:currentColor;position:relative}
.ar-pil::after{content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.ar-pil.tilbage{transform:scaleX(-1)}

/* ── /start: book et møde ─────────────────────────────────────────────
   Left: the step's heading and the run of steps, which also takes you back
   to one you have filled in. Right: the sheet with the step's fields. */
.ar-book{display:grid;grid-template-columns:calc(540*var(--ar-u)) 1fr;gap:calc(110*var(--ar-u));align-items:start}
.ar-rail{position:sticky;top:calc(150*var(--ar-u))}

.ar-trin{margin-top:calc(46*var(--ar-u));border-top:1px solid rgba(13,17,23,.14);counter-reset:trin}
.ar-trin li{border-bottom:1px solid rgba(13,17,23,.14)}
.ar-trin button{display:grid;grid-template-columns:calc(44*var(--ar-u)) 1fr;column-gap:calc(10*var(--ar-u));
  width:100%;min-height:44px;padding:calc(11*var(--ar-u)) 0;background:none;border:0;text-align:start;
  color:#8a96a2;font:inherit;cursor:default;align-items:baseline}
.ar-trin .t{font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.9*var(--ar-u));text-transform:uppercase;font-weight:400}
.ar-trin .svar{grid-column:2;font-size:max(12px, calc(13*var(--ar-u)));color:#4d5864;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-trin .svar:empty{display:none}
.ar-trin button:not(:disabled){color:#5d6874;cursor:pointer}
.ar-trin li.gjort button{color:#3b4652;cursor:pointer}
.ar-trin li.gjort button:hover .t{color:#0d1117}
.ar-trin li.on button{color:#0d1117}
.ar-trin li.on .ar-num{color:#0d1117}
.ar-trin button:disabled{cursor:default}

.ar-bagefter{margin-top:calc(46*var(--ar-u))}
.ar-bagefter ol{margin-top:calc(14*var(--ar-u));display:grid;gap:calc(8*var(--ar-u))}
.ar-bagefter li{display:grid;grid-template-columns:calc(44*var(--ar-u)) calc(110*var(--ar-u)) 1fr;column-gap:calc(10*var(--ar-u));
  align-items:baseline;font-size:max(12px, calc(13*var(--ar-u)));color:#4d5864}
.ar-bagefter b{font-family:var(--ar-display);font-weight:400;color:#141b22;font-size:max(13px, calc(15*var(--ar-u)))}
.ar-bagefter-spm{margin-top:calc(18*var(--ar-u))}

/* the sheet */
.ar-ark{background:rgba(255,255,255,.94);border:1px solid rgba(13,17,23,.18);
  box-shadow:0 calc(18*var(--ar-u)) calc(46*var(--ar-u)) rgba(40,60,80,.10);
  padding:calc(30*var(--ar-u)) calc(34*var(--ar-u)) calc(26*var(--ar-u))}
.ar-ark-hoved{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:calc(16*var(--ar-u));margin-bottom:calc(24*var(--ar-u));border-bottom:1px solid rgba(13,17,23,.14)}
.ar-trinflade[hidden]{display:none}
.ar-trinflade > * + *{margin-top:calc(22*var(--ar-u))}
.ar-spm{font-family:var(--ar-display);font-weight:400;letter-spacing:-.015em;color:#141b22;
  font-size:max(16px, calc(19*var(--ar-u)));line-height:1.3}

/* option cards: the front page's contact cards, chosen like its active one */
.ar-valg{display:grid;grid-template-columns:1fr 1fr;gap:calc(12*var(--ar-u))}
.ar-kort{position:relative;display:flex;flex-direction:column;gap:calc(8*var(--ar-u));cursor:pointer;
  border:1px solid rgba(13,17,23,.16);background:rgba(252,253,253,.92);padding:calc(18*var(--ar-u));
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .5s cubic-bezier(.16,1,.3,1)}
.ar-kort:hover{border-color:rgba(13,17,23,.36)}
.ar-kort input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ar-kort .navn{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ar-kort b{font-family:var(--ar-display);font-weight:400;letter-spacing:-.018em;color:#080b0e;
  font-size:max(17px, calc(22*var(--ar-u)))}
.ar-kort .sub{font-size:max(12px, calc(13*var(--ar-u)));line-height:1.45;color:#5a6470}
.ar-kort.valgt,.ar-kort:has(input:checked){border-color:rgba(13,17,23,.66);background:#fff;
  box-shadow:0 calc(14*var(--ar-u)) calc(34*var(--ar-u)) rgba(40,60,80,.12);transform:translateY(calc(-2*var(--ar-u)))}
.ar-kort .flueben{position:absolute;right:calc(18*var(--ar-u));bottom:calc(16*var(--ar-u));width:14px;height:14px;
  opacity:0;transition:opacity .25s;fill:none;stroke:#0d1117;stroke-width:1.4}
.ar-kort.valgt .flueben,.ar-kort:has(input:checked) .flueben{opacity:1}
.ar-kort:has(input:focus-visible){outline:2px solid #7fb2d8;outline-offset:3px}

/* fields: cells of a title block, one hairline between neighbours */
.ar-felter{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(13,17,23,.18);border-left:1px solid rgba(13,17,23,.18)}
.ar-felt{position:relative;display:flex;flex-direction:column;gap:calc(9*var(--ar-u));min-width:0;
  padding:calc(13*var(--ar-u)) calc(16*var(--ar-u)) calc(12*var(--ar-u));
  border-right:1px solid rgba(13,17,23,.18);border-bottom:1px solid rgba(13,17,23,.18);
  background:rgba(247,249,250,.7);transition:background .2s, box-shadow .2s}
.ar-felt.hel{grid-column:1/-1}
.ar-felt:focus-within{background:#fff;box-shadow:inset 0 0 0 1px #0d1117}
.ar-felt label{display:flex;justify-content:space-between;gap:12px;align-items:baseline;cursor:text}
.ar-valgfri{font-family:var(--ar-serif);font-style:italic;text-transform:none;letter-spacing:.02em;
  color:#5f6b77;font-size:max(12px, calc(12.5*var(--ar-u)))}
.ar-felt input,.ar-felt textarea{width:100%;border:0;background:transparent;outline:none;padding:0;margin:0;
  font:300 max(16px, calc(17*var(--ar-u)))/1.5 var(--ar-sans);color:#141b22;border-radius:0;-webkit-appearance:none;appearance:none}
.ar-felt textarea{min-height:calc(116*var(--ar-u));resize:vertical;line-height:1.55}
.ar-felt ::placeholder{color:#7b8691;opacity:1}
.ar-beloeb{display:flex;align-items:baseline;gap:10px}
.ar-beloeb span{color:#5d6874;font-size:max(14px, calc(15*var(--ar-u)))}
.ar-felt .ar-hjaelp{font-size:max(12px, calc(12.5*var(--ar-u)));line-height:1.45;color:#5a6470}
.ar-felt.ugyldig{box-shadow:inset 0 0 0 1px #a0402f;background:#fff}
.ar-fejl{font-size:max(12px, calc(12.5*var(--ar-u)));color:#9b3a2a;line-height:1.4}
.ar-fejl:empty{display:none}

/* chips for a single short choice */
.ar-chips{display:flex;flex-wrap:wrap;gap:calc(10*var(--ar-u));margin-top:calc(12*var(--ar-u))}
.ar-chips label{position:relative;cursor:pointer}
.ar-chips input{position:absolute;opacity:0;width:1px;height:1px}
.ar-chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 calc(20*var(--ar-u));
  border:1px solid rgba(13,17,23,.26);border-radius:999px;background:rgba(255,255,255,.6);
  font-size:max(13px, calc(13.5*var(--ar-u)));color:#26303a;transition:background .2s,color .2s,border-color .2s}
.ar-chips label:hover span{border-color:rgba(13,17,23,.5)}
.ar-chips input:checked + span{background:#0d1117;border-color:#0d1117;color:#fff}
.ar-chips input:focus-visible + span{outline:2px solid #7fb2d8;outline-offset:3px}
.ar-chips.ugyldig span{border-color:#a0402f}

/* the review: the answers as a drawing's parts list, each with its way back */
.ar-gennemse{margin-top:calc(-12*var(--ar-u))}
.ar-gennemse > div{display:grid;grid-template-columns:calc(170*var(--ar-u)) 1fr auto;column-gap:calc(16*var(--ar-u));
  padding:calc(11*var(--ar-u)) 0;border-bottom:1px solid rgba(13,17,23,.12);align-items:baseline}
.ar-gennemse dt{font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.2*var(--ar-u));text-transform:uppercase;color:#5d6874;font-weight:400}
.ar-gennemse dd{font-size:max(13px, calc(14*var(--ar-u)));line-height:1.5;color:#1d262f;white-space:pre-line;min-width:0;overflow-wrap:anywhere}
.ar-gennemse dd.tom{color:#6b7783}
.ar-gennemse button{background:none;border:0;padding:0 0 0 8px;min-height:32px;cursor:pointer;
  font:400 max(11px, calc(11*var(--ar-u)))/1 var(--ar-sans);letter-spacing:calc(1.4*var(--ar-u));text-transform:uppercase;
  color:#3b4652;border-bottom:1px solid rgba(13,17,23,.24)}
.ar-gennemse button:hover{color:#0d1117;border-color:#0d1117}

/* the human check: CaptchaChallenge's puzzle in the sheet's materials. Only
   the skin is drawn here; the puzzle and its check are the site's own. */
.ar-menneske{border:1px solid rgba(13,17,23,.18);background:rgba(247,249,250,.7);padding:calc(14*var(--ar-u)) calc(16*var(--ar-u)) calc(16*var(--ar-u))}
.ar-menneske-hoved{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ar-menneske-hoved button{background:none;border:0;padding:0;min-height:32px;cursor:pointer;color:#3b4652;white-space:nowrap;
  font:400 max(11px, calc(11*var(--ar-u)))/1 var(--ar-sans);letter-spacing:calc(1.4*var(--ar-u));text-transform:uppercase;
  border-bottom:1px solid rgba(13,17,23,.24)}
.ar-puslespil{position:relative;margin-top:calc(12*var(--ar-u));width:100%;max-width:320px;aspect-ratio:320/140;overflow:hidden;
  border:1px solid rgba(13,17,23,.14);background:#eef2f4}
.ar-puslespil svg{position:absolute;inset:0;width:100%;height:100%}
.ar-spor{position:relative;margin-top:calc(12*var(--ar-u));max-width:320px;height:44px;border:1px solid rgba(13,17,23,.22);
  border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.4*var(--ar-u));text-transform:uppercase;color:#6a7682;
  touch-action:none;user-select:none;-webkit-user-select:none}
.ar-haandtag{position:absolute;left:3px;top:3px;width:36px;height:36px;border-radius:50%;background:#0d1117;
  display:grid;place-items:center;cursor:grab;transition:background .2s}
.ar-haandtag svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.4}
.ar-haandtag:active{cursor:grabbing}
.ar-haandtag:focus-visible{outline:2px solid #7fb2d8;outline-offset:3px}
.ar-menneske.ok .ar-spor{border-color:#2f6b4f;color:#2f6b4f}
.ar-menneske.ok .ar-haandtag{background:#2f6b4f}
.ar-menneske.forkert .ar-spor{border-color:#a0402f;color:#9b3a2a;animation:ar-ryst .38s}
@keyframes ar-ryst{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.ar-menneske .ar-status{margin-top:calc(10*var(--ar-u));font-size:max(12px, calc(12.5*var(--ar-u)));color:#5a6470;min-height:1.4em}
.ar-menneske.ok .ar-status{color:#2f6b4f}

.ar-note{font-size:max(12px, calc(12.5*var(--ar-u)));line-height:1.55;color:#5a6470}
.ar-handling{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:calc(30*var(--ar-u));padding-top:calc(22*var(--ar-u));border-top:1px solid rgba(13,17,23,.14)}
.ar-handling .ar-cta{height:calc(56*var(--ar-u));min-height:48px;padding:0 calc(40*var(--ar-u));box-shadow:none}
.ar-handling .ar-cta[aria-busy="true"]{opacity:.6;cursor:progress}

/* received */
.ar-modtaget{padding:calc(24*var(--ar-u)) 0 calc(10*var(--ar-u))}
.ar-modtaget[hidden]{display:none}
.ar-modtaget .ar-titel{font-size:calc(44*var(--ar-u))}
.ar-modtaget .links{display:flex;gap:calc(28*var(--ar-u));flex-wrap:wrap;margin-top:calc(26*var(--ar-u))}

/* ── /contact ──────────────────────────────────────────────────────── */
.ar-kontakt-hoved{display:grid;grid-template-columns:1fr auto;gap:calc(48*var(--ar-u));align-items:end}
.ar-kontakt-hoved .ar-titel{font-size:calc(84*var(--ar-u));letter-spacing:-.036em;line-height:.96}
.ar-kompas{width:calc(210*var(--ar-u));height:calc(210*var(--ar-u));color:#5d6874}
.ar-kompas text{font-family:var(--ar-serif);font-size:9px;letter-spacing:2.4px;fill:#63707d}

.ar-veje{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(14*var(--ar-u));margin-top:calc(70*var(--ar-u))}
.ar-vej{display:flex;flex-direction:column;gap:calc(14*var(--ar-u));
  border:1px solid rgba(13,17,23,.16);background:rgba(252,253,253,.92);padding:calc(22*var(--ar-u)) calc(22*var(--ar-u)) calc(20*var(--ar-u))}
.ar-vej .navn{display:flex;justify-content:space-between;align-items:baseline}
.ar-vej h3{font-family:var(--ar-display);font-weight:400;letter-spacing:-.018em;color:#080b0e;font-size:max(20px, calc(26*var(--ar-u)))}
.ar-vej p{flex:1;font-size:max(13px, calc(14*var(--ar-u)));line-height:1.55;color:#4d5864;max-width:34ch}
.ar-vej .ar-tekstknap{align-self:flex-start;color:#141b22;border-bottom:1px solid rgba(13,17,23,.3);min-height:36px;margin-top:calc(6*var(--ar-u))}
.ar-vej .ar-tekstknap:hover{border-color:#141b22}
.ar-vej.forrest{border-color:rgba(13,17,23,.6);background:#fff;box-shadow:0 calc(16*var(--ar-u)) calc(40*var(--ar-u)) rgba(40,60,80,.13)}
.ar-vej.forrest .ar-cta{align-self:flex-start;margin-top:calc(6*var(--ar-u));height:calc(52*var(--ar-u));min-height:46px;padding:0 calc(32*var(--ar-u))}
.ar-vej .mail{text-transform:none;letter-spacing:.01em;font-size:max(13px, calc(14.5*var(--ar-u)))}

.ar-stamdata{display:grid;grid-template-columns:repeat(5,1fr);margin-top:calc(56*var(--ar-u));
  border-top:1px solid rgba(13,17,23,.18);border-left:1px solid rgba(13,17,23,.18)}
.ar-stamdata > div{display:flex;flex-direction:column;gap:calc(8*var(--ar-u));padding:calc(14*var(--ar-u)) calc(16*var(--ar-u));
  border-right:1px solid rgba(13,17,23,.18);border-bottom:1px solid rgba(13,17,23,.18);background:rgba(247,249,250,.55);min-width:0}
.ar-stamdata dt{font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.4*var(--ar-u));text-transform:uppercase;color:#5d6874;font-weight:400}
.ar-stamdata dd{font-size:max(14px, calc(16*var(--ar-u)));color:#141b22;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ar-stamdata dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(13,17,23,.24)}
.ar-stamdata dd a:hover{border-color:#141b22}

/* /contact, spørgsmålene: the general notes on a drawing. The heading rides
   along on the left like /start's rail; each note is its number, the question
   and the answer on one line, under a heavier rule per group. A note you
   arrive at by its link (#spm-pris and so on) gets a line drawn under it. */
.ar-svar{display:grid;grid-template-columns:calc(440*var(--ar-u)) 1fr;gap:calc(110*var(--ar-u));
  margin-top:calc(150*var(--ar-u));padding-top:calc(48*var(--ar-u));border-top:1px solid rgba(13,17,23,.18);
  scroll-margin-top:calc(70*var(--ar-u))}
.ar-svar-hoved{position:sticky;top:calc(150*var(--ar-u));align-self:start}
.ar-svar-hoved .ar-titel{font-size:calc(56*var(--ar-u))}
.ar-svar-noter{display:grid;gap:calc(46*var(--ar-u))}
.ar-svar-gruppe > .ar-lab{padding-bottom:calc(12*var(--ar-u));border-bottom:1px solid rgba(13,17,23,.62)}
.ar-svar-gruppe li{position:relative;display:grid;grid-template-columns:calc(64*var(--ar-u)) minmax(0,1fr) minmax(0,1.3fr);
  column-gap:calc(26*var(--ar-u));align-items:baseline;padding:calc(24*var(--ar-u)) 0 calc(26*var(--ar-u));
  border-bottom:1px solid rgba(13,17,23,.14);scroll-margin-top:calc(120*var(--ar-u))}
.ar-svar-gruppe h4{margin:0;font-family:var(--ar-display);font-weight:400;letter-spacing:-.016em;color:#080b0e;
  font-size:max(17px, calc(21*var(--ar-u)));line-height:1.25;text-wrap:balance}
.ar-svar-gruppe li p{font-size:max(14px, calc(15.5*var(--ar-u)));line-height:1.62;color:#4d5864;max-width:52ch}
.ar-svar-gruppe li::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:#0d1117;
  transform:scaleX(0);transform-origin:left}
.ar-svar-gruppe li:target::after{animation:ar-svar-streg 1.1s cubic-bezier(.6,0,.2,1) .25s both}
@keyframes ar-svar-streg{to{transform:scaleX(1)}}
.ar-svar-videre{margin-top:calc(-8*var(--ar-u));justify-self:start;color:#141b22;border-bottom:1px solid rgba(13,17,23,.3)}
.ar-svar-videre:hover{border-color:#141b22}

/* ── phone ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ar-papir{padding:calc(108*var(--ar-u)) calc(20*var(--ar-u)) calc(84*var(--ar-u))}
  .ar-titel{font-size:calc(38*var(--ar-u));margin-top:calc(14*var(--ar-u))}
  .ar-lede{max-width:none}

  /* the rail opens up, so the steps run as a counter above the heading and
     what happens afterwards follows the sheet */
  .ar-book{grid-template-columns:1fr;gap:0}
  .ar-rail{display:contents;position:static}
  .ar-book .ar-trin{order:1;margin:0 0 calc(22*var(--ar-u));display:grid;grid-template-columns:repeat(5,1fr);
    gap:6px;border:0}
  .ar-book .ar-trin li{border:0}
  .ar-book .ar-trin button{display:flex;flex-direction:column;gap:6px;padding:0;min-height:44px;align-items:flex-start}
  .ar-book .ar-trin button::before{content:'';display:block;height:2px;width:100%;background:rgba(13,17,23,.14);order:-1}
  .ar-book .ar-trin li.gjort button::before{background:rgba(13,17,23,.42)}
  .ar-book .ar-trin li.on button::before{background:#0d1117}
  .ar-book .ar-trin .t,.ar-book .ar-trin .svar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ar-book .ar-hovedet{order:2}
  /* the counter above already numbers the step */
  .ar-book .ar-hovedet .ar-num,.ar-book #arkNum{display:none}
  .ar-book .ar-ark{order:3;margin-top:calc(26*var(--ar-u))}
  .ar-book .ar-bagefter{order:4;margin-top:calc(40*var(--ar-u))}
  .ar-bagefter li{grid-template-columns:calc(34*var(--ar-u)) calc(96*var(--ar-u)) 1fr}

  .ar-ark{padding:calc(20*var(--ar-u)) calc(16*var(--ar-u)) calc(18*var(--ar-u));margin-left:calc(-4*var(--ar-u));margin-right:calc(-4*var(--ar-u))}
  .ar-valg{grid-template-columns:1fr;gap:calc(10*var(--ar-u))}
  .ar-kort{padding:calc(15*var(--ar-u)) calc(16*var(--ar-u))}
  .ar-felter{grid-template-columns:1fr}
  .ar-felt{padding:calc(12*var(--ar-u)) calc(14*var(--ar-u))}
  .ar-gennemse > div{grid-template-columns:1fr auto;row-gap:4px}
  .ar-gennemse dt{grid-column:1}
  .ar-gennemse dd{grid-column:1 / -1;grid-row:2}
  .ar-gennemse button{grid-column:2;grid-row:1}
  .ar-handling .ar-cta{flex:1;height:52px}

  .ar-kontakt-hoved{grid-template-columns:1fr}
  .ar-kontakt-hoved .ar-titel{font-size:calc(52*var(--ar-u))}
  .ar-kompas{display:none}
  .ar-veje{grid-template-columns:1fr;gap:calc(12*var(--ar-u));margin-top:calc(40*var(--ar-u))}
  .ar-stamdata{grid-template-columns:1fr 1fr;margin-top:calc(34*var(--ar-u))}
  .ar-stamdata > div.hel{grid-column:1 / -1}

  .ar-svar{grid-template-columns:1fr;gap:calc(34*var(--ar-u));margin-top:calc(84*var(--ar-u));padding-top:calc(34*var(--ar-u))}
  .ar-svar-hoved{position:static}
  .ar-svar-hoved .ar-titel{font-size:calc(40*var(--ar-u))}
  .ar-svar-noter{gap:calc(34*var(--ar-u))}
  .ar-svar-gruppe li{grid-template-columns:calc(44*var(--ar-u)) 1fr;row-gap:calc(8*var(--ar-u));padding:calc(18*var(--ar-u)) 0 calc(20*var(--ar-u))}
  .ar-svar-gruppe li p{grid-column:2}
  .ar-svar-videre{margin-top:0}
}
@media (max-width:1180px) and (min-width:901px){
  .ar-book{grid-template-columns:calc(500*var(--ar-u)) 1fr;gap:calc(70*var(--ar-u))}
  .ar-stamdata{grid-template-columns:repeat(3,1fr)}
  .ar-svar{grid-template-columns:calc(380*var(--ar-u)) 1fr;gap:calc(70*var(--ar-u))}
  .ar-svar-gruppe li{grid-template-columns:calc(56*var(--ar-u)) 1fr;row-gap:calc(8*var(--ar-u))}
  .ar-svar-gruppe li p{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .ar-kort,.ar-felt,.ar-chips span{transition:none}
  .ar-kort.valgt,.ar-kort:has(input:checked){transform:none}
  .ar-menneske.forkert .ar-spor{animation:none}
  .ar-svar-gruppe li:target::after{animation:none;transform:scaleX(1)}
}

/* ── night mode ("blåtryk") ───────────────────────────────────────────
   Arctonia: the sub pages at night. The paper becomes the deep blue of a
   blueprint, ink becomes pale ice, hairlines turn faintly cyan, and the white
   cards become panes of night glass. Toggled from the bar (tema() in
   arctonia-ramme.js); every rule here sits under html[data-tema="nat"]. */
html[data-tema="nat"] .ar-papir{background:radial-gradient(84% 70% at 30% 28%, #15253d 0%, #0c1728 56%, #08111e 100%)}
html[data-tema="nat"] .ar-papir::before{opacity:.18}
html[data-tema="nat"] :is(.ar-num,.ar-lab,.ar-stamdata dt,.ar-gennemse dt){color:#8ea2b4}
html[data-tema="nat"] :is(.ar-titel,.ar-kort b,.ar-vej h3){color:#eef3f7}
html[data-tema="nat"] :is(.ar-lede,.ar-trin .svar,.ar-bagefter,.ar-kort .sub,.ar-felt .ar-hjaelp,.ar-note,.ar-menneske .ar-status,.ar-vej p){color:#a9b9c6}
html[data-tema="nat"] :is(.ar-lede a,.ar-note a,.ar-stamdata dd a){color:#e3eaf0;border-bottom-color:rgba(227,234,240,.3)}
html[data-tema="nat"] .ar-tekstknap{color:#c6d3dd}
html[data-tema="nat"] .ar-tekstknap:hover{color:#fff}
html[data-tema="nat"] :is(.ar-trin,.ar-trin li,.ar-handling,.ar-ark-hoved,.ar-gennemse > div){border-color:rgba(159,228,242,.16)}
html[data-tema="nat"] .ar-trin button{color:#6f8396}
html[data-tema="nat"] .ar-trin button:not(:disabled){color:#9cb0c1}
html[data-tema="nat"] :is(.ar-trin li.gjort button,.ar-trin li.on button,.ar-trin li.on .ar-num){color:#eef3f7}
html[data-tema="nat"] .ar-bagefter b,html[data-tema="nat"] .ar-spm,html[data-tema="nat"] .ar-gennemse dd,html[data-tema="nat"] .ar-stamdata dd{color:#e6edf3}
html[data-tema="nat"] .ar-gennemse dd.tom{color:#7d90a2}
html[data-tema="nat"] .ar-ark{background:rgba(12,22,38,.92);border-color:rgba(159,228,242,.2);box-shadow:0 18px 50px rgba(0,0,0,.35)}
html[data-tema="nat"] :is(.ar-kort,.ar-vej){background:rgba(16,28,46,.86);border-color:rgba(159,228,242,.18)}
html[data-tema="nat"] .ar-kort:hover{border-color:rgba(159,228,242,.42)}
html[data-tema="nat"] :is(.ar-kort.valgt,.ar-kort:has(input:checked),.ar-vej.forrest){background:#13243b;border-color:rgba(159,228,242,.62);box-shadow:0 16px 40px rgba(0,0,0,.35)}
html[data-tema="nat"] :is(.ar-felter,.ar-felt,.ar-stamdata,.ar-stamdata > div){border-color:rgba(159,228,242,.18)}
html[data-tema="nat"] :is(.ar-felt,.ar-stamdata > div){background:rgba(255,255,255,.03)}
html[data-tema="nat"] .ar-felt:focus-within{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #9fe4f2}
html[data-tema="nat"] .ar-felt label,html[data-tema="nat"] .ar-beloeb span{color:#8ea2b4}
html[data-tema="nat"] :is(.ar-felt input,.ar-felt textarea){color:#e9eff4}
html[data-tema="nat"] .ar-felt ::placeholder{color:#6f8396}
html[data-tema="nat"] .ar-felt.ugyldig{background:rgba(160,64,47,.12);box-shadow:inset 0 0 0 1px #e07a62}
html[data-tema="nat"] .ar-fejl{color:#f09a84}
html[data-tema="nat"] .ar-chips span{border-color:rgba(159,228,242,.3);background:rgba(255,255,255,.04);color:#cfdbe4}
html[data-tema="nat"] .ar-chips label:hover span{border-color:rgba(159,228,242,.6)}
html[data-tema="nat"] .ar-chips input:checked + span{background:#e6f3f8;border-color:#e6f3f8;color:#0a1220}
html[data-tema="nat"] .ar-gennemse button,html[data-tema="nat"] .ar-menneske-hoved button{color:#c6d3dd;border-bottom-color:rgba(198,211,221,.3)}
html[data-tema="nat"] .ar-menneske{background:rgba(255,255,255,.03);border-color:rgba(159,228,242,.18)}
html[data-tema="nat"] .ar-spor{background:#0f1b2d;border-color:rgba(159,228,242,.3);color:#8ea2b4}
html[data-tema="nat"] .ar-haandtag{background:#e6f3f8;color:#0a1220}
html[data-tema="nat"] .ar-kompas{color:#8ea2b4}
html[data-tema="nat"] .ar-kompas text{fill:#8ea2b4}
html[data-tema="nat"] .ar-cta{background:#e6eef3;color:#0a1220;box-shadow:0 10px 30px rgba(0,0,0,.4)}
html[data-tema="nat"] .ar-svar{border-top-color:rgba(159,228,242,.16)}
html[data-tema="nat"] .ar-svar-gruppe > .ar-lab{border-bottom-color:rgba(227,234,240,.5)}
html[data-tema="nat"] .ar-svar-gruppe li{border-bottom-color:rgba(159,228,242,.14)}
html[data-tema="nat"] .ar-svar-gruppe h4{color:#eef3f7}
html[data-tema="nat"] .ar-svar-gruppe li p{color:#a9b9c6}
html[data-tema="nat"] .ar-svar-gruppe li::after{background:#9fe4f2}
html[data-tema="nat"] .ar-svar-videre{color:#e3eaf0;border-bottom-color:rgba(227,234,240,.3)}