/* Forsiden på desken.dk. Delt mellem den danske og den engelske udgave, så de
   to sprog ikke kan komme visuelt fra hinanden.

   Farverne er de samme som hent-sidens og appens: papirfarvet bund, rød
   accent, dæmpet brun tekst. Lys udgave alene — hent.html har aldrig haft en
   mørk, og to halvfærdige temaer er værre end ét helt.

   Ingen webfonte: appen pakker Inter, men forsiden skal kunne vises på en
   dårlig forbindelse uden at vente på 40 kB skrift. Systemskrifterne ligner
   dem nok på afstand. */

:root {
  --papir:      #F7F3EA;
  --kort:       #FFFDF8;
  --tekst:      #3D3A33;
  --tekst-mut:  #5C574C;
  --tekst-svag: #7A756A;
  --tekst-fin:  #A09989;
  --kant:       #E5DFD2;
  --kant-stærk: #C9C2B4;
  --rød:        #D9544A;
  --rød-mørk:   #C4463C;
  --gul:        #C9923B;
  --grøn:       #22C55E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--papir);
  color: var(--tekst);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.ramme { max-width: 940px; margin: 0 auto; padding: 0 24px; }

/* ── Topbjælke ─────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--kant);
  background: var(--kort);
  position: sticky; top: 0; z-index: 10;
}
header .ramme { display: flex; align-items: center; gap: 20px; height: 60px; }
.mærke { font-weight: 700; font-size: 20px; letter-spacing: 0.12em; color: var(--rød); text-decoration: none; }
header nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
header nav a { color: var(--tekst-mut); text-decoration: none; font-size: 13.5px; }
header nav a:hover { color: var(--tekst); }
/* Sproglinket. Der viderestilles IKKE automatisk efter browsersprog: en
   dansker på en engelsksproget maskine skal ikke tvinges over på engelsk, og
   en automatisk viderestilling ødelægger tilbage-knappen. */
.sprog { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; border: 1px solid var(--kant-stærk); padding: 4px 9px; }
.knap-top { background: var(--rød); color: var(--kort) !important; padding: 7px 15px; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.knap-top:hover { background: var(--rød-mørk); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { padding: 76px 0 60px; text-align: center; }
.hero .øjenbryn { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.2em; color: var(--tekst-fin); text-transform: uppercase; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.18; margin: 16px auto 18px; max-width: 17em; letter-spacing: -0.01em; }
.hero p { font-size: 17px; color: var(--tekst-mut); max-width: 34em; margin: 0 auto 30px; }
.knapper { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.knap {
  display: inline-block; text-decoration: none; padding: 13px 26px;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0.04em; border: 1.5px solid transparent;
}
.knap-primær { background: var(--rød); color: var(--kort); }
.knap-primær:hover { background: var(--rød-mørk); }
.knap-sekundær { background: transparent; color: var(--tekst); border-color: var(--tekst); }
.knap-sekundær:hover { background: #3D3A3310; }
.under-knap { font-size: 12.5px; color: var(--tekst-fin); margin-top: 14px; }

/* ── Lærredstegningen ──────────────────────────────────────── */
.lærred { background: var(--kort); border: 1px solid var(--kant); box-shadow: 0 2px 14px rgba(61,58,51,0.07); margin: 8px 0 0; }
.lærred svg { display: block; width: 100%; height: auto; }
.lærred figcaption { font-size: 12.5px; color: var(--tekst-svag); padding: 11px 16px; border-top: 1px solid #F0EBDF; }

/* ── Afsnit ────────────────────────────────────────────────── */
section { padding: 58px 0; border-top: 1px solid var(--kant); }
section.uden-streg { border-top: none; }
/* Privatlivssiderne bærer deres sidetitel som h1 — forsiden har sin i .hero,
   som vinder på specificitet. Samme mål som h2, så rettelsen af
   overskriftshierarkiet ikke flytter en pixel. */
h1, h2 { font-size: 25px; letter-spacing: -0.01em; margin-bottom: 12px; }
h1 + .manchet,
h2 + .manchet { color: var(--tekst-mut); max-width: 40em; margin-bottom: 30px; font-size: 15.5px; }

.gitter { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kort { background: var(--kort); border: 1px solid var(--kant); padding: 22px 20px; }
.kort h3 { font-size: 15.5px; margin-bottom: 7px; }
.kort p { font-size: 13.5px; color: var(--tekst-mut); }
.kort .ikon { font-size: 20px; display: block; margin-bottom: 10px; }

/* Trinlisten: nummereret, fordi rækkefølgen ER pointen i arbejdsgangen. */
ol.trin { list-style: none; counter-reset: t; display: grid; gap: 16px; }
/* Gitter og ikke flex: som flex havde <b> ingen bredde og krympede efter
   længden af sin EGEN beskrivelse, så beskrivelseskolonnen begyndte et nyt
   sted i hver række. Tre faste spor gør kolonnen til en kolonne. */
ol.trin li { counter-increment: t; display: grid; grid-template-columns: 27px 190px 1fr; gap: 15px; align-items: start; }
ol.trin li::before {
  content: counter(t); flex-shrink: 0;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--rød); color: var(--kort);
  font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
ol.trin b { display: block; font-size: 15px; }
ol.trin span { font-size: 13.5px; color: var(--tekst-mut); }

/* Databeskyttelse: tre tilstande som en tabel, fordi forskellen mellem dem er
   præcis dét en it-afdeling spørger om. */
table.tilstande { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tilstande th, table.tilstande td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--kant); vertical-align: top; }
table.tilstande th { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tekst-fin); font-weight: 600; }
table.tilstande td:first-child { font-weight: 600; white-space: nowrap; }
.tabel-svøb { overflow-x: auto; }

.pris-kort { background: var(--kort); border: 1.5px solid var(--rød); padding: 28px 24px; max-width: 460px; }
.pris-kort .beløb { font-size: 27px; font-weight: 700; margin-bottom: 6px; }
.pris-kort ul { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.pris-kort li { font-size: 13.5px; color: var(--tekst-mut); padding-left: 22px; position: relative; }
.pris-kort li::before { content: "✓"; position: absolute; left: 0; color: var(--grøn); font-weight: 700; }

.note { font-size: 12.5px; color: var(--tekst-fin); margin-top: 16px; line-height: 1.7; }
a.ind { color: var(--gul); }

footer { border-top: 1px solid var(--kant); padding: 34px 0 46px; font-size: 12.5px; color: var(--tekst-fin); }
footer .ramme { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--tekst-svag); }
footer .højre { margin-left: auto; }

@media (max-width: 640px) {
  header nav a:not(.sprog):not(.knap-top) { display: none; }
  .hero { padding: 52px 0 44px; }
  section { padding: 44px 0; }
  /* En 190px titelkolonne ville efterlade under 100px til beskrivelsen på en
     telefon. Læg den i stedet over beskrivelsen, begge på linje til højre
     for nummeret. */
  ol.trin li { grid-template-columns: 27px 1fr; row-gap: 4px; }
  ol.trin span { grid-column: 2; }
}

/* ── Dokumentation ─────────────────────────────────────────────
   Bruges af /dokumentation og /docs. Ligger her og ikke i siderne
   selv, af samme grund som resten af filen: de to sprog må ikke
   kunne komme visuelt fra hinanden. */

/* Indholdsfortegnelsen. To kolonner på skærm, én på telefon — en
   liste med 18 punkter i én kolonne skubber hele teksten under
   folden, og så er oversigten ikke en oversigt. */
ol.indhold {
  list-style: none; counter-reset: d;
  columns: 2; column-gap: 28px;
  background: var(--kort); border: 1px solid var(--kant);
  padding: 20px 22px; margin-bottom: 8px;
}
ol.indhold li { counter-increment: d; break-inside: avoid; font-size: 13.5px; padding: 3px 0; }
ol.indhold li::before {
  content: counter(d) ". ";
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--tekst-fin);
}
ol.indhold a { color: var(--tekst-mut); text-decoration: none; }
ol.indhold a:hover { color: var(--rød); text-decoration: underline; }

/* Et afsnit pr. emne. scroll-margin-top, fordi topbjælken er sticky
   og ellers dækker overskriften, når man klikker sig ind fra
   indholdsfortegnelsen eller følger et link udefra. */
section.dok { padding: 34px 0; scroll-margin-top: 76px; }
section.dok h2 { font-size: 20px; margin-bottom: 10px; }
section.dok h3 { font-size: 15px; margin: 20px 0 6px; }
section.dok p,
section.dok li { font-size: 14px; color: var(--tekst-mut); }
section.dok p { max-width: 42em; margin-bottom: 10px; }
section.dok ul, section.dok ol.tal { padding-left: 20px; display: grid; gap: 7px; margin-bottom: 10px; max-width: 42em; }
section.dok ul { list-style: disc; }
section.dok b { color: var(--tekst); }
section.dok a { color: var(--gul); }

/* Rammen om noget, der ikke virker som man tror. Sparsomt brugt:
   bliver alt fremhævet, er intet fremhævet. */
.obs {
  border-left: 3px solid var(--gul); background: var(--kort);
  padding: 13px 16px; margin: 14px 0; max-width: 42em;
  font-size: 13.5px; color: var(--tekst-mut);
}
.obs b { color: var(--tekst); }

/* Tastaturtaster og filnavne. */
kbd {
  font-family: ui-monospace, monospace; font-size: 12px;
  border: 1px solid var(--kant-stærk); border-bottom-width: 2px;
  padding: 1px 6px; background: var(--kort); color: var(--tekst);
  white-space: nowrap;
}
section.dok code { font-family: ui-monospace, monospace; font-size: 12.5px; background: #3D3A330D; padding: 1px 5px; }

/* Genvejstabellen og supporttabellen. Samme som table.tilstande, men
   med en smal første kolonne til tasterne. */
table.dok-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; max-width: 42em; }
table.dok-tabel th, table.dok-tabel td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--kant); vertical-align: top; color: var(--tekst-mut); }
table.dok-tabel th { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tekst-fin); font-weight: 600; }
table.dok-tabel td:first-child { white-space: nowrap; color: var(--tekst); }

@media (max-width: 640px) {
  ol.indhold { columns: 1; }
  section.dok { padding: 28px 0; }
}