/* ==========================================================================
   JB Legal Partner — design system
   Implements "JB Legal Brand Book · Version C" (Signal, udgave 1.0 · 2026)
   Tokens below are the brand book verbatim. Change them here, nowhere else.
   ========================================================================== */

:root {
  /* 05 · Farver ---------------------------------------------------------- */
  --navy:    #15233B;  /* bærer identiteten. Afslutning, CTA, footer         */
  --papir:   #FBFAF7;  /* bærer fladen. Aldrig rent hvid                     */
  --skifer:  #3F4857;  /* brødtekst                                         */
  --signal:  #FFD500;  /* FLADE: knapper, bånd, streger. Aldrig tekst,      */
                       /* og aldrig i logoet (02, 04, 05)                   */
  --sten:    #E9E7E2;  /* sektionsflader                                    */

  /* Afledte nuancer — kun til hairlines og sekundær tekst */
  --navy-op:    #2C3C58;  /* navy, en tand lysere: rules inde i navy        */
  --dis:        #5D6675;  /* dæmpet skifer                                  */
  --dis-navy:   #8D99AD;  /* sekundær tekst PÅ navy (footer)                */
  --linje:      #C6CCD6;  /* 1px navy-tonet skillelinje på lys bund         */
  --linje-blod: #D9D6CF;  /* skillelinje på sten                            */

  /* 06 · Typografi — tre skrifter, hver med én opgave --------------------- */
  --serif: "Libre Baskerville", Georgia, serif;   /* monogram, overskrifter, citat */
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Instrument Sans er den tredje skrift. Den må KUN bruges til ordmærket og
     descriptoren — begge dele ligger som filer i assets/logo/, så skriften
     indlæses bevidst ikke her. Skal den bruges live, så kun i lockuppet. */

  /* 11 · Digitalt: 12-kolonnegitter, 1200px indholdsbredde */
  --bredde: 1200px;
  --gutter: 24px;
  --sektion: 112px;   /* 80–120px mellem sektioner */
  --sektion-sm: 80px;
}

/* --------------------------------------------------------------------------
   Nulstilling
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--skifer);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;      /* brødtekst 17/1.55 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* Browserens [hidden]{display:none} ligger i UA-stylesheetet og taber til
   enhver display-regel herfra. Uden denne linje vises fx skjulte formulartrin
   alligevel, selv om attributten er sat. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   06 · Typografisk skala
   H1 56/1.15 · H2 34/1.2 · H3 22/1.3 · brød 17/1.55 · label 12/0.34em
   Libre Baskerville sættes aldrig i versaler. Overskrifter er altid serif —
   version D fjernede version C's mulighed for at sætte dem i Archivo 600.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 3vw, 34px);   line-height: 1.2; }
h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; }
h4 { font-size: 18px; line-height: 1.35; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--skifer);
  max-width: 34em;
}

.label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dis);
  margin: 0 0 20px;
  display: block;
}

.smaa { font-size: 15px; line-height: 1.5; color: var(--dis); }

/* 07 · Citat — Libre Baskerville kursiv, 26px */
blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   11 · Links — gul understregning i hviletilstand,
   gul markering bag teksten ved hover.
   -------------------------------------------------------------------------- */
a {
  color: var(--navy);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 var(--signal);
  transition: background-color .16s ease, box-shadow .16s ease;
}
/* Den gule markering hører til hover. Den sad før også på :focus-visible, og
   da et klik på et tel:/mailto:-link afgiver til en ekstern handler UDEN at
   flytte fokus, blev linket hængende gult bagefter. Fokus markeres af
   konturen nedenfor — den virker på enhver flade og bærer ikke farve alene. */
a:hover { background: var(--signal); box-shadow: inset 0 -2px 0 0 var(--signal); }

a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Links der ikke skal bære gul streg (nav, knapper, logo, hele kort).
   Den gule streg hører til tekstlinks. Et helt kort er et felt, og
   signalstregen må aldrig lægge sig som ramme om et felt (07). */
a.bar, .nav a, .btn, .logo, .kort a, .kort--link, .footer a { box-shadow: none; }
a.bar:hover, .logo:hover,
.kort--link:hover, .kort--link:focus-visible { box-shadow: none; }

