/* Selskapsdata – felles stil for selskapsdata.com, som appen. Fargene er de samme som i Selskapsinfo/Theme/Theme.swift,
   lys og mørk (navnet i appen står i kommentaren), og størrelsene er appens punkter i rem (16 px), litt større på PC.
   Endres en farge i appen, endres den her. */

/* Overskrifter og store tall: Apples New York der nettleseren har den (Safari, via ui-serif). Den er skjult i macOS og
   får ikke ligge på nettsider, så Chrome, Firefox, Windows og Android får Newsreader, som ligner mest (Production Type,
   SIL Open Font License). Bare vekten sidene bruker (500) og latinske tegn; optisk størrelse 6–72 følger skriftstørrelsen. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/newsreader.6cc46172.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --canvas: #EAE7DF;        /* canvas */
  --bg: #F5F3EE;            /* appBg */
  --flate: #FFFFFF;         /* surface, heroBg */
  --flate2: #F0EDE6;        /* surface2 */
  --flate3: #E6E2D9;        /* surface3 */
  --blekk: #17181C;         /* ink */
  --blekk2: #4A4E58;        /* ink2 */
  --blekk3: #61656F;        /* ink3, heroMuted */
  --strek: #EAE6DD;         /* hair */
  --strek2: #D3CEC3;        /* hair2 */
  --linje: #E7E2D8;         /* line */
  --aksent: #3346D3;        /* accent, heroBar */
  --aksent2: #7F8CEB;       /* accent2 */
  --aksent-myk: #E9EBFB;    /* accentSoft */
  --aksent-blekk: #2A3BB8;  /* accentInk */
  --paa-aksent: #FFFFFF;    /* onAccent */
  --positiv: #177245;       /* pos */
  --positiv-myk: #E1F2E7;   /* posSoft */
  --negativ: #B83C29;       /* neg */
  --negativ-myk: #FBE9E4;   /* negSoft */
  --rutenett: #EEEAE2;      /* grid */
  --helt-dim: #DDE1F7;      /* heroDim */
  --seg-spor: #ECE9E1;      /* segTrack */
  --seg-paa: #FFFFFF;       /* segOn */
  --seg-ring: rgba(21, 24, 31, .06);
  --seg-skygge: rgba(21, 24, 31, .12);
  --margin-fyll: #EEEBFB;   /* marginFill */
  /* diagrampaletten (T.P) */
  --p-a: #3346D3;
  --p-b: #8E59E8;
  --p-c: #9AA6F0;
  --p-varm: #E39A2E;
  --p-jord: #E2684A;
  --p-gronn: #1E9E62;
  --p-rod: #E4533E;
  --p-dempet: #E6E2D9;
  /* fanene på selskapssiden (Del.farge) */
  --del-oversikt: #17181C;
  --del-konsern: #13907F;
  --del-steder: #5D6B85;
  /* avatarer og etiketter: fem fargepar (T.tint) */
  --t0-bg: #E9EBFB; --t0-fg: #2A3BB8;
  --t1-bg: #F0E9FD; --t1-fg: #6A3FC8;
  --t2-bg: #FBF0DC; --t2-fg: #8A5A10;
  --t3-bg: #EFEDE6; --t3-fg: #4A4E58;
  --t4-bg: #FBE8E1; --t4-fg: #A4442A;
  --skygge: 0 1px 2px rgba(23, 24, 28, .04), 0 12px 32px rgba(23, 24, 28, .08);
  --serif: ui-serif, "New York", "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* gamle navn, brukt av topplistene og tekstsidene */
  --blaa: var(--p-a);
  --lilla: var(--p-b);
  --gul: var(--p-varm);
  --gronn: var(--p-gronn);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #060708;
    --bg: #0F1013;
    --flate: #1A1C21;
    --flate2: #23262D;
    --flate3: #2C3038;
    --blekk: #F3F1EC;
    --blekk2: #BDBAB3;
    --blekk3: #97948E;
    --strek: #282B31;
    --strek2: #3B3F47;
    --linje: #272A30;
    --aksent: #8C9BFF;
    --aksent2: #5664D9;
    --aksent-myk: #1C2142;
    --aksent-blekk: #AEB8FF;
    --paa-aksent: #0F1013;
    --positiv: #6FD79B;
    --positiv-myk: #14281D;
    --negativ: #FF9E8F;
    --negativ-myk: #2E1A16;
    --rutenett: #24272D;
    --helt-dim: #2A2F4A;
    --seg-spor: #23262D;
    --seg-paa: #363A44;
    --seg-ring: rgba(255, 255, 255, .06);
    --seg-skygge: rgba(0, 0, 0, .12);
    --margin-fyll: #1E1D3A;
    --p-a: #8C9BFF;
    --p-b: #B59BF7;
    --p-c: #5664D9;
    --p-varm: #F1BE6E;
    --p-jord: #F0957C;
    --p-gronn: #6FD79B;
    --p-rod: #FF7B6B;
    --p-dempet: #2C3038;
    --del-oversikt: #F3F1EC;
    --del-konsern: #5CCFBE;
    --del-steder: #9FB0CF;
    --t0-bg: #1C2142; --t0-fg: #AEB8FF;
    --t1-bg: #261E40; --t1-fg: #C6B2FA;
    --t2-bg: #2E2615; --t2-fg: #F1BE6E;
    --t3-bg: #23262D; --t3-fg: #BDBAB3;
    --t4-bg: #33201A; --t4-fg: #F0957C;
    --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

/* ---------------------------------------------------------------- grunnlaget */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
/* på PC litt større tekst og tall, som appen på Mac (der er den 20 % større) */
@media (min-width: 900px) { html { font-size: 106.25%; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--blekk);
  font: 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--aksent-blekk); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; }
b, strong { font-weight: 600; }
.neg { color: var(--negativ); }
.pos { color: var(--positiv); }
.dempet { color: var(--blekk3); }
.skjult { display: none !important; }
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; border-radius: 6px; }
.tall, .kort-tall, .flis-verdi { font-variant-numeric: tabular-nums; }

