/* Designsproget. Ét sted, så en knap ser ens ud uanset hvilken skærm
   den står på.

   Mørk og rolig. Personligheden kommer fra avatarerne, ikke fra rammen —
   derfor kun én accentfarve, og kun på handlinger.

   Kontrasttal er regnet efter, ikke gættet:
     dæmpet tekst #9a9aa5 mod bunden           6,9:1
     dæmpet tekst #9a9aa5 mod en flade         6,2:1
     hvid tekst på accenten #7a55ff            4,6:1
     lys accent #9b84ff som tekst mod bunden   6,5:1
     lys accent på mærkatens tonede bund       4,9:1

   Den lilla i mockup'en var #7c5cff. Hvid tekst på den giver 4,37:1 og
   ligger dermed under grænsen for almindelig tekst. #7a55ff ser ud som
   det samme og lander på 4,61:1. Derfor den.

   Accenten som TEKST på mørk bund er en anden sag: #7a55ff giver kun
   4,15:1 mod bunden. Derfor findes --accent-lys, og den bruges hver
   gang accenten er bogstaver i stedet for en flade. */

:root {
  --bund:        #0f0f12;
  --flade:       #1a1a20;
  --flade-2:     #24242d;
  --kant:        #2e2e39;
  --tekst:       #ffffff;
  --dæmpet:      #9a9aa5;
  --svag:        #6b6b76;
  --accent:      #7a55ff;
  --accent-lys:  #9b84ff;
  --accent-tone: rgba(122, 85, 255, 0.16);
  --på-accent:   #ffffff;
  --fejl:        #ff8a8a;

  --runding-lille: 10px;
  --runding:       14px;
  --runding-stor:  20px;

  /* Bundmenuen ligger oven på indholdet. Sidste kort skal kunne rulles
     fri af den, ellers kan man ikke trykke på det. */
  --menuhøjde: 4.4rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.45 -apple-system, system-ui, "Segoe UI", sans-serif;
  background: var(--bund);
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent);
}

h1 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

/* Sektionsetiket. Lille og dæmpet — den skal kunne springes over af
   den der allerede ved hvad der står nedenunder. */
h2 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dæmpet);
  margin: 1.5rem 0 0.5rem;
}

p { margin: 0 0 0.75rem; }
/* Titel og undertekst i en række skal stå over hinanden, også når de
   ligger inde i en knap hvor alt ellers flyder på linje. */
.blok, .under { display: block; }
.blød { color: var(--dæmpet); }
.fejl { color: var(--fejl); }
.lille { font-size: 0.85rem; }

.meta {
  color: var(--dæmpet);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ rammen */

.skal {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Hovedet bliver hængende i toppen når man ruller. Halvgennemsigtigt,
   så det er tydeligt at der ligger noget bagved der er i bevægelse. */
.skalhoved {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: calc(0.9rem + env(safe-area-inset-top)) 1.25rem 0.7rem;
  background: rgba(15, 15, 18, 0.88);
  backdrop-filter: blur(14px);
}
.skalhoved h1 { flex: 1; margin: 0; }

/* Et ark har titlen i midten og en lukkeknap i hjørnet. Den tomme plads
   i den anden side holder titlen centreret. */
.arktitel {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
.plads { width: 2.4rem; flex: none; }

.indhold {
  flex: 1;
  padding: 0 1.25rem calc(var(--menuhøjde) + 1.5rem + env(safe-area-inset-bottom));
}
.indhold.uden-menu {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.bundmenu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: rgba(15, 15, 18, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--kant);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------- knapper */

button {
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: var(--på-accent);
  background: var(--accent);
  border: 0;
  border-radius: var(--runding);
  padding: 0.85rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease;
}
button:active { transform: scale(0.98); }
button[disabled] { filter: none; opacity: 0.45; cursor: default; }
button[disabled]:active { transform: none; }

button.sekundær {
  background: var(--flade-2);
  color: var(--tekst);
  font-weight: 500;
}

/* Til det man sjældent gør, og aldrig ved et uheld: log ud, forlad. */
button.stille {
  background: none;
  color: var(--dæmpet);
  font-weight: 500;
}

/* Anmeld. Samme stilfærdige form som "log ud" — den skal kunne findes,
   ikke inviteres til. Farven gør at den ikke bliver trykket ved et uheld
   i stedet for knappen ved siden af. */
button.fare { color: var(--fejl); }

/* Beskeden til den hvis billede er skjult. Den er ikke en fejl hun har
   lavet, så den skal ikke se ud som en fejlmeddelelse — men den skal
   heller ikke kunne overses. */
.advarsel {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--runding-lille);
  border-left: 3px solid var(--fejl);
  background: var(--flade);
  font-size: 0.85rem;
  color: var(--dæmpet);
}

button.rund {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--flade-2);
  color: var(--tekst);
}
button.rund.accent { background: var(--accent); color: var(--på-accent); }

.fane {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 0.6rem 0 0.55rem;
  border-radius: 0;
  background: none;
  color: var(--dæmpet);
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.fane.aktiv { color: var(--accent-lys); }
.fane:active { transform: none; }

/* ----------------------------------------------------------- felter */

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--flade);
  padding: 0.8rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--kant);
  border-radius: var(--runding);
}
textarea { resize: vertical; min-height: 5rem; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent-lys);
  outline-offset: 2px;
}
input::placeholder, textarea::placeholder { color: var(--svag); }