/* --------------------------------------------------------------------------
   LOGO · 02+03 — rigtige filer, ikke sat i CSS.
   Monogrammet er Libre Baskerville, ordmærket Instrument Sans 500. Netop den
   kontrast er mærkets kerne, så lockuppet sættes ALDRIG om i live tekst —
   brug filerne i assets/logo/.

   Filerne er beskåret tæt (baggrunden er gjort transparent), så frizonen
   styres herfra. Frizonen = versalhøjden af "JB", målt på filerne:
     · primært lockup   0,78 × højden  = 0,278 × bredden  (format 2,806:1)
     · horisontalt      0,75 × højden  = 0,120 × bredden  (format 6,240:1)
   Intet må lægge sig tættere på lockuppet end det.
   -------------------------------------------------------------------------- */
.logo { display: inline-block; line-height: 0; }
.logo img { display: block; width: 100%; height: auto; }
.logo:hover { background: transparent; }

/* Horisontalt · én linje. Sidehoved, mailsignatur, alt under 60px i højden. */
.logo--inline {
  width: var(--logo-b, 168px);
  --logo-frizone: calc(var(--logo-b, 168px) * 0.120);
}

/* Primært lockup med descriptor. Footer, visitkort, store flader.
   Negativversionen står HELT i papirfarve — descriptoren er aldrig gul (02). */
.logo--primar {
  width: var(--logo-b, 200px);
  --logo-frizone: calc(var(--logo-b, 200px) * 0.278);
}

/* Monogram. Favicon, profilbillede, stempel — alene under 120px lockupbredde. */
.logo--mono { width: var(--logo-b, 44px); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--bredde); margin-inline: auto; padding-inline: var(--gutter); }

section { padding-block: var(--sektion); }
section.taet { padding-block: var(--sektion-sm); }

/* To sektioner på SAMME flade lægger deres lodrette luft sammen, så
   mellemrummet mellem dem bliver dobbelt så stort som mellemrummet ned til
   næste farveskift — næste sektions egen luft ligger jo inde i dens farve.
   .uden-top fjerner den ene halvdel, så luften omkring indholdet er ens. */
section.uden-top { padding-top: 0; }

/* Papir og sten skifter. Navy afslutter. Højst to baggrundsfarver pr. side. */
.flade-sten  { background: var(--sten); }
.flade-navy  { background: var(--navy); color: var(--papir); }
.flade-navy h1, .flade-navy h2, .flade-navy h3, .flade-navy blockquote { color: var(--papir); }
.flade-navy .label { color: var(--dis-navy); }
.flade-navy .lede, .flade-navy p { color: #D3D8DF; }
.flade-navy a:not(.btn) { color: var(--papir); }
.flade-navy a:not(.btn):hover { color: var(--navy); }   /* gul markering bag teksten */

.grid { display: grid; gap: 40px var(--gutter); grid-template-columns: repeat(12, 1fr); }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.stak > * + * { margin-top: 20px; }

/* --------------------------------------------------------------------------
   07 · Grafiske elementer
   Signalstreg: 2px gul OVER overskrifter, 1px navy mellem rækker.
   Aldrig som ramme om et helt felt.
   -------------------------------------------------------------------------- */
.streg::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--signal);
  margin-bottom: 20px;
}

.streg--kort::before { width: 34px; }

hr.raekke { border: 0; border-top: 1px solid var(--linje); margin: 0; }
.flade-navy hr.raekke { border-top-color: var(--navy-op); }

/* Navy plade — bæreflade for logo på foto og for citater.
   Altid firkantede hjørner. */
.plade {
  background: var(--navy);
  color: var(--papir);
  padding: 44px;
}
.plade blockquote { color: var(--papir); }

/* --------------------------------------------------------------------------
   07 · Knapper — firkantede hjørner, 0,12em spatiering.
   Primær fyldt navy, sekundær 1px kontur.
   På navy: signalgul flade med navy tekst (11,9:1).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 17px 30px;
  border: 1px solid var(--navy);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.btn--primar { background: var(--navy); color: var(--papir); }
.btn--primar:hover { background: #0E1A2E; color: var(--papir); }

.btn--sekundar { background: transparent; color: var(--navy); }
.btn--sekundar:hover { background: var(--navy); color: var(--papir); }

.flade-navy .btn--primar { background: var(--signal); border-color: var(--signal); color: var(--navy); }
.flade-navy .btn--primar:hover { background: #E8C200; border-color: #E8C200; color: var(--navy); }
.flade-navy .btn--sekundar { border-color: var(--dis-navy); color: var(--papir); }
.flade-navy .btn--sekundar:hover { background: var(--papir); border-color: var(--papir); color: var(--navy); }

.knapper { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   Sidehoved
   -------------------------------------------------------------------------- */
