/* ==========================================================================
   Cyberhub Norge — stilark
   --------------------------------------------------------------------------
   Profil: mørk, nøytral og teknisk. Høy kontrast, tydelig grid, skarpe
   former, god luft. Systemfonter (streng CSP → ingen eksterne webfonter);
   det tekniske uttrykket kommer fra monospace til etiketter, tall og
   priser — ikke fra effekter.

   Fargebruk med mening: azurblå = bedrift, rav = privatperson. Fargen
   opptrer ALDRI alene som informasjonsbærer — det står alltid tekst ved
   siden av (WCAG 2.2, 1.4.1).

   Mobil først. Brekkpunkter: 40em, 48em, 60em, 75em.
   Ingen faste bredder — clamp()/%/min()/max() overalt.
   ========================================================================== */

:root {
    /* ── Flater ── */
    --bg:            #0d1317;
    --bg-2:          #121b21;
    --bg-3:          #18242c;
    --bg-input:      #0b1216;
    --bg-topp:       rgba(13, 19, 23, 0.92);

    /* ── Linjer ── */
    --linje:         #223440;
    --linje-sterk:   #34505f;

    /* ── Tekst ── */
    --tekst:         #d5e0e6;
    --tekst-dus:     #93a7b2;
    --overskrift:    #f1f6f8;

    /* ── Aksenter ── */
    --aksent:        #38a3d1;   /* bedrift */
    --aksent-lys:    #6ec2e8;
    --aksent-mork:   #1c6d93;
    --aksent-flate:  rgba(56, 163, 209, 0.10);
    --privat:        #e0a13c;   /* privatperson */
    --privat-lys:    #f0bb66;
    --privat-flate:  rgba(224, 161, 60, 0.10);
    --pa-aksent:     #05121a;

    /* ── Status ── */
    --ok:            #5cbd8d;
    --feil:          #f07a68;

    /* ── Form ── */
    --radius:        2px;
    --maks-bredde:   72rem;
    --luft:          clamp(1rem, 4.5vw, 2.5rem);
    --seksjon-luft:  clamp(3rem, 8vw, 5.5rem);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: dark;
    /* Sikkerhetsnett mot horisontal overflyt (se CLAUDE.md). */
    overflow-x: clip;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: clip;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--tekst);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    color: var(--overskrift);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 0.6em;
    text-wrap: balance;
    /* Lange ord (URL-er, sammensatte norske ord) skal aldri sprenge bredden. */
    overflow-wrap: break-word;
}

h1 { font-size: clamp(1.9rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.35rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--aksent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--aksent-lys); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25rem; }
li { margin-bottom: 0.35em; }

strong { color: var(--overskrift); font-weight: 600; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-3); padding: 0.1em 0.35em; border-radius: var(--radius); }
hr { border: 0; border-top: 1px solid var(--linje); margin: 2rem 0; }

::selection { background: var(--aksent); color: var(--pa-aksent); }

/* Synlig fokus overalt — aldri fjernet, bare gjort tydelig. */
:focus-visible {
    outline: 2px solid var(--aksent-lys);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hopp-lenke {
    position: absolute; left: 0.5rem; top: -4rem; z-index: 200;
    background: var(--aksent); color: var(--pa-aksent);
    padding: 0.7rem 1.2rem; font-weight: 600; text-decoration: none;
    transition: top 0.15s ease;
}
.hopp-lenke:focus { top: 0.5rem; color: var(--pa-aksent); }

.container {
    width: 100%;
    max-width: var(--maks-bredde);
    margin-inline: auto;
    padding-inline: var(--luft);
    min-width: 0;
}

/* ==========================================================================
   Topplinje og meny
   ========================================================================== */

.topplinje {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg-topp);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linje);
}

.topplinje-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    flex-wrap: wrap;
}

.merke {
    display: flex; align-items: center; gap: 0.6rem;
    text-decoration: none; color: var(--overskrift);
    margin-right: auto; min-width: 0;
}
.merke-logo { width: 2.125rem; height: 2.125rem; flex: none; }
.merke-tekst { display: flex; flex-direction: column; min-width: 0; }
.merke-navn { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.2; }
.merke-sted {
    font-family: var(--font-mono); font-size: 0.68rem; color: var(--tekst-dus);
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
}