/* ------------------------------------------------------------- kort */

.kort {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--runding-stor);
  padding: 1rem 1.1rem 0.9rem;
  margin-bottom: 0.85rem;
}
.kort > :last-child { margin-bottom: 0; }

/* Øverst: hvem har foreslået det, hvornår og hvor. Ansigtet først —
   det er et opslag fra en ven, ikke en post i en kalender. */
.kort-hoved {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.kort-hoved .voksende { flex: 1; min-width: 0; }
.kort-navn {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}
.kort-hoved .meta { font-size: 0.8rem; margin-top: 0.1rem; }

.kort-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

/* Selve forslaget. Det er den linje man læser, så den skal have luft
   over sig og være det største på kortet — men ikke skrigende fed:
   navnet ovenover bærer allerede vægten. */
.titel {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* To handlinger, ingen af dem vigtigst. Så skal de være stille i en
   fodlinje frem for to knapper der fylder hele bredden — ellers ligner
   kortet en formular. */
.kortfod {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--kant);
}
.kortfod .voksende { flex: 1; }

button.tekstknap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  margin: 0;
  padding: 0.3rem 0.5rem;
  background: none;
  color: var(--dæmpet);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--runding-lille);
}
button.tekstknap:active { background: var(--flade-2); transform: none; }

/* Et kort man trykker på, ikke læser i. Ikon, tekst, pil. */
.handlingskort {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--tekst);
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--runding-stor);
}
.handlingskort .voksende { flex: 1; min-width: 0; }
.handlingskort .pil { color: var(--dæmpet); flex: none; }

.ikonfelt {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--runding);
  background: var(--accent-tone);
  color: var(--accent-lys);
}

/* Et valg der bliver stående — derfor markeres det med kanten og ikke
   kun med en farve, så det også kan ses uden farvesyn. */
.valgkort {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin-bottom: 0.55rem;
  padding: 0.8rem 0.9rem;
  text-align: left;
  font-weight: 500;
  color: var(--tekst);
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--runding);
}
.valgkort.valgt {
  border-color: var(--accent);
  background: var(--accent-tone);
}
.valgkort .voksende { flex: 1; min-width: 0; }
.valgkort .under {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--dæmpet);
}

/* Rækker der hører sammen, samlet i én flade med streger imellem. */
.listekort {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--runding-stor);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.listerække {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.8rem 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--tekst);
  background: none;
  border: 0;
  border-top: 1px solid var(--kant);
  border-radius: 0;
}
.listekort > .listerække:first-child { border-top: 0; }
.listerække:active { transform: none; }
.listerække .voksende { flex: 1; min-width: 0; }
.listerække .pil { color: var(--dæmpet); flex: none; }

/* Knappen der sidder inde i en række må ikke fylde hele bredden. */
.listerække button {
  width: auto;
  margin: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 999px;
}

/* Noget der skete på vej ind i appen — en invitation der blev taget
   imod, et match. Hverken rød eller grøn: det er en besked, ikke en
   dom over noget. */
.besked {
  background: var(--accent-tone);
  border: 1px solid var(--accent);
  border-radius: var(--runding);
  padding: 0.8rem 1rem;
  margin-bottom: 0.9rem;
}

.tom {
  text-align: center;
  color: var(--dæmpet);
  padding: 2.5rem 1rem;
}
.tom .ikonfelt { margin: 0 auto 0.8rem; }

/* ----------------------------------------------------------- mærker */

.mærkat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--accent-tone);
  color: var(--accent-lys);
}
.mærkat.neutral { background: var(--flade-2); color: var(--dæmpet); }

/* Filterrækken ruller vandret frem for at brydes over to linjer. Med
   fem grupper ville en ombrudt række skubbe hele listen ned. */
