/* ==========================================================================
   ProdUp – felles stilark for produp.no
   Bygget etter ProdUp designmanual (rev. 13.09.2026):
   kap. 1 fargepalett · kap. 2 semantiske roller · kap. 3 lesbarhet
   kap. 6 typografi · kap. 7 logo · kap. 11 merkevaremateriell.
   Ingen skygger, ingen gradient bak tekst, ingen foto bak tekst,
   ingen oransje tekst på beige. Ren CSS, ingen rammeverk.
   ========================================================================== */

:root {
    /* Kap. 1 – ni farger med hver sin rolle */
    --blaa:      #1E3D58;
    --beige:     #F5E6CC;
    --lys-sand:  #FDFBF6;
    --oransje:   #EA5B0B;
    --teal:      #367588;
    --gronn:     #56836B;
    --gyllen:    #DDB13D;
    --korall:    #FF6F61;
    --graa:      #808080;

    /* Kap. 2 – semantiske roller */
    --background:           var(--beige);
    --foreground:           var(--blaa);
    --surface:              var(--blaa);
    --surface-foreground:   var(--beige);
    --primary:              var(--blaa);
    --primary-foreground:   var(--beige);
    --accent:               var(--oransje);
    --accent-foreground:    var(--lys-sand);
    --secondary:            var(--teal);
    --secondary-foreground: var(--lys-sand);
    --border:               var(--graa);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    font-size: 16px;                       /* kap. 6 – minste tekststørrelse */
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Kap. 6 – tabellsifre og skråstrek i null der tall vises */
.tall { font-variant-numeric: tabular-nums slashed-zero; }

/* ---------- Layout ---------- */
.wrap   { max-width: 1100px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.spalte { max-width: 800px; }
.hidden { display: none !important; }

/* ---------- Header. Blå flate, beige tekst (9,2) ---------- */
.topp { background-color: var(--surface); position: sticky; top: 0; z-index: 50; }
.topp-rad {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 16px; padding-bottom: 16px;
}
.topp-logo img { height: 32px; }

.nav-desktop { display: none; }
.nav-desktop a + a { margin-left: 28px; }
.nav-desktop a {
    color: var(--surface-foreground); text-decoration: none;
    font-weight: 500; font-size: 16px; letter-spacing: 0.02em;
    padding-bottom: 4px; border-bottom: 2px solid transparent;
}
/* Aktiv fane markeres med aksentlinje i oransje, ikke oransje tekst:
   oransje gir 3,2 mot blå og holder bare for stor tekst (kap. 3). */
.nav-desktop a:hover,
.nav-desktop a.active { border-bottom-color: var(--accent); }
.nav-desktop a.active { font-weight: 600; }

.meny-knapp {
    display: block; background: none; border: 0; cursor: pointer;
    color: var(--beige); padding: 4px; line-height: 0;
}
.meny-knapp svg { width: 24px; height: 24px; }

#mobile-menu { display: block; background-color: var(--surface); }
#mobile-menu.hidden { display: none !important; }
#mobile-menu a {
    display: block; text-align: center; padding: 12px 16px;
    color: var(--surface-foreground); text-decoration: none; font-weight: 500;
    border-top: 1px solid rgba(245, 230, 204, 0.18);
}
#mobile-menu a.active { font-weight: 600; }

@media (min-width: 900px) {
    .nav-desktop { display: flex; align-items: center; }
    .meny-knapp { display: none; }
    #mobile-menu { display: none !important; }
}

/* ---------- Toppbånd. Vekt-flate: blå med beige tekst (kap. 11) ---------- */
.hero {
    background-color: var(--surface); color: var(--surface-foreground);
    padding-top: 64px; padding-bottom: 64px;
}
.hero h1 { font-size: 28px; font-weight: 600; line-height: 1.25; margin: 0; }  /* kap. 6 */
.hero .aksentlinje { width: 72px; height: 4px; background-color: var(--accent); margin: 20px 0; border: 0; }
.hero .undertittel { font-size: 20px; font-weight: 400; font-style: italic; opacity: 0.92; margin: 0; }
.hero .metalinje   { font-size: 16px; opacity: 0.75; margin: 24px 0 0 0; }
.hero p.ingress-hero { font-size: 20px; font-weight: 400; line-height: 1.5; margin: 0; max-width: 60ch; }

/* ---------- Seksjoner på beige ---------- */
.seksjon { padding-top: 44px; padding-bottom: 44px; }
.hero + main > .seksjon:first-child, .hero + .seksjon { padding-top: 56px; }
.artikkel { padding-top: 56px; padding-bottom: 64px; }

.artikkel p, .seksjon p { margin: 0 0 20px 0; max-width: 68ch; }
.ingress { font-size: 20px; font-weight: 500; line-height: 1.55; }

.artikkel h2 { font-size: 20px; font-weight: 600; margin: 56px 0 0 0; }  /* kap. 6 */
.seksjon h2  { font-size: 20px; font-weight: 600; margin: 0; }
/* Kap. 3: en fremhevet overskrift settes i blått med aksentlinje i oransje */
h2 + .aksentlinje {
    width: 48px; height: 3px; background-color: var(--accent);
    border: 0; margin: 12px 0 20px 0;
}
.artikkel h3, .seksjon h3 {
    font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    margin: 36px 0 12px 0;
}
.artikkel a, .seksjon a { color: var(--foreground); text-decoration: underline; font-weight: 500; }
.artikkel a:hover, .seksjon a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* Punktliste med punkttegn i oransje (kap. 10) */
.artikkel ul, .seksjon ul { list-style: none; padding: 0; margin: 0 0 20px 0; max-width: 68ch; }
.artikkel ul li, .seksjon ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.artikkel ul li::before, .seksjon ul li::before {
    content: "\2022"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}

/* ---------- Sitatkort. Vekt-flate (kap. 11) ---------- */
.sitatkort {
    background-color: var(--surface); color: var(--surface-foreground);
    padding: 32px; margin: 36px 0; border-left: 4px solid var(--accent); max-width: 800px;
}
.sitatkort blockquote { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.5; font-style: italic; }
.sitatkort .kilde { margin: 20px 0 0 0; font-size: 16px; font-style: normal; font-weight: 500; opacity: 0.85; }

/* ---------- Kort. Lys sand på beige (kap. 11) ---------- */
.kort {
    background-color: var(--lys-sand); border: 1px solid var(--border);
    padding: 32px; margin: 28px 0; max-width: 800px;
}
.kort p { max-width: none; }
/* Kap. 11 – display-tall: oransje, halvfet, fra 24 pt, bare på lys sand (3,4). Ett per flate. */
.display-tall      { color: var(--accent);     font-weight: 700; font-size: 56px; line-height: 1; margin: 0; }
.display-tall-blaa { color: var(--foreground); font-weight: 700; font-size: 40px; line-height: 1; margin: 0; }
.kort .etikett    { font-size: 16px; font-weight: 500; margin: 12px 0 0 0; }
.kort .fotnote    { font-size: 16px; opacity: 0.75; margin: 16px 0 0 0; font-style: italic; }
.kort .innledning { font-size: 16px; font-weight: 500; margin: 0 0 20px 0; }
.tall-par { display: flex; flex-wrap: wrap; gap: 40px; }

.maling-rad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border);
}
.maling-rad .aar  { font-weight: 700; font-size: 20px; margin: 0; }
.maling-rad .hvem { font-size: 16px; opacity: 0.8; margin: 4px 0 0 0; }