.side { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.smal > main { max-width: 720px; margin: 0 auto; }   /* toppen og bunnen har full bredde, som på de andre sidene */
@media (min-width: 700px) { .side { padding: 0 24px; } }

/* ---------------------------------------------------------------- betabanneret (functions/_middleware.js) */

.beta { background: var(--aksent-myk); color: var(--aksent-blekk); font-size: .8125rem; line-height: 1.35; }
.beta > div { max-width: 1180px; margin: 0 auto; padding: 8px 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; text-align: center; }
.beta .merke { font: 600 .6875rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; background: var(--aksent); color: var(--paa-aksent); border-radius: 999px; padding: 4px 8px 3px; }
.beta a { color: inherit; font-weight: 600; white-space: nowrap; }
.beta a::after { content: " →"; }
.beta .lang { display: none; }
@media (max-width: 380px) { .beta { font-size: .78125rem; } }
@media (min-width: 640px) { .beta .lang { display: inline; } .beta .kort-tekst { display: none; } .beta > div { gap: 2px 10px; } }

/* ---------------------------------------------------------------- toppen og bunnen */

.skjult-tekst { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.topp { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px; }
.merke-lenke, .merke { display: flex; align-items: center; gap: 10px; color: var(--blekk); font-weight: 600; font-size: 1.0625rem; flex: none; }
.merke-lenke:hover, .merke:hover { text-decoration: none; }
.merke-lenke img, .merke img { width: 32px; height: 32px; border-radius: 8px; }
.beta .merke { display: inline-block; font-size: .6875rem; }   /* betamerket er ikke logoen */
.meny { display: flex; align-items: center; gap: 4px 20px; font-size: .9375rem; flex: none; }
.meny a { color: var(--blekk2); }
.meny a[aria-current] { color: var(--blekk); font-weight: 600; }
.meny .sokeknapp { display: grid; place-items: center; width: 38px; height: 38px; margin: -8px -8px -8px -6px; border-radius: 50%; color: var(--blekk2); }
.meny .sokeknapp .ikon { width: 19px; height: 19px; }
.meny .sokeknapp:hover { background: var(--flate2); }
.toppsok { display: none; flex: 1; max-width: 420px; margin: 0 auto; }
@media (min-width: 900px) { .toppsok { display: block; } .meny .sokeknapp { display: none; } }
@media (max-width: 400px) { .meny { gap: 4px 14px; font-size: .875rem; } .merke-lenke { font-size: 1rem; } }
/* de minste telefonene (320 px): bare merket uten navnet i toppen, ellers går menyen utenfor skjermen */
@media (max-width: 359px) { .topp .merke-lenke { font-size: 0; gap: 0; } .meny { gap: 4px 12px; } }

.bunn { border-top: 1px solid var(--linje); padding: 32px 0 40px; margin-top: 40px; color: var(--blekk3); font-size: .875rem; }
.bunn-kolonner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.bunn-om { grid-column: 1 / -1; max-width: 26em; }
.bunn-om .merke-lenke { font-size: 1rem; }
.bunn-om .merke-lenke img { width: 28px; height: 28px; border-radius: 7px; }
.bunn-om p { margin: 10px 0 0; line-height: 1.5; }
.bunn nav { display: flex; flex-direction: column; gap: 8px; }
.bunn nav h2 { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blekk3); margin: 0 0 4px; }
.bunn nav a { color: var(--blekk2); }
@media (min-width: 700px) { .bunn-kolonner { grid-template-columns: 2fr 1fr 1fr; } .bunn-om { grid-column: auto; } }
.bunn-rettigheter { margin: 0 0 12px; font-size: .8125rem; line-height: 1.5; max-width: 60em; }
.bunn .rad { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 0; color: inherit; }
.bunn a { color: var(--blekk2); }

/* ---------------------------------------------------------------- søket (lib/komponenter.js sokefelt, assets/sok.js) */

.sokefelt { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px;
  background: var(--flate); border: 1px solid var(--linje); color: var(--aksent-blekk); }
.sokefelt:focus-within { border-color: var(--aksent); box-shadow: 0 0 0 1px var(--aksent); }
.sokefelt > .ikon { width: 17px; height: 17px; flex: none; stroke-width: 2.4; }
.sokefelt input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--blekk); font: 400 .9375rem var(--sans); }
.sokefelt input::placeholder { color: var(--blekk3); }
.sokefelt input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sokefelt.stort { height: 56px; padding: 0 18px; border-radius: 16px; box-shadow: 0 3px 16px var(--seg-skygge); }
.sokefelt.stort input { font-size: 1.0625rem; }
.sokefelt.stort:focus-within { box-shadow: 0 0 0 1px var(--aksent), 0 3px 16px var(--seg-skygge); }
.forslag { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 20; max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--flate); border: 1px solid var(--linje); border-radius: 16px; box-shadow: var(--skygge); padding: 6px; text-align: left; }
.forslag-gruppe { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blekk3); padding: 10px 12px 4px; }
.forslag-rad, .forslag-alle { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; color: var(--blekk); }
.forslag-rad:hover, .forslag-alle:hover { text-decoration: none; background: var(--flate2); }
.forslag [role="option"][aria-selected="true"] { background: var(--aksent-myk); }
.forslag-navn { font-size: .9375rem; font-weight: 500; }
.forslag-meta { font-size: .75rem; color: var(--blekk3); }
.forslag-rad.inaktiv .forslag-navn { color: var(--blekk2); }
.forslag-alle { font-size: .875rem; font-weight: 500; color: var(--aksent-blekk); border-top: 1px solid var(--strek); border-radius: 0 0 10px 10px; margin-top: 4px; }
.forslag-tom { padding: 14px 12px; font-size: .875rem; color: var(--blekk3); }
.sok-topp { padding: 16px 0 8px; }
.sok-topp h1, .forside-topp h1 { font: 500 clamp(2.25rem, 7vw, 3rem)/1.05 var(--serif); letter-spacing: -.01em; }
.sok-topp > p, .forside-topp > p { color: var(--blekk3); font-size: .875rem; margin: 6px 0 18px; }
.sokegruppe { margin-top: 26px; }
.sokegruppe h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 10px; }
.sokegruppe h2 span { font-size: .8125rem; font-weight: 500; color: var(--blekk3); margin-left: 4px; }
.kort.liste { padding: 0 18px; }
.sok-tom { margin: 40px 0; text-align: center; color: var(--blekk3); font-size: .875rem; display: flex; flex-direction: column; gap: 6px; }
.sok-tom b { color: var(--blekk); font-size: 1rem; font-weight: 500; }