.spring {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--papir); padding: 12px 18px; z-index: 100;
}
.spring:focus { left: 12px; top: 12px; }

.topbar {
  border-bottom: 1px solid var(--linje);
  font-size: 13px;
  color: var(--dis);
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 11px; }
.topbar a { color: var(--dis); box-shadow: none; }
.topbar a:hover { background: var(--signal); color: var(--navy); }

.header { position: sticky; top: 0; z-index: 50; background: var(--papir); border-bottom: 1px solid var(--linje); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 13px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--skifer);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--signal); background: transparent; }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--signal); }

.header .btn { padding: 13px 22px; font-size: 12px; }

.burger { display: none; background: none; border: 1px solid var(--linje); padding: 10px 14px; font: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: var(--navy); }

/* --------------------------------------------------------------------------
   Titelbånd — ekko af den oprindelige sides titelbjælke over indholdet.
   Originalen kører den i navy; her er den i sten, fordi navy er reserveret
   til afslutning, CTA og footer (05 · Fladekombinationer).
   -------------------------------------------------------------------------- */
.titelbaand {
  background: var(--sten);
  padding-block: clamp(52px, 6vw, 84px);
  text-align: center;
}
.titelbaand h1 { margin-inline: auto; max-width: 18ch; }
.titelbaand .lede { margin-inline: auto; margin-top: 22px; }
.titelbaand .streg::before { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(64px, 8vw, 120px) var(--sektion); }

/* Fotoet bløder ud til højre skærmkant. overflow-x: clip gør, at rullebjælkens
   bredde ikke kan udløse vandret scroll — det overskydende klippes bare. */
.hero--bleed { overflow-x: clip; }
@media (min-width: 1041px) {
  .hero--bleed .foto {
    width: calc(100% + (100vw - min(100vw, var(--bredde))) / 2 + var(--gutter));
  }
}
.hero .grid { align-items: center; }
.hero h1 { margin-bottom: 26px; }
.hero .knapper { margin-top: 34px; }

/* Fotoflade. 08 · Firkantede beskæringer, ingen symboler.
   Billedet sættes inline: style="background-image:url('assets/img/x.jpg')".

   Brug IKKE en custom property til stien. Et relativt url() inde i en custom
   property opløses i forhold til det stylesheet, der bruger variablen — altså
   denne fil, som ligger i /assets/ — så 'assets/img/x.jpg' blev til
   /assets/assets/img/x.jpg. Inline background-image opløses mod dokumentet
   og er derfor entydig. */
.foto {
  background-color: var(--navy);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: var(--foto-ratio, 4 / 5);
  position: relative;
}
.foto--bred { aspect-ratio: 3 / 2; }
.foto--kvadrat { aspect-ratio: 1 / 1; }

/* Tre billeder side om side. 1px navy mellem rækker/felter (07). */
.fotoraekke { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .fotoraekke { grid-template-columns: 1fr; } }
.foto__mangler {
  position: absolute; inset: auto 0 0 0;
  padding: 20px 24px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--dis-navy);
}

/* --------------------------------------------------------------------------
   Kort — overskrift med streg. Standardmønster for kort og lister.
   -------------------------------------------------------------------------- */
/* 07 · "1px navy mellem rækker." Kun vandrette streger — ingen lodrette.

   To forsøg før dette: en malet bund bag gitteret med 1px gap gjorde hver tom
   celle til en grå blok, og streger som box-shadow på kortene tegnede en ramme
   om det tomme felt nederst. Begge dele skyldtes, at gitteret blev tegnet som
   et bordnet, der kræver at alle celler er fyldt. Ti ydelser i fire søjler
   efterlader to huller, og det tal skifter med skærmbredden.

   Stregen ligger nu under hvert kort. En ufuldstændig sidste række efterlader
   derfor ingenting — ingen blok, ingen ramme — og bogen vil alligevel kun have
   streger mellem rækkerne. */
.kort-net {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  border-top: 1px solid var(--linje);
}
.flade-sten .kort-net { border-top-color: var(--linje-blod); }