.meny-knapp {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: transparent; color: var(--tekst);
    border: 1px solid var(--linje-sterk); border-radius: var(--radius);
    padding: 0.55rem 0.85rem; font: inherit; font-size: 0.92rem; font-weight: 500;
    cursor: pointer; min-height: 2.75rem;
}
.meny-knapp:hover { border-color: var(--aksent); color: var(--overskrift); }
.meny-strek {
    position: relative; display: block; width: 1.05rem; height: 2px;
    background: currentColor;
}
.meny-strek::before, .meny-strek::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.meny-strek::before { top: -0.32rem; }
.meny-strek::after  { top: 0.32rem; }
.meny-knapp[aria-expanded="true"] .meny-strek { background: transparent; }
.meny-knapp[aria-expanded="true"] .meny-strek::before { transform: translateY(0.32rem) rotate(45deg); }
.meny-knapp[aria-expanded="true"] .meny-strek::after  { transform: translateY(-0.32rem) rotate(-45deg); }

.hovedmeny { display: none; width: 100%; }
.hovedmeny.er-apen { display: block; }
.hovedmeny ul {
    list-style: none; margin: 0; padding: 0 0 0.75rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.hovedmeny a {
    display: block; padding: 0.8rem 0.25rem;
    color: var(--tekst); text-decoration: none; font-weight: 500;
    border-bottom: 1px solid var(--linje);
    min-height: 2.75rem;
}
.hovedmeny a:hover { color: var(--aksent-lys); }
.hovedmeny a[aria-current="page"] {
    color: var(--aksent); box-shadow: inset 3px 0 0 var(--aksent); padding-left: 0.75rem;
}
.hovedmeny .meny-cta, .hovedmeny .meny-admin {
    margin-top: 0.6rem; border: 1px solid var(--aksent); border-bottom-color: var(--aksent);
    color: var(--aksent); text-align: center; font-weight: 600;
}
.hovedmeny .meny-admin { border-color: var(--linje-sterk); color: var(--tekst-dus); }

@media (min-width: 60em) {
    .meny-knapp { display: none; }
    .hovedmeny { display: block; width: auto; }
    .hovedmeny ul { flex-direction: row; align-items: center; gap: 0.15rem; padding: 0; flex-wrap: wrap; }
    .hovedmeny a {
        border-bottom: 0; padding: 0.5rem 0.7rem; font-size: 0.94rem;
        border: 1px solid transparent; border-radius: var(--radius);
    }
    .hovedmeny a[aria-current="page"] {
        box-shadow: none; padding-left: 0.7rem;
        border-color: var(--linje-sterk); background: var(--bg-3);
    }
    .hovedmeny .meny-cta {
        margin: 0 0 0 0.4rem; background: var(--aksent); color: var(--pa-aksent);
        border-color: var(--aksent); padding-inline: 1.1rem;
    }
    .hovedmeny .meny-cta:hover { background: var(--aksent-lys); color: var(--pa-aksent); }
}

/* ── Brødsmuler ── */
.brodsmuler {
    border-bottom: 1px solid var(--linje);
    background: var(--bg-2);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.brodsmuler .container {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
    padding-block: 0.7rem; color: var(--tekst-dus);
}
.brodsmuler a { color: var(--tekst-dus); text-decoration: none; }
.brodsmuler a:hover { color: var(--aksent); text-decoration: underline; }

/* ==========================================================================
   Knapper
   ========================================================================== */

.knapp {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;                 /* stor trykkflate på mobil */
    padding: 0.8rem 1.5rem;
    border: 1px solid transparent; border-radius: var(--radius);
    font-weight: 600; font-size: 1rem; line-height: 1.25;
    text-decoration: none; text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.knapp-primar { background: var(--aksent); color: var(--pa-aksent); border-color: var(--aksent); }
.knapp-primar:hover { background: var(--aksent-lys); border-color: var(--aksent-lys); color: var(--pa-aksent); }

.knapp-privat { background: var(--privat); color: var(--pa-aksent); border-color: var(--privat); }
.knapp-privat:hover { background: var(--privat-lys); border-color: var(--privat-lys); color: var(--pa-aksent); }

.knapp-sekundar { background: transparent; color: var(--tekst); border-color: var(--linje-sterk); }
.knapp-sekundar:hover { border-color: var(--aksent); color: var(--aksent-lys); background: var(--aksent-flate); }

.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0; }

/* ==========================================================================
   Seksjoner
   ========================================================================== */

.seksjon { padding-block: var(--seksjon-luft); border-top: 1px solid var(--linje); }
.seksjon:first-child { border-top: 0; }
.seksjon-alt { background: var(--bg-2); }

.seksjon-kicker {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--aksent); margin: 0 0 0.85rem;
    display: flex; align-items: center; gap: 0.6rem;
}
.seksjon-kicker::before {
    content: ""; width: 1.4rem; height: 1px; background: currentColor; flex: none;
}
.tone-privat .seksjon-kicker { color: var(--privat); }

.seksjon-ingress {
    font-size: clamp(1.05rem, 2.4vw, 1.2rem);
    color: var(--tekst-dus);
    max-width: 58ch;
    margin-bottom: 0;
}
.seksjon-innhold { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.seksjon > .container > h2 { max-width: 30ch; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    padding-block: clamp(3rem, 9vw, 6rem);
    border-bottom: 1px solid var(--linje);
    background:
        radial-gradient(60rem 32rem at 82% -10%, rgba(56, 163, 209, 0.13), transparent 65%),
        var(--bg);
    overflow: hidden;
}
/* Diskret teknisk detalj: et svakt rutenett, ikke en «hacker»-effekt. */
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.hero > .container { position: relative; }

.hero-kicker {
    font-family: var(--font-mono); font-size: 0.76rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--aksent);
    margin: 0 0 1rem;
}
.hero h1 { margin-bottom: 0.5em; max-width: 18ch; }
.hero-intro {
    font-size: clamp(1.08rem, 2.6vw, 1.3rem);
    color: var(--tekst-dus);
    max-width: 56ch;
}
.hero-handlinger { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero-handlinger .knapp { flex: 1 1 15rem; min-width: 0; }

.hero-punkter {
    list-style: none; margin: 2.25rem 0 0; padding: 0;
    display: grid; gap: 0.6rem 1.5rem;
    font-family: var(--font-mono); font-size: 0.82rem;
    color: var(--tekst-dus);
}
.hero-punkter li { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; }
.hero-punkter li::before { content: "▸"; color: var(--aksent); flex: none; }

@media (min-width: 48em) {
    .hero-handlinger .knapp { flex: 0 1 auto; }
    .hero-punkter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
    .hero-punkter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sidehero for undersider — roligere enn forsidens */
.hero-side { padding-block: clamp(2.25rem, 6vw, 3.75rem); background: var(--bg-2); }
.hero-side::before { display: none; }
.hero-side.tone-privat {
    background:
        radial-gradient(52rem 26rem at 85% -20%, rgba(224, 161, 60, 0.12), transparent 65%),
        var(--bg-2);
}
.hero-side.tone-privat .hero-kicker { color: var(--privat); }

/* ==========================================================================
   Veivalg (bedrift / privat)
   ========================================================================== */

.veivalg {
    display: grid; gap: 1.25rem;
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
}
@media (min-width: 48em) {
    .veivalg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.veivalg-kort {
    display: flex; flex-direction: column; gap: 0.35rem;
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--bg-2);
    border: 1px solid var(--linje);
    border-top: 3px solid var(--aksent);
    border-radius: var(--radius);
    color: var(--tekst); text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.veivalg-kort:hover {
    background: var(--bg-3); border-color: var(--linje-sterk);
    border-top-color: var(--aksent-lys); color: var(--tekst);
}
.veivalg-kort.tone-privat { border-top-color: var(--privat); }
.veivalg-kort.tone-privat:hover { border-top-color: var(--privat-lys); }

.veivalg-kicker {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--aksent); margin: 0;
}
.veivalg-kort.tone-privat .veivalg-kicker { color: var(--privat); }
.veivalg-kort h3 { margin-bottom: 0.4em; font-size: clamp(1.25rem, 3vw, 1.5rem); }
.veivalg-tekst { color: var(--tekst-dus); }
.veivalg-tekst p:last-child { margin-bottom: 0; }
.veivalg-mer {
    margin-top: auto; padding-top: 1.25rem;
    font-weight: 600; color: var(--aksent);
}
.veivalg-kort.tone-privat .veivalg-mer { color: var(--privat); }

/* ==========================================================================
   Kort-rutenett (og karusell på mobil)
   ========================================================================== */

.kort-rutenett {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40em) { .kort-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) {
    .kort-rutenett { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
    .kort-rutenett.kol-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kort-rutenett.kol-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kort {
    min-width: 0; margin: 0;
    background: var(--bg-2);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    display: flex;
}
.kort-innhold { padding: clamp(1.1rem, 3vw, 1.5rem); display: flex; flex-direction: column; width: 100%; min-width: 0; }
.kort-kicker {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--aksent); margin: 0 0 0.5rem;
}
.kort h3 { font-size: 1.1rem; margin-bottom: 0.45em; }
.kort p { color: var(--tekst-dus); }
.kort ul { color: var(--tekst-dus); }
.kort-lenke { transition: border-color 0.15s ease, background-color 0.15s ease; }
.kort-lenke:hover { border-color: var(--linje-sterk); background: var(--bg-3); }
.kort-lenke a { color: inherit; text-decoration: none; display: flex; width: 100%; min-width: 0; }
.kort-mer { margin-top: auto; padding-top: 1rem; color: var(--aksent); font-weight: 600; font-size: 0.94rem; }

/* Sveipbar karusell på små skjermer; vanlig rutenett fra 48em. */
@media (max-width: 47.99em) {
    .kort-rutenett.kort-karusell {
        display: flex; gap: 0.85rem;
        overflow-x: auto; scroll-snap-type: x mandatory;
        /* Kortene skal kunne sveipes helt ut til kanten av skjermen. */
        margin-inline: calc(var(--luft) * -1);
        padding-inline: var(--luft);
        padding-bottom: 0.75rem;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    .kort-rutenett.kort-karusell > .kort {
        flex: 0 0 min(78%, 20rem);
        scroll-snap-align: start;
    }
    .kort-rutenett.kort-karusell.dras { scroll-snap-type: none; cursor: grabbing; }
}

/* ==========================================================================
   Tjenester
   ========================================================================== */

.tjenester {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 48em) { .tjenester { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 75em) { .tjenester { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tjeneste {
    min-width: 0; margin: 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--bg-2);
    border: 1px solid var(--linje);
    border-left: 3px solid var(--aksent);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    /* Ankerlenker fra menyer skal ikke havne under den klebrige toppen. */
    scroll-margin-top: 5.5rem;
}
.tone-privat .tjeneste { border-left-color: var(--privat); }

.tjeneste-hode { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.tjeneste-hode h3 { margin-bottom: 0.5em; }
.tjeneste-ingress { color: var(--tekst-dus); }

.merkelapp {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--aksent);
    border: 1px solid var(--aksent); border-radius: var(--radius);
    padding: 0.15rem 0.45rem; white-space: nowrap;
}
.tone-privat .merkelapp { color: var(--privat); border-color: var(--privat); }

.stikkord {
    list-style: none; margin: 0 0 1.1em; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.stikkord li {
    margin: 0;
    font-family: var(--font-mono); font-size: 0.76rem;
    color: var(--tekst-dus);
    background: var(--bg-3); border: 1px solid var(--linje);
    border-radius: var(--radius); padding: 0.2rem 0.5rem;
}

.tjeneste-budskap {
    border-left: 2px solid var(--linje-sterk);
    padding-left: 0.9rem; color: var(--tekst);
}
.tjeneste-pris {
    margin-top: auto; padding-top: 1rem;
    font-family: var(--font-mono); font-size: 0.85rem; color: var(--aksent);
}
.tone-privat .tjeneste-pris { color: var(--privat); }

.tjenester-kompakt .tjeneste { border-left-width: 1px; }

/* ==========================================================================
   Priser
   ========================================================================== */

.pristabell-hylse { overflow-x: auto; margin-bottom: 1.25rem; }
.pristabell {
    width: 100%; border-collapse: collapse; text-align: left;
    font-size: 0.98rem;
}
.pristabell th, .pristabell td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--linje);
    vertical-align: top;
}
.pristabell thead th {
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-dus);
    border-bottom-color: var(--linje-sterk);
}
.pristabell tbody th { font-weight: 600; color: var(--overskrift); padding-left: 0; }
.pristabell td { text-align: right; white-space: nowrap; }
.pris-navn { display: block; }
.pris-forklaring { display: block; font-weight: 400; font-size: 0.88rem; color: var(--tekst-dus); margin-top: 0.15rem; white-space: normal; }
.pris-belop { font-family: var(--font-mono); font-weight: 600; color: var(--aksent); }
.tone-privat .pris-belop { color: var(--privat); }
.pris-enhet { font-family: var(--font-mono); font-size: 0.8rem; color: var(--tekst-dus); }

@media (max-width: 30em) {
    /* Under ~480px blir tabellen kortstablet slik at ingenting må scrolles sidelengs. */
    .pristabell, .pristabell tbody, .pristabell tr, .pristabell th, .pristabell td { display: block; width: 100%; }
    .pristabell thead { display: none; }
    .pristabell tr { border-bottom: 1px solid var(--linje); padding-block: 0.85rem; }
    .pristabell th, .pristabell td { border-bottom: 0; padding: 0; }
    .pristabell td { text-align: left; margin-top: 0.3rem; white-space: normal; }
}

/* ── Pakker ── */
.pakker {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 48em) { .pakker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.pakke {
    position: relative; min-width: 0; margin: 0;
    display: flex; flex-direction: column;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--bg-2); border: 1px solid var(--linje); border-radius: var(--radius);
}
.pakke-fremhevet { border-color: var(--aksent); background: var(--bg-3); }
.pakke-merke {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--aksent); margin: 0 0 0.5rem;
}
.pakke h3 { margin-bottom: 0.35em; }
.pakke-pris { margin: 0 0 0.85em; }
.pakke-belop { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--overskrift); }
.pakke-enhet { font-family: var(--font-mono); font-size: 0.8rem; color: var(--tekst-dus); }
.pakke-ingress { color: var(--tekst-dus); }

.sjekkliste { list-style: none; margin: 0; padding: 0; }
.sjekkliste li {
    position: relative; padding-left: 1.5rem; margin-bottom: 0.5em;
    color: var(--tekst-dus);
}
.sjekkliste li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--ok); font-weight: 700;
}

/* ── Soner ── */
.soner {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.85rem; grid-template-columns: 1fr;
}
@media (min-width: 48em) { .soner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sone {
    margin: 0; min-width: 0;
    padding: 1.15rem 1.25rem;
    background: var(--bg-2); border: 1px solid var(--linje); border-radius: var(--radius);
}
.sone-hode { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sone-hode h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.sone-tillegg { font-family: var(--font-mono); font-weight: 600; color: var(--privat); white-space: nowrap; }
.sone p { margin: 0; color: var(--tekst-dus); font-size: 0.95rem; }

/* ==========================================================================
   Portefølje
   ========================================================================== */

.filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.filter[hidden] { display: none; }
.filter-etikett {
    font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--tekst-dus);
}
.filter-knapper { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-knapp {
    font: inherit; font-size: 0.88rem; font-weight: 500;
    min-height: 2.75rem; padding: 0.45rem 0.9rem;
    background: transparent; color: var(--tekst-dus);
    border: 1px solid var(--linje); border-radius: var(--radius);
    cursor: pointer;
}
.filter-knapp:hover { border-color: var(--linje-sterk); color: var(--tekst); }
.filter-knapp.er-aktiv { background: var(--aksent); border-color: var(--aksent); color: var(--pa-aksent); font-weight: 600; }

.prosjekter {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 48em) { .prosjekter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }

.prosjekt {
    margin: 0; min-width: 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--bg-2); border: 1px solid var(--linje); border-radius: var(--radius);
}
.prosjekt[hidden] { display: none; }
.prosjekt-hode { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.prosjekt-plassholder { border-style: dashed; }
.prosjekt-plassholder-merke {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
    color: var(--tekst-dus); border: 1px dashed var(--linje-sterk);
    padding: 0.3rem 0.55rem; border-radius: var(--radius);
    display: inline-block; margin-bottom: 1rem;
}
.prosjekt-felt { margin: 0; display: grid; gap: 0.7rem; }
.prosjekt-felt-rad { display: grid; gap: 0.15rem; min-width: 0; }
.prosjekt-felt dt {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--aksent);
}
.prosjekt-felt dd { margin: 0; color: var(--tekst-dus); min-width: 0; overflow-wrap: break-word; }

@media (min-width: 40em) {
    .prosjekt-felt-rad { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 0.15rem 1rem; align-items: baseline; }
}

/* ==========================================================================
   Innholdskomponenter
   ========================================================================== */

.steg { list-style: none; counter-reset: steg; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48em) { .steg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 75em) { .steg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steg-post {
    counter-increment: steg; margin: 0; min-width: 0;
    padding: 1.25rem; background: var(--bg-2);
    border: 1px solid var(--linje); border-radius: var(--radius);
}
.steg-post::before {
    content: counter(steg, decimal-leading-zero);
    display: block; font-family: var(--font-mono); font-size: 0.85rem;
    color: var(--aksent); margin-bottom: 0.6rem;
}
.steg-post h3 { font-size: 1.05rem; }
.steg-post p { color: var(--tekst-dus); margin-bottom: 0; }

.faktaboks {
    background: var(--bg-3); border: 1px solid var(--linje);
    border-left: 3px solid var(--aksent);
    border-radius: var(--radius);
    padding: clamp(1.15rem, 3vw, 1.6rem);
    margin: 1.5rem 0;
}
.faktaboks h3 { font-size: 1.05rem; }
.faktaboks p:last-child, .faktaboks ul:last-child { margin-bottom: 0; }

.forbehold {
    background: var(--bg-2); border: 1px solid var(--linje-sterk);
    border-radius: var(--radius);
    padding: clamp(1.15rem, 3vw, 1.6rem);
    margin: 1.5rem 0;
}
.forbehold-merke {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--privat);
    margin: 0 0 0.75rem;
}
.forbehold p:last-child, .forbehold ul:last-child { margin-bottom: 0; }

.merknad {
    font-size: 0.92rem; color: var(--tekst-dus);
    border-left: 2px solid var(--linje-sterk); padding-left: 0.9rem;
    margin: 1.25rem 0;
}

.sitat { margin: 1.75rem 0; padding: 0; }
.sitat blockquote {
    margin: 0; padding-left: 1.25rem;
    border-left: 3px solid var(--aksent);
    font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--overskrift);
}
.sitat figcaption { margin-top: 0.6rem; padding-left: 1.25rem; font-size: 0.9rem; color: var(--tekst-dus); }

.tom-liste { color: var(--tekst-dus); font-style: italic; }
.plassholder { color: var(--tekst-dus); font-style: italic; }

/* ── Trekkspill: åpne på desktop, lukket på mobil (styres i main.js) ── */
.trekkspill { display: grid; gap: 0.6rem; }
.trekkspill-post, .faq-post {
    background: var(--bg-2); border: 1px solid var(--linje); border-radius: var(--radius);
}
.trekkspill-post > summary, .faq-post > summary {
    cursor: pointer; list-style: none;
    padding: 1rem 1.25rem; min-height: 3rem;
    font-weight: 600; color: var(--overskrift);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.trekkspill-post > summary::-webkit-details-marker,
.faq-post > summary::-webkit-details-marker { display: none; }
.trekkspill-post > summary::after, .faq-post > summary::after {
    content: "+"; font-family: var(--font-mono); font-size: 1.25rem;
    color: var(--aksent); flex: none; line-height: 1;
}
.trekkspill-post[open] > summary::after, .faq-post[open] > summary::after { content: "−"; }
.trekkspill-post > summary:hover, .faq-post > summary:hover { color: var(--aksent-lys); }
.trekkspill-innhold, .faq-svar { padding: 0 1.25rem 1.25rem; color: var(--tekst-dus); }
.trekkspill-innhold > :last-child, .faq-svar > :last-child { margin-bottom: 0; }
.faq { display: grid; gap: 0.6rem; }

/* ── Kontaktinfo ── */
.kontaktinfo { margin: 0; display: grid; gap: 1rem; }
@media (min-width: 40em) { .kontaktinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kontaktinfo > div { min-width: 0; }
.kontaktinfo dt {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--tekst-dus); margin-bottom: 0.2rem;
}
.kontaktinfo dd { margin: 0; font-size: 1.05rem; color: var(--overskrift); overflow-wrap: break-word; }

/* ==========================================================================
   Skjema
   ========================================================================== */

.skjema { display: grid; gap: 1.25rem; max-width: 40rem; }
.felt { display: grid; gap: 0.4rem; min-width: 0; }
.felt label, .feltsett legend { font-weight: 600; color: var(--overskrift); }
.felt-hjelp { font-size: 0.9rem; color: var(--tekst-dus); }

.felt input[type="text"], .felt input[type="email"], .felt input[type="tel"], .felt textarea, .felt select {
    width: 100%; min-width: 0;
    font: inherit; font-size: 1rem;
    color: var(--tekst); background: var(--bg-input);
    border: 1px solid var(--linje-sterk); border-radius: var(--radius);
    padding: 0.8rem 0.9rem;
    min-height: 3rem;
}
.felt textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.felt input:focus, .felt textarea:focus, .felt select:focus { border-color: var(--aksent); }
.felt input::placeholder, .felt textarea::placeholder { color: #6d818c; }

.feltsett { border: 0; margin: 0; padding: 0; min-width: 0; }
.feltsett legend { padding: 0; margin-bottom: 0.6rem; }
.valgrekke { display: grid; gap: 0.6rem; }
@media (min-width: 40em) { .valgrekke { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.valg {
    display: flex; align-items: flex-start; gap: 0.65rem;
    padding: 0.85rem 1rem; min-height: 3rem;
    background: var(--bg-2); border: 1px solid var(--linje); border-radius: var(--radius);
    cursor: pointer; font-weight: 500; min-width: 0;
}
.valg:hover { border-color: var(--linje-sterk); }
.valg input { margin: 0.2rem 0 0; accent-color: var(--aksent); flex: none; width: 1.1rem; height: 1.1rem; }
.valg:has(input:checked) { border-color: var(--aksent); background: var(--aksent-flate); }
.valg-tekst { display: grid; gap: 0.1rem; min-width: 0; }
.valg-note { font-weight: 400; font-size: 0.88rem; color: var(--tekst-dus); }

.felt-feil input, .felt-feil textarea, .felt-feil select { border-color: var(--feil); }
.feilmelding {
    display: flex; gap: 0.45rem; align-items: flex-start;
    font-size: 0.92rem; color: var(--feil); font-weight: 500;
}
.feilmelding::before { content: "!"; font-family: var(--font-mono); font-weight: 700; flex: none; }

.skjema-varsel {
    padding: 1rem 1.25rem; border-radius: var(--radius);
    border: 1px solid var(--linje-sterk); background: var(--bg-2);
}
.skjema-varsel-ok { border-left: 3px solid var(--ok); }
.skjema-varsel-feil { border-left: 3px solid var(--feil); }
.skjema-varsel h2 { font-size: 1.15rem; }
.skjema-varsel p:last-child { margin-bottom: 0; }

/* Honningkrukke: skjult for mennesker, synlig for enkle roboter.
   display:none ville blitt hoppet over av mange bots — dette feltet skal
   se ekte ut i DOM-en, men aldri kunne fokuseres eller ses. */
.honning {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   Bunn
   ========================================================================== */

.bunn {
    margin-top: auto;
    background: var(--bg-2);
    border-top: 1px solid var(--linje);
    padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    font-size: 0.95rem;
}
.bunn-rutenett { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48em) { .bunn-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
@media (min-width: 60em) { .bunn-rutenett { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.bunn-rutenett > * { min-width: 0; }
.bunn-logo { width: 2.5rem; height: 2.5rem; margin-bottom: 0.85rem; }
.bunn-navn { font-weight: 600; color: var(--overskrift); font-size: 1.05rem; margin-bottom: 0.5em; }
.bunn-tekst { color: var(--tekst-dus); }
.bunn-juridisk { color: var(--tekst-dus); font-size: 0.88rem; margin-bottom: 0; }

.bunn h2 {
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-dus);
    margin-bottom: 0.9rem;
}
.bunn ul { list-style: none; margin: 0; padding: 0; }
.bunn li { margin-bottom: 0.55em; }
.bunn a { color: var(--tekst); text-decoration: none; }
.bunn a:hover { color: var(--aksent-lys); text-decoration: underline; }
.bunn-kontaktliste { color: var(--tekst-dus); }
.bunn-sosialt { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bunn-cta { margin-top: 1.25rem; width: 100%; }
@media (min-width: 48em) { .bunn-cta { width: auto; } }

.bunn-kopi {
    margin: 2.5rem 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--linje);
    color: var(--tekst-dus); font-size: 0.85rem;
}

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-smal { max-width: 34rem; }
.admin-skjema { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.form-felt { display: grid; gap: 0.4rem; }
.form-felt label { font-weight: 600; color: var(--overskrift); }
.form-felt input, .form-felt textarea, .form-felt select {
    width: 100%; min-width: 0; font: inherit; font-size: 1rem;
    color: var(--tekst); background: var(--bg-input);
    border: 1px solid var(--linje-sterk); border-radius: var(--radius);
    padding: 0.7rem 0.85rem; min-height: 3rem;
}
.form-felt textarea { font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.55; min-height: 24rem; resize: vertical; }

.alert { padding: 0.9rem 1.15rem; border-radius: var(--radius); margin-bottom: 1.25rem; border: 1px solid var(--linje-sterk); background: var(--bg-2); }
.alert-feil { border-left: 3px solid var(--feil); }
.alert-ok { border-left: 3px solid var(--ok); }

.admin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.admin-post {
    margin: 0; padding: 1rem 1.25rem; min-width: 0;
    background: var(--bg-2); border: 1px solid var(--linje); border-radius: var(--radius);
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
}
.admin-post-hode { min-width: 0; }
.admin-post h3 { margin-bottom: 0.15em; font-size: 1.02rem; }
.admin-post-meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--tekst-dus); }
.admin-gruppe { margin-bottom: 2rem; }
.admin-gruppe h2 { font-size: 1.15rem; }
.admin-handlinger { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.admin-handlinger .knapp { min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 0.92rem; }
.admin-kort-rad { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 48em) { .admin-kort-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.status-merke {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 0.15rem 0.45rem;
    border: 1px solid currentColor; border-radius: var(--radius); white-space: nowrap;
}
.status-ny { color: var(--aksent); }
.status-lest { color: var(--tekst-dus); }
.status-besvart { color: var(--ok); }

.henvendelse { display: block; }
.henvendelse-tekst {
    white-space: pre-wrap; overflow-wrap: break-word;
    background: var(--bg-3); border: 1px solid var(--linje); border-radius: var(--radius);
    padding: 0.9rem 1.1rem; margin: 0.85rem 0; color: var(--tekst);
}
.henvendelse-felt { font-family: var(--font-mono); font-size: 0.8rem; color: var(--tekst-dus); display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }

.mediegalleri { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.mediepost { margin: 0; min-width: 0; background: var(--bg-2); border: 1px solid var(--linje); border-radius: var(--radius); padding: 0.85rem; }
.mediepost img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-3); margin-bottom: 0.6rem; }
.mediepost-navn { font-family: var(--font-mono); font-size: 0.74rem; color: var(--tekst-dus); overflow-wrap: break-word; }

/* ==========================================================================
   Feilsider
   ========================================================================== */

.feilside { text-align: center; padding-block: clamp(3rem, 12vw, 7rem); }
.feilside-kode { font-family: var(--font-mono); font-size: clamp(3rem, 14vw, 6rem); color: var(--aksent); line-height: 1; margin: 0 0 1rem; }
.feilside p { max-width: 46ch; margin-inline: auto; color: var(--tekst-dus); }
.feilside .cta { justify-content: center; }

/* ==========================================================================
   Personvernmodulen (delt kit i sites/shared/personvern/)
   --------------------------------------------------------------------------
   privacy.css forventer engelske variabelnavn og arver vertens tema når de
   finnes. Her er broen mellom Cyberhub-tokenene og modulen — scopet til .pp
   slik at ingenting lekker ut i resten av stilarket.
   ========================================================================== */

.pp {
    --accent:       var(--aksent);
    --accent-hover: var(--aksent-lys);
    --on-accent:    var(--pa-aksent);
    --text:         var(--tekst);
    --heading:      var(--overskrift);
    --text-muted:   var(--tekst-dus);
    --border:       var(--linje);
    --bg-raised:    var(--bg-2);
    --green:        var(--ok);
    --orange:       var(--privat);
    --red:          var(--feil);
}
.pp h2 { margin-top: 2.25rem; }
.pp h3 { margin-top: 1.5rem; }

/* ==========================================================================
   Tone: privat (rav i stedet for azur)
   --------------------------------------------------------------------------
   Fargen er alltid et tillegg til teksten, aldri den eneste forskjellen.
   ========================================================================== */

.tone-privat .knapp-primar {
    background: var(--privat); border-color: var(--privat); color: var(--pa-aksent);
}
.tone-privat .knapp-primar:hover, .tone-privat .knapp-primar:focus-visible {
    background: var(--privat-lys); border-color: var(--privat-lys); color: var(--pa-aksent);
}
.tone-privat .knapp-sekundar:hover, .tone-privat .knapp-sekundar:focus-visible {
    border-color: var(--privat); color: var(--privat-lys); background: var(--privat-flate);
}
.tone-privat .kort-kicker,
.tone-privat .kort-mer,
.tone-privat .steg-post::before,
.tone-privat .prosjekt-felt dt { color: var(--privat); }
.tone-privat .faktaboks { border-left-color: var(--privat); }
.tone-privat .sitat blockquote { border-left-color: var(--privat); }
.tone-privat .trekkspill-post > summary::after,
.tone-privat .faq-post > summary::after { color: var(--privat); }
.tone-privat .trekkspill-post > summary:hover,
.tone-privat .faq-post > summary:hover { color: var(--privat-lys); }

/* ==========================================================================
   Småting
   ========================================================================== */

.admin-gruppe-luft { margin-top: clamp(2rem, 5vw, 3rem); }
.kort h2 { font-size: 1.1rem; margin-bottom: 0.45em; }
.admin-post h2 {
    margin-bottom: 0.25em; font-size: 1.05rem;
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.mediepost form { margin-top: 0.75rem; }
.mediepost .knapp { width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
/* Admin-handlinger inneholder små skjemaer; de skal stå på rekke, ikke stables. */
.admin-handlinger form { margin: 0; }

/* ==========================================================================
   Bevegelse
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Utskrift
   ========================================================================== */

@media print {
    .topplinje, .brodsmuler, .bunn, .hopp-lenke, .filter, .cta { display: none !important; }
    body { background: #fff; color: #000; }
    .seksjon { padding-block: 1rem; }
    a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}