.filterrække {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  margin: 0 -1.25rem 0.9rem;
  padding: 0 1.25rem 0.2rem;
  scrollbar-width: none;
}
.filterrække::-webkit-scrollbar { display: none; }
button.filter {
  width: auto;
  flex: none;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--flade);
  border: 1px solid var(--kant);
  color: var(--dæmpet);
  font-size: 0.88rem;
  font-weight: 500;
}
button.filter.valgt {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--på-accent);
  font-weight: 600;
}

/* Mærkatet på et kort står for sig selv under titlen. */
.mærkatrække { margin-top: 0.5rem; }

/* Valget af mærkat: alle muligheder synlige på én gang, så man ikke
   skal åbne en menu for noget der er valgfrit. */
.mærkatgitter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
button.mærkatvalg {
  width: auto;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--flade);
  border: 1px solid var(--kant);
  color: var(--tekst);
  font-size: 0.88rem;
  font-weight: 500;
}
button.mærkatvalg.valgt {
  background: var(--accent-tone);
  border-color: var(--accent);
  color: var(--accent-lys);
}

.navne { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; }
/* På et kort man ikke er med på, står "Jeg er med" nedenunder og skal
   have luft. I fodlinjens tilfælde sørger .kortfod selv for afstanden. */
.kort .navne + button { margin-top: 0.9rem; margin-bottom: 0; }

/* Navnet står altid ved siden af avataren. Det er ikke pynt: tre af
   de otte farver ligger under 3:1 mod fladen, og det er kun tilladt
   fordi mærket har en synlig etiket. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  margin: 0;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  background: var(--flade-2);
  color: var(--tekst);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
}
/* En markering. Kun du kan se den — indtil den er gensidig. */
.chip.markeret { background: var(--accent); color: var(--på-accent); }

/* En fra periferien: I kender de samme, men ikke hinanden. Stiplet kant
   frem for en anden farve — farverne hører til personerne, ikke til
   hvor de står i forhold til én. */
.chip.perifer {
  background: transparent;
  border: 1px dashed var(--kant);
  padding-right: 0.6rem;
}
.chip.perifer.markeret {
  background: var(--accent);
  border-color: transparent;
  color: var(--på-accent);
}
.chip .fælles {
  font-size: 0.75rem;
  color: var(--dæmpet);
  font-weight: 400;
}
.chip.markeret .fælles { color: var(--på-accent); opacity: 0.75; }

/* ------------------------------------------------------------- chat */

/* Beskederne ruller med hele siden i stedet for i en kasse midt på
   skærmen. En chat der har sin egen rullebjælke inde i en side der også
   ruller, kan man ikke ramme med tommelfingeren. */
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.chatlinje { display: flex; gap: 0.5rem; align-items: flex-end; }
.chatlinje.min { justify-content: flex-end; }

.boble {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: 18px 18px 18px 5px;
  padding: 0.6rem 0.85rem;
  max-width: 78%;
}
/* Egne beskeder står til højre i accentfarven, så man kan se hvem
   der siger hvad uden at læse navnet. */
.chatlinje.min .boble {
  background: var(--accent);
  color: var(--på-accent);
  border-color: transparent;
  border-radius: 18px 18px 5px 18px;
  cursor: pointer;
}
.afsender { font-size: 0.75rem; font-weight: 600; color: var(--dæmpet); margin-bottom: 0.15rem; }
.tidsstempel { font-size: 0.7rem; opacity: 0.65; margin-top: 0.2rem; }
.chatlinje.min .tidsstempel { text-align: right; }

/* Skrivelinjen bliver liggende i bunden — samme sted som bundmenuen
   ellers står, for det er den samme tommelfinger der skal nå den. */
.skrivelinje {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(15, 15, 18, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--kant);
}
.skrivelinje input {
  flex: 1;
  min-width: 0;
  margin: 0;
  border-radius: 999px;
  padding: 0.7rem 1rem;
  background: var(--flade-2);
}
.indhold.med-skrivelinje {
  padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
}

/* Titel og undertitel i hovedet, når det ikke er en ren overskrift. */
.hovedtitel { flex: 1; min-width: 0; text-align: center; }
.hovedtitel .blok {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hovedtitel .under { font-size: 0.75rem; color: var(--dæmpet); }

/* ----------------------------------------------------------- avatar */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
  /* Ringen adskiller cirklen fra fladen, også når fyldfarven er mørk */
  box-shadow: 0 0 0 2px var(--bund);
}
/* Et rigtigt billede fylder hele cirklen. Farven bliver liggende
   nedenunder, så der ikke blinker et hul mens det hentes. */