.kort {
  padding: 38px 40px 40px 0;
  border-bottom: 1px solid var(--linje);
}
.flade-sten .kort { border-bottom-color: var(--linje-blod); }

.kort h3 { margin-bottom: 12px; font-size: 20px; }
.kort p { font-size: 16px; line-height: 1.55; margin: 0; }

.kort--link { display: block; color: inherit; }
.kort--link:hover { background: #fff; }
.flade-sten .kort--link:hover { background: #F1EFEB; }

/* Liste med 1px navy mellem rækker */
.raekker { border-top: 1px solid var(--linje); }
.raekke-punkt { border-bottom: 1px solid var(--linje); padding-block: 30px; display: grid; gap: 8px 32px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.raekke-punkt h3 { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.raekke-punkt p { font-size: 16px; margin: 0; }

/* --------------------------------------------------------------------------
   Definitionsblokke (Information)
   -------------------------------------------------------------------------- */
.data { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--linje); border: 1px solid var(--linje); }
.data > div { background: var(--papir); padding: 30px 28px; }
.flade-sten .data { background: var(--linje-blod); border-color: var(--linje-blod); }
.flade-sten .data > div { background: var(--sten); }
.data dt { font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--dis); margin-bottom: 14px; }
.data dd { margin: 0; font-size: 16px; line-height: 1.7; color: var(--skifer); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--linje); }
.faq--to { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 0; }
.faq--to > details { border-top: 1px solid var(--linje); border-bottom: 0; }
@media (max-width: 760px) { .faq--to { grid-template-columns: 1fr; } }
.faq details { border-bottom: 1px solid var(--linje); }
.faq summary {
  list-style: none; cursor: pointer; padding-block: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 1; color: var(--navy); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { box-shadow: inset 0 -2px 0 0 var(--signal); }
.faq details > p { padding-bottom: 26px; margin: 0; max-width: 62ch; font-size: 16px; }

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.felt { display: grid; gap: 8px; }
.felt label { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dis); }
.felt input, .felt select, .felt textarea {
  font: inherit; font-size: 16px; color: var(--navy);
  background: var(--papir);
  border: 1px solid var(--linje); border-radius: 0;
  padding: 14px 16px;
}
.flade-sten .felt input, .flade-sten .felt select, .flade-sten .felt textarea { background: #fff; border-color: var(--linje-blod); }
.felt textarea { min-height: 148px; resize: vertical; }
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: none; border-color: var(--navy); box-shadow: inset 0 -2px 0 0 var(--signal); }
.form .btn { justify-self: start; }
.par { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

/* --------------------------------------------------------------------------
   Kontaktlinje
   -------------------------------------------------------------------------- */
.kontaktlinje { display: grid; gap: 2px; font-size: 17px; line-height: 1.7; }
/* Linkene er gitterceller og ville ellers strække sig over hele kolonnen, så
   både understregningen og den gule markering ved hover blev et bånd på tværs.
   Bogen vil have markeringen BAG TEKSTEN, så cellen krymper til sit indhold. */
.kontaktlinje a { color: var(--navy); justify-self: start; }

/* --------------------------------------------------------------------------
   Footer — navy, negativt lockup, sekundær tekst i #8D99AD.
   -------------------------------------------------------------------------- */
.footer { background: var(--navy); color: var(--dis-navy); padding-block: var(--sektion-sm) 44px; font-size: 15px; }
.footer a { color: var(--dis-navy); box-shadow: none; }
/* Hover i footeren er en gul understregning, ikke en gul flade: cellerne i
   ydelseslisten er blok-links, og en flade fylder hele cellen. */
.footer a:hover { background: transparent; color: var(--papir); box-shadow: inset 0 -2px 0 0 var(--signal); }
.footer h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--papir); margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer .adresse { color: var(--papir); line-height: 1.75; }
.footer__bund { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--navy-op); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 13px; }

/* --------------------------------------------------------------------------
   Footer · Alle ydelser — én liste, fire spalter, 1px navy-op mellem rækker.
   -------------------------------------------------------------------------- */
.footer__ydelser-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--navy-op); padding-bottom: 14px; }
.footer__ydelser-hoved h4 { margin: 0; }
.footer__antal { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--dis-navy); }
/* .footer ul (0,1,1) slår .footer__ydelser (0,1,0), så margin og gap skal
   sættes med samme vægt — ellers vinder den generelle regels margin:0 og
   gap:9px, og listen klæber til logoblokken nedenunder. */