/* ---------------------------------------------------------------- 404-siden (lib/ikkefunnet.js) */
/* som de tomme sidene i appen (TomIllustrasjon): ringen, kjernen med symbolet og tre satellitter på appens plasser */
.ikke-funnet { max-width: 560px; margin: 0 auto; padding: 20px 0 12px; text-align: center; }
.tom-illustrasjon { position: relative; width: 188px; height: 188px; margin: 0 auto; }
.tom-illustrasjon .ring { position: absolute; inset: 5px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--aksent) 14%, transparent); }
.tom-illustrasjon .kjerne { position: absolute; inset: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--aksent-myk); color: var(--aksent); }
.tom-illustrasjon .kjerne .ikon { width: 46px; height: 46px; stroke-width: 1.6; }
.tom-illustrasjon .satellitt { position: absolute; left: 74px; top: 74px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--flate); box-shadow: 0 3px 6px rgba(0, 0, 0, .08); }
.tom-illustrasjon .satellitt .ikon { width: 16px; height: 16px; stroke-width: 2.3; }
.tom-illustrasjon .s1 { transform: translate(76px, -48px) rotate(8deg); }
.tom-illustrasjon .s2 { transform: translate(-84px, 4px) rotate(-8deg); }
.tom-illustrasjon .s3 { transform: translate(58px, 64px) rotate(-5deg); }
.ikke-funnet h1 { font: 500 1.625rem/1.15 var(--serif); margin-top: 4px; }
.ikke-funnet > p { color: var(--blekk2); font-size: .875rem; margin: 8px 0 22px; }
.ikke-funnet .sokefelt { text-align: left; }
.veifliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; text-align: left; }
.kort.veiflis { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; color: var(--blekk); }
a.kort.veiflis:hover { text-decoration: none; border-color: color-mix(in srgb, var(--aksent) 35%, var(--linje)); }
.veiflis .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: .75rem; }
.veiflis-navn { font-size: .875rem; font-weight: 500; line-height: 1.25; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- forsiden */

.forside-topp { padding: 28px 0 8px; max-width: 680px; }
@media (min-width: 900px) { .forside-topp { padding: 56px 0 16px; margin: 0 auto; text-align: center; } .forside-topp .sokefelt { text-align: left; } }
.forside-del { margin-top: 36px; }
.deltittel { font-size: 1.0625rem; font-weight: 600; margin: 0 0 10px; }
.topplistene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* smal skjerm: kortene i en rad man blar sidelengs i, med neste kort synlig i kanten (som Følger-kortene i appen) */
@media (max-width: 899px) {
  .topplistene { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 400px); overflow-x: auto;
    scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; scrollbar-width: none; }
  .topplistene::-webkit-scrollbar { display: none; }
  .topplistene > * { scroll-snap-align: start; }
}
@media (min-width: 700px) and (max-width: 899px) { .topplistene { margin: 0 -24px; padding: 0 24px 4px; scroll-padding: 0 24px; } }
.topplistekort { display: flex; flex-direction: column; padding: 6px 16px 0; }
.topplistekort-hode { display: flex; align-items: center; gap: 13px; padding: 10px 0 12px; color: var(--blekk); border-bottom: 1px solid var(--strek); }
.topplistekort-hode:hover { text-decoration: none; }
.topplistekort-hode > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.symbol { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none; }
.symbol .ikon { width: 17px; height: 17px; }
.topprad { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; color: var(--blekk); }
.topprad + .topprad { border-top: 1px solid var(--strek); }
.topprad:hover { text-decoration: none; }
.topprad:hover .navn { color: var(--aksent-blekk); }
.topprad .nr { font: .6875rem/1 var(--mono); color: var(--blekk3); }
.topprad .navn { font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topprad .navn small { display: block; font-size: .71875rem; font-weight: 400; color: var(--blekk3); }
.topprad .verdi b { font: 500 1rem/1.2 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.topplistekort .kortlenke { margin-top: auto; padding: 12px 0 14px; }
.bransjeflisene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .bransjeflisene { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bransjeflisene { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bransjeflis { display: flex; flex-direction: column; padding: 14px; border-radius: 18px; color: var(--blekk); }
.bransjeflis:hover { text-decoration: none; border-color: color-mix(in srgb, var(--farge) 40%, var(--linje)); }
.bransjeflis-topp { display: flex; justify-content: space-between; align-items: flex-start; }
.bransjeflis .symbol { width: 34px; height: 34px; color: var(--farge); background: color-mix(in srgb, var(--farge) 14%, transparent); }
.bransjeflis .sparkline i { width: 6px; }
.bransjeflis .sparkline { gap: 2px; }
.bransjeflis-navn { font-size: .875rem; font-weight: 600; margin-top: 10px; line-height: 1.3; min-height: 2.6em; }
.bransjeflis-tall { font-size: .75rem; color: var(--blekk3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bransjeflis-tall b { font-weight: 500; margin-left: 4px; }
.appkort { display: flex; align-items: center; gap: 14px; margin-top: 36px; padding: 16px 18px; color: var(--blekk); background: var(--aksent-myk); border-color: transparent; }
.appkort:hover { text-decoration: none; filter: brightness(.99); }
.appkort .symbol { background: var(--aksent); color: var(--paa-aksent); }
.appkort > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.appkort .rad-under { color: var(--blekk2); }
.appkort .chevron { color: var(--aksent-blekk); }

/* ---------------------------------------------------------------- appsiden (/app) */

.appside .appikon { width: 88px; height: 88px; border-radius: 20px; box-shadow: var(--skygge); }
.appside-topp h1 { font: 500 clamp(2.25rem, 7vw, 3.5rem)/1.08 var(--serif); margin: 24px 0 12px; letter-spacing: -.01em; }
.appside .fordeler .symbol { width: 40px; height: 40px; border-radius: 12px; background: var(--aksent-myk); color: var(--aksent-blekk); margin-bottom: 14px; }
.appside .fordeler h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.appside .fordeler p { margin: 0; color: var(--blekk2); font-size: .9375rem; }

/* ---------------------------------------------------------------- kort og overskrifter */

.kort { background: var(--flate); border: 1px solid var(--linje); border-radius: 22px; padding: 18px; min-width: 0; }
.kort > :first-child { margin-top: 0; }
.kort-hode { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kort-hode > div { min-width: 0; }
.kort-tittel { font-size: .96875rem; font-weight: 500; line-height: 1.3; margin: 0; }
.kort-tittel.valgt { color: var(--aksent-blekk); }
.kort-under { font-size: .75rem; color: var(--blekk3); margin: 3px 0 0; }
.kort-tall { font: 500 1.625rem/1.1 var(--serif); white-space: nowrap; }
.seksjonsetikett { font: 400 .6875rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--blekk3); margin: 8px 4px 0; }
.fotnote { font-size: .71875rem; line-height: 1.55; color: var(--blekk3); margin: 2px 2px 0; }
.infokort { background: var(--aksent-myk); border-color: transparent; border-radius: 18px; padding: 16px 18px; }
.infokort h3 { font-size: .875rem; font-weight: 500; color: var(--aksent-blekk); margin: 0 0 5px; }
.infokort p { font-size: .78125rem; color: var(--blekk2); margin: 0; line-height: 1.5; }
.strek-under { border-top: 1px solid var(--strek); }

/* Piller og merkelapper */
.pille { display: inline-block; font-size: .78125rem; font-weight: 500; border-radius: 999px; padding: 2px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pille.pos { color: var(--positiv); background: var(--positiv-myk); }
.pille.neg { color: var(--negativ); background: var(--negativ-myk); }
.pille.noytral { color: var(--blekk2); background: var(--flate2); }
.merker { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.merkelapp { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: .78125rem;
  font-weight: 500; background: var(--flate2); color: var(--blekk2); }
.merkelapp .ikon { width: 12px; height: 12px; }
.merkelapp.pos { background: var(--positiv-myk); color: var(--positiv); }
.merkelapp.neg { background: var(--negativ-myk); color: var(--negativ); }
.merkelapp .prikk { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.merkelapp.noytral .prikk { background: var(--blekk3); }
.ikon { width: 1em; height: 1em; flex: none; }

/* Fliser: ett tall og en liten figur, to og to med lik høyde */
.fliser { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flis { background: var(--flate); border: 1px solid var(--linje); border-radius: 18px; padding: 14px 15px; display: flex; flex-direction: column; min-width: 0; }
.flis-tittel { font-size: .75rem; color: var(--blekk3); }
.flis-verdi { font: 500 1.5625rem/1.15 var(--serif); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flis-figur { display: flex; align-items: center; height: 24px; margin-top: 10px; }
.flis-under { font-size: .71875rem; color: var(--blekk3); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flis-under.pos { color: var(--positiv); }
.flis-under.neg { color: var(--negativ); }

/* Rad som går videre (Lenkerad) */
.lenkerad { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; color: var(--blekk); font-size: .90625rem; }
.lenkerad:hover { text-decoration: none; border-color: color-mix(in srgb, var(--farge) 35%, var(--linje)); }
.lenkerad .symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--farge); background: color-mix(in srgb, var(--farge) 13%, transparent); flex: none; }
.lenkerad .symbol .ikon { width: 14px; height: 14px; }
.lenkerad-tekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron { width: 13px; height: 13px; color: var(--strek2); flex: none; stroke-width: 3; }
.chevron.skjult { visibility: hidden; display: block !important; }

/* Lister: rader med avatar, tekst, verdi og pil */
.liste { display: flex; flex-direction: column; }
.listerad { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--blekk); min-width: 0; }
.listerad + .listerad { border-top: 1px solid var(--strek); }
a.listerad:hover { text-decoration: none; }
a.listerad:hover .rad-tittel { color: var(--aksent-blekk); }
.rad-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rad-tittel { font-size: .90625rem; font-weight: 500; overflow-wrap: anywhere; }
.rad-under { font-size: .75rem; color: var(--blekk3); }
.rad-hoyre { text-align: right; white-space: nowrap; font-size: .875rem; font-variant-numeric: tabular-nums; }
.rad-hoyre small { display: block; font-size: .71875rem; color: var(--blekk3); }
.rad-hoyre .stort { font: 500 1.125rem/1.2 var(--serif); }
.fargemerke { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11.5px; font-size: .8125rem; font-weight: 600; flex: none; }
.avatar.rund { border-radius: 50%; }
.avatar .ikon { width: 16px; height: 16px; }
.tint0 { background: var(--t0-bg); color: var(--t0-fg); }
.tint1 { background: var(--t1-bg); color: var(--t1-fg); }
.tint2 { background: var(--t2-bg); color: var(--t2-fg); }
.tint3 { background: var(--t3-bg); color: var(--t3-fg); }
.tint4 { background: var(--t4-bg); color: var(--t4-fg); }

/* Faktarader (Om selskapet) */
.faktarad { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; font-size: .875rem; }
.faktarad > span:first-child { color: var(--blekk3); white-space: nowrap; }
.faktarad > :last-child { text-align: right; overflow-wrap: anywhere; }
.faktarad + .faktarad, .tekstrad + .faktarad, .tekstrad + .tekstrad { border-top: 1px solid var(--strek); }
.tekstrad { padding: 12px 0; font-size: .875rem; }
.tekstrad span { color: var(--blekk3); }
.tekstrad p { margin: 4px 0 0; }

/* Segmentvelgeren (Segmented) */
.segment { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--seg-spor); }
.segment button { flex: 1; min-width: 0; font: 500 .8125rem/1.2 var(--sans); color: var(--blekk3); background: none; border: 0; border-radius: 9px;
  padding: 7px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segment button:hover { color: var(--blekk2); }
.segment button[aria-selected="true"] { color: var(--blekk); background: var(--seg-paa); box-shadow: 0 0 0 1px var(--seg-ring), 0 1px 3px var(--seg-skygge); }
.segment.kompakt button { font-size: .78125rem; padding: 6px; }
.segment.stor button { font-size: .84375rem; padding: 8px 6px; }

/* Fanene som skillekort (Skillekort): farget merke, navn og antall, strek i fanens farge under den valgte */
.skillekort { position: relative; margin: 0 -16px; }
.skillekort::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--strek); }
.skillekort-rekke { display: flex; gap: 2px; overflow-x: auto; padding: 0 6px; scrollbar-width: none; }
.skillekort-rekke::-webkit-scrollbar { display: none; }
.skillekort a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px 13px; white-space: nowrap;
  font-size: .90625rem; font-weight: 500; color: var(--blekk2); z-index: 1; }
.skillekort a:hover { text-decoration: none; color: var(--blekk); }
.skillekort .merke { width: 9px; height: 9px; border-radius: 2.5px; background: var(--farge); }
.skillekort .antall { font-size: .75rem; color: var(--blekk3); font-variant-numeric: tabular-nums; }
.skillekort a[aria-current] { color: var(--blekk); font-weight: 600; }
.skillekort a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 2px; background: var(--farge); }
@media (min-width: 700px) { .skillekort { margin: 0; } .skillekort-rekke { padding: 0; } }

/* Hurtigknappene under kartotekkortet (Hurtigknapp) */
.hurtigvalg { display: flex; gap: 10px; margin-top: 14px; }
.hurtigknapp { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 56px; border-radius: 14px;
  background: var(--flate); border: 1px solid var(--linje); color: var(--aksent-blekk); font-size: .71875rem; font-weight: 500; }
.hurtigknapp:hover { text-decoration: none; border-color: color-mix(in srgb, var(--aksent) 35%, var(--linje)); }
.hurtigknapp .ikon { width: 17px; height: 17px; }
/* Hurtigvalgene som små knapper nederst til høyre i kartotekkortet, på linje med (den siste raden av) merkelappene: ett
   alene alltid, flere bare på brede skjermer. På mobil står flere i raden under kortet (.hurtigvalg), som i appen. */
.kortbunn { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; }
.kortbunn .merker { margin-top: 0; flex: 1; min-width: 0; }
.kortknapper { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.kortknapper.bare-bred { display: none; }
@media (min-width: 700px) { .kortknapper.bare-bred { display: flex; } .hurtigvalg { display: none; } }
.knapp.kortknapp { flex: none; height: auto; padding: 5px 12px; gap: 5px; font-size: .78125rem; font-weight: 500;
  background: var(--aksent-myk); color: var(--aksent-blekk); }   /* samme høyde som merkelappene */
.knapp.kortknapp .ikon { width: 12px; height: 12px; }

/* Knapper */
.knapp { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--aksent);
  color: var(--paa-aksent); font-size: .9375rem; font-weight: 600; border: 0; }
.knapp:hover { text-decoration: none; filter: brightness(1.05); }
.knapp .ikon { width: 15px; height: 15px; }
.knapp.lys { background: var(--flate); color: var(--aksent-blekk); border: 1px solid var(--linje); }
.rundknapp { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--flate); border: 1px solid var(--linje); color: var(--blekk2); }
.rundknapp .ikon { width: 17px; height: 17px; }
/* Apples offisielle merke (toolbox.marketingtools.apple.com), sort på lys bakgrunn og hvitt på mørk */
.appstore { display: inline-block; line-height: 0; }
.appstore img { height: 50px; width: auto; }
/* før lansering: knappen til den åpne betaen i TestFlight, bygd som Apples merke men med appikonet */
.beta-knapp { display: inline-flex; align-items: center; gap: 13px; height: 62px; padding: 0 24px 0 10px; border-radius: 15px;
  background: var(--blekk); color: var(--bg); text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 24, 28, .10), 0 8px 22px rgba(23, 24, 28, .16); transition: transform .15s ease, box-shadow .15s ease; }
.beta-knapp:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(23, 24, 28, .12), 0 12px 28px rgba(23, 24, 28, .20); }
.beta-knapp img { width: 42px; height: 42px; border-radius: 9.5px; flex: none; }
.beta-knapp span { display: flex; flex-direction: column; gap: 3px; text-align: left; line-height: 1.2; }
.beta-knapp small { font-size: 12px; font-weight: 500; opacity: .78; letter-spacing: .01em; }
.beta-knapp b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- grafene (lib/graf.js og assets/graf.js) */

/* Søylene år for år fra en nullstrek. Plassene deler bredden; søylene har høyde i prosent av feltet. */
.soyler { --hoyde: 96px; --mellomrom: 12px; position: relative; user-select: none; -webkit-user-select: none; }
.soyler[data-graf] { cursor: pointer; }
.soyler:focus-visible { outline-offset: 6px; }
.soyler-felt { position: relative; display: flex; gap: var(--mellomrom); height: var(--hoyde); }
.soyler-felt.med-tall { height: calc(var(--hoyde) + 18px); padding-top: 18px; }
.soyler-felt .plass { position: relative; flex: 1; min-width: 0; height: 100%; }
.soyler .soyle { position: absolute; left: 0; right: 0; border-radius: 3px 3px 0 0; background: var(--farge); opacity: .32; transition: opacity .18s ease, background-color .18s ease; }
.soyler .negativ .soyle { border-radius: 0 0 3px 3px; background: var(--p-rod); }
.soyler .uthevet .soyle { opacity: 1; }
.soyler .grunnlinje { position: absolute; left: 0; right: 0; height: 2px; margin-bottom: -1px; background: var(--strek2); }
.soyler .nullstrek { position: absolute; left: 0; right: 0; height: 1px; background: var(--strek2); }
.soyletall { position: absolute; left: 50%; transform: translate(-50%, -5px); font-size: .65625rem; line-height: 1; color: var(--blekk3);
  white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.uthevet .soyletall { color: var(--blekk); }
.uthevet .soyletall.neg { color: var(--negativ); }
.soyletall.bare-uthevet { display: none; }
.uthevet .soyletall.bare-uthevet { display: block; }
.plass:first-child .soyletall { left: 0; transform: translate(0, -5px); }
.plass:last-child .soyletall { left: auto; right: 0; transform: translate(0, -5px); }
/* heltekortet: blekkblå for året som vises, dempet blå for de andre */
.soyler.hoved .soyle { background: var(--helt-dim); opacity: 1; }
.soyler.hoved .uthevet .soyle { background: var(--aksent); }
.soyler.hoved .negativ .soyle { background: var(--p-rod); opacity: .3; }
.soyler.hoved .negativ.uthevet .soyle { opacity: 1; }
/* ansatte: grått, grønt for året som vises */
.soyler.ansatte .soyle { background: var(--p-dempet); opacity: 1; border-radius: 4px; }
.soyler.ansatte .uthevet .soyle { background: var(--p-gronn); }
/* årstallene midt under plassene; det valgte i en pille. Med mange år står bare hvert andre eller tredje når det er trangt */
.aarstall { display: flex; gap: var(--mellomrom); margin-top: 7px; height: 18px; }
.aarstall span { flex: 1; min-width: 0; display: flex; justify-content: center; font-size: .65625rem; line-height: 18px; color: var(--blekk3); white-space: nowrap; overflow: visible; }
.aarstall span.tomt { opacity: .55; }
.aarstall em, .linje-aar em { font-style: normal; padding: 0 7px; border-radius: 999px; }
.aarstall .valgt em, .linje-aar .valgt em { background: var(--aksent-myk); color: var(--aksent-blekk); font-weight: 600; }
.aarstall span.valgfri { visibility: hidden; }
.aarstall span.valgfri.valgt { visibility: visible; }
.kort, .flis { container-type: inline-size; }
/* bred graf: alle årstallene og tallene over alle søylene */
@container (min-width: 520px) {
  .aarstall span.valgfri { visibility: visible; }
  .soyler-felt.med-tall .soyletall.bare-uthevet { display: block; }
}

/* Små søyler: fem plasser, siste i farge (Sparkline), og nøkkeltallsflisenes søyler med nullstrek (SmaaSoyler) */
.sparkline { display: inline-flex; align-items: flex-end; gap: 3px; height: var(--hoyde, 34px); }
.sparkline i { display: block; width: 8px; border-radius: 2px; background: var(--p-dempet); }
.sparkline i.siste { background: var(--farge); }
.sparkline i.tom { height: 2px; background: var(--strek2); }
.sparkline.fyll { display: flex; width: 100%; }
.sparkline.fyll i { flex: 1; width: auto; border-radius: 3px 3px 0 0; }
.smaasoyler { display: inline-flex; gap: 3px; height: 24px; }
.smaasoyler > span { position: relative; width: 10px; height: 100%; }
.smaasoyler i { position: absolute; left: 0; right: 0; border-radius: 2px; background: var(--farge); opacity: .32; }
.smaasoyler .neg i { background: var(--p-rod); }
.smaasoyler .siste i { opacity: 1; }
/* Nøkkeltallenes søyler (MiniSoyler) */
.soyler.mini { --hoyde: 34px; }
.soyler.mini .soyle { border-radius: 2px 2px 0 0; opacity: .45; }
.soyler.mini .uthevet .soyle { opacity: 1; }

/* Linjegrafen (MarginChart): SVG som strekkes, med punkter, aksemerker og boble i HTML */
.linjegraf { position: relative; user-select: none; -webkit-user-select: none; cursor: pointer; }
.linjeflate { position: relative; height: clamp(118px, 36cqw, 190px); }
.linjeflate svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.linjeflate .rutenett { stroke: var(--rutenett); stroke-width: 1; vector-effect: non-scaling-stroke; }
.linjeflate .linje { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.linjeflate .areal { stroke: none; }
.linjeflate .referanse { fill: none; stroke: var(--blekk3); stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.linjeflate .valgt-strek { stroke: var(--strek2); stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; display: none; }
.aksemerke { position: absolute; left: 0; width: 11.25%; text-align: right; transform: translateY(-50%); font-size: .59375rem; color: var(--blekk3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.linjepunkt { position: absolute; top: 0; bottom: 0; width: 0; }
.punkt, .refpunkt { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.punkt { left: 0; width: 7px; height: 7px; background: var(--flate); border: 2.2px solid var(--farge); box-sizing: content-box; transition: transform .12s ease; }
.refpunkt { left: 0; width: 6px; height: 6px; background: var(--blekk3); display: none; }
.linjepunkt.valgt .punkt { background: var(--farge); border-color: var(--flate); transform: translate(-50%, -50%) scale(1.3); }
.linjepunkt.valgt .refpunkt { display: block; }
.punkt.pil { width: 0; height: 0; border-radius: 0; background: none; border: 5px solid transparent; }
.punkt.pil.ned { border-top: 7px solid var(--farge); }
.punkt.pil.opp { border-bottom: 7px solid var(--farge); }
.linje-aar { position: relative; display: block; height: 18px; }
.linje-aar span { position: absolute; transform: translateX(-50%); font-size: .65625rem; line-height: 18px; color: var(--blekk3); white-space: nowrap; }
.linje-aar span.tomt { opacity: .55; }
.boble { position: absolute; top: -10px; transform: translateY(-100%); z-index: 2; background: var(--flate); border: .5px solid var(--strek2); border-radius: 10px;
  padding: 8px 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); font-size: .71875rem; color: var(--blekk3); white-space: nowrap; pointer-events: none;
  display: grid; gap: 3px; }
.boble[hidden] { display: none; }
.boble b { color: var(--blekk); font-size: .6875rem; }
.boble span { display: flex; align-items: center; gap: 6px; }
.boble i { width: 8px; height: 8px; border-radius: 2px; }
.boble i.stiplet { height: 2px; background: repeating-linear-gradient(90deg, var(--blekk3) 0 3px, transparent 3px 5px); }
.boble em { font-style: normal; font-weight: 600; color: var(--blekk); margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.boble em.neg { color: var(--negativ); }
.forklaring { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: .6875rem; color: var(--blekk3); }
.forklaring span { display: inline-flex; align-items: center; gap: 6px; }
.forklaring .strek { display: inline-block; width: 14px; height: 2.5px; border-radius: 2px; }
.forklaring .strek.stiplet { background: repeating-linear-gradient(90deg, var(--blekk3) 0 3px, transparent 3px 5px); }
.forklaring i:not(.strek) { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }

/* Hvor i bransjens fordeling (PersentilSkala) */
.persentil-rad { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .84375rem; color: var(--blekk2); }
.persentil-rad b { font-weight: 600; color: var(--blekk); }
.persentil-rad b.pos { color: var(--positiv); }
.persentil-rad b.neg { color: var(--negativ); }
.persentil-skala { position: relative; display: flex; gap: 3px; height: 10px; margin: 12px 0 0; }
.persentil-skala .sone { display: block; border-radius: 5px; }
.persentil-skala .rod { flex: 25; background: var(--p-rod); }
.persentil-skala .graa { flex: 50; background: var(--p-dempet); }
.persentil-skala .gronn { flex: 25; background: var(--p-gronn); }
.persentil-skala .markor { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--blekk2); border: 3px solid var(--flate); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.persentil-skala .markor.pos { background: var(--p-gronn); }
.persentil-skala .markor.neg { background: var(--p-rod); }
.persentil-tekst { display: flex; justify-content: space-between; font-size: .65625rem; color: var(--blekk3); margin-top: 12px; }
.persentil + .persentil { margin-top: 18px; }

/* Verdien mot bransjens median (MotMedian) og andelsstolpen (Andelsstolpe) */
.motmedian { position: relative; display: block; width: 100%; height: 14px; }
.motmedian .spor { position: absolute; left: 0; right: 0; top: 4px; height: 6px; border-radius: 3px; background: var(--flate2); }
.motmedian .median { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--blekk3); }
.motmedian .prikk { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--flate); box-sizing: border-box; }
.motmedian .prikk.over { background: var(--p-gronn); }
.motmedian .prikk.under { background: var(--p-varm); }
.andelsstolpe { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--flate2); overflow: hidden; }
.andelsstolpe i { display: block; height: 100%; border-radius: 3px; }

/* Stablet stolpe med forklaring (balansen, eiertypene) og ringen med eierne */
.stablet .etikett { display: block; font-size: .75rem; color: var(--blekk3); margin-bottom: 7px; }
.stablet-stolpe { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; }
.stablet-stolpe i { display: block; min-width: 2px; }
.stablet .forklaring { gap: 6px 12px; font-size: .71875rem; color: var(--blekk2); }
.stablet .forklaring .neg { color: var(--negativ); }
.stablet + .stablet { margin-top: 16px; }
.donut { flex: none; }
.donut circle { fill: none; stroke-width: var(--tykkelse); transform: rotate(-90deg); transform-origin: 50% 50%; }
.donut .spor { stroke: var(--flate2); }

/* Fremdriftslinjer (Mot bransjen) */
.fremdrift-rad { display: flex; justify-content: space-between; gap: 12px; font-size: .78125rem; color: var(--blekk2); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.fremdrift-rad.sterk { color: var(--blekk); }
.fremdrift-spor { display: block; height: 9px; border-radius: 5px; background: var(--flate2); overflow: hidden; }
.fremdrift-spor i { display: block; height: 100%; border-radius: 5px; }
.fremdrift + .fremdrift { margin-top: 13px; }

/* ---------------------------------------------------------------- selskapssidene */

.selskapsside { padding: 8px 0 48px; }
.kartotekkort { background: var(--flate); border: 1px solid var(--linje); border-radius: 20px; padding: 16px 18px 18px; }
.kartotekkort .orgnr { display: flex; align-items: center; gap: 6px; font: .65625rem/1 var(--mono); letter-spacing: .14em; color: var(--blekk3); margin: 0; text-transform: uppercase; }
.kartotekkort h1 { font: 500 clamp(1.75rem, 6vw, 2.25rem)/1.12 var(--serif); margin: 9px 0 0; letter-spacing: -.005em; overflow-wrap: anywhere; }
.kartotekkort .tidligere { font-size: .8125rem; color: var(--blekk3); margin: 5px 0 0; }
.kartotekkort .tidligere.nylig { color: var(--negativ); font-weight: 500; }
.selskapsside .virksomhet { color: var(--blekk2); margin: 10px 0 0; font-size: 1rem; line-height: 1.5; }
.toppknapper { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 12px; }
.toppknapper .sti { margin: 0 auto 0 0; }
.selskapsside .kort, .selskapsside .fliser, .selskapsside .lenkerad, .selskapsside .infokort { margin-top: 0; }
.stabel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.innhold { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
/* to spalter på PC, som appen på brede skjermer (Spalter) */
.spalter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) { .spalter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.helbredde { grid-column: 1 / -1; }

/* Heltekortet: omsetning, resultat og margin */
.heltekort .segment { margin-bottom: 18px; }
.helt-etikett { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .78125rem; color: var(--blekk3); }
.helt-etikett .valgt { color: var(--aksent-blekk); }
.helt-tall { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.helt-tall b { font: 500 clamp(2.25rem, 9vw, 3rem)/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.helt-tall span { font-size: 1.125rem; color: var(--blekk3); }
.helt-under { font-size: .78125rem; color: var(--blekk3); margin: 6px 0 0; min-height: 1.2em; }
.heltekort .soyler { margin-top: 20px; }

/* Plassering i bransjen */
.plassering .plass-tall { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.plassering .plass-tall b { font: 500 2.375rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.plassering .plass-tall span { font-size: .84375rem; color: var(--blekk2); }
.lokale { display: flex; gap: 10px; margin-top: 14px; }
.lokale div { flex: 1; min-width: 0; background: var(--flate2); border-radius: 12px; padding: 10px 12px; }
.lokale span { display: block; font-size: .71875rem; color: var(--blekk3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lokale b { font: 500 1.25rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.lokale small { font-size: .75rem; color: var(--blekk3); margin-left: 4px; }
.kortlenke { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--strek); font-size: .84375rem; font-weight: 500; }
.kortlenke .chevron { color: currentColor; }
.persentiler { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--strek); }
.persentiler .fotnote { margin-top: 12px; }

/* Lenkene under nøkkeltallene: alle årene i appen og årsregnskapet som PDF */
.snarveier { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .875rem; font-weight: 500; }
.snarveier:empty { display: none; }
.snarveier a::after { content: " →"; }
/* Konsernet og lignende selskaper: lenker til andre selskapssider */
.selskapsliste { list-style: none; margin: 4px 0 0; padding: 0; }
.selskapsliste li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--strek); font-size: .9375rem; }
.selskapsliste li:first-child { border-top: 0; }
.selskapsliste span { color: var(--blekk3); font-size: .84375rem; white-space: nowrap; }
.kort h2.kort-tittel + .selskapsliste, .kort .kort-hode + .selskapsliste { margin-top: 10px; }
.etikett { color: var(--blekk3); font-size: .8125rem; display: block; }
.cta { background: var(--aksent-myk); border-color: transparent; text-align: center; padding: 26px 22px 24px; }
.cta h2 { font: 500 1.5rem/1.2 var(--serif); margin: 0 0 8px; }
.cta p { color: var(--blekk2); max-width: 30em; margin: 0 auto 16px; font-size: .9375rem; }

/* Lenkene fra selskapssiden til topplistene */
.lenkerad-rekke, .lenkerad-piller { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lenkerad-piller a { font-size: .875rem; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--aksent-myk); }
.lenkerad-piller a::after { content: " →"; }
.lenkerad-piller a:hover { text-decoration: none; filter: brightness(.97); }

/* ---------------------------------------------------------------- selskapssidens faner */

.kartotekkort .kortrad { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; margin: -4px -4px 0 0; }
.knapp.folg { height: 34px; padding: 0 14px; font-size: .875rem; gap: 6px; }
.knapp.folg .ikon { width: 13px; height: 13px; stroke-width: 2.4; }
.kartotekkort h1 { margin-top: 4px; }
.selskapsside .skillekort { margin-top: 14px; }
.stabel-del { display: flex; flex-direction: column; gap: 10px; }
.stabel-del .seksjonsetikett { margin-top: 4px; }
.faktakort { padding: 4px 16px; }
.kort-hoyre { font-size: .78125rem; text-align: right; font-variant-numeric: tabular-nums; }
.kort-under.ekstra { margin-top: 2px; }
.seriekort .soyler { margin-top: 18px; }
.heltekort > .kort-under { margin: 0 0 14px; }

/* Signalene */
ul.signaler { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.signal { display: flex; align-items: flex-start; gap: 10px; font-size: .84375rem; }
.signal .ikon { width: 16px; height: 16px; margin-top: 2px; color: var(--blekk3); }
.signal.hoy .ikon { color: var(--negativ); }
.signal.middels .ikon { color: var(--p-varm); }

/* Lister som går kant i kant nederst i et kort */
.liste.kant { margin: 14px -18px -18px; }
.liste.kant .listerad { padding-left: 18px; padding-right: 18px; }
.liste.kant .listerad:first-child { border-top: 1px solid var(--strek); }
.rad-hoyre.pos { color: var(--positiv); }
.rad-hoyre.neg { color: var(--negativ); }

/* Hendelsene på en loddrett linje (HendelseRad) */
.hendelser { margin-top: 16px; }
.hendelse { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.hendelse:not(.sist)::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 1px; background: var(--strek); }
.hendelse-prikk { width: 9px; height: 9px; border-radius: 50%; background: var(--p-a); margin-top: 5px; }
.hendelse-dato { font-size: .71875rem; color: var(--blekk3); font-variant-numeric: tabular-nums; }
.hendelse p { margin: 3px 0 8px; font-size: .90625rem; line-height: 1.45; }
.hendelse .pille { font-size: .71875rem; }

/* Tabellene: alle årene side om side, navnene står fast til venstre når man blar */
.tabellkort { padding-bottom: 6px; }
.tabell-rull { overflow-x: auto; margin: 12px -18px 0; }
.regnskapstabell { border-collapse: collapse; width: 100%; font-size: .84375rem; font-variant-numeric: tabular-nums; }
.regnskapstabell th, .regnskapstabell td { padding: 9px 12px; text-align: right; white-space: nowrap; border-top: 1px solid var(--strek); }
.regnskapstabell thead th { font-size: .65625rem; letter-spacing: .05em; text-transform: uppercase; color: var(--blekk3); font-weight: 400; border-top: 0; padding-top: 4px; }
.regnskapstabell th[scope="row"], .regnskapstabell thead th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--flate); font-weight: 400; color: var(--blekk2); padding-left: 18px; }
.regnskapstabell tr.sterk th, .regnskapstabell tr.sterk td { font-weight: 600; color: var(--blekk); }
.regnskapstabell tr.inn th { padding-left: 32px; color: var(--blekk3); }
.regnskapstabell td:last-child { padding-right: 18px; }
.regnskapstabell td.neg { color: var(--negativ); }
.aarlenker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aarlenker a { font-size: .84375rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--aksent-myk); font-variant-numeric: tabular-nums; }
.aarlenker a:hover { text-decoration: none; filter: brightness(.97); }
.historikk-kommer { display: flex; align-items: center; gap: 6px; font-size: .78125rem; color: var(--blekk2); margin: 14px 2px 0; }
.historikk-kommer .ikon { width: 13px; height: 13px; color: var(--p-varm); }
.mot-bransjen { margin-top: 22px; padding-top: 18px; }
.fremdrifter { margin-top: 16px; }
.balanse { margin-top: 18px; }

/* Nøkkeltallene: kort i to kolonner per gruppe, med verdien, små søyler og endringen */
.nokkeltallgruppe { display: flex; flex-direction: column; gap: 10px; }
.nokkeltall { position: relative; gap: 6px; padding: 13px 12px 13px 14px; }
.nokkeltall .flis-tittel { padding-right: 22px; }
.nokkeltall-verdi { display: flex; align-items: baseline; gap: 4px; }
.nokkeltall-verdi b { font: 500 1.5rem/1.15 var(--serif); font-variant-numeric: tabular-nums; }
.nokkeltall-verdi span { font-size: .6875rem; color: var(--blekk3); }
.nokkeltall .soyler.mini { margin-top: 2px; }
.nokkeltall .flis-under { margin-top: 0; }
.forklar summary { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--blekk3); color: var(--blekk3); font: 600 .6875rem/1 var(--serif); cursor: pointer; list-style: none; }
.forklar summary::-webkit-details-marker { display: none; }
.forklar[open] summary { background: var(--aksent-blekk); border-color: var(--aksent-blekk); color: var(--flate); }
.forklar > div { margin-top: 4px; padding: 10px; border-radius: 10px; background: var(--aksent-myk); }
.forklar b { display: block; font-size: .71875rem; font-weight: 500; color: var(--aksent-blekk); }
.forklar p { margin: 4px 0 0; font-size: .6875rem; color: var(--blekk2); line-height: 1.45; }

/* Rollene og styret i tall */
.rollekort { padding-top: 10px; padding-bottom: 6px; }
.rollekort .seksjonsetikett { margin: 4px 0 4px; }
.tre-tall { display: flex; margin-top: 14px; }
.tre-tall div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tre-tall b { font: 500 1.375rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.tre-tall span { font-size: .71875rem; color: var(--blekk3); }
.tre-tall + .kort-under { margin-top: 8px; }
.strek-under { margin-top: 14px; }

/* Eierne: ringen med de største, aksjekapitalen og listen */
.eierhode { display: flex; gap: 18px; align-items: center; }
.ring { position: relative; flex: none; }
.ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring b { font: 500 1.5rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.ring small { font-size: .59375rem; color: var(--blekk3); line-height: 1.2; margin-top: 3px; }
.stort-tall { display: block; font: 500 1.6875rem/1.15 var(--serif); margin-top: 2px; }
.eierkort .liste.kant { margin-top: 18px; }
.bytte { display: flex; gap: 10px; font-size: .84375rem; margin: 14px 0 0; }
.bytte .ikon { color: var(--aksent-blekk); width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* Personsiden (PersonView): runde initialer, navnet og fødselsåret, så tallene, rollene, omsetningen og eierskapet */
.personside { padding: 8px 0 48px; }
.personhode { display: flex; align-items: center; gap: 14px; margin: 10px 4px 18px; }
.personhode .avatar { width: 56px; height: 56px; font-size: 1.125rem; }
.personhode h1 { font: 500 clamp(1.625rem, 5.5vw, 2.125rem)/1.12 var(--serif); margin: 0; letter-spacing: -.005em; overflow-wrap: anywhere; }
.personhode p { margin: 4px 0 0; font-size: .84375rem; color: var(--blekk2); }
.personside .kort, .personside .fliser { margin-top: 0; }
.kortspalter { display: flex; flex-direction: column; gap: 14px; }
.kortspalter > .stabel { display: contents; }
@media (min-width: 900px) {
  .kortspalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .kortspalter > .stabel { display: flex; }
}
.kortspalter .kortplass { min-width: 0; }
.fliser .flis.hel { grid-column: 1 / -1; }
.fliser.kpi .flis { padding: 15px 16px; }
.fliser.kpi .flis-verdi { font-size: 1.625rem; margin-top: 5px; }
.fliser.kpi .flis-under { margin-top: 5px; }
.rad-under.neg { color: var(--negativ); }
.vis-alle > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px;
  border-top: 1px solid var(--strek); font-size: .84375rem; font-weight: 500; color: var(--aksent-blekk); }
.vis-alle > summary::-webkit-details-marker { display: none; }
.vis-alle > summary .chevron { transform: rotate(90deg); }
.vis-alle[open] > summary { display: none; }
.vis-alle > summary + .listerad { border-top: 1px solid var(--strek); }
.liste.kant .vis-alle > summary { padding-left: 18px; padding-right: 18px; }
.eierpost-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.eierpost-topp { display: flex; align-items: baseline; gap: 10px; }
.eierpost-topp .stort { font: 500 .9375rem/1.2 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eierskapkort .liste.kant { margin-top: 16px; }
.personvernkort { padding-top: 2px; padding-bottom: 2px; }
.personvernkort .symbol { width: 30px; height: 30px; border-radius: 8px; background: var(--flate2); color: var(--blekk2); }
.personvernkort .symbol .ikon { width: 15px; height: 15px; }

/* Konsernet som et tre */
.konserntre { list-style: none; margin: 16px 0 0; padding: 0; }
.konserntre li { position: relative; padding-left: calc(var(--nivaa) * 18px); }
.konserntre li.under::before { content: ""; position: absolute; left: calc(var(--nivaa) * 18px - 11px); top: -7px; height: 36px; width: 9px;
  border-left: 1px solid var(--strek2); border-bottom: 1px solid var(--strek2); border-bottom-left-radius: 4px; }
.node { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin: 7px 0; border: 1px solid var(--strek); border-radius: 12px; color: var(--blekk); }
a.node:hover { text-decoration: none; border-color: color-mix(in srgb, var(--del-konsern) 45%, var(--strek)); }
.node.selv { background: var(--aksent-myk); border-color: transparent; }
.node.selv .node-navn { color: var(--aksent-blekk); font-weight: 600; }
.node-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.node-navn { font-size: .875rem; }
.node-meta { font-size: .71875rem; color: var(--blekk3); }
.node-andel { font-size: .78125rem; color: var(--blekk3); white-space: nowrap; }
.node.selv .node-andel { color: var(--aksent-blekk); }

/* Konsernet og tidslinjen står i lesebredde midt på, som i appen */
.del-konsern > *, .del-hendelser > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }

/* Tidslinjen år for år */
.tidslinje { padding: 0; }
.tidslinjeaar { padding: 16px 16px 0; }
.tidslinjeaar:not(:has(.hendelser)) { padding-bottom: 16px; }
.tidslinjeaar + .tidslinjeaar { border-top: 1px solid var(--strek); }
.aar-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aar-topp h3 { font: 500 1.375rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.aar-topp span { font-size: .71875rem; color: var(--blekk3); }
.aar-tall { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.aar-tall div { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 8px; align-items: baseline; }
.aar-tall span { font-size: .8125rem; color: var(--blekk2); }
.aar-tall b { font-size: .84375rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.aar-tall em { font-style: normal; font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.aar-tall p { margin: 0; font-size: .78125rem; }
.tidslinjeaar .hendelser { margin-top: 16px; }

/* ---------------------------------------------------------------- appsiden: toppen og skjermbildene */

.helt { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; padding: 32px 0 56px; }
.helt .ikon { width: 88px; height: 88px; border-radius: 20px; box-shadow: var(--skygge); }
.helt h1 { font: 500 clamp(44px, 8vw, 64px)/1.05 var(--serif); margin: 24px 0 12px; letter-spacing: -.01em; }
.helt .undertittel { font-size: clamp(19px, 2.4vw, 22px); color: var(--blekk2); margin: 0 0 20px; }
.helt p { color: var(--blekk2); margin: 0 0 28px; max-width: 34em; }
@media (min-width: 900px) {
  .helt { gap: 56px; padding: 64px 0 88px; text-align: center; }
  .helt .ikon { margin: 0 auto; }
  .helt p, .helt .undertittel { margin-left: auto; margin-right: auto; text-wrap: balance; }
}
.skjermer { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.skjermer figure { flex: 0 1 250px; min-width: 0; margin: 0; }
.skjermer img { width: 100%; height: auto; border-radius: 30px; border: 6px solid #0B0D12; background: #0B0D12; box-shadow: var(--skygge); }
.skjermer figcaption { margin-top: 14px; text-align: center; font-size: 14px; font-weight: 500; color: var(--blekk2); }
@media (min-width: 900px) {
  .skjermer { gap: 40px; }
  .skjermer figure { flex-basis: 310px; }
  .skjermer img { border-radius: 40px; border-width: 8px; }
}
@media (max-width: 699px) {
  .skjermer { overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start; padding: 8px 16px 20px; margin: 0 -16px; scrollbar-width: none; }
  .skjermer::-webkit-scrollbar { display: none; }
  .skjermer figure { flex: 0 0 64%; scroll-snap-align: center; }
}
.fordeler { display: grid; grid-template-columns: 1fr; gap: 16px; padding-bottom: 64px; }
@media (min-width: 700px) { .fordeler { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fordeler { grid-template-columns: repeat(4, 1fr); } }
.fordeler .symbol { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--aksent-myk); color: var(--aksent-blekk); }
.fordeler .symbol svg { width: 20px; height: 20px; }
.fordeler h3 { margin: 0 0 6px; font-size: 17px; }
.fordeler p { margin: 0; color: var(--blekk2); font-size: 15px; }
/* ---------------------------------------------------------------- tekstsidene (personvern, support, kilder) */

.tekst { padding: 24px 0 64px; }
.tekst h1 { font: 500 clamp(36px, 6vw, 48px)/1.1 var(--serif); margin: 16px 0 8px; }
.tekst .dato { color: var(--blekk3); font-size: 15px; margin: 0 0 28px; }
.tekst section { background: var(--flate); border: 1px solid var(--linje); border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; }
.tekst h2 { font-size: 18px; margin: 0 0 8px; }
.tekst section p { margin: 0 0 10px; color: var(--blekk2); }
.tekst section p:last-child { margin-bottom: 0; }
.tekst .liten { font-size: 14px; color: var(--blekk3); }
.tekst .fremhevet { background: var(--aksent-myk); border-color: transparent; }
.tekst .fremhevet h2 { color: var(--aksent-blekk); }
.tekst section ul { margin: 0 0 10px; padding-left: 20px; color: var(--blekk2); }
.tekst section li { margin: 0 0 6px; }
.tekst .merknad { font-size: 14px; color: var(--blekk3); margin: 18px 4px 0; }

/* ---------------------------------------------------------------- topplistene (/topplister/…), som TopplisteView */

.toppliste { padding: 8px 0 48px; }
.sti { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .84375rem; color: var(--blekk3); margin: 6px 4px 14px; }
.sti a { color: var(--blekk2); }
.sti .skille { color: var(--blekk3); }
.toppliste h1 { font: 500 clamp(1.75rem, 6vw, 2.25rem)/1.12 var(--serif); letter-spacing: -.005em; margin: 10px 4px 16px; text-wrap: balance; }
.toppvalg { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.omfang { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px; border-radius: 999px;
  background: var(--aksent-myk); color: var(--aksent-blekk); font-size: .9375rem; font-weight: 500; }
.omfang:hover { text-decoration: none; filter: brightness(.97); }
.omfang span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omfang .ikon { width: 14px; height: 14px; flex: none; }
.omfang .ned { width: 12px; height: 12px; transform: rotate(90deg); }
.segment.lenker { width: 100%; }
.segment.lenker a { flex: 1; min-width: 0; text-align: center; font: 500 .8125rem/1.2 var(--sans); color: var(--blekk3); border-radius: 9px; padding: 7px 6px; }
.segment.lenker a:hover { color: var(--blekk2); text-decoration: none; }
.segment.lenker a[aria-current] { color: var(--blekk); background: var(--seg-paa); box-shadow: 0 0 0 1px var(--seg-ring), 0 1px 3px var(--seg-skygge); }
.toppliste .fotnote { margin-top: 14px; }
.steder { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.steder .seksjonsetikett { margin-top: 14px; }
.stedliste { padding: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
.stedliste .sted { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--blekk); font-size: .90625rem; }
.stedliste .sted:hover { text-decoration: none; background: var(--flate2); }
.stedliste .sted small { color: var(--blekk3); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* Rader med plass, navn og sted og to tall (Rad i topplisten, RankingRow i bransjen) */
.rangrad .nr { font: .6875rem/1 var(--mono); color: var(--blekk3); width: 18px; flex: none; }
.rangrad .rad-hoyre .stort { font: 500 1rem/1.25 var(--serif); }
.rangrad .rad-hoyre small.neg, .underbransje .rad-hoyre small.neg { color: var(--negativ); }
.rangrad .rad-hoyre small.pos, .underbransje .rad-hoyre small.pos { color: var(--positiv); }
.rad-hoyre .stort.neg { color: var(--negativ); }
.rad-hoyre .stort.pos { color: var(--positiv); }
.listekort .liste.kant, .selskapskort .liste.kant { margin-top: 14px; }

/* ---------------------------------------------------------------- bransjesidene (/bransjer, /bransjer/<id>) */

.bransjeside, .bransjeoversikt { padding: 8px 0 48px; }
.sidetopp h1 { font: 500 clamp(2rem, 7vw, 2.75rem)/1.05 var(--serif); letter-spacing: -.01em; margin: 14px 4px 18px; }
.bransjeoversikt .fotnote { margin-top: 14px; }
.bransjehode { margin: 10px 4px 18px; max-width: 46em; }
.bransjehode-etikett { display: flex; align-items: center; gap: 9px; margin: 0; font: .65625rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blekk3); }
.bransjehode-etikett .symbol { width: 26px; height: 26px; border-radius: 8px; background: var(--aksent-myk); color: var(--aksent-blekk); }
.bransjehode-etikett .symbol .ikon { width: 13px; height: 13px; }
.bransjehode h1 { font: 500 clamp(1.875rem, 6.5vw, 2.375rem)/1.1 var(--serif); letter-spacing: -.005em; margin: 10px 0 0; overflow-wrap: anywhere; }
.bransjehode-tekst { margin: 8px 0 0; font-size: .9375rem; color: var(--blekk2); line-height: 1.5; }
.bransjehode-meta { margin: 7px 0 0; font-size: .84375rem; color: var(--blekk2); }
.bransjehode-lenke { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .84375rem; font-weight: 500; color: var(--aksent-blekk); }
.bransjehode-lenke .chevron { width: 12px; height: 12px; }
.bransjeinnhold .kort, .bransjeinnhold .fliser, .bransjeinnhold .lenkerad, .bransjeinnhold .infokort { margin-top: 0; }
.bransjeside .fotnote { margin-top: 12px; }
.stabel-fliser { display: flex; flex-direction: column; gap: 10px; }
.segment-luft { margin-top: 14px; }
.segment-luft .segment { margin-bottom: 4px; }
.tynnstolpe { display: block; height: 4px; border-radius: 2px; background: var(--flate2); margin-top: 6px; overflow: hidden; }
.tynnstolpe i { display: block; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--p-a) 80%, transparent); }
.underbransje .rad-hoyre { width: 64px; }
.underbransjer .liste.kant { margin-top: 14px; }

/* Typisk stiftelsesår på en tidslinje (Aarsprikk) */
.aarsprikk { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.aarsprikk-spor { position: relative; height: 6px; border-radius: 3px; background: var(--flate2); margin: 3px 0; }
.aarsprikk-spor i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--p-a); border: 2px solid var(--flate); transform: translate(-50%, -50%); box-sizing: border-box; }
.aarsprikk-akse { display: flex; justify-content: space-between; font-size: .59375rem; color: var(--blekk3); }

/* Nyetableringer per år */
.nystolper { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; }
.nystolpe { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nystolpe span, .nystolpe em { font-size: .65625rem; color: var(--blekk3); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nystolpe i { display: block; width: 100%; border-radius: 4px; background: var(--p-a); }
.nystolpe.hittil i { background: color-mix(in srgb, var(--p-a) 45%, transparent); }

/* Fylkene på kartet og som liste (FylkeKartView) */
.fylker { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 14px; margin-top: 16px; align-items: start; }
.fylkekart { display: block; width: 100%; height: auto; max-height: 300px; }
.fylkekart path { fill: var(--p-a); stroke: var(--flate); stroke-width: 1.2; stroke-linejoin: round; }
.fylkeliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fylkeliste li { display: flex; align-items: center; gap: 7px; font-size: .71875rem; color: var(--blekk2); }
.fylkeliste i { width: 9px; height: 9px; border-radius: 2px; background: var(--p-a); flex: none; }
.fylkeliste span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fylkeliste b { font-weight: 400; color: var(--blekk); font-variant-numeric: tabular-nums; }
.kartkilde { font-size: .65625rem; color: var(--blekk3); margin: 12px 0 0; }
@media (max-width: 420px) { .fylker { grid-template-columns: minmax(0, 1fr) 140px; } }

.kortlenke + .kortlenke { margin-top: 0; border-top: 1px solid var(--strek); }