/* Skriftene ligger på nettsiden selv, så besøkende ikke sendes til Google. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); 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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/fonts/nunito-latin.woff2") format("woff2"); 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; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* deltidsjobb.no, søkeplattformen (skisse Z1–Z4): lys blå bokser med store runde hjørner, runde felt og knapper som kapsler.
   Innholdet er 1100 px bredt; toppen, den blå boksen på forsiden og bunnen går i full bredde.
   Forrige design (V1–V6) ligger i backup/design-v-2026-11-02. */
:root {
  --ink: #14151a;
  --text: #2a2c33;
  --muted: #5f6270;
  --line: #e6e9f2;
  --line-2: #d6dbea;
  --bg: #ffffff;
  --soft: #f5f6f8;
  --filter: #f5f7fc;
  --hero: #eef3ff;
  --accent: #1766ff;
  --accent-ink: #0b3d9e;
  --accent-soft: #eef3ff;
  --navy: #0e1236;
  --frist: #b25e00;
  --rod: #d70015;
  --hjerte: #e5283a;
  --skygge: 0 6px 20px rgba(14, 18, 54, .08);
  --display: "Nunito", "Inter", -apple-system, system-ui, sans-serif;
  --body: "Inter", -apple-system, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.wrap { max-width: 1140px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
/* flow-root holder margen under appbåndet inne i main, så det ikke blir en stripe før bunnen. */
/* Bunnen står under skjermkanten til innholdet er hentet, så den ikke dyttes nedover. */
main { background: var(--bg); min-height: calc(100vh - 72px); display: flow-root; }
.lenke { color: var(--accent); font-weight: 600; }
.lenke:hover { text-decoration: underline; }

/* Toppen: logo og meny helt ute ved kantene */
/* Svak skygge under toppen når man har begynt å bla, som hos Qasa */
.topp { background: var(--bg); position: sticky; top: 0; z-index: 20; transition: box-shadow .2s; }
.topp.rullet { box-shadow: 0 2px 10px rgba(14, 18, 54, .07); }
.topp .wrap { max-width: none; height: 72px; display: flex; align-items: center; gap: 16px; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
.topp .varemerke img { height: 26px; width: auto; display: block; }
/* Knappene til høyre kommer når vi vet om man er logget inn, og logoene når de er lastet. De glir inn i stedet for å dukke opp brått. */
@keyframes glir-inn { from { opacity: 0; } }
.topp-hoyre, .logo img { animation: glir-inn .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .topp-hoyre, .logo img { animation: none; } }
/* «For bedrifter» til venstre, bjelle, hjerte, profilbilde og meny til høyre (skisse H1–H5) */
.topp .wrap { gap: 36px; }
.topp-lenker { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.topp-lenker a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.topp-lenker a[aria-current="page"] { color: var(--accent); }
.topp-hoyre { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ikonknapp { width: 46px; height: 46px; border-radius: 23px; display: grid; place-items: center; position: relative; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; flex: none; }
.ikonknapp:hover { background: var(--soft); }
.ikonknapp[aria-current="page"], .ikonknapp[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.prikk { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; display: grid; place-items: center; border: 2px solid var(--bg); }
.prikk[hidden] { display: none; }
.topp-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 16px var(--body); border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; flex: none; margin-left: 4px; }
.topp-avatar[aria-expanded="true"], .topp-avatar[aria-current="page"] { box-shadow: 0 0 0 3px var(--accent); }
.topp-logginn { margin: 0 2px 0 6px; }
.topp-opprett { margin: 0 2px 0 6px; }
.topp-meny { position: absolute; top: 66px; right: 24px; width: 340px; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow: auto; overscroll-behavior: contain; background: var(--bg); border-radius: 28px; box-shadow: 0 24px 60px rgba(14, 18, 54, .18); border: 1px solid var(--line); padding: 10px; z-index: 30; }
.topp-meny[hidden] { display: none; }
.meny-rad { display: flex; gap: 14px; align-items: center; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 20px; font: 500 15.5px var(--body); color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left; }
.meny-rad:hover { background: var(--accent-soft); }
.meny-rad > span:not(.logo) { flex: 1; min-width: 0; }
.meny-rad em { font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap; }
.meny-rad .tall { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none !important; }
.meny-rad .meny-logo { width: 28px; height: 28px; border-radius: 8px; }
.meny-rad .meny-logo .forbokstav { font-size: 11px; }
.meny-strek { height: 1px; background: var(--line); margin: 6px 10px; }
.meny-gruppe { padding: 10px 16px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.meny-hvem { display: flex; gap: 12px; align-items: center; padding: 12px 14px 14px; }
.meny-hvem b { display: block; font-size: 15.5px; }
.meny-hvem > span:last-child { min-width: 0; }
.meny-hvem > span:last-child span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topp-avatar-stor { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 16px; display: grid; place-items: center; flex: none; }
.meny-inn { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.meny-inn b { font-size: 17px; line-height: 1.3; margin-bottom: 4px; }
.meny-app { margin: 8px 4px 2px; border-radius: 22px; background: var(--navy); color: #fff; padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.meny-app > span:first-child { flex: 1; }
.meny-app b { display: block; font-size: 14.5px; line-height: 1.35; }
.meny-app > span:first-child span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.meny-app .appstore { flex: none; margin: 0; height: 38px; padding: 0 10px 0 8px; gap: 6px; border-radius: 8px; }
.meny-app .appstore svg { width: 20px; height: 20px; margin-top: -2px; }
.meny-app .appstore small { font-size: 7.5px; line-height: 9px; }
.meny-app .appstore b { font-size: 15px; line-height: 16px; }
@media (max-width: 860px) { .topp-lenker { display: none; } }
@media (max-width: 720px) {
  .topp .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); height: 64px; }
  .topp .varemerke img { height: 21px; }
  .topp-hoyre { gap: 0; }
  .ikonknapp { width: 44px; height: 44px; }
  /* Mobil (H5): innlogget står bjelle, hjerte og meny i toppen, og profilbildet ligger i menyen. Ellers en blå «Logg inn» og meny. «Opprett konto» ligger i menyen. */
  .topp .topp-avatar, .topp .topp-opprett { display: none; }
  .topp .knapp.topp-logginn { height: 40px; padding: 0 16px; margin: 0 4px 0 0; background: var(--accent); border-color: var(--accent); color: #fff; }
  .topp-meny { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; border: 0; border-top: 1px solid var(--line); box-shadow: none; padding: 10px 12px max(24px, env(safe-area-inset-bottom, 0px)); }
  html.meny-apen { overflow: hidden; }
}

/* Knapper: kapsler */
.knapp { height: 44px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; white-space: nowrap; }
.knapp.bla { background: var(--accent); color: #fff; }
.knapp.bla:hover { background: #0f57e0; }
.knapp.myk { background: var(--accent-soft); color: var(--accent-ink); }
.knapp.hvit { background: #fff; color: var(--ink); }
.knapp.strek { background: #fff; border: 1.5px solid var(--line-2); color: var(--ink); }

/* Søket: én kapsel med stilling | sted og «Søk» inni */
.sokepille { display: flex; align-items: center; background: #fff; border-radius: 32px; height: 64px; padding: 0 6px 0 22px; text-align: left; }
.sokepille label { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.sokepille label:first-of-type { flex: 1.3; }
.sokepille label + .skille + label { flex: 1; }
.sokepille input { border: 0; outline: 0; background: transparent; font-size: 16px; width: 100%; min-width: 0; height: 48px; }
.sokepille input::placeholder { color: #8a8d96; }
.sokepille .skille { width: 1px; height: 34px; background: #e3e5ea; margin: 0 20px; flex: none; }
.sokepille .knapp { height: 52px; padding: 0 28px; font-size: 16px; flex: none; }
.sokepille.kant { border: 1.5px solid var(--line-2); height: 60px; }
.sokepille.kant .knapp { height: 46px; padding: 0 26px; }
.sokepille:focus-within { box-shadow: 0 0 0 3px rgba(23, 102, 255, .18); }
@media (max-width: 720px) {
  .sokepille, .sokepille.kant { flex-direction: column; align-items: stretch; height: auto; padding: 4px; border-radius: 26px; }
  .sokepille label { height: 50px; padding: 0 14px; gap: 10px; }
  .sokepille .skille { width: auto; height: 1px; margin: 0 14px; }
  .sokepille .knapp, .sokepille.kant .knapp { height: 48px; width: 100%; margin-top: 4px; }
}

/* Forslag til sted under feltet (som i bildet brukeren viste) */
.sokepille { position: relative; }
.forslag { position: absolute; top: calc(100% + 8px); right: 0; width: min(440px, 100%); z-index: 50; margin: 0; padding: 10px; list-style: none; background: #fff; border-radius: 26px; box-shadow: 0 18px 50px rgba(14, 18, 54, .16); border: 1px solid var(--line); text-align: left; }
.forslag li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 24px; cursor: pointer; font-size: 15.5px; color: var(--ink); }
.forslag li svg { flex: none; }
.forslag li b { font-weight: 600; }
.forslag li span { color: #7a7d86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forslag li em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap; }
.forslag li[role="option"]:hover, .forslag li[aria-selected="true"] { background: #f1f2f5; }
.forslag li.gruppe { min-height: 0; padding: 10px 16px 4px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: default; text-transform: uppercase; letter-spacing: .04em; }
.forslag li.gruppe:first-child { padding-top: 4px; }
/* Under «Stilling eller bedrift» står lista til venstre, under feltet man skriver i. */
#q-forslag { left: 0; right: auto; width: min(480px, 100%); max-height: min(70vh, 560px); overflow: auto; }
@media (max-width: 720px) { .forslag { left: 0; width: auto; top: calc(100% + 6px); } }

/* Kort for stillinger: innholdet som før, runde hjørner. Står helt stille ved hover (brukerens ønske). */
.kort { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; position: relative; }
.kort .innhold { flex: 1; min-width: 0; }
.kort .meta { display: block; font-size: 12.5px; color: var(--muted); }
.kort .tittel { display: block; font-size: 16px; font-weight: 600; color: var(--accent-ink); margin: 2px 0 6px; line-height: 1.35; }
.kort .tittel::after { content: ""; position: absolute; inset: 0; }
.kort .linje { font-size: 13px; color: var(--text); }
.kort .tid { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.tid.snart { color: var(--frist); font-weight: 600; }
.logo { width: 80px; height: 80px; border: 1px solid var(--line); border-radius: 20px; display: grid; place-items: center; flex: none; background: #fff; overflow: hidden; }
/* Filene har allerede riktig luft rundt logoen (lag_logoer.py), så bildet fyller hele boksen. */
.logo img { width: 100%; height: 100%; object-fit: contain; }
/* Logoen til venstre for teksten (brukerens ønske). */
.kort .logo { order: -1; }
.logo .forbokstav { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 22px; letter-spacing: .02em; }
.hjerte { position: relative; z-index: 1; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; background: transparent; border-radius: 22px; display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; }
.hjerte[aria-pressed="true"] { color: var(--hjerte); }
.hjerte[aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 600px) {
  .kort { padding: 12px; gap: 12px; border-radius: 20px; }
  .kort .logo { width: 60px; height: 60px; border-radius: 16px; }
  .logo .forbokstav { font-size: 18px; }
  .kort .tittel { font-size: 15px; }
}

/* Overskrifter og seksjoner */
.h2 { font-family: var(--display); font-size: 26px; font-weight: 900; margin: 0; letter-spacing: -.01em; }
.seksjon { padding-block: 44px 8px; }
.seksjonstopp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.sti { font-size: 13px; color: var(--muted); }
.sti a { color: var(--accent); }

/* Forsiden: den lyseblå boksen med søk og alle kategoriene */
.helt { margin: 0 16px; border-radius: 32px; background: var(--hero); padding: 52px 56px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.helt h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 5vw, 50px); line-height: 1.04; font-weight: 900; letter-spacing: -.025em; max-width: 760px; }
.helt > p { margin: 12px 0 0; font-size: 16.5px; color: #4a4d57; }
.helt > p b { white-space: nowrap; color: var(--ink); }
.helt .sokepille { margin-top: 26px; width: 100%; max-width: 760px; }
/* Kategoriene som kapsler med ikon og navn (skisse K2), i midten under søket. */
.ruter { margin-top: 34px; max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* Svak skygge (skisse F8), så kapslene skiller seg fra den lyse blå bakgrunnen. */
.kat { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 7px; border-radius: 24px; background: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(14, 18, 54, .06), 0 6px 16px rgba(23, 102, 255, .10); }
.kat .ikon { width: 34px; height: 34px; border-radius: 17px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appband { margin-block: 48px 0; background: var(--navy); color: #fff; border-radius: 32px; display: flex; align-items: center; gap: 40px; padding: 0 56px; height: 300px; overflow: hidden; }
.appband > div { flex: 1; }
.appband h2 { margin: 0; font-family: var(--display); font-size: 32px; font-weight: 900; line-height: 1.15; }
.appband p { margin: 12px 0 22px; font-size: 16px; color: rgba(255,255,255,.78); max-width: 480px; }
/* Standardstørrelsen på Apples merke: 40 px høyt. */
.appband .appstore, .bunn .appstore { margin-top: 0; height: 40px; padding: 0 12px 0 10px; gap: 7px; border-radius: 8px; }
.appband .appstore svg, .bunn .appstore svg { width: 22px; height: 22px; margin-top: -2px; }
.appband .appstore small, .bunn .appstore small { font-size: 8.5px; line-height: 10px; }
.appband .appstore b, .bunn .appstore b { font-size: 17.5px; line-height: 19px; }
.appband img { width: 230px; height: auto; align-self: flex-start; margin-top: 120px; }
@media (max-width: 1000px) {
  .helt { padding: 40px 28px 28px; }
}
@media (max-width: 720px) {
  .helt { margin: 0 10px; border-radius: 28px; padding: 26px 16px 14px; }
  .helt > p { font-size: 14px; margin-top: 8px; }
  .helt .sokepille { margin-top: 18px; }
  /* To rader som blas sidelengs, helt ut til kanten av boksen (skisse K7). */
  .ruter { margin: 16px -16px 0; padding: 4px 16px 10px; width: calc(100% + 32px); max-width: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px; scroll-snap-type: x proximity; }
  .ruter::-webkit-scrollbar { display: none; }
  .kat { height: 42px; padding: 0 14px 0 6px; gap: 8px; font-size: 14px; border-radius: 21px; scroll-snap-align: start; }
  .kat .ikon { width: 30px; height: 30px; border-radius: 15px; }
  .kat .ikon svg { width: 16px; height: 16px; }
  .to { grid-template-columns: 1fr; }
  .h2 { font-size: 21px; }
  .appband { flex-direction: column; padding: 28px 22px 0; gap: 0; height: auto; text-align: left; align-items: flex-start; border-radius: 28px; }
  .appband img { align-self: center; width: 180px; margin: 24px 0 -60px; }
}

/* Treff: søket på hvitt, filtrene i en lys boks til venstre */
.treff-topp { padding-top: 8px; }
.treff-topp .sti { margin-bottom: 12px; }
.sokerad { display: flex; gap: 12px; align-items: center; }
.sokerad .sokepille { flex: 1; min-width: 0; }
.lagre-sok { height: 60px; padding: 0 22px; color: var(--accent-ink); }
.treff-oppsett { display: flex; gap: 24px; padding-top: 24px; padding-bottom: 8px; align-items: flex-start; }
/* Filtrene (skisse K3, som FINN): ingen boks, delene skilt med strek, overskrift med pil og antall i parentes. */
.filtre { width: 280px; flex: none; }
.valgte { padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
.valgte-hode { display: flex; justify-content: space-between; align-items: baseline; }
.valgte-hode b { font-size: 15px; }
.filtre .lenke { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13.5px; min-height: 32px; }
.valgte .brikker { margin-top: 8px; }
.del { border-bottom: 1px solid var(--line); }
.del-hode { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ink); text-align: left; }
.del-hode svg { margin-left: auto; flex: none; transition: transform .15s; }
.del.apen .del-hode svg { transform: rotate(180deg); }
.del-valgt { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.del-innhold { padding: 0 0 16px; }
.valg { display: flex; align-items: center; gap: 12px; min-height: 36px; font-size: 15px; cursor: pointer; }
.valg input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 1.5px solid #9aa0ad; background: #fff; flex: none; cursor: pointer; }
.valg input:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; border-color: var(--accent); }
.valg .n { color: #6b6e78; font-size: 13px; }
.valg.tom { color: #9a9ca5; }
.filtre .velger { width: 100%; }
.filtre .hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.vis-alle { background: none; border: 0; padding: 6px 0; min-height: 36px; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; }
/* Arket på mobil: overskrift med Nullstill og kryss øverst, «Vis N jobber» nederst. Skjult på PC. */
.ark-hode, .ark-bunn { display: none; }
.treffliste { flex: 1; min-width: 0; }
.treffhode { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.treffhode b { font-family: var(--display); font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.treff-tittel { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 900; letter-spacing: -.01em; line-height: 1.2; }
.treff-antall { margin: 2px 0 0; font-size: 13px; color: var(--text); }
.treff-antall b { font-weight: 700; color: var(--ink); }
@media (max-width: 720px) { .treff-tittel { font-size: 16px; } .treff-antall { font-size: 12.5px; } }
.velger { height: 44px; padding: 0 38px 0 18px; border: 1.5px solid var(--line-2); border-radius: 22px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314151a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat; font-size: 14px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.bytte { display: inline-flex; padding: 4px; border-radius: 22px; background: var(--accent-soft); }
.bytte a { height: 36px; padding: 0 16px; border-radius: 18px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
.bytte a[aria-current="true"] { background: var(--ink); color: #fff; }
.liste { display: flex; flex-direction: column; gap: 10px; }
.sider { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 24px 0 8px; }
.side-tall { flex: 0 1 44px; min-width: 0; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--text); transition: background .15s; }
a.side-tall:hover { background: var(--accent-soft); color: var(--accent-ink); }
.side-tall[aria-current="page"] { background: var(--accent); color: #fff; }
.side-pil { flex: none; display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 22px; font-size: 15px; font-weight: 500; color: var(--muted); transition: background .15s; }
a.side-pil:hover { background: var(--accent-soft); color: var(--accent-ink); }
.side-pil[aria-disabled="true"] { color: #b4b7c0; }
.side-pil svg { display: none; }
@media (max-width: 480px) {
  /* Pil i stedet for tekst, så alt får plass på én linje. */
  .side-pil { flex: 0 1 44px; min-width: 0; padding: 0; justify-content: center; }
  .side-pil svg { display: block; }
  .side-pil span { display: none; }
}
.brikker { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.brikker:empty { display: none; }
.brikke { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; }
.brikke.lys { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
.filterknapp { display: none; }
.tomt { padding: 48px 20px; text-align: center; border: 1.5px dashed var(--line-2); border-radius: 22px; color: var(--muted); }
.tomt b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }
/* Ingen treff på treffsiden (skisse T1 med tegningen fra T4) */
.ingen-treff { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 20px 32px; }
.ingen-treff h2 { margin: 18px 0 0; font-family: var(--display); font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.ingen-treff p { margin: 10px 0 0; max-width: 480px; font-size: 16px; line-height: 1.55; color: #4a4d57; }
.ingen-treff .knapp { margin-top: 26px; height: 52px; padding: 0 26px; font-size: 16px; }
@media (max-width: 720px) { .ingen-treff { padding-top: 32px; } .ingen-treff > svg { width: 160px; height: 128px; } .ingen-treff h2 { font-size: 24px; } .ingen-treff p { font-size: 15px; } }
@media (max-width: 900px) {
  .treff-oppsett { flex-direction: column; gap: 12px; align-items: stretch; }
  .filtre { display: none; }
  .filtre.apen { display: block; position: fixed; inset: 0; z-index: 60; width: auto; background: #fff; overflow-y: auto; padding: 0 20px 96px; }
  .filtre.apen .ark-hode { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; background: #fff; height: 60px; margin: 0 -20px 4px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
  .filtre.apen .ark-hode b { font-size: 16px; }
  .lukk-filtre { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
  .filtre.apen .ark-bunn { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); }
  .ark-bunn .knapp { width: 100%; height: 52px; font-size: 16px; }
  .filtre.apen .valgte .lenke { display: none; }
  body.ark-apent { overflow: hidden; }
  .filterknapp { display: inline-flex; }
}
@media (max-width: 720px) {
  .sokerad { flex-wrap: wrap; }
  .lagre-sok { flex: 1 1 100%; height: 48px; }
  .treffhode b { font-size: 16px; }
}

/* Kart: lista og kartet 50/50, kartet med runde hjørner */
.kartoppsett { display: flex; gap: 16px; padding: 16px; height: calc(100vh - 72px - 120px); min-height: 520px; }
.kartliste { flex: 1 1 0; min-width: 0; overflow: auto; padding: 4px 4px 16px; scroll-margin-top: 84px; }
.kartliste .sider { margin-top: 18px; }
.kartliste .kort { padding: 12px 14px; gap: 12px; }
.kartliste .logo { width: 60px; height: 60px; border-radius: 16px; }
.kartliste .tittel { font-size: 14.5px; margin: 1px 0 3px; }
/* isolation holder kartets lag (Leaflet bruker z-index 400–1000) inne i kartet, så forslagene i søket legger seg over det. */
.kartflate { flex: 1 1 0; min-width: 0; position: relative; border-radius: 28px; overflow: hidden; background: #f4f6f8; isolation: isolate; }
#kart { position: absolute; inset: 0; }
.kartvalg { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 500; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgba(14, 18, 54, .18); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.kartvalg input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
@media (max-width: 900px) {
  .kartoppsett { flex-direction: column-reverse; height: auto; padding: 12px 10px; }
  .kartflate { height: 420px; flex: none; }
  .kartliste { flex: none; }
  .kartliste { width: auto; overflow: visible; }
}

/* Stillingen: teksten til venstre, lys blå boks til høyre */
.stilling { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; padding-block: 20px 8px; }
.stilling h1 { margin: 6px 0 16px; font-family: var(--display); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.merker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.merke { height: 32px; padding: 0 14px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.merke.ny { background: var(--accent); color: #fff; }
.tekst h2 { margin: 30px 0 12px; font-size: 19px; font-weight: 700; }
.tekst h2:first-child { margin-top: 0; }
.tekst p, .tekst ul { margin: 0; font-size: 16px; line-height: 1.55; max-width: 68ch; }
.tekst ul { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
/* Hele annonseteksten, som AdText i appen: overskrifter, punkter og avsnitt */
.annonsetekst { max-width: 68ch; font-size: 16px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; }
.annonsetekst p { margin: 0; }
.annonsetekst h3 { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.annonsetekst .punkt { display: flex; gap: 10px; }
.annonsetekst .punkt b { flex: none; }
/* Boksen til høyre: hvit med tynn kant, som i det forrige designet, men med runde hjørner og kapsler. Logoen står over tittelen. */
/* Arbeidssted med kart under beskrivelsen, som på FINN */
.arbeidssted { margin-top: 40px; }
.arbeidssted h2 { margin: 0 0 12px; font-size: 19px; font-weight: 700; }
.arbeidssted .adresse { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 14px; }
.stillingskart { height: 360px; border-radius: 28px; overflow: hidden; background: #f4f6f8; z-index: 0; isolation: isolate; }
.kartnal { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.kart-merknad { margin: 10px 4px 0; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .stillingskart { height: 260px; border-radius: 22px; } }
/* Publisert og «Rapporter stillingen» nederst i annonsen, under beskrivelsen */
.annonse-bunn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); max-width: 68ch; }
.sideboks { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 26px; position: sticky; top: 92px; }
/* Logoen og bedriften over tittelen, som på FINN */
.arbeidsgiver { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.arbeidsgiver b { display: block; font-size: 16px; font-weight: 600; }
.arbeidsgiver span span { display: block; font-size: 14px; color: var(--muted); }
.sideboks > .knapp.bla { width: 100%; height: 54px; font-size: 16px; }
.sideboks dl { margin: 22px 0 0; display: grid; grid-template-columns: 120px 1fr; row-gap: 12px; font-size: 14px; }
.sideboks dt { color: var(--muted); }
.sideboks dd { margin: 0; font-weight: 600; }
.soknad-notis { margin: 24px 0 0; font-size: 14px; color: var(--muted); max-width: 68ch; }
.knapprad { display: flex; gap: 10px; margin-top: 10px; }
.knapprad .knapp { flex: 1; height: 48px; background: #fff; border: 1.5px solid var(--line-2); }
/* Like bred som annonseteksten, under rutenettet. */
.lignende { margin-top: 44px; max-width: calc(100% - 340px - 36px); }
@media (max-width: 900px) { .lignende { max-width: none; } }
.lignende .h2 { font-size: 22px; margin-bottom: 14px; }
@media (max-width: 900px) {
  .stilling { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sideboks { position: static; }
}

/* Mine jobber: menyen som kapsler i en lys boks */
/* Mine jobber, Varsler og Profil nås fra toppen (bjella, hjertet og menyen), så siden har ingen egen meny. */
.minside { max-width: 900px; padding-block: 16px 8px; }
.minside h1 { margin: 0 0 6px; font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.01em; }
.minside .innhold { flex: 1; min-width: 0; }
.minside .bytte a { height: 38px; padding: 0 18px; border-radius: 19px; }
.borte .tittel { color: var(--text); }
.borte { opacity: .62; }

/* Innloggingssiden (skisse A1): blå boks til venstre, skjemaet til høyre */
/* Hele siden får plass på skjermen uten å bla: høyden er skjermen minus toppen. Telefonen kuttes nederst i boksen. */
.innlogging { display: flex; gap: 16px; padding: 0 16px 16px; height: calc(100dvh - 72px); min-height: 620px; }
.inn-panel { flex: 1 1 0; min-width: 0; border-radius: 32px; background: var(--hero); padding: 56px 56px 0; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; }
/* Boksen har fast høyde; ingenting i den skal presses sammen, bare telefonen kuttes nederst. */
.inn-panel > * { flex-shrink: 0; }
.inn-panel h2 { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; max-width: 460px; }
.fordeler { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-size: 15px; font-weight: 500; }
.fordeler li { display: flex; align-items: center; gap: 12px; }
.fordeler li span { width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--accent); display: grid; place-items: center; flex: none; }
/* Tegnet etter Apples «Last ned i App Store»-merke (svart, tynn grå kant, forhold omtrent 3:1).
   Før siden går ut: bytt til Apples offisielle merke fra tools.applemarketingtools.com. */
.appstore { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 14px; margin-top: 30px; border-radius: 10px; background: #000; color: #fff; border: 1px solid #a6a6a6; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", var(--body); }
.appstore svg { width: 30px; height: 30px; flex: none; margin-top: -3px; }
.appstore > span { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.appstore small { font-size: 11px; line-height: 13px; font-weight: 500; letter-spacing: .01em; }
.appstore b { font-size: 24px; line-height: 26px; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.inn-telefon { width: 250px; margin: 34px auto 0; display: block; align-self: center; }
/* 50/50 med den blå boksen; selve skjemaet holdes smalt og står midt i sin halvdel. */
.inn-skjema { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 64px; overflow-y: auto; }
.inn-skjema > * { width: 100%; max-width: 440px; }
.inn-skjema h1 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.inn-under { margin: 8px 0 24px; font-size: 15px; color: var(--muted); }
.inn-under .lenke, .inn-epost .lenke, .inn-glemt { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.inn-stor { width: 100%; height: 54px; font-size: 16px; }
.inn-skjema .knapp.svart { background: var(--ink); color: #fff; }
.inn-skjema .knapp.hvit { border: 1.5px solid var(--line-2); margin-top: 12px; }
.inn-eller { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #8a8d96; margin: 20px 0; }
.inn-eller::before, .inn-eller::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.inn-skjema form { display: flex; flex-direction: column; }
.inn-skjema label { font-size: 13px; font-weight: 600; margin: 0 0 6px 4px; }
.inn-skjema label ~ label { margin-top: 14px; }
.inn-skjema input { height: 54px; border: 1.5px solid var(--line-2); border-radius: 27px; padding: 0 20px; font-size: 16px; width: 100%; background: #fff; }
.inn-skjema input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(23,102,255,.18); }
.inn-skjema input.inn-kode { letter-spacing: .4em; font-size: 22px; font-weight: 700; text-align: center; }
.inn-skjema form .knapp { margin-top: 18px; }
.inn-glemt { align-self: flex-start; margin: 10px 4px 0; font-size: 13px !important; }
.inn-epost { display: flex; align-items: center; gap: 10px; margin: 8px 0 22px; font-size: 15px; }
.inn-epost span { font-weight: 600; }
.inn-feil { margin: 12px 4px 0; color: var(--rod); font-size: 13.5px; font-weight: 500; }
.inn-info { margin: 12px 4px 0; color: var(--accent-ink); font-size: 13.5px; }
.inn-skjema .vilkar { margin: 18px 0 0; font-size: 12.5px; color: #6b6e78; line-height: 1.5; }
/* «Er du bedrift?» nederst: bedriftene har egen innlogging under Publiser stilling (/publiser). */
.inn-bedrift { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); }
.inn-bedrift:hover { background: var(--filter); }
.inn-bedrift-ikon { width: 40px; height: 40px; border-radius: 12px; background: var(--hero); color: var(--accent); display: grid; place-items: center; flex: none; }
.inn-bedrift b { display: block; font-size: 15px; }
.inn-bedrift small { display: block; font-size: 13.5px; color: var(--muted); }
.inn-bedrift .snart-merke { background: var(--hero); color: #0b4fd6; }
.inn-bedrift > svg:last-child { margin-left: auto; color: var(--muted); flex: none; }
@media (max-width: 1000px) { .innlogging { height: auto; min-height: calc(100dvh - 72px); } .inn-panel { display: none; } .inn-skjema { padding: 24px 20px; } }

/* Innlogging */
.dialog { border: 0; border-radius: 28px; padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(14,18,54,.3); }
.dialog::backdrop { background: rgba(14, 18, 54, .45); }
.dialog form { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { margin: 0 0 4px; font-family: var(--display); font-size: 26px; font-weight: 900; }
.dialog p { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.dialog label { font-size: 13px; font-weight: 600; }
.dialog input { height: 50px; border: 1.5px solid var(--line-2); border-radius: 25px; padding: 0 18px; font-size: 16px; width: 100%; }
.dialog input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(23,102,255,.18); }
.dialog .knapp { height: 50px; }
.dialog .feil { color: var(--rod); font-size: 13.5px; font-weight: 500; }
.dialog .info { color: var(--accent-ink); font-size: 13.5px; }
.dialog .lukk { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 22px; cursor: pointer; font-size: 22px; }
.dialog .bytt { background: none; border: 0; color: var(--accent); font-weight: 600; cursor: pointer; padding: 8px 0; }

/* «Lagre søk»: samme oppsett som arket i appen (SaveSearchSheet) */
.lagre-sok-dialog { width: min(460px, calc(100vw - 24px)); padding: 0 0 20px; background: #fff; }
.ark-topp { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 14px 14px 6px; }
.ark-topp h2 { margin: 0; text-align: center; font-family: var(--body); font-size: 17px; font-weight: 700; }
.lukk-ark { width: 44px; height: 44px; border: 0; border-radius: 22px; background: #f1f2f5; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.ark-topp .knapp { height: 44px; padding: 0 20px; }
.ark-navn { padding: 14px 24px 18px; display: flex; flex-direction: column; gap: 4px; }
.ark-navn b { font-family: var(--display); font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ark-navn input { height: 48px; border: 1.5px solid var(--accent); border-radius: 14px; padding: 0 14px; font-size: 20px; font-weight: 700; width: 100%; outline: 0; box-shadow: 0 0 0 3px rgba(23,102,255,.18); }
.ark-navn span { font-size: 14px; color: var(--muted); }
.ark-gruppe { margin: 0 16px 14px; background: var(--filter); border-radius: 20px; overflow: hidden; }
.ark-gruppe > * + * { border-top: 1px solid var(--line); }
.bryter-rad { display: flex; align-items: center; gap: 16px; padding: 12px 16px; cursor: pointer; }
.bryter-rad > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bryter-rad b { font-size: 16px; font-weight: 600; }
.bryter-rad span span { font-size: 14px; color: var(--muted); }
/* Bryter som i iOS */
.bryter-rad input { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; margin: 0; flex: none; border-radius: 16px; cursor: pointer;
  background: radial-gradient(circle at 15.5px 50%, #fff 12.5px, transparent 13px), #d6dbea; transition: background .2s; }
.bryter-rad input:checked { background: radial-gradient(circle at calc(100% - 15.5px) 50%, #fff 12.5px, transparent 13px), var(--accent); }
@media (prefers-reduced-motion: reduce) { .bryter-rad input { transition: none; } }
.ark-knapp { display: block; width: 100%; min-height: 50px; padding: 0 16px; border: 0; background: none; text-align: left; font-size: 16px; font-weight: 500; color: var(--accent); cursor: pointer; }
.ark-knapp.rod { color: var(--rod); }

/* Melding nederst */
.melding { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 22px; font-size: 14px; z-index: 50; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* Bunnen (skisse F1, i samme lyseblå som boksen på forsiden): full bredde med runde hjørner øverst.
   Logo, slagord og App Store til venstre, lenkene i fire kolonner til høyre, firmaopplysningene under en strek. */
.bunn { margin-top: 64px; border-radius: 40px 40px 0 0; background: var(--hero); color: var(--ink); padding: 72px max(32px, calc((100% - 1100px) / 2)) 36px; min-height: 500px; display: flex; flex-direction: column; }
.bunn-innhold { flex-grow: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
.bunn-venstre { display: flex; flex-direction: column; align-items: flex-start; }
.bunn-venstre > img { height: 28px; }
.bunn-slagord { margin: 20px 0 24px; font-family: var(--display); font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.bunn .kolonner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; align-content: start; }
.bunn .kolonner nav { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; line-height: 1.35; color: var(--text); }
.bunn .kolonner b { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.bunn-juridisk { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.bunn-firma { display: flex; flex-wrap: wrap; gap: 0 6px; }
.bunn-firma > span + span::before { content: "· "; }
.bunn-lenker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.bunn-lenker a { color: var(--ink); }
/* LinkedIn og TikTok: merkene er 24 px, men trykkflaten er 44 px. */
.bunn-sosial { display: flex; gap: 0; margin: 12px 0 0 -10px; }
.bunn-sosial a { display: block; padding: 10px; line-height: 0; border-radius: 12px; color: #000; transition: opacity .15s; }
.bunn-sosial a:hover { color: #000; opacity: .8; }
.bunn .kolonner a:hover, .bunn-lenker a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 1000px) {
  .bunn { min-height: 0; }
  .bunn-innhold { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 900px) {
  .bunn { border-radius: 32px 32px 0 0; padding: 56px 20px 36px; margin-top: 48px; }
}
@media (max-width: 720px) {
  .bunn .kolonner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .bunn .kolonner nav, .bunn .kolonner b { font-size: 15px; }
  .bunn-juridisk { margin-top: 48px; flex-direction: column-reverse; align-items: flex-start; }
  .bunn-firma { flex-direction: column; }
  .bunn-firma > span + span::before { content: none; }
}

/* Lasting */
.laster { height: 92px; border-radius: 22px; background: linear-gradient(90deg, #f1f2f5 25%, #f7f8fa 50%, #f1f2f5 75%); background-size: 200% 100%; animation: laster 1.2s infinite; }
@keyframes laster { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .laster { animation: none; } }

/* For bedrifter (skisse E1): her starter bedriftene å publisere. */
.topp-publiser { height: 44px; padding: 0 20px; margin-left: 6px; }
@media (max-width: 760px) { .topp-publiser { display: none; } }
.bedrifter h2 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.bedrifter .b-midt { text-align: center; }
.b-under { margin: 10px 0 32px; font-size: 16px; color: var(--muted); max-width: 560px; }
.b-midt .b-under, .b-under.b-midt { margin-left: auto; margin-right: auto; }
.b-liten { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.b-ikon { width: 44px; height: 44px; border-radius: 13px; background: var(--hero); color: var(--accent); display: grid; place-items: center; flex: none; }
.b-ikon.stor { width: 52px; height: 52px; border-radius: 16px; }
.b-ikon.hvit { background: #fff; }
.b-seksjon { margin-top: 112px; }
/* Bredere enn resten av nettsiden, med mindre luft mot kantene. Boksene står kant i kant med innholdet. */
.bedrifter .wrap { max-width: 1320px; }

.b-helt { margin: 0 16px; border-radius: 32px; background: var(--hero); padding: 64px max(40px, calc((100% - 1280px) / 2)); display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; min-height: 560px; }
/* Den hvite boksen med telefonen fyller høyre del av toppen, med litt luft mot kanten. */
.b-helt { padding-top: 16px; padding-right: 16px; padding-bottom: 16px; align-items: stretch; }
.b-helt > div:first-child { align-self: center; padding: 48px 0; }
.b-etikett { display: inline-flex; height: 30px; padding: 0 14px; border-radius: 15px; background: #fff; color: var(--accent); font-size: 13.5px; font-weight: 600; align-items: center; }
.b-helt h1 { margin: 14px 0 0; font-family: var(--display); font-size: clamp(36px, 5vw, 58px); line-height: 1.02; font-weight: 900; letter-spacing: -.025em; text-wrap: balance; }
.b-helt p:not(.b-liten):not(.b-feil) { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: #4a4d57; max-width: 480px; }
.b-knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.b-knapper .knapp { height: 56px; padding: 0 28px; font-size: 16px; }
#b-sok-forslag { left: 0; right: auto; width: 100%; max-height: min(70vh, 520px); overflow: auto; }
#b-sok-forslag li[role="option"] { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; padding: 8px 14px; align-items: center; }
#b-sok-forslag li[role="option"] > :first-child { grid-column: 1; grid-row: 1 / span 2; }
#b-sok-forslag li[role="option"] > svg { width: 44px; height: 44px; padding: 12px; border-radius: 13px; background: var(--hero); color: var(--accent); }
#b-sok-forslag li b { font-size: 15px; align-self: end; }
#b-sok-forslag li > span:not(.logo) { font-size: 13px; color: var(--muted); align-self: start; grid-column: 2; }
#b-sok-forslag li em { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
#b-sok-forslag li em.lenke { color: var(--accent); font-weight: 600; font-size: 13.5px; }
#b-sok-forslag .logo { width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; }
#b-sok-forslag .logo img { width: 100%; height: 100%; object-fit: contain; }
.b-knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.snart-merke { margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-knapper .knapp, .b-cta { height: 54px; padding: 0 28px; font-size: 16px; }
.b-bilde { position: relative; min-height: 528px; }
.b-telefon { position: absolute; inset: 0; border-radius: 24px; background: #fff; overflow: hidden; display: flex; justify-content: center; padding-top: 72px; }
.b-telefon img { width: 280px; height: auto; align-self: flex-start; }
.b-flytkort { position: absolute; left: -24px; bottom: 40px; background: #fff; border-radius: 20px; padding: 14px 18px; box-shadow: 0 14px 34px rgba(14, 18, 54, .14); display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); }
.b-flytkort b { display: block; font-size: 15px; color: var(--ink); }

.b-logoer { margin-top: 56px; }
.b-logoer > p { text-align: center; font-size: 15px; color: var(--muted); margin: 0 0 18px; }
.b-logorad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.b-logoflis { height: 72px; border-radius: 18px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; }
.b-logoflis img { max-width: 80%; max-height: 46px; object-fit: contain; }

.b-intro { margin-top: 112px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.b-intro h2 { font-size: 40px; line-height: 1.1; }
.b-intro p { margin: 0; font-size: 17px; line-height: 1.6; color: #4a4d57; }

.b-steg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.b-steg li { position: relative; border-radius: 28px; background: var(--hero); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
.b-steg .nr { position: absolute; top: 20px; right: 22px; font-family: var(--display); font-weight: 900; font-size: 40px; color: #d4e0fb; line-height: 1; }
.b-steg .b-ikon { background: #fff; }
.b-steg b, .b-fordeler b { font-size: 19px; margin-top: 8px; }
.b-steg li > span:last-child, .b-fordeler div > span:last-child { font-size: 15px; color: #4a4d57; line-height: 1.5; }

.b-fordeler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.b-fordeler > div { border-radius: 28px; border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 8px; }

.b-tall { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.b-tall > div { border-radius: 28px; background: var(--filter); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 160px; }
.b-tall > .stor { grid-row: span 3; background: var(--accent); color: #fff; }
.b-tall b { font-family: var(--display); font-size: 56px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.b-tall .stor b { font-size: 96px; }
.b-tall span { font-size: 15px; margin-top: 8px; opacity: .85; }

.b-synlig { margin: 112px 16px 0; border-radius: 32px; background: var(--hero); padding: 64px max(40px, calc((100% - 1280px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.b-synlig .b-under { margin-bottom: 28px; color: #4a4d57; }
.b-synlig ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.b-synlig li { display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--muted); }
.b-synlig li b { display: block; font-size: 16px; color: var(--ink); }
.b-kart { height: 380px; border-radius: 28px; overflow: hidden; background: #e8eef0 url(/img/kart-oslo.jpg) 50% 40% / 900px auto no-repeat; position: relative; }
.b-kartkort { position: absolute; left: 30%; top: 30%; max-width: calc(100% - 48px); background: #fff; border-radius: 18px; padding: 10px 16px 10px 10px; box-shadow: 0 10px 28px rgba(14, 18, 54, .2); display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--muted); }
.b-kartkort img { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; flex: none; }
.b-kartkort b { display: block; font-size: 14px; color: var(--ink); }

.b-stor { font-size: 40px !important; }
.b-sporsmal { max-width: 760px; margin: 112px auto 0; padding: 0 20px; }
.b-sporsmal h2 { margin-bottom: 24px; }
.b-sporsmal details { border-bottom: 1px solid var(--line); }
.b-sporsmal summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 0 4px; font-size: 17px; font-weight: 600; }
.b-sporsmal summary::-webkit-details-marker { display: none; }
.b-sporsmal summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--accent); }
.b-sporsmal details[open] summary::after { content: "–"; }
.b-sporsmal details p { margin: 0 4px 20px; font-size: 15.5px; line-height: 1.6; color: #4a4d57; }

@media (max-width: 900px) {
  .b-helt, .b-synlig { grid-template-columns: 1fr; padding: 40px 28px; min-height: 0; }
  .b-helt { padding: 12px 12px 12px; }
  .b-helt > div:first-child { padding: 28px 16px 0; }
  .b-bilde { min-height: 0; height: 420px; }
  .b-intro { grid-template-columns: 1fr; gap: 16px; }
  .b-steg { grid-template-columns: repeat(2, 1fr); }
  .b-logorad { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .b-helt, .b-synlig { margin: 0 10px; border-radius: 28px; padding: 28px 18px; gap: 28px; }
  .b-helt { padding: 10px; }
  .b-helt > div:first-child { padding: 18px 8px 0; }
  .b-synlig { margin-top: 76px; }
  .b-helt h1 { font-size: 36px; }
  .b-helt p:not(.b-liten):not(.b-feil) { font-size: 16px; }
  .b-knapper .knapp { flex: 1 1 100%; }
  .b-bilde { height: 340px; }
  .b-flytkort { left: 12px; right: 12px; bottom: 16px; }
  .b-telefon img { width: 200px; }
  .bedrifter h2, .b-intro h2, .b-stor { font-size: 28px !important; }
  .b-seksjon, .b-intro { margin-top: 76px; }
  .b-logorad { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .b-logoflis { height: 60px; border-radius: 16px; }
  .b-steg, .b-fordeler, .b-tall { grid-template-columns: 1fr; }
  .b-steg li { min-height: 0; }
  .b-tall > .stor { grid-row: auto; }
  .b-tall > div { min-height: 0; padding: 24px; }
  .b-tall .stor b { font-size: 72px; }
  .b-tall b { font-size: 44px; }
  .b-kart { height: 300px; background-size: 700px auto; }
  .b-kartkort { left: 16px; top: 24%; }
  .b-sporsmal { margin-top: 76px; }
}
#b-sok-forslag .logo .forbokstav { font-size: 15px; }

/* Ta over bedriftsprofilen (skisse O2–O7): bedriften og stegene til venstre, ett steg om gangen til høyre. */
.to-panel { padding: 48px 56px 40px; }
.to-etikett { font-size: 14px; font-weight: 600; color: var(--accent); }
.to-bedrift { margin-top: 14px; display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 24px; padding: 16px 18px; width: 100%; max-width: 460px; }
.to-bedrift .logo { width: 56px; height: 56px; border-radius: 16px; }
.to-bedrift .logo .forbokstav { font-size: 18px; }
.to-bedrift b { display: block; font-size: 16px; }
.to-bedrift span span { font-size: 13.5px; color: var(--muted); }
.to-steg { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.to-steg li { display: flex; gap: 14px; align-items: center; font-size: 15.5px; font-weight: 500; color: #8a8d96; min-height: 50px; }
.to-steg .nr { width: 32px; height: 32px; border-radius: 16px; border: 1.5px solid #c9d3ea; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; background: var(--hero); }
.to-steg small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.to-steg li.ferdig { color: var(--ink); }
.to-steg li.ferdig .nr { background: var(--accent); border-color: var(--accent); color: #fff; }
.to-steg li.na { color: var(--ink); font-weight: 700; }
.to-steg li.na .nr { background: #fff; border: 2px solid var(--accent); color: var(--accent); }
.to-trygt { margin: auto 0 0; padding-top: 24px; display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #4a4d57; }
.to-trygt span { width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--accent); display: grid; place-items: center; flex: none; }
.ta-over .inn-skjema h1.to-lang { font-size: 30px; line-height: 1.12; text-wrap: balance; }
.to-logo { width: 72px !important; height: 72px !important; border-radius: 20px !important; margin-bottom: 18px; }
.to-ikon { width: 56px; height: 56px; border-radius: 18px; background: var(--hero); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.to-ikon.gul { background: #fff4e0; color: #a35b00; }
.to-fakta { margin: 0 0 22px; padding: 4px 20px; border: 1px solid var(--line); border-radius: 24px; }
.to-fakta div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.to-fakta div:last-child { border-bottom: 0; }
.to-fakta dt { font-weight: 600; flex: none; }
.to-fakta dd { margin: 0; color: var(--muted); text-align: right; }
.to-lenkeknapp { width: 100%; height: 48px; margin-top: 6px; background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; }
.to-lenkeknapp:hover { color: var(--ink); }
.to-tilbake { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; width: auto !important; margin: 0 0 14px -4px; background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; font-size: 14px; }
.to-midt { text-align: center; margin-top: 16px; }
.to-epost { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px 4px; font-size: 15px; }
.to-merke { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 600; background: #f1f2f5; color: var(--muted); }
.to-merke.gronn { background: #e7f6ec; color: #127a3d; }
.to-hint { margin: 8px 4px 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.to-hint.ok { color: #127a3d; display: flex; gap: 6px; align-items: center; }
.to-hint.feil { color: var(--rod); }
.inn-skjema label.to-sjekk { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; font-size: 14px; font-weight: 400; color: #3c3e45; line-height: 1.45; cursor: pointer; }
.to-sjekk input { width: 22px !important; height: 22px !important; flex: none; margin: 0; accent-color: var(--accent); }
.to-knapper { display: flex; gap: 12px; margin-top: 22px; }
.to-knapper .knapp { height: 54px; font-size: 16px; margin: 0 !important; }
.to-knapper .knapp.strek { padding: 0 20px; gap: 4px; }
.to-knapper .knapp.bla { flex: 1; }
.to-knapper .to-lenkeknapp { width: auto; padding: 0 16px; }
.to-avvist { margin: -8px 0 18px; padding: 12px 16px; border-radius: 18px; background: #fdecea; color: #a1281a; font-size: 14px; }
.to-boks { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 24px; font-size: 14px; color: var(--muted); }
.to-boks b { font-size: 15px; color: var(--ink); }
.to-boks .lenke { margin-top: 6px; }
.to-fremdrift, .to-stegnr { display: none; }
@media (max-width: 1000px) {
  .to-fremdrift { display: flex; gap: 5px; margin-bottom: 10px; }
  .to-fremdrift span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
  .to-fremdrift span.pa { background: var(--accent); }
  .to-stegnr { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--accent); }
  .ta-over .inn-skjema { justify-content: flex-start; }
  .ta-over .inn-skjema h1.to-lang { font-size: 26px; }
}

/* Profilen er din (skisse O9): menyen til dashboardet til venstre, det man bør gjøre først til høyre. */
.bedriftside { display: flex; gap: 40px; align-items: flex-start; padding-top: 24px; max-width: 1320px; }
.bs-meny { width: 250px; flex: none; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
.bs-bedrift { display: flex; gap: 12px; align-items: center; background: var(--filter); border-radius: 20px; padding: 10px 12px; margin-bottom: 14px; }
.bs-bedrift .logo { width: 44px; height: 44px; border-radius: 13px; }
.bs-bedrift .logo .forbokstav { font-size: 15px; }
.bs-bedrift b { display: block; font-size: 14.5px; line-height: 1.25; }
.bs-bedrift span span { font-size: 13px; color: var(--muted); }
.bs-meny nav { display: flex; flex-direction: column; gap: 2px; }
.bs-meny nav a { display: flex; gap: 12px; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 23px; font-size: 15px; font-weight: 500; color: #3c3e45; }
.bs-meny nav a:hover { background: #f1f2f5; }
.bs-meny nav a[aria-current="page"] { background: var(--hero); color: var(--accent); font-weight: 600; }
.bs-bytt { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 600; padding: 0 4px; }
.bs-bytt select { height: 44px; border-radius: 22px; border: 1.5px solid var(--line-2); padding: 0 14px; font-size: 14px; background: #fff; }
.bs-innhold { flex: 1; min-width: 0; }
.bs-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.bs-topp h1 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.bs-topp p { margin: 6px 0 0; font-size: 15.5px; color: var(--muted); }
.bs-topp .knapp { height: 50px; padding: 0 22px; font-size: 15px; }
.bs-ok { display: flex; gap: 14px; align-items: center; margin-top: 22px; border-radius: 28px; background: var(--hero); padding: 18px 22px; }
.bs-ok > span { width: 44px; height: 44px; border-radius: 13px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.bs-ok p { margin: 0; font-size: 15px; }
.bs-rutenett { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.bs-boks { border: 1px solid var(--line); border-radius: 24px; padding: 22px 24px; background: #fff; }
.bs-boks > b { font-size: 15px; }
.bs-boks p { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.bs-oppgaver { padding: 6px 24px; }
.bs-oppg { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bs-oppg:last-child { border-bottom: 0; }
.bs-oppg > span:nth-child(2) { flex: 1; min-width: 0; }
.bs-oppg b { display: block; font-size: 15px; }
.bs-oppg span span { font-size: 13.5px; color: var(--muted); }
.bs-oppg .knapp { height: 40px; padding: 0 18px; font-size: 14px; flex: none; }
.bs-ikon { width: 44px; height: 44px; border-radius: 13px; background: var(--hero); color: var(--accent); display: grid; place-items: center; flex: none; }
.bs-side { display: flex; flex-direction: column; gap: 16px; }
.bs-tall { background: var(--accent); border: 0; color: #fff; display: flex; flex-direction: column; }
.bs-tall b { font-family: var(--display); font-size: 52px; font-weight: 900; line-height: 1; }
.bs-tall span { margin-top: 6px; font-size: 14.5px; opacity: .9; }
.bs-tall a { margin-top: 14px; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bs-merk { margin: 18px 4px 0; font-size: 13px; color: var(--muted); }
.bs-tom { max-width: 520px; margin: 64px auto; text-align: center; }
.bs-tom h1 { font-family: var(--display); font-size: 32px; font-weight: 900; margin: 0; }
.bs-tom p { color: var(--muted); font-size: 15.5px; margin: 10px 0 24px; }
@media (max-width: 900px) {
  .bedriftside { flex-direction: column; gap: 20px; }
  .bs-meny { width: 100%; position: static; }
  .bs-meny nav { flex-direction: row; overflow-x: auto; gap: 6px; }
  .bs-meny nav a { flex: none; border: 1.5px solid var(--line-2); min-height: 40px; }
  .bs-topp { flex-direction: column; }
  .bs-topp .knapp { width: 100%; }
  .bs-rutenett { grid-template-columns: 1fr; }
  .bs-oppg { flex-wrap: wrap; }
  .bs-oppg > span:nth-child(2) { flex-basis: calc(100% - 58px); }
  .bs-oppg .knapp { margin-left: 58px; }
}

/* 404 (skisse N1) og «Stillingen er ikke ledig lenger» (skisse N5) */
.ikke-funnet { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 80px 40px; }
.ikke-funnet h1 { margin: 22px 0 0; font-family: var(--display); font-size: clamp(30px, 4.5vw, 44px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.ikke-funnet > p { margin: 12px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.55; color: #4a4d57; }
.ikke-funnet-knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.ikke-funnet-knapper .knapp { height: 54px; padding: 0 26px; font-size: 16px; }
.ikke-funnet small { margin-top: 22px; font-size: 13.5px; color: #8a8d96; }
.borte { grid-column: 1 / -1; }
.borte-boks { display: flex; gap: 28px; align-items: center; border-radius: 32px; background: var(--hero); padding: 32px 36px; }
.borte-ikon { width: 72px; height: 72px; border-radius: 22px; background: #fff; color: var(--accent); display: grid; place-items: center; flex: none; }
.borte-boks h1 { margin: 0; font-size: 30px; }
.borte-boks p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: #4a4d57; }
.borte-boks .knapp { flex: none; height: 50px; padding: 0 22px; font-size: 15px; }
.borte-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 40px; }
.borte-topp h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.borte-topp a { font-weight: 600; color: var(--accent); }
.borte .to { margin-top: 16px; }
@media (max-width: 720px) {
  .ikke-funnet { padding-top: 48px; }
  .ikke-funnet .kart-tegning { width: 170px; height: 132px; }
  .ikke-funnet-knapper { flex-direction: column; width: 100%; }
  .ikke-funnet-knapper .knapp { width: 100%; }
  .borte-boks { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; border-radius: 26px; }
  .borte-ikon { width: 56px; height: 56px; border-radius: 18px; }
  .borte-boks h1 { font-size: 24px; }
  .borte-boks .knapp { width: 100%; }
  .borte-topp { flex-direction: column; gap: 4px; }
}

/* Følg-knappen: blå eller strek før, lys blå med hake når man følger. */
[data-folg][aria-pressed="true"] { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent-soft) !important; }
[data-folg] .folg-hake, [data-folg][aria-pressed="true"] .folg-pluss { display: none; }
[data-folg][aria-pressed="true"] .folg-hake { display: block; }

/* Bedriftssiden (skisse M1) */
.arbeidsgiver-side { padding-top: 18px; }
.ab-topp { margin-top: 16px; border-radius: 32px; background: var(--hero); padding: 30px 32px; display: flex; gap: 24px; align-items: center; }
.ab-topp .ab-logo { width: 104px; height: 104px; border-radius: 26px; }
.ab-navn { flex: 1; min-width: 0; }
.ab-navn h1 { margin: 0; font-family: var(--display); font-size: clamp(28px, 4vw, 38px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.ab-navn p { margin: 8px 0 0; font-size: 15.5px; color: var(--muted); }
.ab-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.ab-knapper .knapp { height: 48px; padding: 0 22px; font-size: 15px; }
.ab-oppsett { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; margin-top: 28px; align-items: start; }
.ab-hode { display: flex; justify-content: space-between; align-items: baseline; }
.ab-hode h2 { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.ab-hode span { font-size: 14px; color: var(--muted); }
.ab-byer { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.ab-by { height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.ab-by[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* «21 andre steder»: egen pil 14 px fra kanten, som sorteringen (.velger), i stedet for nettleserens pil helt ute. */
select.ab-by { appearance: none; -webkit-appearance: none; padding: 0 38px 0 16px; color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314151a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat; }
select.ab-by[aria-pressed="true"] { color: #fff;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat; }
.ab-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px; }
.ab-boks { border: 1px solid var(--line); border-radius: 24px; padding: 22px 24px; background: #fff; margin: 0; }
.ab-boks h3 { margin: 0; font-size: 17px; }
.ab-boks p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: #4a4d57; }
.ab-fordeler { margin: 12px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; }
.ab-fakta { display: grid; grid-template-columns: 96px 1fr; row-gap: 10px; font-size: 14px; }
.ab-fakta dt { color: var(--muted); }
.ab-fakta dd { margin: 0; font-weight: 600; }
@media (max-width: 900px) {
  .ab-topp { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 16px; border-radius: 26px; }
  .ab-topp .ab-logo { width: 80px; height: 80px; border-radius: 22px; }
  .ab-knapper { width: 100%; }
  .ab-knapper .knapp { flex: 1; }
  .ab-oppsett { grid-template-columns: minmax(0, 1fr); }
  .ab-side { position: static; order: -1; }
  .ab-byer { flex-wrap: nowrap; overflow-x: auto; margin-right: -20px; padding-right: 20px; scrollbar-width: none; }
  .ab-by { flex: none; }
}

/* Vinduer (Fikk du søkt?, Om sortering, Rapporter, Søk direkte): i midten på PC, ark nedenfra på mobil. */
.vindu { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 0; background: #fff; }
.vindu-innhold { padding: 30px 32px 28px; display: flex; flex-direction: column; }
.vindu-lukk { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 20px; background: #f1f2f5; display: grid; place-items: center; cursor: pointer; z-index: 1; }
.vindu h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 900; letter-spacing: -.02em; padding-right: 40px; }
.vindu .vindu-under { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.vindu .knapp { height: 52px; font-size: 16px; }
.vindu .knapp.full { width: 100%; }
.vindu .ikonrute { width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; }
.vindu label.etikett { font-size: 13px; font-weight: 600; margin: 14px 0 6px 4px; display: block; }
.vindu input[type="text"], .vindu input[type="email"], .vindu input[type="tel"], .vindu select { height: 50px; border: 1.5px solid var(--line-2); border-radius: 25px; padding: 0 18px; font-size: 16px; width: 100%; background: #fff; }
.vindu textarea { min-height: 96px; border: 1.5px solid var(--line-2); border-radius: 20px; padding: 14px 18px; font: inherit; font-size: 15.5px; width: 100%; resize: vertical; }
.vindu input:focus, .vindu textarea:focus, .vindu select:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(23,102,255,.18); }
.vindu .valg { display: flex; gap: 12px; align-items: center; min-height: 50px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 18px; font-size: 15px; margin-top: 8px; cursor: pointer; }
.vindu .valg:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.vindu .valg input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.vindu .valg small { display: block; font-size: 12.5px; color: var(--muted); }
.vindu .feil { margin: 12px 4px 0; color: var(--rod); font-size: 13.5px; font-weight: 500; }
.vindu .liten { margin: 12px 4px 0; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 720px) {
  .vindu { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 28px 28px 0 0; max-height: 92dvh; }
  .vindu-innhold { padding: 26px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* Stillingen (skisse M2): «Følg bedrift» ved bedriften, og «Du søkte» som grønt merke. */
.arbeidsgiver a { color: inherit; }
@media (max-width: 720px) {
  .arbeidsgiver { flex-wrap: wrap; gap: 12px 14px; }
  .arbeidsgiver > span:not(.logo) { flex: 1 1 0; min-width: 0; }
  .arbeidsgiver .knapp { width: 100%; }
}
.arbeidsgiver a:hover b { color: var(--accent); }
.folg-liten { height: 38px; padding: 0 14px; font-size: 13.5px; gap: 6px; margin-left: auto; }
.merke.sokt { background: #e7f6ec; color: #127a3d; display: inline-flex; align-items: center; gap: 5px; }
.vindu .meta { font-size: 13px; color: var(--muted); }
.merke[hidden] { display: none; }
/* Vinduene arver .dialog: valgknapper og filfelt skal ikke bli fulle felt. */
.dialog.vindu .valg input[type="radio"], .dialog.vindu .valg input[type="checkbox"] { width: 20px; height: 20px; padding: 0; border-radius: 50%; flex: none; }
.dialog.vindu .valg input[type="file"] { height: auto; border: 0; padding: 0; border-radius: 0; font-size: 14px; }

/* Mine jobber › Søkt og Følger (skisse M4) */
.sokt-rad { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; position: relative; z-index: 1; }
.sokt-rad .merke { height: 28px; padding: 0 10px; font-size: 12.5px; }
.sokt-rad .lenke { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13.5px; }
.folger-rad { align-items: center; }
.folger-lenke { display: flex; gap: 14px; align-items: center; flex: 1; min-width: 0; }
.folger-lenke .logo { width: 56px; height: 56px; border-radius: 16px; order: 0; }
.folger-lenke b { display: block; font-size: 15.5px; }
.folger-lenke span span { font-size: 13.5px; color: var(--muted); }
.folger-lenke:hover b { color: var(--accent); }
.folger-rad .folg-liten { margin-left: 0; }

/* Varsler (skisse M8) */
.varsler-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ulest-tall { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; }
.varsel-boks { border: 1px solid var(--line); border-radius: 24px; padding: 4px 22px; background: #fff; }
.melding-rad, .sok-rad { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.melding-rad:last-child, .sok-rad:last-child { border-bottom: 0; }
.melding-ikon { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.melding-rad > div { flex: 1; min-width: 0; }
.melding-rad b { font-size: 15.5px; }
.melding-rad p { margin: 3px 0 4px; font-size: 14px; line-height: 1.5; color: #4a4d57; }
.melding-rad > div > span { font-size: 12.5px; color: var(--muted); }
.ulest-prikk { width: 10px; height: 10px; border-radius: 5px; background: var(--accent); margin-top: 6px; flex: none; }
.sok-rad { align-items: center; }
.sok-lenke { flex: 1; min-width: 0; }
.sok-lenke b { display: block; font-size: 15.5px; color: var(--accent); }
.sok-lenke span { font-size: 13.5px; color: var(--muted); }
.sok-rad > .lenke { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; }
.varsel-bryter { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.bryter-input { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; margin: 0; flex: none; border-radius: 16px; cursor: pointer;
  background: radial-gradient(circle at 15.5px 50%, #fff 12.5px, transparent 13px), #d6dbea; transition: background .2s; }
.bryter-input:checked { background: radial-gradient(circle at calc(100% - 15.5px) 50%, #fff 12.5px, transparent 13px), var(--accent); }
@media (prefers-reduced-motion: reduce) { .bryter-input { transition: none; } }

/* Profil (skisse M9) */
.profil-topp { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profil-topp h1 { margin: 0; }
.profil-topp span:not(.profil-bilde) { font-size: 14.5px; color: var(--muted); }
.profil-topp .knapp { height: 40px; margin-left: auto; }
.profil-bilde { width: 72px; height: 72px; border-radius: 36px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; flex: none; }
.profil-gruppe { margin: 26px 4px 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.profil-boks { border: 1px solid var(--line); border-radius: 24px; background: #fff; overflow: hidden; }
.profil-rad { display: flex; gap: 14px; align-items: center; width: 100%; min-height: 60px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.profil-rad:last-child { border-bottom: 0; }
.profil-rad:hover { background: var(--filter); }
.profil-rad > span { flex: 1; min-width: 0; }
.profil-rad b { display: block; font-size: 15px; font-weight: 600; }
.profil-rad small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.profil-rad.rod b { color: var(--rod); }
.slett-knapp { background: var(--rod); color: #fff; }
.stjerner { display: flex; gap: 6px; margin-top: 10px; }
.stjerner label { cursor: pointer; }
.stjerner input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stjerner span { font-size: 34px; line-height: 1; color: #d6dbea; }
.stjerner label:has(~ label input:checked) span, .stjerner label:has(input:checked) span { color: #f5a623; }
.stjerner input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 720px) {
  .sok-rad { flex-wrap: wrap; }
  .profil-topp .knapp { margin-left: 0; width: 100%; }
}

.sortering-info { display: flex; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: 20px; background: var(--hero); color: var(--accent); }
.sortering-info svg { flex: none; margin-top: 1px; }
.sortering-info p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.sortering-liste { margin: 8px 0 0; }
.sortering-liste dt { font-size: 15.5px; font-weight: 700; margin-top: 16px; }
.sortering-liste dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #4a4d57; }

/* «Om arbeidsgiveren» nederst i annonsen (skisse S4) */
.om-arbeidsgiver { display: flex; gap: 18px; align-items: center; margin-top: 32px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.om-arbeidsgiver[hidden] { display: none; }
.om-arbeidsgiver > .logo { width: 72px; height: 72px; border-radius: 18px; }
.om-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.om-etikett { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.om-tekst b { font-size: 18px; }
.om-tekst > span:last-child { font-size: 14px; color: var(--muted); }
.om-knapper { display: flex; flex-direction: column; gap: 8px; flex: none; }
.om-knapper .knapp { height: 44px; padding: 0 18px; font-size: 14.5px; }
@media (max-width: 720px) {
  .om-arbeidsgiver { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .om-arbeidsgiver > .logo { width: 56px; height: 56px; border-radius: 16px; }
  .om-knapper { width: 100%; }
  .om-knapper .knapp { width: 100%; }
}

/* Rapporter stillingen: egen, enkel side */
/* Kort skjema: siden fyller skjermen, så bunnen havner nederst og ikke rett under knappene. */
.rapport-side { max-width: 640px; padding-block: 56px 24px; margin-left: max(20px, calc((100% - 1100px) / 2)); min-height: calc(100dvh - 72px - 64px); }
.rapport-side h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 4vw, 40px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.rapport-under { margin: 10px 0 0; font-size: 17px; line-height: 1.5; }
.rapport-under span { color: var(--muted); }
.rapport-side form { display: flex; flex-direction: column; margin-top: 34px; max-width: 520px; }
.rapport-side label { font-size: 14px; font-weight: 600; margin: 0 0 8px 4px; }
.rapport-side label span { font-weight: 400; color: var(--muted); }
.rapport-side label + textarea { margin-bottom: 0; }
.rapport-velger { height: 52px; width: 100%; font-size: 15.5px; font-weight: 500; padding-left: 20px; border-radius: 26px; }
.rapport-hjelp { margin: 8px 4px 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.rapport-side label[for="kommentar"] { margin-top: 22px; }
.rapport-side textarea { min-height: 110px; border: 1.5px solid var(--line-2); border-radius: 22px; padding: 14px 20px; font: inherit; font-size: 15.5px; resize: vertical; }
.rapport-side textarea:focus, .rapport-velger:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(23,102,255,.18); }
.rapport-side .feil { margin: 12px 4px 0; color: var(--rod); font-size: 14px; font-weight: 500; }
.rapport-knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rapport-knapper .knapp { height: 50px; padding: 0 24px; font-size: 15.5px; }
.rapport-ok { width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 20px; }
@media (max-width: 720px) {
  .rapport-side { padding-top: 32px; margin-left: auto; }
  .rapport-knapper .knapp { flex: 1 1 100%; }
}

/* Kontakt oss (skisse KE1): én kolonne i midten, skjemaet i en lys grå boks */
.kontakt-side { max-width: 600px; padding-block: 48px 40px; min-height: calc(100dvh - 72px - 64px); text-align: center; }
.kontakt-side h1 { margin: 0; font-family: var(--display); font-size: clamp(32px, 4.5vw, 42px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; outline: 0; }
.kontakt-under { margin: 10px auto 0; font-size: 16.5px; line-height: 1.5; color: #4a4d57; max-width: 460px; }
.kontakt-skjema { display: flex; flex-direction: column; text-align: left; background: var(--filter); border-radius: 32px; padding: 28px 30px 22px; margin-top: 28px; }
.kontakt-skjema label { font-size: 14px; font-weight: 600; margin: 18px 0 8px 4px; }
.kontakt-skjema label:first-child { margin-top: 0; }
.kontakt-skjema input, .kontakt-skjema textarea { width: 100%; border: 1.5px solid var(--line-2); background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.kontakt-skjema input { height: 52px; border-radius: 18px; padding: 0 18px; }
.kontakt-skjema textarea { min-height: 140px; border-radius: 18px; padding: 14px 18px; resize: vertical; }
.kontakt-skjema input:focus, .kontakt-skjema textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(23,102,255,.18); }
.kontakt-skjema ::placeholder { color: #8a8d96; }
.kontakt-skjema .feil { margin: 12px 4px 0; color: var(--rod); font-size: 14px; font-weight: 500; }
.kontakt-skjema .knapp { height: 52px; font-size: 15.5px; margin-top: 22px; }
.kontakt-liten { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.kontakt-hjelp { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.kontakt-takk { padding-top: 56px; }
.kontakt-ok { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-grid; place-items: center; margin-bottom: 22px; }
.kontakt-knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.kontakt-knapper .knapp { height: 50px; padding: 0 24px; font-size: 15.5px; }
@media (max-width: 720px) {
  .kontakt-side { padding-top: 28px; }
  .kontakt-skjema { padding: 20px 16px 16px; border-radius: 24px; }
  .kontakt-knapper .knapp { flex: 1 1 100%; }
}

/* Om oss (skisse O1): lys blå boks øverst som på forsiden, årene som kort, familien og en mørkeblå boks til slutt */
.oss-topp { margin: 16px 16px 0; border-radius: 32px; background: var(--hero); padding: 84px 24px 92px; text-align: center; }
.oss-merke { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; background: #fff; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.oss h1, .oss h2 { margin: 0; font-family: var(--display); font-weight: 900; color: var(--ink); }
.oss h1 { margin-top: 18px; font-size: clamp(40px, 6vw, 60px); letter-spacing: -.025em; line-height: 1.02; }
.oss h2 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -.02em; line-height: 1.08; }
.oss-topp p { max-width: 720px; margin: 22px auto 0; font-size: 18px; line-height: 1.6; color: var(--text); }
.oss-innhold { max-width: 1100px; margin: 0 auto; padding: 112px 20px 0; display: grid; gap: 72px; }
.oss-innhold p { margin: 16px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--text); }
.oss-innhold h2 + p { margin-top: 22px; }
.oss-historie { grid-template-columns: minmax(0, 1fr) 440px; }
.oss-tid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.oss-tid li { display: flex; gap: 18px; align-items: center; padding: 18px 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); font-size: 14px; color: var(--muted); }
.oss-tid .aar { font-family: var(--display); font-size: 26px; font-weight: 900; color: var(--accent); min-width: 74px; }
.oss-tid b { display: block; font-size: 16px; color: var(--ink); }
.oss-tid .na { background: var(--accent); border-color: var(--accent); color: #fff; }
.oss-tid .na .aar, .oss-tid .na b { color: #fff; }
.oss-familie { grid-template-columns: 560px minmax(0, 1fr); align-items: center; padding-bottom: 120px; }
.oss-portretter { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.oss-portretter figure { margin: 0; }
.oss-portretter img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; display: block; background: #eef0f5; }
.oss-portretter figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.oss-portretter figcaption b { display: block; font-size: 16px; color: var(--ink); }
.oss-slutt { margin: 0; border-radius: 0; background: var(--navy); color: #fff; padding: 64px max(56px, calc((100% - 1100px) / 2 + 20px)); display: flex; align-items: center; gap: 40px; }
.oss-slutt p { margin: 0; flex: 1; font-family: var(--display); font-size: 32px; font-weight: 900; line-height: 1.2; }
@media (max-width: 960px) {
  .oss-historie, .oss-familie { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .oss-familie { padding-bottom: 88px; }
  .oss-portretter { max-width: 560px; }
}
@media (max-width: 720px) {
  .oss-topp { margin: 10px 10px 0; border-radius: 26px; padding: 44px 18px 48px; }
  .oss-topp p { font-size: 16px; }
  .oss-innhold { padding-top: 64px; }
  .oss-innhold p { font-size: 16px; }
  .oss-tid { gap: 8px; }
  .oss-tid li { padding: 14px 16px; border-radius: 20px; gap: 14px; }
  .oss-tid .aar { font-size: 21px; min-width: 56px; }
  .oss-portretter { gap: 12px; }
  .oss-portretter img { border-radius: 20px; }
  .oss-slutt { padding: 40px 20px; flex-direction: column; align-items: stretch; gap: 22px; }
  .oss-slutt p { font-size: 23px; }
}

/* Publiser stilling (/publiser): registreringen av bedrifter (skissene «Registrering av bedrifter»). Enkel topp, ett steg
   om gangen i en kolonne midt på skjermen, og en fast linje nederst med tilbake og neste. */
.flyt { height: 100dvh; min-height: 520px; display: flex; flex-direction: column; background: #fff; }
.flyt-topp { height: 72px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 32px; border-bottom: 1px solid var(--line); }
.flyt-topp .varemerke { margin-right: auto; }
.flyt-topp .varemerke img { height: 26px; display: block; }
.knapp.flyt-gra { background: #f1f2f5; color: var(--ink); font-size: 15px; }
.knapp.flyt-gra:hover { background: #e6e8ee; }
.flyt-innhold { flex: 1; overflow-y: auto; }
.flyt-kolonne { max-width: 720px; margin: 0 auto; padding: 56px 28px 48px; }
.flyt-h1 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.flyt-under { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--muted); }
.flyt-under b { color: var(--ink); }
.flyt .lenke { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.flyt-skjema { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.flyt-skjema .inn-eller { margin: 0; }
.flyt-rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.flyt-label { display: block; font-size: 15px; font-weight: 600; margin: 0 0 8px 4px; padding: 0; }
.flyt-felt { width: 100%; height: 54px; border: 1.5px solid var(--line-2); border-radius: 27px; padding: 0 20px; font-size: 16px; background: #fff; color: var(--ink); }
textarea.flyt-felt { height: auto; min-height: 130px; padding: 14px 20px; border-radius: 22px; resize: vertical; line-height: 1.5; }
.flyt-felt:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(23, 102, 255, .18); }
.flyt-felt.kode { max-width: 340px; letter-spacing: .4em; font-size: 22px; font-weight: 700; text-align: center; }
.flyt-sok { position: relative; }
.flyt-sok svg { position: absolute; left: 20px; top: 17px; color: var(--muted); pointer-events: none; }
.flyt-sok .flyt-felt { padding-left: 50px; }
.flyt-hint { margin: 8px 4px 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.flyt-feil { margin: 0 4px; color: var(--rod); font-size: 14px; font-weight: 500; }
.flyt-info { margin: 0 4px; color: var(--accent-ink); font-size: 14px; }
.flyt-kolonne > .flyt-feil { margin-top: 16px; }
.flyt-treffliste { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.flyt-treff { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.flyt-treff:last-child { border-bottom: 0; }
button.flyt-treff:hover { background: var(--filter); }
.flyt-treff[aria-pressed="true"] { background: var(--hero); }
.flyt-treff > span:first-child { flex: 1; min-width: 0; }
.flyt-treff b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.flyt-treff small { display: block; font-size: 13.5px; color: var(--muted); }
.flyt-treff .nr { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.flyt-treff .hake { width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.flyt-treff[aria-pressed="true"] .hake { background: var(--accent); }
.flyt-treff.stopp { cursor: default; }
.flyt-treff.stopp b { color: var(--muted); }
.flyt-stoppmerke { height: 22px; padding: 0 9px; border-radius: 11px; background: #fdecea; color: #a1281a; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.flyt-tomt { margin: 0; padding: 18px; color: var(--muted); font-size: 14.5px; }
.flyt-fakta { margin: 0; padding: 18px 22px; border-radius: 24px; background: var(--filter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.flyt-fakta dt { font-size: 13px; color: var(--muted); }
.flyt-fakta dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.flyt-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.flyt-valg { display: flex; flex-wrap: wrap; gap: 8px; }
.flyt-brikke { position: relative; }
.flyt-brikke input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flyt-brikke span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px; border: 1.5px solid var(--line-2); background: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.flyt-brikke input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.flyt-brikke input:focus-visible + span { box-shadow: 0 0 0 3px rgba(23, 102, 255, .35); }
.flyt-sjekk { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #3c3e45; line-height: 1.45; cursor: pointer; }
.flyt-sjekk input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent); }
.knapp.flyt-google { width: 100%; height: 54px; background: #fff; border: 1.5px solid var(--line-2); color: var(--ink); font-size: 16px; gap: 12px; }
.to-ikon.gronn { background: #e7f6ec; color: #127a3d; }
.to-ikon.rod { background: #fdecea; color: #a1281a; }
.flyt-bunn { flex: none; position: relative; border-top: 1px solid var(--line); height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 32px; }
.flyt-fremdrift { position: absolute; left: 0; top: -2px; height: 3px; width: 0; background: var(--accent); border-radius: 0 2px 2px 0; transition: width .3s; }
.flyt-tilbake { width: 52px; height: 52px; border-radius: 26px; border: 0; background: #f1f2f5; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.flyt-tilbake:hover { background: #e6e8ee; }
.knapp.flyt-neste { height: 54px; padding: 0 32px; font-size: 16px; }
.knapp.flyt-neste:disabled { opacity: .45; cursor: default; }
@media (max-width: 640px) {
  .flyt-rad, .flyt-fakta { grid-template-columns: 1fr; }
  .flyt-kolonne { padding: 32px 20px 40px; }
  .flyt-h1 { font-size: 28px; }
  .flyt-topp, .flyt-bunn { padding: 0 20px; }
  .flyt-topp .knapp.flyt-gra { padding: 0 16px; }
  .flyt-topp .flyt-hjelp { display: none; }
  .flyt-bunn { height: 76px; }
  .knapp.flyt-neste { padding: 0 24px; }
}

/* Bedriftsdashboardet (skissene DB1 og DB4): hvit sidemeny til venstre og innholdet til høyre. js/dashboard.js tegner alt. */
.dash { min-height: 100vh; min-height: 100dvh; display: flex; flex-wrap: wrap; align-items: flex-start; background: #fff; }
.dash > .laster { flex: 1; margin: 40px; }
.dash .skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dash-i { flex: none; }
.dash-meny { flex: 1 1 256px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 24px 16px; border-right: 1px solid var(--line); background: #fff; }
.dash-logo { display: block; margin: 4px 12px; }
.dash-logo img { height: 26px; display: block; }
.logo.dash-flis { width: 44px; height: 44px; border-radius: 11px; }
.logo.dash-flis .forbokstav { font-size: 15px; }
.dash-bedrift { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 18px; min-height: 64px; }
.dash-bedrift > div, .dash-bruker > div { min-width: 0; }
.dash-bedrift b, .dash-bruker b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dash-bedrift > div span, .dash-bruker div span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.dash-bytt select { width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; font-size: 14px; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav a, .dash-nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: none; font-size: 14.5px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
.dash-nav a:hover, .dash-nav button:hover { background: var(--soft); }
.dash-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.dash-nav a.laast { color: var(--muted); cursor: not-allowed; }
.dash-nav a.laast:hover { background: none; }
.dash-nav .dash-las, .dash-nav .dash-antall { margin-left: auto; }
.dash-las { display: inline-flex; color: var(--muted); }
.dash-antall { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.dash-meny-bunn { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.dash-bruker { display: flex; align-items: center; gap: 10px; padding: 12px 12px 0; border-top: 1px solid var(--line); }
.dash-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; }
.dash-avatar.stor { width: 48px; height: 48px; font-size: 15px; }
.dash-avatar.hvit { background: #fff; color: #8a4f00; }

.dash-innhold { flex: 999 1 560px; min-width: 0; padding: 40px 40px 56px; }
.dash-bredde { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.dash-hode { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.dash-hode > div { flex: 1 1 420px; min-width: 0; }
.dash-h1 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.dash-h2 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.dash-h3 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.dash-under { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.dash-liten { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.dash-lenke { color: var(--accent); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; white-space: nowrap; }
.knapp.dash-stor { height: 48px; padding: 0 24px; font-size: 15px; }
.dash .knapp[disabled] { background: #eef0f5; color: var(--muted); cursor: not-allowed; }
.dash-hode > .knapp { flex: none; }

.dash-to { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.dash-to.start { align-items: start; }
.dash-fire { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-del { display: flex; flex-direction: column; gap: 14px; }
.dash-smal { max-width: 560px; width: 100%; }
.dash-kort { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-kort-hode { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.dash-kort-topp { display: flex; align-items: center; gap: 12px; }
.dash-kort-topp > div { min-width: 0; }
.dash-bunnlinje { margin-top: auto; }

.dash-merke { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dash-hode > div > .dash-merke { margin-bottom: 12px; }
.dash-merke.gul { background: #fff4e0; color: #8a4f00; }
.dash-merke.gronn { background: #e7f6ec; color: #127a3d; }
.dash-merke.bla { background: var(--accent-soft); color: var(--accent-ink); }
.dash-merke.gra { background: #f1f2f5; color: #4d505c; }
.dash-ikon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none; background: var(--hero); color: var(--accent); }
.dash-ikon.liten { width: 40px; height: 40px; border-radius: 12px; }
.dash-ikon.gul { background: #fff4e0; color: #a35b00; }
.dash-ikon.rod { background: #ffecee; color: var(--rod); margin-bottom: 18px; }

.dash-steg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-steg li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; position: relative; color: var(--text); }
.dash-steg li:last-child { padding-bottom: 0; }
.dash-steg li:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 34px; bottom: 2px; width: 1px; background: var(--line-2); }
.dash-steg .nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #f1f2f5; color: var(--muted); }
.dash-steg li.na .nr { background: var(--accent); color: #fff; }
.dash-steg p { margin: 0; padding-top: 4px; line-height: 1.5; }
.dash-steg li.na p { color: var(--ink); font-weight: 500; }
.dash-fakta { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.dash-fakta div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
.dash-fakta dt { color: var(--muted); }
.dash-fakta dd { margin: 0; font-weight: 500; }
.dash-laast { background: #fbfcfe; border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; min-width: 0; }
.dash-laast b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.dash-laast p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.dash-laast > .dash-las { position: absolute; top: 18px; right: 18px; }
.dash-sitat { margin: 0; background: var(--filter); border-radius: 18px; padding: 16px 18px; color: var(--ink); line-height: 1.5; white-space: pre-line; }
.dash-skjema { display: flex; flex-direction: column; gap: 14px; }

.dash-tall { padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-tall .navn { font-size: 13.5px; color: var(--muted); }
.dash-tall b { font-family: var(--display); font-size: 32px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-tall small { font-size: 13px; color: #127a3d; font-weight: 500; }
.dash-tall small.ned { color: var(--muted); }
.dash-tomt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.dash-ingen { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 16px; gap: 8px; }
.dash-ingen b { font-weight: 600; font-size: 15px; }
.dash-ingen .dash-ikon { margin-bottom: 6px; }
.dash-ingen .knapp { margin-top: 8px; }
.dash-kort.dash-ingen { padding: 40px 24px; }

/* Grafen: én serie, tynne stolper fra grunnlinjen, rolige hjelpelinjer og tall når man holder over en stolpe */
.dash-graf-tekst { margin-bottom: 14px; }
.dash-graf { display: flex; align-items: stretch; justify-content: space-between; gap: 2px; height: 160px; border-bottom: 1px solid var(--line-2); background: repeating-linear-gradient(to top, transparent 0, transparent 52px, #eef0f6 52px, #eef0f6 53px); }
.dash-stolpe { flex: 1 1 0; min-width: 0; max-width: 18px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.dash-stolpe i { display: block; width: 100%; max-width: 14px; background: var(--accent); border-radius: 4px 4px 0 0; }
.dash-stolpe:hover i { background: var(--accent-ink); }
.dash-stolpe:hover::after { content: attr(data-tips); position: absolute; bottom: calc(100% - 8px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 5px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.dash-akse { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 8px; }

.dash-liste { display: flex; flex-direction: column; }
.dash-rad { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.dash-rad:first-child { border-top: 0; padding-top: 0; }
.dash-rad:last-child { padding-bottom: 0; }
.dash-rad > div { min-width: 0; flex: 1 1 auto; }
.dash-rad b { font-weight: 600; font-size: 14px; display: block; line-height: 1.35; }
.dash-rad p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.dash-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.dash-tabell-boks { overflow-x: auto; }
.dash-tabell { width: 100%; border-collapse: collapse; font-size: 14px; }
.dash-tabell th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash-tabell td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dash-tabell tr:last-child td { border-bottom: 0; }
.dash-tabell th:first-child, .dash-tabell td:first-child { padding-left: 0; min-width: 260px; }
.dash-tabell th:last-child, .dash-tabell td:last-child { padding-right: 0; }
.dash-tabell .tittel { display: block; font-weight: 600; line-height: 1.35; }
.dash-tabell .meta { display: block; font-size: 13px; color: var(--muted); }
.dash-tabell .tall { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sidene i dashboardet (skissene DB10–DB17) */
.dash-kol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dash-tilbake { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.dash-status { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 24px; background: #fff8ec; border: 1px solid #f5e3c3; }
.dash-status > div:not(.dash-knapper) { flex: 1 1 320px; min-width: 0; }
.dash-status b { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.dash-status p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: #4d505c; }
.dash-knapper.utenmarg { margin-top: 0; }
.dash-sjekk { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dash-sjekk:first-child { border-top: 0; padding-top: 0; }
.dash-sjekk:last-child { padding-bottom: 0; }
.dash-sjekk > div { flex: 1 1 260px; min-width: 0; }
.dash-sjekk b { display: block; font-weight: 600; line-height: 1.35; }
.dash-sjekk p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.dash-verktoy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dash-faner { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-faner button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: none; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.dash-faner button:hover { background: var(--soft); }
.dash-faner button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.dash-faner small { font-size: 12.5px; font-weight: 500; color: inherit; opacity: .75; }
.dash-sok { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 22px; flex: 1 1 240px; max-width: 340px; color: var(--muted); background: #fff; }
.dash-sok input { border: 0; outline: 0; flex: 1 1 auto; min-width: 0; background: none; font-size: 14px; color: var(--ink); }
.dash-tabell a.tittel:hover { color: var(--accent); }
.dash-tabell tr.valgt td { background: var(--filter); border-bottom-color: transparent; }
.dash-tabell tr.valgt td:first-child { border-radius: 14px 0 0 14px; padding-left: 12px; }
.dash-tabell tr.valgt td:last-child { border-radius: 0 14px 14px 0; padding-right: 12px; }
.dash-valg { position: relative; display: inline-block; text-align: left; }
.dash-valg summary { list-style: none; width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.dash-valg summary::-webkit-details-marker { display: none; }
.dash-valg summary:hover, .dash-valg[open] summary { background: var(--soft); }
.dash-valg > div { position: absolute; right: 0; top: 46px; z-index: 5; min-width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--skygge); display: flex; flex-direction: column; }
.dash-valg > div a, .dash-valg > div button { display: flex; align-items: center; min-height: 40px; width: 100%; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; }
.dash-valg > div a:hover, .dash-valg > div button:hover { background: var(--soft); }
.dash-tabell-boks:has(.dash-valg[open]) { overflow: visible; }

.dash-felt-navn { display: block; margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 600; }
.dash-valgfri { font-weight: 400; color: var(--muted); }
.dash-rad-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-input { width: 100%; height: 48px; padding: 0 18px; border: 1.5px solid var(--line-2); border-radius: 24px; font-size: 15px; color: var(--ink); background: #fff; }
.dash-tekstfelt { display: block; width: 100%; min-height: 132px; padding: 14px 18px; border: 1.5px solid var(--line-2); border-radius: 20px; font: inherit; line-height: 1.5; color: var(--ink); background: #fff; resize: vertical; }
.dash-input:focus, .dash-tekstfelt:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23, 102, 255, .2); }
.dash-input[disabled], .dash-tekstfelt[disabled] { background: var(--soft); color: var(--muted); }
.dash-hint { display: block; margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.dash-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.dash-brikker { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-brikke { height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 22px; background: #fff; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.dash-brikke[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dash-brikke[disabled] { cursor: not-allowed; opacity: .6; }
.dash-skjema-bunn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.dash-adresse { position: relative; min-width: 0; }
.dash-forslag { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--skygge); display: flex; flex-direction: column; }
.dash-forslag button { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; }
.dash-forslag button:hover { background: var(--soft); }
.dash-forslag small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.logo.dash-flis.stor { width: 64px; height: 64px; border-radius: 15px; }
.logo.dash-flis.stor .forbokstav { font-size: 22px; }
.dash-jobb { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; min-width: 0; }
.dash-jobb > div { min-width: 0; }
.dash-jobb small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.dash-jobb b { display: block; margin: 2px 0 6px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--accent); overflow-wrap: anywhere; }
.dash-merknad { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--hero); font-size: 14px; line-height: 1.45; color: var(--text); }
.dash-merknad svg { color: var(--accent); margin-top: 1px; }
.dash-merknad b { display: block; font-weight: 600; color: var(--ink); }
.forhandsvisning header.topp, .forhandsvisning footer.bunn { display: none; }
.forhandsvisning body { pointer-events: none; }
.dash-sudo { align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; background: #fff4e0; }

.dash-person { display: flex; align-items: center; gap: 12px; }
.dash-person > div { min-width: 0; }
.dash-person b { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.dash-person span:not(.dash-avatar) { display: block; font-size: 13.5px; color: var(--muted); }
.dash-svar { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.dash-svar dt { font-size: 13px; color: var(--muted); }
.dash-svar dd { margin: 1px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.dash-fil { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 16px; font-size: 14px; font-weight: 500; }
.dash-fil span { min-width: 0; overflow-wrap: anywhere; }
.dash-fil .dash-lenke { margin-left: auto; }
button.dash-lenke { border: 0; background: none; padding: 0; cursor: pointer; }

.dash-omslag { display: grid; place-items: center; height: 132px; border: 1.5px dashed #bcd0fb; border-radius: 18px; background: var(--hero) center / cover no-repeat; font-size: 14px; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.dash-omslag > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 16px; background: rgba(255, 255, 255, .85); }
.dash-logovalg { display: flex; align-items: center; gap: 14px; }
.dash-logovalg .knapp { cursor: pointer; }
.dash-arbeidsgiver { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.dash-arbeidsgiver .topp { height: 92px; background: var(--hero) center / cover no-repeat; }
.dash-arbeidsgiver .inni { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.dash-arbeidsgiver .logo { margin-top: -32px; position: relative; z-index: 1; }
.dash-arbeidsgiver h3 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.dash-arbeidsgiver p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.dash-arbeidsgiver p.dash-liten { font-size: 13.5px; color: var(--muted); }

.dash-periode { flex: none; }
.dash-velg { height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 22px; font-size: 14px; font-weight: 500; color: var(--ink); background: #fff; }
.dash-fanelinje { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 24px; background: var(--soft); }
.dash-fanelinje button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: none; font-size: 13.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.dash-fanelinje button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(14, 18, 54, .1); }
.dash-stolper { display: flex; flex-direction: column; gap: 12px; }
.dash-stolperad { display: grid; grid-template-columns: 84px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; }
.dash-stolperad .spor { display: block; height: 8px; border-radius: 4px; background: #eef0f6; }
.dash-stolperad .spor i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.dash-stolperad .tall { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.dash-inviter { display: grid; gap: 14px 16px; grid-template-columns: minmax(0, 1fr) 180px auto; align-items: end; }
.dash-inviter .flyt-feil { grid-column: 1 / -1; }
.dash-roller { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.dash-roller div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.dash-roller dt { font-weight: 600; }
.dash-roller dd { margin: 0; color: var(--muted); line-height: 1.45; }

@media (max-width: 960px) {
  .dash-to { grid-template-columns: minmax(0, 1fr); }
  .dash-fire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-rad-2, .dash-inviter { grid-template-columns: minmax(0, 1fr); }
}
/* Under denne bredden står menyen over innholdet: hovedmenyen blir en rad man kan sveipe. */
@media (max-width: 816px) {
  .dash-meny { flex-basis: 100%; position: static; height: auto; overflow: visible; min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; gap: 12px; }
  .dash-logo { margin: 0 0 4px; }
  .dash-hovednav { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .dash-hovednav a { width: auto; flex: none; white-space: nowrap; gap: 8px; }
  .dash-hovednav .dash-las, .dash-hovednav .dash-antall { margin-left: 0; }
  .dash-meny-bunn { margin-top: 0; }
  .dash-meny-bunn .dash-nav { flex-direction: row; flex-wrap: wrap; gap: 2px; margin: 0 -8px; }
  .dash-meny-bunn .dash-nav a, .dash-meny-bunn .dash-nav button { width: auto; padding: 0 8px; gap: 8px; font-size: 14px; }
  .dash-bruker { display: none; }
  .dash-innhold { padding: 24px 16px 40px; }
  .dash-h1 { font-size: 28px; }
}
@media (max-width: 560px) {
  .dash-fire:not(.tallene) { grid-template-columns: minmax(0, 1fr); }
  .dash-fire.tallene { gap: 12px; }
  .dash-tall { padding: 16px; }
  .dash-tall b { font-size: 28px; }
  .dash-hode > .knapp { width: 100%; }
}

/* Mobil, for hele nettsiden */
.sok-feste { display: none; }
.merke.frist-mobil { display: none; }
@media (max-width: 900px) {
  /* Boksen ved siden av annonsen vises ikke på mobil. Fristen står blant merkene, og Søk, Lagre og Del ligger fast nederst. */
  .sideboks { display: none; }
  .forhandsvisning .sideboks { display: block; }
  .merke.frist-mobil { display: inline-flex; }
  .sok-feste { display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); }
  .sok-feste .knapp { flex: 1; min-width: 0; height: 50px; font-size: 16px; }
  .sok-ikon, .hjerte.sok-ikon { flex: none; width: 50px; height: 50px; margin: 0; border: 1.5px solid var(--line-2); border-radius: 25px; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
  .hjerte.sok-ikon[aria-pressed="true"] { color: var(--hjerte); }
  body.har-sok-feste { padding-bottom: 72px; }
  body.har-sok-feste .melding { bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 72px)); }
}
@media (max-width: 720px) {
  /* iPhone zoomer inn i felt med mindre skrift enn 16 px. Felt har ulike regler rundt om, derfor !important. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  /* Større trykkflater uten at noe flytter seg: polstring som tas igjen med negativ marg. */
  .topp .varemerke { padding-block: 12px; margin-block: -12px; }
  .sti a, .arbeidsgiver a, .arbeidssted .adresse, .annonse-bunn .lenke, .bunn-lenker a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .bytte a { display: inline-flex; align-items: center; min-height: 44px; }
  .folg-liten { min-height: 44px; }
  .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
  .bunn .kolonner nav { gap: 2px; }
  .bunn .kolonner b { margin-bottom: 6px; }
  .bunn .kolonner a { padding-block: 7px; }
  .inn-bedrift .snart-merke { display: block; width: fit-content; margin: 4px 0 2px; }
  .b-knapper { flex-direction: column; align-items: stretch; }
  .b-knapper .knapp { flex: none; width: 100%; padding-inline: 12px; }
  .knapp:has(.snart-merke) { flex-wrap: wrap; justify-content: center; height: auto; min-height: 54px; padding: 10px 14px; row-gap: 4px; white-space: normal; text-align: center; }
  .knapp .snart-merke { margin-left: 8px; }
}