.footer .footer__ydelser { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); row-gap: 0; }
.footer__ydelser li { border-bottom: 1px solid var(--navy-op); }
.footer__ydelser a { display: block; padding: 13px 0; line-height: 1.4; }
/* I listen er understregningen rækkens egen streg, der bliver gul: 1px kant
   + 1px skygge under den = 2px signal, uden at noget flytter sig. */
.footer__ydelser a:hover { box-shadow: none; }
.footer__ydelser li:hover { border-bottom-color: var(--signal); box-shadow: 0 1px 0 0 var(--signal); }
.footer__bund-grid { padding-top: 80px; }   /* samme luft som mellem sektioner */
@media (max-width: 1040px) { .footer .footer__ydelser { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .footer .footer__ydelser { grid-template-columns: 1fr; } .footer__bund-grid { padding-top: 56px; } }

/* --------------------------------------------------------------------------
   Guidesider — prosa, trin, punktliste, vurderingsformular
   -------------------------------------------------------------------------- */
.prosa { max-width: 72ch; }
.prosa h2 { margin-top: 56px; margin-bottom: 18px; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 30px; margin-bottom: 10px; }
.prosa p { margin: 0 0 1.15em; }
.prosa .label { margin-bottom: 14px; }
.prosa .knapper { margin-top: 26px; }

.liste { margin: 0 0 1.3em; padding-left: 1.2em; }
.liste li { margin-bottom: .5em; }
.liste li::marker { color: var(--navy); }

/* Hero-kugler: tre korte løfter med 1px navy mellem rækkerne. */
.punkter { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); font-size: 18px; }
.punkter li { padding: 16px 0; border-bottom: 1px solid var(--linje); }

/* Trin: nummer i Libre Baskerville, 1px navy mellem rækkerne (07). */
.trin-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje-blod); }
.trin { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--linje-blod); }
.trin__nr { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--navy); }
.trin h3 { margin-bottom: 8px; }
.trin p { margin: 0; max-width: 64ch; }

/* Vurderingsformular på navy. Felterne er papir, så de læses som felter. */
.wizard { display: grid; gap: 22px; }
.wizard__hoved { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--navy-op); padding-bottom: 14px; }
.wizard__status { color: var(--dis-navy); }
.wizard__trin { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; }
.wizard__trin legend { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--papir); margin-bottom: 6px; padding: 0; }
.wizard__opts { display: grid; gap: 10px; }
.wizard__opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--navy-op); color: var(--papir); cursor: pointer; }
.wizard__opt:hover { border-color: var(--dis-navy); }
.wizard__opt:has(input:checked) { border-color: var(--signal); box-shadow: inset 0 -2px 0 0 var(--signal); }
.wizard__opt input { accent-color: var(--signal); width: 16px; height: 16px; margin: 0; }
.wizard__fejl { color: var(--dis-navy); min-height: 1.2em; margin: 0; }
.wizard .felt label { color: var(--dis-navy); }
.wizard .felt input, .wizard .felt textarea { background: var(--papir); border-color: var(--papir); color: var(--navy); }
.wizard .felt input:focus, .wizard .felt textarea:focus { border-color: var(--signal); }
.wizard__tak p { color: var(--papir); }
.flade-navy .prosa h2, .flade-navy h2 { color: var(--papir); }

@media (max-width: 760px) { .trin { grid-template-columns: 56px 1fr; gap: 16px; } .trin__nr { font-size: 26px; } }

/* --------------------------------------------------------------------------
   Responsivt
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  :root { --sektion: 76px; --sektion-sm: 60px; }
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .raekke-punkt { grid-template-columns: 1fr; }
  .par { grid-template-columns: 1fr; }
  .nav { display: none; }
  .nav.aaben {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papir); border-bottom: 1px solid var(--linje);
    padding: 8px var(--gutter) 20px;
  }
  .nav.aaben a { width: 100%; padding-block: 14px; border-bottom: 1px solid var(--linje); }
  .burger { display: inline-block; }
  .header .wrap { position: relative; }
  .header .btn { display: none; }
  .plade { padding: 30px; }
}

@media (max-width: 560px) {
  .topbar .wrap { flex-direction: column; gap: 4px; }
  .kort { padding: 30px 0 32px; }   /* venstrekant følger sektionens */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}