/* ---------- Pilarer / tre kort i rad (forsiden) ---------- */
.pilarer { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 28px 0 8px 0; }
.pilar {
    background-color: var(--lys-sand); border: 1px solid var(--border); padding: 28px;
}
.pilar .nr { display: inline-block; font-weight: 700; font-size: 20px; color: var(--accent); margin-bottom: 8px; }
.pilar h3 { margin: 0 0 10px 0; text-transform: none; letter-spacing: 0; font-size: 20px; }
.pilar p  { margin: 0; }
@media (min-width: 768px) { .pilarer { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Figur. Foto og illustrasjon på egen flate (kap. 11) ---------- */
.figur { margin: 36px 0; max-width: 1000px; }
.figur img { border: 1px solid var(--border); width: 100%; }
.figur figcaption { font-size: 16px; font-style: italic; opacity: 0.8; margin-top: 12px; max-width: 68ch; }  /* kap. 6 */

/* ---------- Merkelapp. Teal med lys sand tekst, 5,0 (kap. 11) ---------- */
.merkelapp {
    display: inline-block; background-color: var(--secondary); color: var(--secondary-foreground);
    font-weight: 600; font-size: 16px; padding: 3px 12px; letter-spacing: 0.02em;
}

/* ---------- Tidslinje ---------- */
.tidslinje { margin: 36px 0; padding: 0; list-style: none; max-width: 800px; }
.tidslinje > li { position: relative; padding: 0 0 32px 28px; border-left: 2px solid var(--border); }
.tidslinje > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tidslinje > li::before {
    content: ""; position: absolute; left: -7px; top: 6px;
    width: 12px; height: 12px; background-color: var(--accent);
}
.tidslinje h3 { font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 12px 0 6px 0; }
.tidslinje p  { margin: 0; max-width: 60ch; }

/* ---------- Innsiktskort (liste over artikler) ---------- */
.kortliste { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 28px 0; }
.innsiktkort {
    background-color: var(--lys-sand); border: 1px solid var(--border); padding: 28px;
    display: flex; flex-direction: column;
}
.innsiktkort { padding: 0; }
.innsiktkort img { width: 100%; height: 190px; object-fit: cover; border-bottom: 1px solid var(--border); }
.innsiktkort .tekst { padding: 24px 28px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.innsiktkort .dato { font-size: 16px; opacity: 0.7; margin: 0 0 8px 0; }
.innsiktkort h3 { margin: 0 0 12px 0; text-transform: none; letter-spacing: 0; font-size: 20px; }
.innsiktkort p { flex: 1; margin: 0 0 16px 0; }
.innsiktkort a.les { font-weight: 600; text-decoration: underline; }
@media (min-width: 768px) { .kortliste { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Oppfordring til handling. Vekt-flate (kap. 11) ---------- */
.cta {
    background-color: var(--surface); color: var(--surface-foreground);
    padding-top: 56px; padding-bottom: 56px; text-align: center;
}
.cta h2 { font-size: 20px; font-weight: 600; margin: 0 0 12px 0; }
.cta p  { margin: 0 auto 28px auto; max-width: 62ch; }
/* Primærhandling. På blå flate inverteres rollene: beige flate, blå tekst (9,2). */
.knapp-primar {
    display: inline-block; background-color: var(--beige); color: var(--blaa);
    font-weight: 600; font-size: 16px; padding: 14px 32px; text-decoration: none;
}
.knapp-primar:hover { background-color: var(--lys-sand); }
/* Primærknapp på beige flate: blå med beige tekst (kap. 3) */
.knapp-blaa {
    display: inline-block; background-color: var(--primary); color: var(--primary-foreground);
    font-weight: 600; font-size: 16px; padding: 14px 32px; text-decoration: none !important;
}
.knapp-blaa:hover { background-color: var(--teal); color: var(--lys-sand); }

/* ---------- Bunnstripe. Eneste tillatte gradient: blå til teal,
              på bånd uten tekst og uten logo (kap. 11) ---------- */
.bunnstripe { height: 6px; background: linear-gradient(90deg, hsl(208, 49%, 23%) 0%, hsl(194, 43%, 37%) 100%); }

/* ---------- Footer ---------- */
.bunn { background-color: var(--surface); color: var(--surface-foreground); padding-top: 48px; padding-bottom: 48px; text-align: center; }
.bunn img { height: 32px; margin: 0 auto 16px auto; }
.bunn p { margin: 0; }
.bunn a { color: var(--surface-foreground); text-decoration: underline; }
.bunn .slagord   { opacity: 0.85; }
.bunn .lenkelinje { font-size: 16px; margin-top: 16px; }
.bunn .kopirett  { font-size: 16px; margin-top: 8px; opacity: 0.65; }

/* ---------- Kildeliste. Blå lenker med understrek (kap. 3) ---------- */
.kilder { margin-top: 56px; }
.kilder ol { list-style: none; counter-reset: kilde; padding: 0; margin: 0; max-width: 70ch; }
.kilder li { counter-increment: kilde; position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--border); line-height: 1.55; }
.kilder li:last-child { border-bottom: 0; }
.kilder li::before { content: counter(kilde); position: absolute; left: 0; top: 14px; font-weight: 600; color: var(--foreground); opacity: 0.6; font-variant-numeric: tabular-nums; }
.kilder cite { font-style: italic; }
.kilder .merknad { font-size: 16px; opacity: 0.75; margin-top: 20px; max-width: 70ch; font-style: italic; }

.signatur { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-weight: 500; }

/* ---------- Cookie-banner ---------- */
#cookie-banner {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: var(--surface); color: var(--surface-foreground); padding: 16px 24px;
}
#cookie-banner .rad { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
#cookie-banner p { margin: 0; font-size: 16px; flex: 1; min-width: 250px; }
#cookie-banner a { color: var(--beige); text-decoration: underline; }
#cookie-banner .knapper { display: flex; gap: 12px; flex-shrink: 0; }
#cookie-banner button { padding: 8px 20px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 16px; border: 2px solid var(--beige); }
#cookie-decline { background: transparent; color: var(--beige); }
#cookie-accept  { background: var(--beige); color: var(--blaa); }


/* ---------- Statusskala. Statusfargene i sin egen funksjon (kap. 1) ---------- */
.statusrad { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 20px 0 28px 0; max-width: 800px; }
.status { display: flex; align-items: center; gap: 14px; }
.status .sone { width: 44px; height: 24px; flex-shrink: 0; border: 1px solid var(--border); margin-right: 14px; }
.status .sone.gronn  { background-color: var(--gronn); }
.status .sone.gyllen { background-color: var(--gyllen); }
.status .sone.korall { background-color: var(--korall); }
.status p { margin: 0; }
@media (min-width: 768px) { .statusrad { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Avgrensningstabell (hva ProdUp gjør og ikke gjør) ---------- */
.todelt { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 24px 0; }
.todelt .kort { margin: 0; max-width: none; }
.todelt h3 { margin-top: 0; text-transform: none; letter-spacing: 0; font-size: 20px; }
@media (min-width: 768px) { .todelt { grid-template-columns: 1fr 1fr; } }


/* ---------- Profil: foto på egen flate ved siden av tekst (kap. 11) ---------- */
.profil { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; margin-top: 8px; }
.profil .foto { margin: 0; }
.profil .foto img { border: 1px solid var(--border); width: 100%; }
.profil .foto figcaption { font-size: 16px; font-style: italic; opacity: 0.8; margin-top: 12px; }
@media (min-width: 768px) { .profil { grid-template-columns: 2fr 3fr; gap: 48px; } }

/* ---------- Faktaliste ---------- */
.fakta { list-style: none; padding: 0; margin: 0; }
.fakta li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fakta li:last-child { border-bottom: 0; }
.fakta .nokkel { font-weight: 600; min-width: 140px; }
.seksjon ul.fakta li::before, .artikkel ul.fakta li::before { content: none; }
.seksjon ul.fakta li, .artikkel ul.fakta li { padding-left: 0; }


/* ---------- Skjema. Lys sand felt, grå ramme, blå fokus (kap. 2, kap. 3) ---------- */
.skjema label { display: block; font-weight: 600; margin: 0 0 6px 0; }
.skjema input, .skjema textarea {
    width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px; line-height: 1.4;
    color: var(--foreground); background-color: var(--lys-sand); border: 1px solid var(--border);
    margin: 0 0 18px 0; border-radius: 0;
}
.skjema textarea { resize: vertical; min-height: 140px; }
.skjema input:focus, .skjema textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.skjema button { width: 100%; cursor: pointer; border: 0; font-family: inherit; }
.skjema .hjelp { font-size: 16px; opacity: 0.75; margin: 0 0 18px 0; }

/* Statusmelding. Grønn i sin egen funksjon: bekreftelse (kap. 1) */
.suksess {
    background-color: var(--lys-sand); border: 1px solid var(--border); border-left: 4px solid var(--gronn);
    padding: 16px 20px; margin: 0 0 24px 0; max-width: 800px;
}
.suksess p { margin: 0; }

/* Kontaktinformasjon */
.kontaktinfo { list-style: none; padding: 0; margin: 0; }
.kontaktinfo li { padding: 0 0 14px 0; margin: 0; }
.seksjon ul.kontaktinfo li::before, .artikkel ul.kontaktinfo li::before { content: none; }
.seksjon ul.kontaktinfo li { padding-left: 0; }
.kontaktinfo .nokkel { display: block; font-weight: 600; margin-bottom: 2px; }


/* ---------- Artikler ---------- */
.artikkel .byline { font-size: 16px; opacity: 0.75; margin: 0 0 8px 0; }
.artikkel blockquote {
    border-left: 4px solid var(--accent); padding-left: 20px; margin: 28px 0;
    font-style: italic; font-size: 18px; line-height: 1.55; max-width: 68ch;
}
.artikkel h2 + .aksentlinje { margin-bottom: 16px; }
.artikkel .topbilde { margin: 0 0 40px 0; max-width: 1000px; }
.artikkel .topbilde img { border: 1px solid var(--border); width: 100%; }

/* Datert rettelse: lys sand, grå ramme, kursiv (kap. 6) */
.rettelse {
    margin: 48px 0 0 0; padding: 16px 20px; max-width: 70ch;
    background-color: var(--lys-sand); border: 1px solid var(--border);
    font-size: 16px; font-style: italic;
}
.rettelse p { margin: 0; max-width: none; }
.rettelse p + p { margin-top: 10px; }
.tilbake { margin-top: 40px; }


/* ---------- Enkel tabell (personvern) ---------- */
.tabell-rull { overflow-x: auto; margin: 20px 0 28px 0; }
.tabell { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabell th, .tabell td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabell thead th { font-weight: 600; border-bottom-width: 2px; }


/* ======================================================================
   Flatenivåer for hele seksjoner (kap. 11).
   Farge bæres av flater. Kontrast følger matrisen i kap. 3:
   blå/beige 9,2 · teal/lys sand 5,0 · lys sand/blå 10,9 · beige/blå 9,2
   ====================================================================== */
.seksjon-blaa { background-color: var(--blaa); color: var(--beige); }
.seksjon-teal { background-color: var(--teal); color: var(--lys-sand); }
.seksjon-sand { background-color: var(--lys-sand); }

.seksjon-blaa a, .seksjon-teal a { color: inherit; text-decoration: underline; font-weight: 500; }
.seksjon-blaa a:hover, .seksjon-teal a:hover { text-decoration-thickness: 2px; }
.seksjon-blaa ul li::before, .seksjon-teal ul li::before { color: var(--oransje); }
.seksjon-blaa .kort, .seksjon-teal .kort { border-color: transparent; }

/* Kolonner. Tekstbredden beholdes der det er løpende tekst,
   men flaten fylles i stedet for å la høyre halvdel stå tom. */
.to-kol { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.to-kol > * { min-width: 0; }
.to-kol p, .to-kol ul { max-width: none; }
@media (min-width: 900px) { .to-kol { grid-template-columns: 3fr 2fr; gap: 56px; } }
.to-kol-likt { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.to-kol-likt p { max-width: none; }
@media (min-width: 900px) { .to-kol-likt { grid-template-columns: 1fr 1fr; gap: 56px; } }

.tre-kol { display: grid; grid-template-columns: 1fr; gap: 28px; }
.tre-kol p, .tre-kol ul { max-width: none; }
.tre-kol h3 { margin-top: 0; text-transform: none; letter-spacing: 0; font-size: 20px; }
@media (min-width: 768px) { .tre-kol { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Nummerert kolonne på farget flate */
.tre-kol .nr {
    display: block; font-size: 20px; font-weight: 700;
    color: var(--oransje); margin-bottom: 6px;
}
.seksjon-teal .tre-kol .nr { color: var(--lys-sand); }

/* Seksjonsoverskrift sentrert der seksjonen er full bredde */
.midtstilt { text-align: center; }
.midtstilt .aksentlinje { margin-left: auto; margin-right: auto; }
.midtstilt p { margin-left: auto; margin-right: auto; }


/* ---------- Før/etter-bokser (presentasjonsmalen: grå er det dempede, blå er vekt) ----------
   Grå bærer ikke brødtekst med nok kontrast (3,8 mot lys sand), så «før» settes som
   lys sand med grå ramme og grå overskrift, og «etter» som blå med beige tekst. */
.for-etter { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 28px 0; }
.for-etter p, .for-etter ul { max-width: none; }
.boks-for { background-color: var(--lys-sand); border: 2px solid var(--graa); padding: 28px; }
.boks-for h3 { color: var(--graa); margin-top: 0; }
.boks-etter { background-color: var(--blaa); color: var(--beige); border: 2px solid var(--blaa); padding: 28px; }
.boks-etter h3 { margin-top: 0; }
.boks-etter ul li::before { color: var(--oransje); }
.for-etter h3 { text-transform: none; letter-spacing: 0; font-size: 20px; }
@media (min-width: 768px) { .for-etter { grid-template-columns: 1fr 1fr; } }

/* ---------- Fire steg (presentasjonsmalen) ---------- */
.steg { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 32px 0 8px 0; }
.steg > div { position: relative; padding-top: 12px; border-top: 3px solid var(--oransje); }
.steg .nr { display: block; font-size: 40px; font-weight: 700; line-height: 1; color: var(--oransje); margin-bottom: 8px; }
.steg h3 { margin: 0 0 8px 0; text-transform: none; letter-spacing: 0; font-size: 20px; }
.steg p { margin: 0; max-width: none; }
@media (min-width: 768px) { .steg { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* ---------- Nøkkeltall i rad (presentasjonsmalen) ---------- */
.nokkeltall { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 28px 0; }
.nokkeltall > div { background-color: var(--lys-sand); border: 1px solid var(--graa); padding: 28px; }
.nokkeltall .display-tall { font-size: 48px; }
.nokkeltall p { max-width: none; }
@media (min-width: 768px) { .nokkeltall { grid-template-columns: repeat(3, 1fr); } .nokkeltall .display-tall { font-size: 56px; } }

/* ---------- Åtte i rutenett ---------- */
.rutenett { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 28px 0 8px 0; }
.rutenett > div { background-color: var(--lys-sand); border: 1px solid var(--graa); padding: 20px 22px; }
.rutenett h3 { margin: 0 0 6px 0; text-transform: none; letter-spacing: 0; font-size: 18px; }
.rutenett p { margin: 0; max-width: none; }
@media (min-width: 600px) { .rutenett { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rutenett { grid-template-columns: repeat(4, 1fr); } }

/* Figur på egen lys sand-flate inne i farget seksjon (malen: figurer står på lys sand, aldri bak tekst) */
.figurflate { background-color: var(--lys-sand); padding: 16px; border: 1px solid var(--graa); }
.figurflate img { display: block; width: 100%; border: 0; }

/* ---------- Responsivt ---------- */
@media (min-width: 768px) {
    .hero h1 { font-size: 40px; }
    .display-tall { font-size: 72px; }
}
@media (max-width: 600px) {
    .maling-rad { grid-template-columns: 1fr; gap: 16px; }
    .sitatkort, .kort, .pilar { padding: 24px; }
    .display-tall { font-size: 48px; }
    .tall-par { gap: 28px; }
}


/* ======================================================================
   Komponenter med egen flate inne i en farget seksjon.
   En komponent som selv setter bakgrunn, må også sette tekstfarge –
   ellers arver den seksjonens beige eller lys sand og faller under
   kontrastkravet i kap. 3 (beige mot lys sand er 1,1).
   ====================================================================== */
.seksjon-blaa .kort,        .seksjon-teal .kort,
.seksjon-blaa .nokkeltall > div, .seksjon-teal .nokkeltall > div,
.seksjon-blaa .rutenett > div,   .seksjon-teal .rutenett > div,
.seksjon-blaa .pilar,       .seksjon-teal .pilar,
.seksjon-blaa .innsiktkort, .seksjon-teal .innsiktkort,
.seksjon-blaa .rettelse,    .seksjon-teal .rettelse,
.seksjon-blaa .suksess,     .seksjon-teal .suksess,
.seksjon-blaa .boks-for,    .seksjon-teal .boks-for,
.seksjon-blaa .figurflate,  .seksjon-teal .figurflate { color: var(--foreground); }

.seksjon-blaa .kort a,        .seksjon-teal .kort a,
.seksjon-blaa .nokkeltall a,  .seksjon-teal .nokkeltall a,
.seksjon-blaa .rutenett a,    .seksjon-teal .rutenett a,
.seksjon-blaa .pilar a,       .seksjon-teal .pilar a,
.seksjon-blaa .innsiktkort a, .seksjon-teal .innsiktkort a,
.seksjon-blaa .rettelse a,    .seksjon-teal .rettelse a { color: var(--foreground); }

.seksjon-blaa .kort ul li::before,       .seksjon-teal .kort ul li::before,
.seksjon-blaa .rutenett ul li::before,   .seksjon-teal .rutenett ul li::before,
.seksjon-blaa .pilar ul li::before,      .seksjon-teal .pilar ul li::before { color: var(--accent); }

/* På lys sand-flate bytter de samme komponentene til beige.
   Lys sand på lys sand gir ingen flateforskjell og rammen forsvinner. */
.seksjon-sand .kort,
.seksjon-sand .nokkeltall > div,
.seksjon-sand .rutenett > div,
.seksjon-sand .pilar,
.seksjon-sand .innsiktkort,
.seksjon-sand .rettelse,
.seksjon-sand .suksess,
.seksjon-sand .boks-for,
.seksjon-sand .figurflate,
.seksjon-sand .skjema input,
.seksjon-sand .skjema textarea { background-color: var(--beige); }

/* Sitat på farget flate beholder oransje aksentkant */
.seksjon-blaa blockquote, .seksjon-teal blockquote { border-left-color: var(--accent); }


/* ======================================================================
   Artikkel delt i flater.
   Brødteksten står som publisert; flatene følger artikkelens egne
   kapittelskiller, slik at siden ikke blir én lang beige spalte.
   ====================================================================== */
.artikkel-flater { padding-top: 0; padding-bottom: 0; }
.artikkel-flater > .seksjon { padding-top: 48px; padding-bottom: 48px; }
.artikkel-flater .spalte > *:first-child { margin-top: 0; }
.artikkel-flater .topbilde { margin: 0 0 36px 0; }
.artikkel-flater .kilder { margin-top: 0; }
.artikkel-flater .rettelse { margin-top: 40px; }
.artikkel-flater .tilbake { margin-bottom: 0; }

/* Ingressen står bare i første flate */
.artikkel-flater .ingress { max-width: 68ch; }

/* Seksjon med lite innhold: halv luft */
.seksjon-smal { padding-top: 28px; padding-bottom: 28px; }

/* Teknisk navn i løpende tekst */
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em; padding: 1px 6px;
    background-color: var(--lys-sand); border: 1px solid var(--border);
}
.seksjon-sand code { background-color: var(--beige); }
.seksjon-blaa code, .seksjon-teal code { background-color: transparent; border-color: currentColor; }

/* Tekstspalten i en flatedelt artikkel sentreres i flaten.
   Venstrestilt spalte i full bredde etterlater en tom høyrehalvdel
   på hver eneste flate; sentrert spalte gir lik luft på begge sider. */
.artikkel-flater .spalte { max-width: 70ch; margin-left: auto; margin-right: auto; }
.artikkel-flater .spalte p,
.artikkel-flater .spalte ul,
.artikkel-flater .spalte ol,
.artikkel-flater .spalte figure,
.artikkel-flater .spalte blockquote,
.artikkel-flater .spalte .sitatkort,
.artikkel-flater .spalte .kort,
.artikkel-flater .spalte .rettelse,
.artikkel-flater .spalte .tidslinje { max-width: none; }
.artikkel-flater .spalte figcaption { max-width: none; }

/* ======================================================================
   Rettelser etter kontrastmåling mot kap. 3.
   Aksentfarge og statusfarger bæres av flater, rammer og ruter –
   ikke av tekst, der de faller under kravet.
   ====================================================================== */

/* Nummer og etikett i kolonne følger flaten. Oransje holder bare på
   lys sand, og bare som display-tall fra 24 pt (3,4). */
.tre-kol .nr              { color: var(--foreground); }
.seksjon-sand .tre-kol .nr { color: var(--accent); }
.seksjon-blaa .tre-kol .nr { color: var(--beige); }
.seksjon-teal .tre-kol .nr { color: var(--lys-sand); }
.seksjon-blaa .steg .nr    { color: var(--beige); }
.seksjon-teal .steg .nr    { color: var(--lys-sand); }

/* Bildetekst på farget flate settes i full dekning.
   0,8 dekning tar lys sand mot teal fra 5,0 ned til 4,2. */
.seksjon-blaa figcaption, .seksjon-teal figcaption,
.seksjon-blaa .figur figcaption, .seksjon-teal .figur figcaption { opacity: 1; }

/* Grå bærer ikke overskrift på lys sand (3,8). Den dempede boksen
   kjennes på den grå rammen, ikke på grå tekst. */
.boks-for h3 { color: var(--foreground); opacity: 0.7; }

/* Statusflagg: fargen ligger i ruten, teksten følger flaten (kap. 1) */
.statusflagg {
    display: block; width: 56px; height: 10px;
    margin-bottom: 12px; border: 1px solid var(--border);
}
.statusflagg.gronn  { background-color: var(--gronn); }
.statusflagg.gyllen { background-color: var(--gyllen); }
.statusflagg.korall { background-color: var(--korall); }


/* ======================================================================
   Etter ProdUp_presentasjon (september 2026) og presentasjonsmalen.
   Oransje er merkevarefargen: den bæres av kanter, linjer, sirkler
   og ett kapittelbånd – aldri av brødtekst.
   ====================================================================== */

/* Kort får oransje venstrekant på beige og lys sand (malens signatur).
   På blå og teal flate er kanten lys sand, som på presentasjonens
   siste lysbilde. */
.kort, .pilar, .rutenett > div, .boks-for, .boks-etter, .innsiktkort {
    border-left: 4px solid var(--oransje);
}
.seksjon-blaa .kort, .seksjon-teal .kort,
.seksjon-blaa .rutenett > div, .seksjon-teal .rutenett > div,
.seksjon-blaa .pilar, .seksjon-teal .pilar { border-left-color: var(--lys-sand); }
.boks-for { border-left-color: var(--oransje); }

/* Oppfordring: oransje linje mellom overskrift og tekst (malens sitatlysbilde) */
.cta .aksentlinje { width: 56px; height: 3px; background-color: var(--oransje); border: 0; margin: 16px auto 20px auto; }

/* ---------- Fire steg med oransje sirkler (malen). Slås på med .steg-sirkler ----------
   Sirkelen er 40 px, tallet 20 px halvfet: stor tekst, 3,4 mot oransje holder. */
.steg-sirkler > div { border-top: 0; padding-top: 0; }
.steg-sirkler .nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background-color: var(--oransje); color: var(--lys-sand);
    font-size: 20px; font-weight: 700; line-height: 1; margin-bottom: 14px;
}
.seksjon-blaa .steg-sirkler .nr, .seksjon-teal .steg-sirkler .nr { background-color: var(--oransje); color: var(--lys-sand); }

/* ---------- Doktrinen: tre kort i lys sand, teal og blå, alle med oransje kant ---------- */
.doktrine { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 32px 0 8px 0; }
.doktrine > div { padding: 28px; border-left: 5px solid var(--oransje); }
.doktrine h3 { margin: 0 0 10px 0; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.doktrine p  { margin: 0; max-width: none; }
.doktrine-sand { background-color: var(--lys-sand); color: var(--blaa); }
.doktrine-teal { background-color: var(--teal);     color: var(--lys-sand); }
.doktrine-blaa { background-color: var(--blaa);     color: var(--beige); }
@media (min-width: 768px) { .doktrine { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ---------- ProdUp-strukturen: hierarkilinje og seks kategorier i hver sin farge ----------
   Fargene er presentasjonens: beige, gyllen, oransje, teal, grå, blå.
   Etikettene settes 20 px halvfet (stor tekst etter WCAG), så oransje (3,4) og grå (3,8) holder. */
.hierarki { font-size: 20px; color: var(--teal); font-weight: 700; margin: 0 0 24px 0; line-height: 1.6; }
.hierarki .skille { margin: 0 4px; }
.struktur { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 12px 0; }
.struktur > div {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 96px; padding: 14px 10px; font-size: 20px; font-weight: 700; line-height: 1.25;
}
.kat-rigg       { background-color: var(--beige);   color: var(--blaa);     border: 1px solid var(--graa); }
.kat-mottak     { background-color: var(--gyllen);  color: var(--blaa); }
.kat-nedtelling { background-color: var(--oransje); color: var(--lys-sand); }
.kat-opptelling { background-color: var(--teal);    color: var(--lys-sand); }
.kat-avvik      { background-color: var(--graa);    color: var(--lys-sand); }
.kat-tillegg    { background-color: var(--blaa);    color: var(--beige); }
.struktur-note  { font-size: 16px; opacity: 0.75; margin: 0 0 32px 0; }
@media (min-width: 600px)  { .struktur { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .struktur { grid-template-columns: repeat(6, 1fr); gap: 12px; } }

/* ---------- Kapittelbånd: oransje flate med én stor linje (malens kapittellysbilde) ----------
   Bare stor tekst: lys sand på oransje er 3,4 og holder fra 24 px. Ingen brødtekst. */
.kapittel { background-color: var(--oransje); color: var(--lys-sand); padding-top: 48px; padding-bottom: 48px; }
.kapittel .del { display: block; font-size: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.kapittel p, .kapittel h2 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.25; max-width: 40ch; }
.kapittel .aksentlinje { width: 72px; height: 4px; background-color: var(--lys-sand); border: 0; margin: 20px 0 0 0; }
@media (min-width: 768px) { .kapittel p, .kapittel h2 { font-size: 36px; } }

/* ---------- Regnestykket: to kolonner på blå flate (presentasjonens «Fra sløsing til lønnsomhet») ---------- */
.regnestykke { width: 100%; border-collapse: collapse; font-size: 18px; max-width: 560px; }
.regnestykke td { padding: 12px 0; border-bottom: 1px solid rgba(245, 230, 204, 0.25); vertical-align: baseline; }
.regnestykke td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums slashed-zero; }
.regnestykke tr.sum td { font-weight: 700; border-bottom: 2px solid var(--oransje); }
.regnestykke tr.resultat td { font-weight: 700; border-bottom: 0; padding-top: 16px; }
.regnestykke tr.resultat td:last-child { font-size: 24px; }
.resultatkort { background-color: var(--lys-sand); color: var(--blaa); padding: 32px 28px; text-align: center; border-left: 5px solid var(--oransje); }
.resultatkort .display-tall { font-size: 64px; margin: 8px 0 12px 0; }
.resultatkort p { margin: 0; max-width: none; }
.resultatkort .fotnote { font-size: 16px; opacity: 0.75; margin-top: 12px; }

/* Faktaliste på farget flate: skillelinjer i flatens tekstfarge */
.seksjon-teal .fakta li, .seksjon-blaa .fakta li { border-bottom-color: rgba(253, 251, 246, 0.3); }

/* Tre steg i rad (App Store-seksjonen) */
@media (min-width: 768px) { .steg-tre { grid-template-columns: repeat(3, 1fr); } }

/* Korttittel: overskrift inne i kort, som på presentasjonens kort */
.kort-tittel { margin: 0 0 10px 0; font-size: 20px; font-weight: 600; text-transform: none; letter-spacing: 0; }