/* ==========================================================================
   Chris Greenkeeper
   Designsystem. Farverne er taget direkte ud af hans eget logo:
   #142e25 (moerkegroen) og #6aae43 (graesgroen). Papir og sand er lagt til.
   Signaturelement: saesonkalenderen. Alt er sat op som et scorekort fra
   golfbanen, altsaa tynde streger, smalle versaler og tal der flugter.
   ========================================================================== */

/* --- Nulstilling ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
table { border-collapse: collapse; width: 100%; }

/* --- Variabler --------------------------------------------------------- */
:root {
  --ink:        #142e25;  /* logoets moerkegroenne */
  --ink-soft:   #40584b;  /* daempet broedtekst */
  --grass:      #6aae43;  /* logoets graesgroenne */
  --fairway:    #3c6c30;  /* mellemgroen, holder kontrast paa baade papir og sand */
  --paper:      #f3eee2;  /* kalkpapir */
  --paper-warm: #ebe3d2;  /* et trin dybere */
  --sand:       #d9caa6;  /* bunkersand */
  --line:       #c4b699;  /* streg paa papir */
  --line-dark:  rgba(243,238,226,.26); /* streg paa moerk bund */

  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;

  /* 1400 og ikke fuld skaermbredde. Med en bredere spalte bliver hullet
     mellem overskrift og tekst 791 px, fordi teksten paa siden simpelthen
     ikke er lang nok til at fylde en hel bred skaerm. Det er den ene
     vaerdi, der skal aendres, hvis den skal ud i kanten igen. */
  --wrap: 1400px;
  /* Mellemrummet mellem de to spalter. Bruges baade i sidetoppen og i
     alle sektioner, saa spalterne staar samme sted hele vejen ned. */
  --split-gap: clamp(40px, 5vw, 88px);
  --gut: clamp(1.25rem, 3.5vw, 4rem);
  /* Afstanden fra skaermkanten ind til indholdets venstre kant. Bruges af
     de blokke, der gaar ud til kanten, saa de begynder samme sted som
     alt det, der ligger inde i .wrap. */
  --indryk: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}

/* --- Grundtypografi ---------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 700px) { body { font-size: 1.125rem; } }
@media (min-width: 1600px) { body { font-size: 1.1875rem; } }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.004em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.75rem, 6.2vw, 4.9rem);
  /* Lange ord som "Handelsbetingelser" skal kunne braekkes paa en smal
     skaerm, saa de ikke loeber ud over kanten. Men ingen orddeling med
     bindestreg, for den delte ogsaa helt almindelige ord midt over. */
  overflow-wrap: break-word;
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.06; }
h4 { font-size: 1.1875rem; line-height: 1.15; }

p { max-width: 62ch; }
p + p { margin-top: .85em; }
a { color: inherit; }

strong, b { font-weight: 600; }

/* Smalle versaler. Bruges til labels, rubrikker og tabelhoveder. */
.label {
  font: 600 .8125rem/1 var(--display);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.eyebrow {
  font: 600 .8125rem/1 var(--display);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--fairway);
  margin-bottom: 1.1rem;
}
.lead { font-size: 1.1875rem; line-height: 1.58; }
@media (min-width: 700px) { .lead { font-size: 1.3125rem; } }
.num { font-variant-numeric: tabular-nums; }

/* --- Fokus. Skal kunne ses tydeligt. ----------------------------------- */
:focus-visible {
  outline: 3px solid var(--grass);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  padding: .85rem 1.25rem; font-family: var(--display); letter-spacing: .1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* --- Layout ------------------------------------------------------------ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3rem, 5vw, 5rem); }
.section-tight { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }

.on-dark { background: var(--ink); color: var(--paper); }
.on-dark .eyebrow { color: var(--grass); }
.on-sand { background: var(--paper-warm); }

.rule-thin { border: 0; border-top: 1px solid var(--line); }
.on-dark .rule-thin { border-top-color: var(--line-dark); }

/* --- Knapper. Ingen runding, ingen piktogrammer. ------------------------ */
.btn {
  display: inline-block;
  font: 700 .9375rem/1 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 1.0625rem 1.75rem .9375rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background .14s linear, color .14s linear;
}
.btn:hover { background: var(--fairway); border-color: var(--fairway); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.on-dark .btn {
  background: var(--grass); border-color: var(--grass); color: #10241c;
}
.on-dark .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.on-dark .btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.on-dark .btn-ghost:hover { background: var(--paper); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* Paa smal skaerm faar knapperne samme bredde, saa kanterne flugter. */
@media (max-width: 479px) {
  .btn-row { display: grid; grid-template-columns: 1fr; }
  .btn-row .btn { text-align: center; }
  /* Formularens send-knap staar ikke i en btn-row, men skal flugte med
     felterne over den og med de andre knapper paa siden. */
  .form button[type="submit"] { width: 100%; }
}

/* Understreget tekstlink. */
.tlink {
  display: inline-block;
  font: 600 .9375rem/1 var(--display);
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--grass);
  padding-bottom: .28rem;
}
.tlink:hover { border-bottom-color: currentColor; }

/* --- Sidehoved --------------------------------------------------------- */
.head { border-bottom: 2px solid var(--ink); background: var(--paper); position: relative; }
.head__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 84px;
}
.head__logo {
  display: flex; align-items: center; gap: .7rem;
  flex: none; text-decoration: none;
}
/* aspect-ratio holder logoets bredde i proportion, ogsaa hvis billedet
   ikke naar frem. Uden den falder browseren tilbage paa width-attributten
   og skubber menuknappen ud over kanten. */
.head__logo img { height: 46px; width: auto; aspect-ratio: 136 / 150; }
.head__logo span {
  font: 700 1.3125rem/1 var(--display);
  letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.head__logo b { font-weight: 700; color: var(--fairway); }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font: 600 .875rem/1 var(--display);
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--grass); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.head__tel {
  flex: none; text-decoration: none;
  font: 700 1.375rem/1 var(--display);
  letter-spacing: .01em;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}
.head__tel span {
  display: block;
  font: 600 .6875rem/1 var(--display);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .35rem;
}
.head__tel:hover { color: var(--fairway); }

.burger {
  display: none; margin-left: auto;
  background: var(--ink); color: var(--paper); border: 0;
  font: 700 .875rem/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
  padding: .85rem 1.1rem .7rem; cursor: pointer;
}

@media (max-width: 1023px) {
  .head__in { min-height: 68px; }
  .head__logo img { height: 38px; }
  .head__logo span { font-size: 1.125rem; }
  .burger { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    margin: 0; padding: .5rem var(--gut) 1.5rem;
  }
  .head.is-open .nav { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a {
    display: block; padding: .95rem 0; font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--fairway); }
  .head__tel { display: none; }
}

/* --- Forside, hero. Skaev opdeling, ikke centreret. --------------------- */
.hero { border-bottom: 2px solid var(--ink); }

/* Heroen ligger inden for samme ramme som alt andet paa sitet.
   Foer loeb billedet ud til hoejre skaermkant. Det saa godt ud paa en
   almindelig skaerm, men zoomede man ud, voksede billedet uden loft, mens
   teksten stod fast. Ved 7680 px var billedet 3836 px mod tekstens 584, og
   hele venstre side stod tom. Nu stopper heroen samme sted som sidehovedet
   og sektionerne, i enhver bredde. */
.hero__in { display: grid; }
@media (min-width: 900px) {
  .hero__in {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
    /* Lige brede spalter. Med 47/53 blev tekstspalten saa smal, at
       overskriften braekkede over tre linjer i stedet for to. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--split-gap);
    align-items: stretch;
  }
}
.hero__text {
  padding: clamp(2.5rem, 5vw, 4.75rem) var(--gut) clamp(2.75rem, 5vw, 4.75rem);
  width: 100%;
}
@media (min-width: 900px) {
  /* Rammen giver luften i siderne, saa teksten skal ikke ogsaa have den. */
  .hero__text { padding-inline: 0; }
}
.hero__text .lead { max-width: 35ch; }
/* Under 900 px staar teksten over billedet i fuld bredde. Saa ville 35ch
   efterlade halvdelen af linjen tom paa en tablet. Samme maal som
   undersidernes indledning. */
@media (max-width: 899px) {
  .hero__text .lead { max-width: 46rem; }
}
.hero__img { position: relative; min-height: 300px; background: var(--ink); }
/* Portraettet er staaende, men hero-feltet er liggende. Beskaeringen skal
   derfor tage fra bunden, ellers ryger hovedet af ham. */
.hero__img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 16%;
}
@media (max-width: 899px) { .hero__img { min-height: 58vw; } }

/* Faktalinje. */
.facts { border-top: 1px solid var(--line); }
.facts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .facts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Tallene staar midt i hver celle. Det er det ene sted paa sitet, hvor det
   giver mening: cellerne er lige brede og adskilt af streger, saa et kort tal
   som "26 %" ellers haenger ude i venstre kant, langt fra sin egen tekst.
   Resten af sitet er stadig venstrestillet. */
.facts li {
  padding: 1.4rem 1.25rem 1.3rem;
  border-right: 1px solid var(--line);
  text-align: center;
}
.facts li:last-child { border-right: 0; }
@media (min-width: 760px) { .facts li { padding-inline: 1.5rem; } }
@media (max-width: 759px) {
  .facts li:nth-child(2n) { border-right: 0; }
  .facts li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.facts b { display: block; font: 700 1.75rem/1 var(--display); margin-bottom: .3rem; }
.facts span { font-size: .9375rem; line-height: 1.35; display: block; color: var(--ink-soft); }
.on-dark .facts span { color: rgba(243,238,226,.72); }
.on-dark .facts li { border-color: var(--line-dark); }
.on-dark .facts { border-top-color: var(--line-dark); }

/* --- SIGNATUR: saesonkalenderen ---------------------------------------- */
/* Otte spalter, marts til oktober. Besoegene ligger paa de maaneder hvor de
   falder. Paa smal skaerm bliver den til en almindelig liste. */
.kal { margin-top: clamp(2rem, 4vw, 3rem); }
.kal__months {
  display: none;
  grid-template-columns: repeat(8, 1fr);
  border-bottom: 1px solid var(--line-dark);
}
.kal__months li {
  font: 600 .75rem/1 var(--display);
  letter-spacing: .15em; text-transform: uppercase;
  padding: 0 0 .7rem .6rem;
  border-left: 1px solid var(--line-dark);
  color: rgba(243,238,226,.66);
}
.kal__months li:first-child { border-left: 0; padding-left: 0; }

.kal__stops { display: grid; gap: 0; }
.kal__stop {
  padding: 1.4rem 0 1.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.kal__stop:last-child { border-bottom: 0; }
.kal__when {
  display: block;
  font: 600 .75rem/1 var(--display);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--grass); margin-bottom: .6rem;
}
.kal__what { display: block; font: 700 1.375rem/1.05 var(--display); margin-bottom: .5rem; }
.kal__note { display: block; font-size: .9375rem; line-height: 1.5; color: rgba(243,238,226,.76); max-width: 34ch; }
.kal__closing-note { margin-top: 2rem; max-width: 56ch; }

@media (max-width: 759px) {
  .kal__stop:last-child { padding-bottom: .65rem; }
  .kal__closing-note { margin-top: .85rem; }
}

/* Paa tablet staar de fire besoeg to og to. En enkelt spalte efterlod mere
   end halvdelen af bredden tom, fordi noterne er holdt paa 34ch. */
@media (min-width: 600px) and (max-width: 899px) {
  .kal__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--split-gap); }
  .kal__stop:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (min-width: 900px) {
  .kal__months { display: grid; }
  .kal__stops {
    grid-template-columns: repeat(8, 1fr);
    padding-top: 1.6rem;
  }
  .kal__stop {
    grid-row: 1;
    grid-column: var(--from) / var(--to);
    padding: 0 1.25rem 0 .6rem;
    border-bottom: 0;
    border-left: 1px solid var(--line-dark);
    position: relative;
  }
  .kal__stop::before {
    content: ""; position: absolute; left: -1px; top: -1.6rem;
    width: 3px; height: 1.6rem; background: var(--grass);
  }
  .kal__note { max-width: none; }
}

/* --- Scorekort. Pakketabellen. ----------------------------------------- */
/* position: relative, saa absolut placerede elementer inde i tabellen,
   for eksempel den skjulte tekst til skaermlaesere, bliver holdt inde i
   rullefeltet og ikke skubber hele siden i bredden. */
.card-scroll { overflow-x: auto; position: relative; }
/* Pakkenavnet faar den brede kolonne. Saa fylder tabellen hele bredden
   ud, uden at oejet skal rejse langt fra navnet til prisen. */
.score th:first-child { width: 34%; }
.score { min-width: 680px; }
.score th, .score td {
  text-align: left; padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.score thead th {
  border-bottom: 2px solid var(--ink);
  font: 600 .8125rem/1.3 var(--display);
  letter-spacing: .15em; text-transform: uppercase;
  padding-bottom: .8rem;
  color: var(--ink-soft);
}
.score th:first-child, .score td:first-child { padding-left: 0; }
.score th:last-child, .score td:last-child { padding-right: 0; text-align: right; }
.score tbody th { font-weight: 700; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.score tbody th small {
  display: block; font-family: var(--body); font-size: .875rem;
  font-weight: 400; color: var(--ink-soft); margin-top: .35rem; letter-spacing: 0;
}
.score .kr { font: 700 1.5rem/1 var(--display); white-space: nowrap; }
.score tbody tr:last-child th, .score tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.score .yes { color: var(--fairway); font-weight: 700; }
.score .no { color: #6b6453; }
/* "Inkluderet" i saesontabellen. Saettes som et lille stempel i smalskrift,
   saa det flugter med resten af tabelsproget. Er besoeget ikke med, staar
   cellen tom, og teksten ligger kun for skaermlaesere. */
.score .ja {
  font: 700 .8125rem/1 var(--display);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fairway);
}

/* Skjult for oejet, men laest hoejt af skaermlaesere. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Saesontabellen: de fire maaneder midterstilles, saa kolonnehoved og
   indhold staar ud for hinanden. Pakkenavn til venstre, pris til hoejre. */
.score-matrix th:not(:first-child):not(:last-child),
.score-matrix td:not(:first-child):not(:last-child) { text-align: center; }
.score-matrix { min-width: 820px; }

/* Paa smal skaerm bliver hver pakke sin egen blok: navn til venstre, pris
   til hoejre og derunder en linje pr. kolonne med kolonnens navn foran.
   Saa skal ingen swipe sidelaens i en tabel, der bliver skaaret over midt
   i et ord. Navnene kommer fra data-label paa hver celle. */
@media (max-width: 899px) {
  .score.score--stak,
  .score.score--stak tbody,
  .score.score--stak tbody th,
  .score.score--stak tbody td { display: block; }
  .score.score--stak { min-width: 0; }
  .score.score--stak thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .score.score--stak tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem; padding-block: 1.25rem;
    border-bottom: 1px solid var(--line);
  }
  .score.score--stak tbody tr:first-child { border-top: 2px solid var(--ink); }
  .score.score--stak tbody tr:last-child { border-bottom: 2px solid var(--ink); }
  .score.score--stak tbody tr th,
  .score.score--stak tbody tr td {
    width: auto; padding: 0; border: 0; text-align: left;
  }
  .score.score--stak tbody tr th { grid-column: 1; grid-row: 1; }
  .score.score--stak tbody tr td.kr { grid-column: 2; grid-row: 1; text-align: right; }
  .score.score--stak tbody tr td:not(.kr) {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid var(--line); text-align: right; line-height: 1.4;
  }
  .score.score--stak tbody tr td:not(.kr)::before {
    content: attr(data-label); text-align: left;
    font: 600 .75rem/1.35 var(--display);
    letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft);
  }
  /* Et besoeg, der ikke er med, staar tomt paa store skaerme. Her ville en
     tom linje med kun en overskrift se ud som en fejl, saa teksten vises. */
  .score.score--stak .sr {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; clip-path: none;
    font: 700 .8125rem/1 var(--display);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  /* Vaerdien holdes paa een linje. Det er overskriften foran, der maa
     knaekke, hvis pladsen slipper op. */
  .score.score--stak .ja, .score.score--stak .sr { white-space: nowrap; }
  .score.score--stak caption { display: block; }
}

/* --- Prisliste, tre stoerrelser ---------------------------------------- */
.sizes th, .sizes td { padding: .95rem 1rem; border-bottom: 1px solid var(--line); text-align: right; }
.sizes th:first-child, .sizes td:first-child { text-align: left; padding-left: 0; }
.sizes td:last-child, .sizes th:last-child { padding-right: 0; }
.sizes thead th {
  border-bottom: 2px solid var(--ink);
  font: 600 .8125rem/1.3 var(--display); letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sizes tbody th { font: 700 1.25rem/1 var(--display); }
.sizes .kr { font: 700 1.25rem/1 var(--display); white-space: nowrap; }
.sizes tbody tr:last-child th, .sizes tbody tr:last-child td { border-bottom: 2px solid var(--ink); }

/* --- Pakkeblok paa pakkesiden ------------------------------------------ */
.pak { border-top: 2px solid var(--ink); padding-top: 1.75rem; margin-top: clamp(3rem, 5vw, 4.5rem); }
.pak:first-of-type { margin-top: 0; }
/* Guldpakken er den mest komplette, og den faar derfor sin egen bund,
   saa den kan ses fra den anden ende af siden. */
.pak--frem {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) clamp(1.75rem, 3vw, 2.5rem);
}
.pak--frem .pak__navn span { color: var(--fairway); }

.pak__top { display: grid; gap: 1.25rem; align-items: baseline; }
@media (min-width: 800px) { .pak__top { grid-template-columns: 1fr auto; } }
.pak__navn { font: 700 clamp(2.4rem, 4.5vw, 3.5rem)/1 var(--display); }
.pak__navn span {
  display: block; font-size: .8125rem; letter-spacing: .17em;
  color: var(--fairway); margin-bottom: .55rem; font-weight: 600;
  text-transform: uppercase;
}
.pak__pris { font: 700 clamp(1.75rem, 3vw, 2.25rem)/1 var(--display); white-space: nowrap; }
.pak__pris span {
  display: block; font: 400 .875rem/1.3 var(--body); color: var(--ink-soft);
  margin-top: .45rem;
}
.pak__body { display: grid; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 1.75rem; }
@media (min-width: 800px) { .pak__body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* Punktliste med streger i stedet for prikker. */
.ticks li {
  padding: .7rem 0 .7rem 1.5rem;
  border-bottom: 1px solid var(--line);
  position: relative; font-size: 1rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: .75rem; height: 2px; background: var(--grass);
}
.ticks li:first-child { border-top: 1px solid var(--line); }
.on-dark .ticks li { border-color: var(--line-dark); }

/* --- Foer og efter i fuld bredde ---------------------------------------- */
/* Det staerkeste billede han har, saa det faar hele bredden og en moerk bund.
   Billedet i venstre halvdel, teksten i hoejre. */
/* Lige stor luft i begge sider, saa billedet ikke klaeber til skaermkanten,
   mens teksten har en margen. Mellemrummet mellem de to spalter er det
   samme som alle andre steder paa sitet. */
.ba-full__in {
  display: grid;
  /* Flugter med resten af indholdet paa store skaerme. */
  padding-inline: var(--indryk);
}
/* Foer/efter-billedet skal have hele mobilbredden. Naar det faar den samme
   indrykning som teksten, ser det ud som om billedet flyder inde i sektionen. */
@media (max-width: 899px) {
  .ba-full__in { padding-inline: 0; }
  .ba-full__text { padding-inline: var(--gut); }
}
@media (min-width: 900px) {
  .ba-full__in {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }
}
/* Billedet bliver vist helt, ikke beskaaret. Ordene Foer og Efter staar
   oeverst i billedet, og de er hele pointen, saa der maa ikke klippes. */
.ba-full__img img { display: block; width: 100%; height: auto; }
.ba-full__text {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: center;
}

/* --- To spalter ---------------------------------------------------------
   EEN opsaetning for hele sitet. Sidetoppen og alle sektioner bruger de
   samme to spalter og det samme mellemrum, saa den indre kant staar samme
   sted hele vejen ned ad siden. Var de forskellige, ville hoejre spalte
   hoppe vandret, hver gang man rullede fra et afsnit til det naeste, og
   det er praecis det, der ser skaevt ud.
   ------------------------------------------------------------------------ */
.split, .split-billede {
  display: grid;
  /* En enkelt spalte, der har lov at blive smallere end sit indhold. Uden
     minmax(0, 1fr) vokser sporet til max-content, og hvis et billede ikke
     naar frem, regner browseren med width-attributten og skubber hele
     siden ud i bredden. */
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(1.75rem, 4vw, 2.5rem);
  column-gap: var(--split-gap);
}
@media (min-width: 900px) {
  .split, .split-billede, .split-fakta {
    /* Venstre spalte er sat efter, hvor bred en overskrift faktisk bliver.
       Var den halvdelen af siden, kunne overskrifterne ikke fylde den ud,
       og saa stod der et hul paa op til 300 px ind mod teksten, forskelligt
       fra side til side. Med 30rem falder forskellen fra 196 til 81 px. */
    grid-template-columns: minmax(0, clamp(18rem, 34vw, 30rem)) minmax(0, 1fr);
  }
  .split { align-items: center; }
  .split-billede { align-items: start; }
  .split-fakta { align-items: start; }
  /* Den omvendte har billede eller sidebjaelke i hoejre spalte og foelger
     ikke samme deling. */
  .split-rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* I de to spalter fylder teksten hele spalten. Spalten er selv smal nok
   til, at linjelaengden bliver god. */
.split > div > p, .split > div > .stack > p { max-width: none; }

.sticky { position: sticky; top: 2rem; }

/* --- Tillid, en enkelt stribe ------------------------------------------ */
.trust { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust--two { grid-template-columns: 1fr; }
@media (min-width: 760px) { .trust--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Midterstillet ligesom faktastriben, og af samme grund: tre lige brede
   felter adskilt af streger. Rigelig luft ind til stregerne, saa teksten
   ikke stoeder op ad dem. */
.trust > div {
  padding: 1.75rem 1.5rem;
  border-bottom: 1px solid var(--line-dark);
  text-align: center;
}
@media (min-width: 760px) {
  .trust > div { border-bottom: 0; border-left: 1px solid var(--line-dark); padding-inline: 2.5rem; }
  .trust > div:first-child { border-left: 0; }
}
@media (max-width: 759px) { .trust > div:last-child { border-bottom: 0; } }
.trust b { display: block; font: 700 1.375rem/1.05 var(--display); margin-bottom: .45rem; }
.trust p { font-size: .9375rem; line-height: 1.5; color: rgba(243,238,226,.78); margin-inline: auto; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 2px solid var(--ink); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--line);
  padding: 1.35rem 3rem 1.35rem 0;
  font: 700 1.1875rem/1.25 var(--display);
  cursor: pointer; position: relative; color: inherit;
}
.faq__q:hover { color: var(--fairway); }
/* Plus og minus tegnet med to streger, ikke et ikon i en cirkel. */
.faq__q::before, .faq__q::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  background: currentColor; transition: transform .18s ease, opacity .18s ease;
}
.faq__q::before { width: 15px; height: 2px; margin-top: -1px; }
.faq__q::after  { width: 2px; height: 15px; margin-top: -7px; right: .8rem; }
.faq__q[aria-expanded="true"]::after { transform: scaleY(0); opacity: 0; }
.faq__a { border-bottom: 1px solid var(--line); }
.faq__a[hidden] { display: none; }
.faq__a p { padding: .35rem 0 1.5rem; max-width: 68ch; }

/* --- Formular ----------------------------------------------------------- */
.form { display: grid; gap: 1.35rem; }
@media (min-width: 720px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font: 600 .8125rem/1 var(--display);
  letter-spacing: .15em; text-transform: uppercase;
}
.field label .opt { color: var(--ink-soft); letter-spacing: .08em; }
.field input, .field select, .field textarea {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: .85rem .9rem;
  font-family: var(--body); font-size: 1.0625rem;
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 13px) 55%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fairway); }
.form__send { grid-column: 1 / -1; }
.form-status {
  grid-column: 1 / -1;
  padding: .85rem 1rem;
  border-left: 3px solid var(--grass);
  background: var(--paper-warm);
}
.form-status[hidden] { display: none; }
.form-status--fejl { border-left-color: #9b4a35; }
/* Robotfaelde. Skjult for oejet og for skaermlaesere, og uden for
   tabulatorrækken, saa et menneske aldrig moeder den. */
.honning { position: absolute; left: -9999px; width: 1px; height: 1px;
           overflow: hidden; }

/* Fakta i to spalter, saa listen ikke bliver dobbelt saa hoej som teksten
   ved siden af. Hvert par ligger i sin egen div, saa navn og vaerdi
   ikke bliver revet fra hinanden. */
@media (min-width: 1100px) {
  /* Spalter, ikke gitter. I et gitter bliver hver raekke lige saa hoej som
     det hoejeste felt, og saa staar der et stort hul under de korte. Med
     spalter loeber punkterne bare videre, hvor der er plads. */
  /* Gitter, der fyldes nedad og derefter til hoejre. Spalter alene fik
     raekkerne til at drive fra hinanden, fordi teksterne er forskellig
     hoejde. Med et gitter staar etiketterne ud for hinanden hele vejen ned. */
  .dl-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: clamp(2rem, 3vw, 3.5rem);
    row-gap: 1.6rem;
    align-items: start;
  }
  .dl-grid dt { padding-top: 0; }
}

/* --- Kontaktoplysninger -------------------------------------------------- */
.dl-info dt {
  font: 600 .8125rem/1 var(--display); letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 1.05rem;
}
.dl-info dd { margin: .4rem 0 0; border-bottom: 1px solid var(--line); padding-bottom: 1.05rem; }
.dl-info dd:last-of-type { border-bottom: 0; }
.dl-info a { text-decoration: none; border-bottom: 2px solid var(--grass); }
.on-dark .dl-info dt { color: rgba(243,238,226,.66); }
.on-dark .dl-info dd { border-color: var(--line-dark); }
@media (max-width: 759px) {
  .about-facts { padding-bottom: 1.5rem; }
  .about-facts .dl-grid > div:last-child dd { padding-bottom: 0; }
}

/* --- Sidefod ------------------------------------------------------------ */
.foot { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-dark); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; gap: clamp(2rem,4vw,4rem); } }
.foot__mark { font: 700 1.5rem/1 var(--display); letter-spacing: .02em; margin-bottom: 1rem; }
.foot__mark span { color: var(--grass); }
.foot p, .foot li, .foot a { font-size: 1rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--grass); }
.foot__nav li { padding: .38rem 0; }
/* Trustpilots knap ligger centreret i deres egen ramme. Rammen er laast til
   220 x 38 px i generatoren, og ved den stoerrelse staar knappen 18 px inde fra
   venstre. Rammen trukket de 18 px tilbage, saa knappens kant flugter med
   Facebook og adressen. Kun naar rammen findes, ellers ville tekstlinket,
   der staar for den, der afviser cookies, rykke ud af linjen. */
.trustpilot-widget iframe { margin-left: -18px; }
.foot__h {
  font: 600 .75rem/1 var(--display); letter-spacing: .17em; text-transform: uppercase;
  color: rgba(243,238,226,.6); margin-bottom: .9rem;
}
.foot__bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; align-items: baseline;
}
.foot__bottom p, .foot__bottom a { font-size: .875rem; color: rgba(243,238,226,.72); }

/* --- Sidetop paa undersider ---------------------------------------------- */
.ph { border-bottom: 2px solid var(--ink); padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2rem, 4vw, 3.25rem); }
/* Sidetoppen skal se ens ud i enhver bredde, ikke kun i nogle faa.
   Under 900 px ligger de to spalter under hinanden, overskrift oeverst.
   Fra 900 px og op staar de ved siden af hinanden, lige brede, og de
   begynder altid i samme hoejde. Afstanden imellem dem vokser bloedt med
   skaermen i stedet for at eksplodere, og hele blokken har et loft, saa
   spalterne ikke bliver traukket ud i hver sin ende af et bredt vindue. */
/* Sidetoppen staar under hinanden, ikke ved siden af.
   To spalter kan kun se ens ud, hvis overskrifterne er lige lange, og det
   er de ikke. Hullet ind mod teksten blev derfor forskelligt paa hver side.
   Under hinanden er der ingen vandret afstand at faa galt, og alt starter
   i samme venstre kant, uanset hvor lang overskriften er. */
.ph__in > div + div { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.ph__in .lead { max-width: 46rem; }
.ph p { max-width: none; }
.ph h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); }

.crumb { margin-bottom: 1.4rem; font: 600 .75rem/1 var(--display); letter-spacing: .15em; text-transform: uppercase; }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--line); }
.crumb a:hover { border-bottom-color: var(--ink); }
.crumb span { color: var(--ink-soft); }

/* --- Juridiske sider ----------------------------------------------------- */
/* Handelsbetingelser og privatlivspolitik. Samme to spalter som resten af
   sitet, men overskrifterne er mindre, fordi der er mange af dem. */
.legal h2 { font-size: clamp(1.3125rem, 2vw, 1.5rem); line-height: 1.08; }
.legal .split { align-items: start; }
.legal .stack p, .legal .stack ul { max-width: 58ch; }
.legal .stack li { font-size: 1rem; }
.legal hr:last-child { display: none; }
.legal .sizes { margin-bottom: 1.15rem; }

/* --- Diverse ------------------------------------------------------------- */
.stack > * + * { margin-top: 1.15rem; }
.note-small { font-size: .875rem; color: var(--ink-soft); }
.on-dark .note-small { color: rgba(243,238,226,.7); }

/* --- Cookiebanner ------------------------------------------------------ */
.cookie-banner {
  position: fixed;
  z-index: 20;
  inset: auto var(--gut) 1rem;
  display: grid;
  gap: 1rem;
  align-items: center;
  max-width: 58rem;
  margin-inline: auto;
  padding: 1rem 1.15rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--grass);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__tekst { min-width: 0; }
.cookie-banner p { max-width: 62ch; font-size: .95rem; line-height: 1.45; }
.cookie-banner a { color: var(--paper); text-decoration: underline; text-underline-offset: .15em; }
.cookie-banner__knapper { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.cookie-banner__knap {
  min-height: 2.75rem;
  padding: .65rem 1rem;
  border: 1px solid var(--grass);
  background: var(--grass);
  color: var(--ink);
  font: 600 .8125rem/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.cookie-banner__knap--afvis { background: transparent; color: var(--paper); }
.cookie-banner__knap:hover,
.cookie-banner__knap:focus-visible { background: var(--paper); color: var(--ink); }
@media (min-width: 720px) {
  .cookie-banner { grid-template-columns: 1fr auto; }
  .cookie-banner__knapper { min-width: 18rem; }
}


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}