/* ============================================================
   UNDERSIDERNE

   Alle de mindre sider - om os, kontakt, FAQ, betingelser, fragt,
   politikker - havde hver sin lille kopi af de samme regler. De ligger
   nu her ét sted, med forsidens udtryk: hvid bund i stedet for beige,
   Switzer i stedet for Geist, og ingen serif.

   Sider med noget helt eget (fx tabellerne i fragt-siden) beholder de
   par regler i deres egen <style> under denne fil.
   ============================================================ */

:root {
  --bg:        #FFFFFF;
  --card:      #FFFFFF;
  --ash:       #F4F4F3;
  --line:      #E4E4E1;
  --line-soft: #EFEFED;
  --ink:       #0B0B0C;
  --ink-soft:  #2B2B2E;
  --ink-2:     #4F4F52;
  --mid:       #6A6A6E;
  --mute:      #A8A8AC;
  --accent:    #E64124;
  --accent-2:  #C4331A;
  --ok:        #0B7A4C;

  --f:      'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-sans: var(--f);
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --f-hand:  'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --f-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  --r:   6px;
  --r-l: 10px;
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- toppen ---------- */
.pg-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.pg-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.pg-brand .lockup { width: 148px; height: auto; display: block; overflow: visible; }
/* Boelgen i flaget ligger i assets/flag.js. */
.lu-cloth { transform-box: fill-box; transform-origin: 0% 50%; }
.pg-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--mid); transition: color .18s var(--ease);
}
.pg-back:hover { color: var(--ink); }

/* ---------- brødteksten ---------- */
.pg-wrap {
  max-width: 720px; margin: 0 auto;
  /* Toppen skal rumme den svaevende bar. */
  padding: clamp(132px, 14vw, 184px) clamp(20px, 4vw, 56px) clamp(80px, 10vw, 140px);
}
.pg-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mid);
}
.pg-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }

h1 {
  font-size: clamp(36px, 5.4vw, 62px);
  line-height: 1.04; letter-spacing: -.038em; font-weight: 600;
  margin: 18px 0 22px; text-wrap: balance;
}
/* Anden halvdel af overskriften stod i kursiv serif. Nu er den samme
   skrift, bare dæmpet - den skal læses som en fortsættelse, ikke som
   et andet sprog. */
h1 .s { color: var(--mid); font-style: normal; }
/* "Handelsbetingelser" er laengere end en 320px-skaerm. Uden det her
   skubbede overskriften hele siden sidelaens paa de smalleste telefoner. */
h1 { overflow-wrap: break-word; }

.lead {
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55;
  color: var(--ink-2); letter-spacing: -.01em;
  margin-bottom: 34px; max-width: 58ch;
}
h2 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -.022em; line-height: 1.25; margin: 40px 0 10px; }
h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.014em; margin: 26px 0 6px; }
p  { color: var(--ink-2); margin-bottom: 14px; }
ul, ol { color: var(--ink-2); margin: 0 0 14px 20px; }
li { margin-bottom: 8px; }
strong, b { font-weight: 600; color: var(--ink); }

.pg-links { margin-top: 36px; font-size: 14.5px; color: var(--mid); }
.pg-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.pg-links a:hover { text-decoration-color: var(--ink); }

.pg-note {
  margin-top: 44px; padding: 20px 22px;
  background: var(--ash); border-radius: var(--r-l);
  font-size: 14.5px; color: var(--ink-2);
}

/* Samme knap som paa forsiden: firkantet, rolig, ingen pille. */
.pg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 40px; min-height: 52px; padding: 0 26px;
  background: var(--accent); color: #fff;
  border-radius: var(--r); font-size: 15px; font-weight: 550; letter-spacing: -.01em;
  transition: background .18s var(--ease);
}
.pg-cta:hover { background: var(--accent-2); }
.pg-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- tabeller, hvor en side har dem ---------- */
.pg-table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 15px; }
.pg-table th, .pg-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.pg-table th { font-weight: 600; color: var(--ink); }
.pg-table td { color: var(--ink-2); }

@media (max-width: 620px) {
  .pg-nav { padding: 14px 20px; }
  .pg-brand .lockup { width: 126px; }
}


/* ============================================================
   TRE STEMMER OG TUSCHEN - kopieret fra forsiden

   Undersiderne skal kunne tale i samme tre stemmer som forsiden.
   Kopieret ORD FOR ORD ud af forsidens <style>. AEndrer nogen dem
   paa forsiden, skal det samme ske her - samme aftale som nav.css,
   fod.css og blokke.css allerede koerer paa.
   ============================================================ */
/* ============================================================
   TUSCH OG TRE STEMMER
   Tegnet, ikke hentet: markeringen er en SVG paa godt et kilobyte,
   den tager farve fra --accent og er skarp paa enhver skaerm. Et
   billede kunne ingen af delene.

   Det, der faar en streg til at ligne haandens og ikke maskinens, er
   fire ting: den lukker ikke helt, tykkelsen varierer undervejs, den
   skyder forbi i enderne, og den sidder en anelse skaevt.
   ============================================================ */

/* Stemme 2: foelelsen inde i paastanden. Altid en DEL af saetningen,
   aldrig hele. "Den *foerste dag* starter i kassen". */
.serif-em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  /* Instrument Serif staar mindre end Switzer ved samme tal, og den
     har ingen optisk vaegt at give. Den faar begge dele igen her. */
  font-size: 1.06em;
  letter-spacing: -.012em;
}

/* Stemme 3: det et menneske siger ved siden af. Forbeholdet,
   indvendingen, sidebemaerkningen - aldrig hovedbudskabet. */
.haand {
  font-family: var(--f-hand);
  /* Caveat har en lille x-hoejde - den skal saettes stoerre end en
     sans for at laeses lige saa let. */
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.15;
  color: var(--accent-2, #C4331A);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: rotate(-2.5deg);
}
.haand svg { flex: none; }
/* Luft omkring. Noten laa klods op ad den sekundaere knap, og en
   haandskrevet bemaerkning skal se ud som om der var plads til den -
   ellers ligner den en fejl i opsaetningen. */
.haand { margin-top: 16px; padding-right: 10px; }

/* Markeringen. Ligger bag teksten, saa bogstaverne bliver laest foerst. */
.tusch {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.tusch > svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* "img, svg { max-width: 100% }" staar tre steder i sitet og klemte
     markeringen ned til ordets egen bredde. Den skal have lov at stikke
     ud - det er hele pointen med en haandlavet streg. */
  max-width: none;
  width: 108%;
  height: auto;
  overflow: visible;
  pointer-events: none;
  color: var(--accent);
}
.tusch-streg > svg { bottom: -.22em; }

/* Ringen om en overskrift, der kan braekke over flere linjer. Derfor
   blok og ikke inline - ellers laegger den sig kun om foerste linje. */
.tusch-ring {
  display: block;
  white-space: normal;
}
.tusch-ring > svg {
  top: 50%;
  translate: 0 -50%;
  /* Bredden holder sig inden for kortets polstring. Gaar ringen laengere
     ud, bliver den klippet af listens runde hjoerner (overflow:hidden),
     og saa mangler der et stykke af stregen paa foerste og sidste kort. */
  width: calc(100% + 2 * var(--ring-luft, 24px));
  height: calc(100% + 30px);
}
/* Den tegnes paa hover og gaar igen, naar musen forlader kortet - derfor
   en overgang og ikke en animation. Paa en telefon findes hover ikke, og
   saa er der ingen ring. Den baerer ikke betydning, kun opmaerksomhed. */
@media (hover: hover) {
  .tusch-ring .tusch-vej {
    stroke-dashoffset: calc((var(--vej, 660) + 30) * 1px);
    /* En haand tegner ikke med konstant fart: hurtigt i gang, langsommere
       ud. Den gaar hele vejen rundt om ordet, ikke hen over det. */
    transition: stroke-dashoffset 1.05s cubic-bezier(.22,.62,.3,1);
    animation: none;
  }
  .trin li:hover .tusch-ring .tusch-vej,
  .trin li:focus-within .tusch-ring .tusch-vej { stroke-dashoffset: 0; }
}
@media (hover: none) {
  .tusch-ring > svg { display: none; }
}

/* Oval om nogle faa ord midt i en saetning. I modsaetning til ringen paa
   kortene tegnes den, naar man naar ned til den - den staar i selve
   overskriften og skal ses, ogsaa paa en telefon. */
/* En overskrift med en oval i skal have luft mellem linjerne. t-h2 staar
   paa 1,08, og saa ligger den linje, der er markeret, klods op ad den
   ovenover - ovalens top forsvinder bag den. */
.har-oval { line-height: 1.46; }

.tusch-oval > svg {
  top: 50%;
  translate: 0 -50%;
  /* En overskrift er hoej, og ovalens top og bund skal uden om baade
     versaler og underlaengder. Med for lidt hoejde skaerer buerne
     gennem ordene i stedet for at ligge om dem. */
  width: calc(100% + 58px);
  height: calc(100% + 30px);
}

/* Den helt stille variant: en lille haandskrevet note, der ikke tager
   opmaerksomhed fra det, den staar ved siden af. */
.haand-mini {
  font-family: var(--f-hand);
  /* Var 16 px og daempet til 80 %. Det var baade for lille og for
     svagt - noten ved filmen paa om-siden kunne ikke laeses. Roligt
     skal komme af stoerrelsen, ikke af at fjerne kontrasten. */
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.25;
  color: var(--accent-2, #C4331A);
  font-weight: 600;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: rotate(-1.5deg);
}
.haand-mini svg { flex: none; opacity: .75; }
/* Roed paa lys baggrund er ikke altid til at laese, og staar noten paa et
   billede eller en moerk flade, forsvinder den. Derfor tre farver - samme
   stemme, forskellig styrke. */
.haand-blaek, .haand-mini.haand-blaek { color: var(--ink-2); opacity: .95; }
.haand-hvid,  .haand-mini.haand-hvid  { color: rgba(255,255,255,.92); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .haand-mini { transform: none; } }
/* Markeringen er en FLADE, ikke en streg. Det er den eneste maade at faa
   tykkelsen til at variere undervejs - en streg har samme bredde hele
   vejen og ligner en kuglepen. Formen er regnet ud med et trykprofil:
   tyndt hvor pennen saettes og loeftes, tykkest hvor haanden har fart. */
.tusch path { fill: currentColor; stroke: none; }
/* Undtagen maskens vej: den ER en streg, og den skal vaere hvid, ellers
   afdaekker den ingenting. Reglen ovenfor ramte den ogsaa og gjorde den
   til en fyldt form - saa stod alle ringene blegt fremme hele tiden. */
.tusch .tusch-vej { fill: none; stroke: #fff; }

/* Bevaegelsen: en maske, der foelger den vej pennen gaar.
   Foerste forsoeg afdaekkede fladen fra venstre mod hoejre, og saa kom
   ringens top og bund frem samtidig - det saa forkert ud, fordi ingen
   tegner en cirkel paa den maade. Masken er en tyk streg langs midten af
   markeringen; naar DEN tegnes, kommer fladen frem praecis der, hvor
   pennen er - hele vejen rundt. */
.tusch-vej {
  /* Streg paa banens laengde, mellemrum paa fire gange saa meget. Med
     "dasharray: L" er moenstret L paa, L af, L paa igen - og saa dukkede
     starten af naeste streg op i den anden ende af banen. Det var de
     roede stumper paa de kort, man ikke havde musen paa. */
  stroke-dasharray: calc(var(--vej, 660) * 1px) calc(var(--vej, 660) * 4px);
  /* Der skubbes en hel stregbredde laengere end banens laengde. Med
     runde ender stikker maskens spids ellers frem, selv naar stregen er
     skubbet helt ud - og saa staar der en roed klat tilbage paa de kort,
     man ikke har musen paa. */
  stroke-dashoffset: calc((var(--vej, 660) + 30) * 1px);
}
.tusch.tegnet .tusch-vej { animation: tusch-tegn 1.05s cubic-bezier(.22,.62,.3,1) forwards; }
@keyframes tusch-tegn { to { stroke-dashoffset: 0; } }

/* Uden animation skal markeringen stadig vaere der - den baerer betydning,
   ikke bevaegelse. */
@media (prefers-reduced-motion: reduce) {
  .tusch-vej { stroke-dashoffset: 0; animation: none; }
  .haand, .haand-mini { transform: none; }
}

/* ============================================================
   FILMEN OG MOODBILLEDERNE

   Om-siden var ren tekst og laeste som en tør artikel. De her to
   blokke er den samme verden som forsiden: Fregne der fortaeller det
   selv, og et par billeder af varerne som de faktisk bruges.
   ============================================================ */

/* Filmen. To spalter paa skaerm - lodret video til venstre, ordene til
   hoejre - fordi en 9:16-film i fuld spaltebredde fylder to skaerme. */
.pg-film {
  display: grid;
  /* "auto" og ikke en fr-andel: sporet skal vaere praecis saa bredt som
     videoen, ikke stukket ud til halvdelen af spalten. */
  grid-template-columns: 248px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  margin: 34px 0 10px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--ash);
  border-radius: var(--r-l);
}
.pg-film video {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  /* Plakaten er skaaret i samme forhold, saa der er intet at beskaere -
     men uden cover laegger en browser en sort kant om den alligevel. */
  object-fit: cover;
  background: var(--ink);
  border-radius: var(--r);
}
.pg-film figcaption { display: flex; flex-direction: column; gap: 12px; }
.pg-film-hvem {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mid);
}
/* Citatet er stedet serifen giver mening: det er hendes ord, ikke
   sidens. Derfor den ene stemme her og ingen andre steder i blokken. */
.pg-film-cit {
  font-family: var(--f-serif);
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.24; letter-spacing: -.01em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.pg-film-cit em { font-style: italic; }
@media (max-width: 620px) {
  .pg-film { grid-template-columns: minmax(0, 1fr); }
  /* Staaende video i fuld bredde paa en telefon bliver en skaermfuld i
     sig selv. Halv bredde, venstrestillet - saa bliver den et billede
     i teksten og ikke en afbrydelse. */
  .pg-film video { width: min(62%, 240px); }
}

/* Moodbilledet. Ét billede, fuld spaltebredde, med en haandskrevet note
   under - samme greb som paa forsiden. */
.pg-mood { margin: 30px 0 34px; }
.pg-mood img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-l);
  background: var(--ash);
}
.pg-mood figcaption { margin-top: 10px; }
/* To billeder ved siden af hinanden. Under 560px staar de over hinanden
   og bliver kvadratiske, saa de ikke bliver to tynde striber. */
.pg-mood-par {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.pg-mood-par img { aspect-ratio: 4 / 5; }
@media (max-width: 560px) {
  .pg-mood-par { grid-template-columns: minmax(0, 1fr); }
  .pg-mood-par img { aspect-ratio: 3 / 2; }
}

/* Ovalen er tegnet til forsidens store overskrifter. En h2 herinde er
   en tredjedel saa stor, og den faste luft omkring blev til en ring med
   ordene som en prik i midten. Samme form, mindre luft. */
.pg-wrap h2 .tusch-oval > svg,
.pg-wrap h3 .tusch-oval > svg { width: calc(100% + 26px); height: calc(100% + 16px); }
.pg-wrap p .tusch-streg > svg { width: 112%; }
.pg-wrap p .tusch-oval > svg,
.pg-wrap li .tusch-oval > svg { width: calc(100% + 22px); height: calc(100% + 14px); }
/* Inde i en saetning skal ovalen ligge i linjen - som blok river den ordet ud paa sin egen linje. */
.pg-wrap p .tusch-oval,
.pg-wrap li .tusch-oval { display: inline-block; }
.pg-wrap li .tusch-streg > svg { width: 112%; }

/* Stregen under en overskrift laa paa forsidens maal og skar tvaers
   gennem underlaengderne i "spoergsmaal" og "spoerge". En haand
   understreger under bogstaverne, ikke igennem dem. */
.pg-wrap h1 .tusch-streg > svg { bottom: -.34em; }

/* Ovalen om ord paa en overskrift, der braekker over to linjer. Uden
   det her tog ringens top et bid af linjen ovenover. Lidt mere luft
   mellem linjerne, og en oval der holder sig inden for sin egen. */
.pg-wrap h1.har-oval { line-height: 1.26; }
.pg-wrap h1.har-oval .tusch-oval > svg { width: calc(100% + 34px); height: calc(100% + 10px); }

/* ============================================================
   HEROEN PAA UNDERSIDERNE

   Samme greb som forsiden: en moerk, afrundet scene i naesten fuld
   bredde, billedet bagved, et filter oveni saa teksten kan laeses, og
   overskriften midt i. Kortere end forsidens - den skal introducere en
   side, ikke baere en forside - og uden knapper: det her er laesesider,
   og handlingen staar i bunden.

   Maalene er forsidens egne, saa de to ting ligner hinanden:
   hjoerneradius, indryk fra kanten og filteret er kopieret.
   ============================================================ */
.pg-hero {
  /* Samme indryk som forsiden. Foer laa der en stribe hvid over billedet,
     og navigationen haengte i den i stedet for over billedet. */
  padding: var(--hero-pad, clamp(10px, 1.4vw, 18px));
}
/* Rammen: topbjaelken og billedet deler én rundet form, praecis som
   forsidens hero-frame. Navigationen ligger fast oven paa billedet, saa
   den maa regne med, at bjaelken er der - ellers rammer den kanten. */
.pg-hero-frame {
  position: relative;
  border-radius: var(--hero-radius, clamp(16px, 2vw, 26px));
  overflow: hidden;
  background: var(--ink);
}
.pg-hero-frame .promo-bar {
  position: relative; z-index: 2;
  background: var(--accent); color: #fff;
  min-height: var(--promo-h, 40px);
  display: flex; align-items: center; justify-content: center;
  padding: 10px clamp(16px, 3vw, 40px);
}
.pg-hero-frame .promo-inner {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
  flex-wrap: wrap; justify-content: center;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.055em; text-transform: uppercase; text-align: center;
}
.pg-hero-frame .promo-text { color: rgba(255,255,255,0.88); }
.pg-hero-frame .promo-link {
  color: #fff; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: -11px 0;
}
.pg-hero-frame .promo-link span { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.pg-hero-frame .promo-link:hover span { transform: translateX(4px); }
.pg-hero-stage {
  position: relative;
  overflow: hidden;
  /* Forsidens hoejde: en hel skaerm minus topbjaelken og indrykket,
     aldrig over 980 px. Undersiderne stod paa en halv skaerm, og saa
     lignede de en anden side end forsiden. */
  min-height: min(calc(100vh - var(--promo-h, 40px) - (var(--hero-pad, 14px) * 2)), 980px);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: clamp(120px, 13vh, 190px) clamp(20px, 5vw, 72px) clamp(96px, 11vh, 132px);
  /* Sin egen stakkeorden, saa filteret ikke kan lande over noget udenfor. */
  isolation: isolate;
  background: var(--ink);
}
/* Topbjaelken er skjult paa telefon som paa forsiden, og heroen faar
   forsidens telefonhoejde. */
@media (max-width: 720px) {
  .pg-hero-frame .promo-bar { display: none; }
  .pg-hero-stage { min-height: 76vh; padding-top: clamp(104px, 16vh, 150px); }
}
.pg-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Uden filteret er en hvid overskrift ulaeselig paa et lyst sted i
   billedet. To lag: ét der moerkner midten, og ét der lukker bunden. */
.pg-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(14,14,12,0.30) 0%, rgba(14,14,12,0.62) 70%, rgba(14,14,12,0.74) 100%),
    linear-gradient(to bottom, rgba(14,14,12,0.45) 0%, rgba(14,14,12,0.12) 30%, rgba(14,14,12,0.30) 68%, rgba(14,14,12,0.80) 100%);
}
.pg-hero-in {
  position: relative; z-index: 3;
  width: 100%; max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pg-hero-kicker {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
/* Overskriften er den samme som i broedteksten, bare hvid. Farven staar
   her og ikke i h1-reglen, for den gaelder kun inde i heroen. */
.pg-hero-in h1 { color: #fff; margin: 16px 0 0; }
.pg-hero-in h1 .s { color: rgba(255,255,255,.66); }
.pg-hero-sub {
  margin-top: 18px; max-width: 60ch;
  color: rgba(255,255,255,.84);
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; letter-spacing: -.012em;
  text-shadow: 0 2px 22px rgba(8,8,9,.34);
}
/* "strong" og "b" er sat til blaek i broedteksten. I heroen betyder det
   sort paa sort: "fra 549 kr. pr. person" i julesidens manchet var
   usynlig. Det fede skal vaere det lyseste herinde, ikke det moerkeste. */
.pg-hero-sub b, .pg-hero-sub strong { color: #fff; font-weight: 600; }

/* Stregen skar gennem underlaengderne i "spoerge om.". Samme maal som
   paa overskrifterne nede i spalten - en haand understreger under
   bogstaverne, ikke igennem dem. */
.pg-hero-in h1 .tusch-streg > svg { bottom: -.34em; }

/* Heroen har allerede skubbet siden fri af navigationen. Beholdt
   .pg-wrap sin egen topluft, stod der en tom skaerm imellem. */
.pg-hero + .pg-wrap { padding-top: clamp(40px, 5vw, 64px); }
/* Foerste afsnit efter heroen laegger ellers sin egen overskriftsmargen
   oveni, og saa staar der en tom skaerm imellem. */
.pg-hero + .pg-wrap > :first-child { margin-top: 0; }

/* ---------- brud ud af tekstspalten ----------
   Tekst laeses bedst i 720 px. Pakkeraekker og billedgitre goer ikke -
   de skal have plads. I stedet for to forskellige sidebredder har
   siderne én spalte, og de faa brede ting bryder ud af den.

   Med NEGATIVE margener, ikke med transform: en transform flytter kun
   det, man ser, mens pladsen bliver staaende - paa en telefon stak det
   saa ud over kanten og gav vandret rul. Med margener flytter layoutet
   med, og naar der ikke er plads at hente, bliver brudet nul af sig
   selv. */
.pg-bred {
  --pb-pad: clamp(20px, 4vw, 56px);
  --pb-bryd: max(0px, (min(1180px, 100vw - 2 * var(--pb-pad) - 2px) - 100%) / 2);
  margin-inline: calc(-1 * var(--pb-bryd));
}