.avatar.foto {
  background-size: cover;
  background-position: center;
  color: transparent;
}
.avatar.lille { width: 1.6rem; height: 1.6rem; font-size: 0.9rem; box-shadow: none; }
.avatar.stor  { width: 6.5rem;  height: 6.5rem;  font-size: 3.4rem; }

/* ----------------------------------------------------------- profil */

.profilhoved { text-align: center; margin: 0.5rem 0 1.5rem; }
.profilhoved h1 { margin: 0.9rem 0 0.2rem; }
.profilhoved .blød { margin: 0; }

.stats { display: flex; gap: 0.6rem; }
.stat {
  flex: 1;
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: var(--runding);
  padding: 0.9rem 0.5rem;
  text-align: center;
}
.stat-tal { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.stat-etiket { color: var(--dæmpet); font-size: 0.8rem; margin-top: 0.15rem; }

.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.badge {
  border: 1px dashed var(--kant);
  border-radius: var(--runding);
  padding: 0.9rem 0.5rem;
  text-align: center;
  color: var(--svag);
  font-size: 0.8rem;
}
.badge-laas { font-size: 1.35rem; filter: grayscale(1); opacity: 0.7; }

.valggitter { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.6rem; }
.farvefelt, .avatarfelt {
  width: 2.9rem; height: 2.9rem;
  flex: none;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
.avatarfelt { background: var(--flade-2); font-size: 1.4rem; }
.farvefelt.valgt, .avatarfelt.valgt { border-color: var(--tekst); }

/* ----------------------------------------------------------- rækker */

/* Afstanden nedad ligger på rækken selv og ikke på knapperne indeni —
   ellers klemmer næste element sig op ad den. */
.række { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.række button { flex: 1; margin-bottom: 0; }

button.tid { background: var(--flade-2); color: var(--tekst); }
button.tid.valgt { background: var(--accent); color: var(--på-accent); }

/* ------------------------------------------------------------ logind */

/* Den eneste skærm uden bundmenu og uden hoved. Den skal føles som en
   dør, ikke som en side i appen. */
.port {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
}
/* Med de tre trin er døren højere end en lille telefon. Den lodrette
   centrering holder kun så længe der er plads til den — ellers starter
   indholdet i toppen og kan rulles, så email-feltet kan nås. */
@media (max-height: 720px) {
  .port { justify-content: flex-start; padding-top: 1.5rem; }
}

.portmærke { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }

/* Sådan virker det. Ikonerne står i stedet for tallene — de passer til
   resten af appen — men listen er en <ol>, så rækkefølgen står i selve
   dokumentet og ikke kun i kraft af hvordan det ser ud. */
.trin {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.5rem 0;
}

.trin li { display: flex; align-items: flex-start; gap: 0.8rem; }
.trin strong { display: block; font-size: 0.95rem; font-weight: 600; }
.trin span { display: block; font-size: 0.85rem; color: var(--dæmpet); }

.trin-ikon {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-tone);
  color: var(--accent-lys);
}

/* Svaret på "hvem er de andre?". Den tonede kant gør den til et løfte
   frem for endnu en linje brødtekst. */
.hvem {
  margin: 0 0 1.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  font-size: 0.85rem;
  color: var(--dæmpet);
}

.skel { border: 0; border-top: 1px solid var(--kant); margin: 1.75rem 0 0; }

/* Diskret. Den skal kunne findes, ikke ses. */
.portfod {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--svag);
  text-align: center;
}

.portfod a { color: var(--svag); text-decoration: underline; }
.portfod a:hover { color: var(--dæmpet); }

/* -------------------------------------------------- privatliv og vilkår

   To almindelige HTML-sider uden for appen. De skal kunne læses uden
   login og uden JavaScript — derfor er der ingen klasser på hvert
   afsnit, kun elementerne selv. Det gør dem også nemme at rette i.

   Linjelængden er sat i tegn, ikke i pixels: mere end omkring 68 tegn
   på en linje bliver svært at læse en hel side af. */
.dokument {
  max-width: 68ch;
  margin: 0 auto;
  padding: 2rem 1.5rem calc(3rem + env(safe-area-inset-bottom));
  line-height: 1.65;
}

.dokument h1 { font-size: 1.6rem; margin: 0 0 0.25rem; }
.dokument h2 {
  font-size: 1.1rem;
  margin: 2.25rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kant);
}
.dokument h3 {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.35rem;
  color: var(--accent-lys);
}

.dokument p { margin: 0 0 0.9rem; }
.dokument ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.dokument li { margin-bottom: 0.4rem; }
.dokument a { color: var(--accent-lys); }

.tilbagelink { font-size: 0.85rem; text-decoration: none; }
.dokument-bund { margin-top: 2.5rem; text-align: center; }
.portmærke span { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }