/* side-gjeldsregisteret.css — /gjeld/gjeldsregisteret
 *
 * Leseren kommer med ett spørsmål: hvor mye skylder jeg, og hvor ser jeg det.
 * Hun skal ha svaret uten å scrolle forbi noe. Derfor ligger de to
 * innlogginskortene rett under ingressen, over alt annet.
 *
 * Konkurrenten gjeldsregister.no har fire innloggingsknapper før leseren har
 * fått svar på noe. Vi har ingen innlogging, og det er et valg. Da kan ikke
 * de to kortene se ut som knapper vi skulle ønske var våre: de er tydelig
 * lenker ut, med domenet synlig, og setningen om at vi ikke har innlogging
 * står som en egen linje under dem, ikke som en unnskyldning i småskrift.
 */

/* ----------------------------------------------------------------- toppen -- */

/* To spalter: tekst til venstre, figur til høyre. Samme grep som toppsaken
   på forsiden. Figuren er ikke dekorasjon — den viser hva som faktisk står i
   registeret, som er nøyaktig det ingressen lover å forklare. */
/* 0,72 og ikke 0,85. Figuren er høyere enn tekstblokken uansett, men på 0,85
   ble den 340 px høy mot tekstens 230, og de 110 pikslene sto som et hull
   under bylinen. Smalere figur, mindre hull, og tallene i den er fortsatt
   godt lesbare fordi viewBoxen skalerer med. */
.topp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: 1.375rem 0 1.5rem;
}

.topp-tekst h1 {
  margin: 0.375rem 0 0;
}

/* Ingressen står på 36ch i grunnarket, og utvides til 52ch bare inne i
   artikkelbeholderen. Denne siden er ikke en artikkel, så uten dette brøt
   ingressen etter fem-seks ord. Styringsrentesiden løser det på samme måte. */
.topp-tekst .ingress {
  max-width: 46ch;
  text-wrap: pretty;
  margin-top: 0.875rem;
}

.topp-figur {
  margin: 0;
}

/* Figuren har sin egen skygge i stedet for en ramme. Kortflaten inni SVG-en
   er allerede hvit, og en ramme utenpå ville lagt en strek rundt en strek. */
.topp-figur svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgb(14 28 40 / 0.10), 0 8px 24px rgb(14 28 40 / 0.06);
}

.topp-figur figcaption {
  margin-top: 0.625rem;
  font-size: var(--tekst-xs);
  color: var(--muted);
  line-height: 1.45;
}

/* Under 52rem faller figuren OVER teksten, ikke under. En side som åpner
   med bare tekst på mobil er nøyaktig den siden vi prøvde å komme vekk fra,
   og figuren svarer på spørsmålet leseren kom med. */
@media (max-width: 52rem) {
  .topp {
    grid-template-columns: 1fr;
    gap: 1.125rem;
  }
  .topp-figur {
    order: -1;
    max-width: 26rem;
  }
}

#logg-inn {
  margin-top: 0;
}

#logg-inn > h2 {
  margin-top: 0;
}

/* ------------------------------------------------------------- to kilder -- */

.kilder2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.875rem;
  margin-block: clamp(1.25rem, 3vw, 1.75rem);
}

.kildekort {
  display: block;
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kildekort:hover,
.kildekort:focus-visible {
  border-color: var(--spruce-2);
  box-shadow: 0 1px 6px rgb(14 28 40 / 0.08);
}

/* Ikonet er et hengelås og en telefon — ID-porten og BankID. Strektegnet,
   ikke fylt, og i samme blå som overskriften: det skal si «her logger du
   inn» på et halvt blikk, ikke konkurrere med teksten. */
.kildekort-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--wash);
  color: var(--spruce-2);
}

.kildekort-ikon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.kildekort h3 {
  margin: 0;
  font-size: var(--tekst-base);
  color: var(--spruce-2);
}

.kildekort .vert {
  display: block;
  margin-top: 0.1875rem;
  font-size: var(--tekst-sm);
  color: var(--muted);
  font-weight: 400;
}

.kildekort .pil {
  display: inline-block;
  transition: transform 0.15s;
}

.kildekort:hover .pil,
.kildekort:focus-visible .pil {
  transform: translateX(3px);
}

.kildekort p {
  margin: 0.625rem 0 0;
  font-size: var(--tekst-sm);
  color: var(--ink-2);
}

.kildekort .maate {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Setningen om at vi ikke har innlogging. Egen linje, ikke småskrift. */
.ingen-innlogging {
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  padding-left: 0.875rem;
  border-left: 3px solid var(--rule-2);
  font-size: var(--tekst-sm);
  color: var(--muted);
}

/* --------------------------------------------------- innholdsfortegnelse -- */

/* Siden er lang, og ni av spørsmålene folk søker på er egne avsnitt. Uten
   en oversikt må leseren scrolle for å finne ut om svaret hennes finnes. */
.innhold-i {
  margin-block: clamp(1.5rem, 4vw, 2.25rem);
  padding: 1.125rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.innhold-i h2 {
  margin: 0 0 0.75rem;
  font-size: var(--tekst-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* To kolonner, ikke fire. Fire spredte de ti punktene så tynt utover at
   lista sluttet å lese som en liste og ble et rutenett av løsrevne ord. */
.innhold-i ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4375rem 2rem;
}

@media (max-width: 34rem) {
  .innhold-i ol {
    grid-template-columns: 1fr;
  }
}

.innhold-i a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--tekst-sm);
  border-bottom: 1px solid transparent;
}

.innhold-i a:hover,
.innhold-i a:focus-visible {
  color: var(--spruce-2);
  border-bottom-color: var(--rule-2);
}

/* -------------------------------------------------------------- tallbåndet -- */

/* Marineblå flate, som tallpanelet på forsiden og nåtallet på
   styringsrentesiden. Første utgave var fire bleke bokser med hårfin ramme.
   De forsvant i en side som allerede er hvit, og seksjonen som skal være
   sidens tyngste punkt så ut som enda et avsnitt.
   Ikke søyler: 176,2 og 0,6 deler ikke skala, og i samme søylediagram blir
   faktureringskort en usynlig strek. */
.tallband {
  background: var(--spruce-2);
  color: var(--on-spruce);
  border-radius: 4px;
  /* position:relative fordi overflow bare klipper det beholderen er
     containing block for. Uten den hopper et absolutt posisjonert barn,
     for eksempel .visuelt-skjult i figuren, rett over denne og strekker
     dokumentet i bredden i stedet. Se skript/overflow.mjs. */
  position: relative;
  overflow: hidden;
  margin-block: 1.25rem;
}

.tb-hoved {
  padding: 1.375rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--linje);
}

.tb-lab {
  margin: 0;
  font-size: var(--tekst-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-spruce-dim);
}

.tb-verdi {
  margin: 0.3125rem 0 0;
  font-size: clamp(2.5rem, 9vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 800;
  /* Proporsjonale sifre. tabular-nums gjør et stort tall luftig og skjevt;
     de hører hjemme i tabellrader, ikke på en enkeltstående verdi. */
  font-variant-numeric: proportional-nums;
}

.tb-verdi span {
  margin-left: 0.5rem;
  font-size: var(--tekst-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-spruce-dim);
}

.tb-dato {
  margin: 0.5rem 0 0;
  font-size: var(--tekst-sm);
  color: var(--on-spruce-dim);
}

/* Tre deler, tre kolonner. Skillelinjen flytter fra høyre til bunn når de
   stables, samme mekanikk som .cell i tallpanelet. */
.tb-deler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tb-celle {
  padding: 1rem 1.25rem 1.0625rem;
  border-right: 1px solid var(--linje);
  min-width: 0;
}

.tb-celle:last-child {
  border-right: 0;
}

.tb-celle .lab {
  display: block;
  font-size: var(--tekst-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-spruce-dim);
}

.tb-celle .val {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--tekst-xl);
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}

.tb-celle .val small {
  margin-left: 0.3125rem;
  font-size: var(--tekst-sm);
  font-weight: 600;
  color: var(--on-spruce-dim);
}

.tb-celle .src {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--tekst-xs);
  line-height: 1.4;
  color: var(--on-spruce-dim);
  opacity: 0.9;
}

.tb-fot {
  margin: 0;
  padding: 0.8125rem 1.5rem;
  border-top: 1px solid var(--linje);
  background: var(--spruce);
  font-size: var(--tekst-sm);
  color: var(--on-spruce-dim);
}

.tb-fot b {
  color: var(--on-spruce);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .tb-deler {
    grid-template-columns: 1fr;
  }
  .tb-celle {
    border-right: 0;
    border-bottom: 1px solid var(--linje);
    padding: 0.8125rem 1.25rem 0.875rem;
  }
  .tb-celle:last-child {
    border-bottom: 0;
  }
  .tb-hoved,
  .tb-fot {
    padding-inline: 1.25rem;
  }
}

/* ---------------------------------------------------------------- figurer -- */

.figur {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem 1.25rem 1rem;
  margin: 0;
}

.figur svg {
  display: block;
  width: 100%;
  height: auto;
}

.figur figcaption {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
  font-size: var(--tekst-sm);
  color: var(--muted);
}

.figur figcaption a {
  color: var(--spruce-2);
}

/* To varianter av samme figur, byttet på bredde. Samme data, samme
   funksjon, ulik viewBox. En SVG med width:100% beholder sideforholdet,
   så en bred viewBox på smal skjerm gir etiketter på tre piksler.
   Se OPPSETT i skript/gjeldsfigur.mjs. */
.figur .rammefigur--smal,
.figur .utviklingsfigur--smal {
  display: none;
}

@media (max-width: 40rem) {
  .figur .rammefigur--bred,
  .figur .utviklingsfigur--bred {
    display: none;
  }
  .figur .rammefigur--smal,
  .figur .utviklingsfigur--smal {
    display: block;
    max-width: 22rem;
    margin-inline: auto;
  }
}

/* Tabellen ved siden av utviklingsfiguren. Den er ikke gjemt for
   skjermlesere — den ER lesningen for den som ikke får figuren, og for den
   som vil ha tallet og ikke formen. */
.figur-tabell {
  margin-top: 0.875rem;
}

.figur-tabell > summary {
  cursor: pointer;
  font-size: var(--tekst-sm);
  color: var(--spruce-2);
  padding: 0.375rem 0;
}

.figur-tabell > summary:hover {
  text-decoration: underline;
}

.figur-tabell table {
  width: 100%;
  margin-top: 0.5rem;
  border-collapse: collapse;
  font-size: var(--tekst-sm);
  font-variant-numeric: tabular-nums;
}

.figur-tabell caption {
  text-align: left;
  color: var(--muted);
  font-size: var(--tekst-xs);
  padding-bottom: 0.5rem;
}

.figur-tabell th,
.figur-tabell td {
  padding: 0.3125rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.figur-tabell .num {
  text-align: right;
}

/* ------------------------------------------------------ kvartalsrapporten -- */

/* Alt fra Gjeldsregisteret AS sin kvartalsrapport står i egne avsnitt,
   tydelig merket, og aldri i månedsblokken. De to registrene er ikke
   identiske, og et tall herfra ved siden av et månedstall uten at begge er
   navngitt ville vært en sammenblanding leseren ikke kan oppdage. */
.annen-kilde {
  margin-block: clamp(1.5rem, 4vw, 2rem);
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--spruce-2);
  border-radius: 0 4px 4px 0;
  background: var(--bg);
}

.annen-kilde .merkelapp {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.annen-kilde p {
  margin: 0 0 0.625rem;
}

.annen-kilde p:last-child {
  margin-bottom: 0;
}

.annen-kilde .henvisning {
  font-size: var(--tekst-sm);
  color: var(--muted);
}

/* ------------------------------------------------------------------ tre veier */

/* Nummerert liste, ikke tre like kort. Teksten sier «tre veier videre», og
   rekkefølgen er ikke tilfeldig: den går fra billigst til dyrest. Et tall
   gjør den rekkefølgen synlig, og gir samtidig seksjonen en rytme øyet kan
   følge i stedet for tre identiske bokser. */
.veier {
  list-style: none;
  margin-block: 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.875rem;
  counter-reset: vei;
}

.vei {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.125rem 1.375rem 1.1875rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
}

.vei-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--spruce-2);
  color: var(--on-spruce);
  font-size: var(--tekst-base);
  font-weight: 800;
  line-height: 1;
}

.vei h3 {
  margin: 0.3125rem 0 0.4375rem;
  font-size: var(--tekst-base);
}

.vei p {
  margin: 0;
  font-size: var(--tekst-sm);
  color: var(--ink-2);
}

@media (max-width: 34rem) {
  .vei {
    grid-template-columns: 2rem 1fr;
    gap: 0.75rem;
    padding-inline: 1.125rem;
  }
  .vei-nr {
    width: 2rem;
    height: 2rem;
    font-size: var(--tekst-sm);
  }
}

/* ------------------------------------------------------------------- ellers */

.med-uten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.875rem;
  margin-block: 1.25rem;
  align-items: start;
}

.mu-kort {
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
}

/* «Ikke med» er ikke en advarsel. Den står på sidens egen grunnflate i
   stedet for hvitt, som skiller de to uten å gjøre den ene til et problem. */
.mu-kort--uten {
  background: var(--bg);
}

.med-uten h3 {
  margin: 0 0 0.75rem;
  font-size: var(--tekst-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.med-uten ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: var(--tekst-sm);
}

.med-uten li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.5rem;
  align-items: start;
  line-height: 1.45;
}

.mu-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  border-radius: 50%;
}

.mu-ikon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Hake i blått for «med», strek i grått for «ikke med». Ikke grønt og rødt:
   at boliglånet ikke står i registeret er verken bra eller dårlig, og en rød
   farge ville påstått at det var det. Statusfarger er reservert for status. */
.mu-kort--med .mu-ikon {
  background: var(--wash);
  color: var(--spruce-2);
}

.mu-kort--uten .mu-ikon {
  background: var(--rule);
  color: var(--muted);
}

/* ------------------------------------------------------------ regnestykket -- */

/* Sidens tydeligste enkeltpoeng: en ubrukt ramme teller krone for krone.
   Det sto som et avsnitt til blant åtte andre. */
.regnestykke {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block: 1.25rem;
  padding: 1.125rem 1.375rem;
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--rust-dim);
  border-radius: 0 4px 4px 0;
  background: #fff;
}

.rs-linje {
  margin: 0;
  font-size: var(--tekst-sm);
  color: var(--muted);
  line-height: 1.35;
}

.rs-linje b {
  display: block;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  color: var(--ink);
  letter-spacing: -0.015em;
}

.rs-linje--tung b {
  color: var(--spruce-2);
}

.rs-tegn {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rust-dim);
}

/* ------------------------------------------------------------- mellombilde -- */

.gjeldsbilde {
  margin: 1.5rem 0;
}

/* Beskåret til en stripe, ikke vist i full høyde. Bildet er 3:2, og i full
   spaltebredde ble det 620 px høyt — det dyttet de tre veiene så langt ned
   at seksjonen mistet sammenhengen. Motivet tåler beskjæringen: det som
   betyr noe er papirbunken, og den ligger nede i bildet.
   Merk at dette er et Pexels-bilde. Norges Bank-bildene kan IKKE beskjæres,
   bare skaleres — se dokumentasjon/bildestandard.md. */
.gjeldsbilde img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: 4px;
}

@media (max-width: 34rem) {
  .gjeldsbilde img {
    aspect-ratio: 16 / 9;
  }
}

.gjeldsbilde figcaption {
  margin-top: 0.5rem;
  font-size: var(--tekst-xs);
  color: var(--muted);
}

/* ==================================================== zebra og side om side */

/* Vekslende seksjonsbakgrunn.
 *
 * Siden leses som én lang tekstvegg uten den. Stripene gir øyet noe å måle
 * lengden med, og de gjør det synlig hvor et avsnitt slutter og neste
 * begynner uten at vi må legge inn skillelinjer.
 *
 * Bare to flater, --bg og hvit, begge fra paletten. Ingen nye farger.
 *
 * Stripa går utenfor .wrap og innholdet står inni. Uten det ville fargen
 * stoppet ved spaltekanten og lest som en boks, ikke som en flate.
 */
.stripe {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.stripe--lys {
  background: #fff;
}

.stripe--dus {
  background: var(--bg);
}

/* Første overskrift i en stripe skal ikke ha luft over seg — stripa har
   allerede padding, og to lag luft leser som et hull. */
.stripe > .wrap > section:first-child > h2:first-child,
.stripe > .wrap > :first-child > h2:first-child {
  margin-top: 0;
}

/* Kort og flater må fortsatt skille seg fra flaten de står PÅ. Et hvitt
   kort på hvit stripe forsvinner, og et --bg-kort på --bg-stripe likeså.
   Derfor snus de i den dusre stripa. */
.stripe--dus .kildekort,
.stripe--dus .mu-kort,
.stripe--dus .vei,
.stripe--dus .regnestykke,
.stripe--dus .figur {
  background: #fff;
}

.stripe--dus .mu-kort--uten {
  background: var(--wash);
}

.stripe--dus .innhold-i {
  background: #fff;
}

/* Kildeboksen står på --wash og har egen ramme, så den skiller seg fra
   begge stripene uten hjelp. Annonseflatene og annonsekortet likeså:
   husbanneret og midtkortet er marineblå. */

/* ---------------------------------------------------------- veier + bilde */

.veier-rad {
  display: grid;
  gap: 1rem;
  align-items: start;
  margin-block: 1.25rem;
}

@media (min-width: 56rem) {
  /* 1,15 mot 1: bildesporet er bredere enn i forrige utgave, der det var
     1,55 mot 1 og bildet ble en smal stripe ved siden av tre brede kort. */
  .veier-rad {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.5rem;
    /* stretch, ikke start. Dette er det som gjør at de to sporene slutter
       sammen: bildesporet får samme høyde som lista i stedet for å vokse
       forbi den. */
    align-items: stretch;
  }
  .veier-rad .veier {
    margin-block: 0;
  }

  /* Bildet har INGEN fast beskjæring her. Et sideforhold ville bestemt
     høyden, og da ville den ene av de to spaltene alltid slutte først —
     enten lista med en tom flate under bildet, eller bildet med en tom
     flate under lista. Uten sideforhold får bildet høyden fra raden, som
     lista bestemmer, og de to ender likt uansett hvor lange kortene blir.
     Figuren er en flexkolonne så bildeteksten får sin plass først og
     bildet tar resten. */
  .veier-rad .gjeldsbilde {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .veier-rad .gjeldsbilde img {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    object-fit: cover;
    object-position: 50% 55%;
  }
}

/* Under 56rem stables de, og bildet legger seg UNDER lista. Over lista ville
   det skjøvet de tre veiene ned uten å si noe først. */
@media (max-width: 55.999rem) {
  .veier-rad .gjeldsbilde img {
    aspect-ratio: 16 / 9;
  }
}

/* ------------------------------------------------------------ lenker i tekst */

/* Lenker i brødteksten.
 *
 * Grunnarket styler dem med `.brod a:not(.knapp):not(.cta)`, altså bare inne
 * i en .brod-beholder. Denne siden har ingen — den er bygget av seksjoner,
 * ikke av en artikkelkropp — så lenken til kredittsjekkselv.no rendret som
 * svart tekst uten understrek. En lenke leseren ikke ser er ingen lenke.
 *
 * Samme feilklasse som FAQ-en og .h2-under: en komponent som ikke arvet
 * fordi den lå bak en forelder siden ikke har. Verdiene er hentet ordrett
 * fra grunnarket, så de to stedene ikke kan drive fra hverandre.
 *
 * Avgrenset til avsnitt og lister inne i en seksjon. Kortene er selv
 * lenker og har sin egen stil; de skal ikke understrekes.
 */
.stripe section > p a:not(.knapp):not(.cta),
.stripe section > ul a:not(.knapp):not(.cta),
.stripe .annen-kilde p a:not(.knapp):not(.cta) {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}