* { box-sizing: border-box; margin: 0; padding: 0; }

/* Visuell retning (Fiken-inspirert, egen identitet): varm sandfarget grunn, hvite flater,
   én aksentfarge (dyp blå), serif i overskrifter (Fraunces), Inter i brødtekst,
   pill-knapper. Grønn/gul/rød er statusfarger (levert / venter / mangler), ikke pynt.
   Ingen emoji, ingen gradienter, ingen glass. Skriftene (Fraunces, Inter) er selvhostet i
   /fonts og faller tilbake til systemskrifter hvis de ikke er lastet. */
:root {
  --bg: #f7f4ec;
  --panel: #ffffff;
  --tekst: #17202a;
  --dempet: #5f6772;
  --kant: #e6e1d6;
  --kant-sterk: #cfc8b8;
  --primar: #1c4f7a;
  --primar-mork: #143d5f;
  --primar-lys: #e8eff6;
  --sand: #f3ede0;
  --mint: #d9efe3;
  --gronn: #1f6b45;
  --gronn-lys: #e6f3ea;
  --gul: #8a5a00;
  --gul-lys: #fbf1d6;
  --rod: #b3261e;
  --rod-lys: #fbe9e7;
  --radius: 12px;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--tekst);
  display: flex;
  min-height: 100vh;
}

/* Sidemeny: hvit, rolig, tydelig aktiv side */
aside {
  width: 224px;
  background: var(--panel);
  border-right: 1px solid var(--kant);
  padding: 22px 0 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.logo { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--primar); padding: 0 22px 18px; }
.logo span { font-family: var(--sans); color: var(--dempet); font-weight: 500; font-size: 12.5px; margin-left: 4px; letter-spacing: 0; }

aside nav { display: flex; flex-direction: column; overflow-y: auto; padding: 0 12px; }
.nav-gruppe { padding: 12px 12px 3px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); }
aside > nav a { color: var(--tekst); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; }
aside > nav a:hover { background: var(--bg); }
aside > nav a.aktiv { background: var(--primar-lys); color: var(--primar); font-weight: 600; }

main { flex: 1; padding: 32px 44px 60px; max-width: 1120px; min-width: 0; }

h1 { font-family: var(--serif); font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 18px; }
h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 36px 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }

.flash { background: var(--gronn-lys); border: 1px solid #c4e0cd; color: #185a36; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; }
.flash-feil { background: var(--rod-lys); border-color: #efc4bf; color: #8c1d16; }

/* Innlogging og registrering: sentrert kort på sandfarget grunn */
body.enkel { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.enkel-boks { width: 100%; max-width: 440px; padding: 24px; text-align: center; }
.enkel-boks h1 { font-size: 30px; margin-bottom: 18px; }
.enkel-boks form.panel, .enkel-boks .panel, .enkel-boks form { text-align: left; }
.enkel-boks form.panel, .enkel-boks .panel { padding: 28px; }
.enkel-boks .knapp { width: 100%; }
.logo-mork { font-family: var(--serif); color: var(--primar); font-size: 32px; font-weight: 700; letter-spacing: -.02em; padding: 0 0 8px; }
.logo-mork span { font-family: var(--sans); color: var(--dempet); font-weight: 500; font-size: 13px; }

/* Innlogget bruker nederst i sidemenyen */
.bruker-boks { margin-top: auto; position: sticky; bottom: 0; background: var(--panel); padding: 14px 22px; border-top: 1px solid var(--kant); font-size: 13px; }
.bruker-firma { font-weight: 600; margin-bottom: 2px; }
.bruker-epost { color: var(--dempet); margin-bottom: 8px; word-break: break-all; }
.abo-linje { display: block; color: var(--primar); font-size: 13px; margin-bottom: 8px; text-decoration: none; }
.abo-linje:hover { text-decoration: underline; }
.abo-linje.abo-utlopt { color: var(--rod); font-weight: 600; }

/* Nøkkeltallkort */
.kort-rad { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.kort { background: var(--panel); border: 1px solid var(--kant); border-radius: var(--radius); padding: 16px 18px; min-width: 160px; flex: 1; }
.kort .tall { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kort .etikett { color: var(--dempet); font-size: 13px; }
.kort.varsel .tall { color: var(--rod); }

table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--kant); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--kant); font-size: 14px; vertical-align: middle; }
th { background: var(--sand); color: var(--dempet); font-weight: 600; font-size: 12.5px; }
tr:last-child td { border-bottom: none; }
td.tall-h, th.tall-h { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #fbf9f4; }

a { color: var(--primar); }

/* Knapper: pill-form. Én fylt primærknapp per side, resten med ramme */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primar); color: #fff; border: 1.5px solid var(--primar);
  border-radius: 999px; padding: 0 18px; height: 38px;
  font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1;
  font-family: inherit; white-space: nowrap;
}
.knapp:hover { background: var(--primar-mork); border-color: var(--primar-mork); }
.knapp.vipps { background: #ff5b24; border-color: #ff5b24; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.knapp.vipps:hover { background: #e64f1c; border-color: #e64f1c; }
.eller { display: flex; align-items: center; gap: 12px; color: var(--dempet); font-size: 13px; margin: 14px 0; }
.eller::before, .eller::after { content: ""; flex: 1; height: 1px; background: var(--kant); }
.knapp.sekundar { background: var(--panel); color: var(--primar); border-color: var(--primar); }
.knapp.sekundar:hover { background: var(--primar-lys); }
.knapp.fare { background: var(--panel); color: var(--rod); border-color: var(--kant-sterk); }
.knapp.fare:hover { background: var(--rod-lys); border-color: #e7b3ae; }
.knapp.liten { height: 32px; padding: 0 14px; font-size: 13.5px; }

.verktoylinje { margin: 0 0 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

form.panel, .panel { background: var(--panel); border: 1px solid var(--kant); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px; }
.panel > strong:first-child, details.panel summary strong { font-size: 15px; font-weight: 600; }
details.panel summary { cursor: pointer; list-style: none; }
details.panel summary::-webkit-details-marker { display: none; }
details.panel summary::before { content: "\203A"; display: inline-block; width: 14px; color: var(--dempet); transition: transform .15s; }
details.panel[open] summary::before { transform: rotate(90deg); }

.felt { margin-bottom: 12px; }
.felt label { display: block; font-size: 13px; font-weight: 500; color: var(--tekst); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=date], input[type=number],
input[type=password], select, textarea {
  width: 100%; padding: 0 12px; height: 38px;
  border: 1px solid var(--kant-sterk); border-radius: 10px;
  font-size: 14.5px; font-family: inherit; background: #fff; color: var(--tekst);
}
textarea { height: auto; min-height: 76px; padding: 9px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus, .knapp:focus-visible, .lenkeknapp:focus-visible {
  outline: 2px solid var(--primar); outline-offset: 1px; border-color: var(--primar);
}
.felt-rad { display: flex; gap: 12px; }
.felt-rad .felt { flex: 1; }

/* Statusmerker: fem toner – nøytral, blå, grønn, gul, rød */
.merke { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.merke-utkast { background: var(--sand); color: #4a4f57; }
.merke-sendt { background: var(--primar-lys); color: var(--primar); }
.merke-betalt { background: var(--mint); color: var(--gronn); }
.merke-forfalt { background: var(--rod-lys); color: var(--rod); }

/* Avvik: alvorlighet og status */
.merke-alvor-lav { background: var(--sand); color: #4a4f57; }
.merke-alvor-middels { background: var(--gul-lys); color: var(--gul); }
.merke-alvor-hoy { background: var(--gul-lys); color: #8a3d0a; }
.merke-alvor-kritisk { background: var(--rod-lys); color: var(--rod); }
.merke-avvik-apen { background: var(--rod-lys); color: var(--rod); }
.merke-avvik-pagar { background: var(--gul-lys); color: var(--gul); }
.merke-avvik-lukket { background: var(--mint); color: var(--gronn); }
.merke-pagar-gul { background: var(--gul-lys); color: var(--gul); }
.merke-brann { background: var(--rod-lys); color: #8c1d16; }

/* Kom i gang-veiviser */
.veiviser { border-color: var(--primar); }
.veiviser-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.veiviser-steg { list-style: none; }
.veiviser-steg li { padding: 8px 0; font-size: 14.5px; border-bottom: 1px solid var(--kant); }
.veiviser-steg li:last-child { border-bottom: none; }
.veiviser-steg li.gjort { color: var(--gronn); }
.veiviser-steg li a { text-decoration: none; font-weight: 600; }
.veiviser-steg li a:hover { text-decoration: underline; }

/* Jobber: fremdriftslinje og kravliste */
.fremdrift { height: 10px; background: var(--sand); border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.fremdrift-fyll { height: 100%; background: var(--primar); border-radius: 999px; transition: width .3s; }
.fremdrift-fyll.ferdig { background: var(--gronn); }

/* Kravlisten er én sammenhengende liste per fase: hårfine skillelinjer, ikke stablede kort */
.krav-fase { margin: 26px 0 6px; color: var(--dempet); text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; font-weight: 600; }
.krav { background: var(--panel); border: 1px solid var(--kant); border-top: 0; padding: 14px 18px; margin: 0; }
.krav-fase + .krav { border-top: 1px solid var(--kant); border-radius: var(--radius) var(--radius) 0 0; }
.krav:has(+ .krav-fase), .krav:has(+ details), .krav:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.krav-fase + .krav:has(+ .krav-fase), .krav-fase + .krav:has(+ details), .krav-fase + .krav:last-child { border-radius: var(--radius); }

/* Kravlisten er sammenfoldet som de andre panelene på jobben; overskriften ser ut som et panel */
details.kravliste { margin: 18px 0 16px; }
details.kravliste > summary { cursor: pointer; list-style: none; background: var(--panel); border: 1px solid var(--kant); border-radius: var(--radius); padding: 14px 18px; }
details.kravliste > summary::-webkit-details-marker { display: none; }
details.kravliste > summary::before { content: "\203A"; display: inline-block; width: 14px; color: var(--dempet); transition: transform .15s; }
details.kravliste[open] > summary::before { transform: rotate(90deg); }
details.kravliste > summary strong { font-size: 15px; font-weight: 600; }
details.kravliste[open] > summary .mini { display: none; }
details.kravliste > .krav-fase:first-of-type { margin-top: 14px; }
.krav-utfort { background: #f5faf6; }
.krav-topp { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.krav-topp > div:first-child { flex: 1; min-width: 240px; }
.krav-topp strong { font-size: 15px; font-weight: 600; }
.krav-topp .mini { margin-top: 2px; }
.krav-topp .merke { vertical-align: 1px; margin-left: 4px; }
.krav-handling { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.krav-handling form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.krav-handling input[type=text] { width: auto; height: 32px; font-size: 13.5px; }
.krav-bilder { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kant); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.krav-bilder form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Kvitteringsskanning i varer-panelet og kontrollsiden */
.kvittering-skann { background: var(--sand); border: 1px solid var(--kant); border-radius: var(--radius); padding: 12px 14px; margin-top: 10px; }
.kvittering-skann strong { display: block; margin-bottom: 2px; }
.kvittering-bilde img { display: block; max-width: 260px; max-height: 360px; border-radius: 8px; border: 1px solid var(--kant); }
/* Miniatyrer av kravbilder: trykk åpner bildet i full størrelse i nettleseren */
.krav-miniatyr { position: relative; display: inline-block; }
.krav-miniatyr img { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--kant); background: var(--sand); }
.krav-miniatyr a:hover img { border-color: var(--primar); }
.krav-miniatyr .krav-bilde-slett { position: absolute; top: -6px; right: -6px; }
.krav-miniatyr .krav-bilde-slett .lenkeknapp { background: var(--panel); border: 1px solid var(--kant); border-radius: 50%; width: 22px; height: 22px; line-height: 20px; padding: 0; font-size: 12px; text-align: center; }
.krav-bilde .merke { background: var(--primar-lys); color: var(--primar); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; }
.krav-bilde { display: inline-flex; gap: 4px; align-items: center; background: var(--sand); border-radius: 999px; padding: 3px 10px; }
.lenkeknapp { background: none; border: none; color: var(--rod); cursor: pointer; font-size: 13px; padding: 0 2px; font-family: inherit; }

/* Årshjul */
.aarshjul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.aarshjul-mnd { background: var(--panel); border: 1px solid var(--kant); border-radius: var(--radius); padding: 14px 16px; }
.aarshjul-mnd.naa { border-color: var(--primar); }
.aarshjul-mnd h3 { margin: 0 0 6px; text-transform: capitalize; }
.aarshjul-mnd ul { list-style: none; }
.aarshjul-mnd li { padding: 5px 0; border-bottom: 1px solid var(--kant); font-size: 13px; }
.aarshjul-mnd li:last-child { border-bottom: none; }
.aarshjul-mnd .dag { color: var(--dempet); margin-right: 4px; }
.aarshjul-mnd li .mini { display: block; }

.inline-form { display: inline; }
.mini { color: var(--dempet); font-size: 13px; }

.linjetabell input { min-width: 60px; }

[hidden] { display: none !important; }

/* Kameraskanner */
.skanner-modal { position: fixed; inset: 0; background: rgba(23, 32, 42, .8); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.skanner-boks { background: var(--panel); border-radius: var(--radius); padding: 16px; max-width: 640px; width: 100%; }
.skanner-boks video, .skanner-boks img { width: 100%; max-height: 65vh; object-fit: contain; border-radius: 10px; background: #000; }
.skanner-knapper { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ===================== Salgsside (landing) ===================== */
body.lp { display: block; background: var(--panel); font-size: 17px; line-height: 1.55; }
.lp-innhold { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.lp-topp { background: var(--panel); }
.lp-topp-rad { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.lp-logo { font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--primar); }
.lp-nav { display: flex; gap: 30px; align-items: center; }
.lp-nav a { color: var(--tekst); text-decoration: none; font-size: 16px; font-weight: 500; }
.lp-nav a:hover { color: var(--primar); }

.lp-knapp { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 28px; height: 54px; font-size: 17px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; white-space: nowrap; }
.lp-knapp-primar { background: var(--primar); color: #fff !important; }
.lp-knapp-primar:hover { background: var(--primar-mork); }
.lp-knapp-lys { background: var(--panel); color: var(--primar) !important; border-color: var(--primar); height: 44px; padding: 0 22px; font-size: 16px; }
.lp-knapp-lys:hover { background: var(--sand); }

/* Hero: sentrert, stor serif, ett budskap */
.lp-hero { background: var(--panel); padding: 72px 0 40px; text-align: center; }
.lp-hero-rad { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.lp-hero-tekst { max-width: 820px; }
.lp-merke { display: inline-block; background: var(--mint); color: var(--gronn); padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; margin-bottom: 26px; }
.lp-hero h1 { font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 22px; text-wrap: balance; }
.lp-hero h1 br { display: none; }
.lp-hero h1 span { display: block; color: var(--primar); font-size: .55em; font-family: var(--sans); font-weight: 500; letter-spacing: 0; margin-top: 14px; line-height: 1.3; }
.lp-under { font-size: 19px; color: var(--dempet); margin: 0 auto 30px; max-width: 600px; }
.lp-cta { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.lp-cta-notis { color: var(--dempet); font-size: 15px; width: 100%; text-align: center; }

.lp-hero-kort { width: 100%; max-width: 640px; }
.lp-demo { background: var(--panel); border: 1.5px solid var(--kant); border-radius: 20px; padding: 26px 28px; text-align: left; font-size: 15.5px; box-shadow: 0 20px 60px rgba(28, 79, 122, .08); }
.lp-demo-tittel { font-weight: 600; font-size: 17px; margin-bottom: 16px; }
.lp-demo-rad { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.lp-demo-rad span { width: 130px; color: var(--dempet); }
.lp-demo-stang { flex: 1; height: 12px; background: var(--sand); border-radius: 999px; overflow: hidden; }
.lp-demo-stang div { height: 100%; background: var(--primar); border-radius: 999px; }
.lp-demo-punkt { padding: 10px 0; border-top: 1px solid var(--kant); color: var(--gronn); }
.lp-demo-punkt em { color: var(--dempet); font-style: normal; }
.lp-demo-mangler { color: var(--gul); }

/* Seksjoner: vekslende sand/hvit, luftige kort */
.lp-seksjon { padding: 88px 0; }
.lp-seksjon h2 { font-family: var(--serif); font-weight: 600; font-size: 40px; letter-spacing: -.02em; margin: 0 0 40px; text-align: center; text-wrap: balance; }
.lp-seksjon-lys { background: var(--sand); }

.lp-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.lp-kort { background: #fbf9f4; border-radius: 16px; padding: 30px; }
.lp-kort h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.lp-kort p { color: var(--dempet); font-size: 16px; }

.lp-steg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.lp-steg h3 { margin: 16px 0 8px; font-size: 20px; font-weight: 600; }
.lp-steg p { color: var(--dempet); font-size: 16px; }
.lp-steg-nr { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: var(--primar); color: #fff; align-items: center; justify-content: center; font-weight: 600; font-size: 17px; }

.lp-pris { text-align: center; }
.lp-pris-kort { max-width: 460px; margin: 0 auto; background: var(--panel); border: 1.5px solid var(--kant); border-radius: 24px; padding: 40px; }
.lp-pris-tall { font-family: var(--serif); font-size: 56px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 18px; line-height: 1; }
.lp-pris-tall span { font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--dempet); letter-spacing: 0; }
.lp-pris-kort ul { list-style: none; text-align: left; margin: 0 0 28px; }
.lp-pris-kort li { padding: 8px 0 8px 28px; position: relative; font-size: 16px; }
.lp-pris-kort li::before { content: '\2713'; position: absolute; left: 0; color: var(--gronn); font-weight: 700; }

.lp-artikkel { padding: 48px 24px 72px; max-width: 760px; }
.lp-artikkel h1 { font-family: var(--serif); font-size: 40px; letter-spacing: -.02em; margin-bottom: 8px; text-wrap: balance; }
.lp-artikkel h2 { font-family: var(--serif); font-size: 24px; margin: 32px 0 8px; }
.lp-artikkel p, .lp-artikkel li { font-size: 17px; line-height: 1.65; color: #2a3038; }
.lp-artikkel ul { margin: 8px 0 8px 22px; }
.lp-oppdatert { color: var(--dempet) !important; font-size: 14px !important; margin-bottom: 10px; }
.lp-utkast-notis { margin-top: 30px; padding: 14px 18px; background: var(--sand); border-radius: 12px; font-size: 14px !important; color: var(--dempet) !important; }

/* FAQ på salgssiden */
.lp-faq { max-width: 760px; margin: 0 auto; }
.lp-faq details { background: var(--panel); border-radius: 16px; padding: 18px 24px; margin-bottom: 10px; }
.lp-faq summary { font-weight: 600; font-size: 18px; cursor: pointer; }
.lp-faq p { margin-top: 10px; color: var(--dempet); font-size: 16px; }

.lp-bunn { background: var(--panel); border-top: 1px solid var(--kant); color: var(--dempet); padding: 36px 0; font-size: 15px; }
.lp-bunn a { color: var(--tekst); }
.lp-bunn-rad { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lp-forbehold { margin-top: 18px; font-size: 13px; color: var(--dempet); }

@media (max-width: 700px) {
  .lp-hero { padding: 44px 0 24px; }
  .lp-hero h1 { font-size: 40px; }
  .lp-seksjon { padding: 56px 0; }
  .lp-seksjon h2 { font-size: 30px; }
  .lp-artikkel h1 { font-size: 32px; }
  .lp-nav a:not(.lp-knapp) { display: none; }
  .lp-cta .lp-knapp { width: 100%; }
}

/* «Neste steg» på jobbsiden */
.neste-steg-panel { border-color: var(--primar); }
.neste-steg { margin: 4px 0 0 18px; line-height: 1.7; }
.neste-steg a { font-weight: 600; }
.krav-bilder .knapp { margin-right: 4px; }
.krav-bilder input[type=file][hidden] { display: none; }

/* Ny jobb: jobbtype som trykkbare kort */
.valgkort-rad { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.valgkort { flex: 1 1 160px; cursor: pointer; position: relative; }
.valgkort input { position: absolute; opacity: 0; width: 0; height: 0; }
.valgkort span {
  display: block; padding: 12px 14px; border: 1px solid var(--kant-sterk); border-radius: var(--radius);
  background: var(--panel); min-height: 60px;
}
.valgkort span strong { display: block; font-size: 14.5px; font-weight: 600; }
.valgkort span small { display: block; color: var(--dempet); margin-top: 2px; font-size: 12.5px; }
.valgkort input:checked + span { border-color: var(--primar); background: var(--primar-lys); }
.valgkort input:focus-visible + span { outline: 2px solid var(--primar); outline-offset: 2px; }

/* Flytende «Ny jobb»-knapp – kun mobil */
.fab { display: none; }

/* Mobil topplinje med menyknapp – finnes bare på små skjermer */
.mobil-topp { display: none; }

/* Mobil: topplinje med Meny-knapp som åpner hele sidemenyen (gruppert, vertikal);
   Logg ut ligger under Innstillinger. Kolonner stables, tabeller kan rulles sidelengs,
   og trykkflater er minst 44 px høye for bruk med hansker. */
@media (max-width: 700px) {
  body { flex-direction: column; }
  .mobil-topp {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--panel); color: var(--tekst); padding: 8px 16px;
    border-bottom: 1px solid var(--kant);
    position: sticky; top: 0; z-index: 50;
  }
  .mobil-topp .logo { padding: 0; font-size: 22px; }
  .meny-knapp {
    background: var(--panel); color: var(--primar); border: 1.5px solid var(--primar); border-radius: 999px;
    padding: 0 16px; height: 40px; font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .meny-knapp[aria-expanded="true"] { background: var(--primar); color: #fff; }
  aside { display: none; width: 100%; padding: 4px 0 8px; border-right: none; border-bottom: 1px solid var(--kant); }
  aside.open { display: flex; }
  aside .logo { display: none; }
  aside nav { flex-direction: column; overflow: visible; }
  .nav-gruppe { padding: 12px 12px 4px; }
  aside > nav a { padding: 12px 14px; font-size: 15.5px; }
  .bruker-boks { position: static; margin-top: 4px; padding: 12px 22px 4px; }
  .bruker-boks form { display: none; }
  main { padding: 18px 16px 88px; }
  .fab {
    display: inline-flex; align-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 40;
    background: var(--primar); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
    height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--primar-mork);
  }
  .valgkort { flex: 1 1 100%; }
  h1 { font-size: 26px; margin-bottom: 12px; }
  h2 { font-size: 20px; margin-top: 26px; }
  .knapp { height: 46px; padding: 0 20px; font-size: 15.5px; }
  .knapp.liten { height: 42px; padding: 0 16px; font-size: 14.5px; }
  .verktoylinje .knapp, .verktoylinje form, .verktoylinje form .knapp { width: 100%; }
  .felt-rad { flex-direction: column; gap: 0; }
  .panel, form.panel { padding: 16px; }
  .krav { padding: 12px 14px; }
  .krav-topp { flex-direction: column; gap: 10px; }
  .krav-handling, .krav-handling form { width: 100%; }
  .krav-handling input[type=text] { width: 100% !important; flex: 1 1 100%; height: 46px; font-size: 16px; }
  .krav-handling .knapp { width: 100%; }
  .krav-bilder form { width: 100%; }
  .krav-bilder input[type=file] { max-width: 100% !important; width: 100%; }
  .krav-bilder form .knapp { width: 100%; }
  input[type=text], input[type=email], input[type=date], input[type=number], input[type=password], select { font-size: 16px; height: 46px; }
  textarea { font-size: 16px; }
  table { display: block; overflow-x: auto; }
  .kort { min-width: 130px; padding: 12px 14px; }
  .kort .tall { font-size: 24px; }
}

/* Kravpunkter: unntatte (ikke relevante) og endre-detaljer */
.krav-unntatt { opacity: .6; }
.krav-endre { margin-top: 8px; }
.krav-endre summary { cursor: pointer; color: var(--dempet); }
.krav-endre-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.krav-endre-form form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.krav-endre-form select, .krav-endre-form input[type=text] { width: auto; height: 32px; font-size: 13.5px; }
@media (max-width: 700px) {
  .krav-endre-form form { width: 100%; }
  .krav-endre-form select, .krav-endre-form input[type=text] { width: 100% !important; height: 46px; font-size: 16px; }
  .krav-endre-form .knapp { width: 100%; }
}

/* ===================== Salgsside: mørk seksjon med store kort ===================== */
.lp-mork { background: var(--primar-mork); color: #fff; padding: 88px 0; }
.lp-mork h2 { font-family: var(--serif); font-weight: 600; font-size: 40px; letter-spacing: -.02em; margin: 0 0 40px; text-align: center; text-wrap: balance; color: #fff; }
.lp-storkort-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.lp-storkort { background: var(--panel); color: var(--tekst); border-radius: 24px; padding: 30px 30px 26px; display: flex; flex-direction: column; }
.lp-storkort h3 { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.lp-storkort p { color: var(--dempet); font-size: 16px; margin-bottom: 22px; }
.lp-vis { margin-top: auto; }

/* Enkle illustrasjoner tegnet i CSS: sjekkliste, telefon, dokument */
.lp-vis-liste { display: flex; flex-direction: column; gap: 8px; }
.lp-vis-rad { display: flex; align-items: center; gap: 12px; background: var(--primar-lys); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 500; }
.lp-vis-rad em { font-style: normal; color: var(--gul); font-weight: 400; margin-left: auto; font-size: 13.5px; }
.lp-vis-hake { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primar); color: #fff; font-size: 14px; flex-shrink: 0; }
.lp-vis-hake.lp-vis-tom { background: transparent; border: 2px solid var(--kant-sterk); }

.lp-vis-telefon { display: flex; justify-content: center; }
.lp-telefon { width: 170px; border: 3px solid var(--primar); border-radius: 26px; padding: 18px 14px 22px; background: #fbf9f4; }
.lp-telefon-bilde { height: 96px; border-radius: 12px; background: var(--sand); border: 1px solid var(--kant); }
.lp-telefon-chip { display: inline-block; margin-top: 10px; background: var(--mint); color: var(--gronn); font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.lp-telefon-linje { height: 8px; border-radius: 4px; background: var(--kant); margin-top: 10px; }
.lp-telefon-linje.kort { width: 60%; }

.lp-vis-dok { display: flex; justify-content: center; }
.lp-dok { width: 200px; background: #fbf9f4; border: 1px solid var(--kant); border-radius: 10px 10px 4px 4px; padding: 16px; }
.lp-dok-tittel { font-size: 12px; font-weight: 600; color: var(--primar); margin-bottom: 10px; }
.lp-dok-linje { height: 7px; border-radius: 4px; background: var(--kant); margin-bottom: 8px; }
.lp-dok-linje.kort { width: 55%; }
.lp-dok-stang { height: 9px; border-radius: 999px; background: var(--sand); overflow: hidden; margin-top: 14px; }
.lp-dok-stang div { height: 100%; background: var(--primar); border-radius: 999px; }
.lp-dok-tall { font-size: 12.5px; font-weight: 600; margin-top: 6px; }

/* Salgsside: fungerer med det du bruker */
.lp-int-rad { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.lp-int-tekst { flex: 1 1 320px; }
.lp-int-tekst h2 { text-align: left; margin-bottom: 16px; }
.lp-int-tekst p { color: var(--dempet); font-size: 17px; max-width: 460px; }
.lp-int-rutenett { flex: 1 1 380px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-int { border: 1px solid var(--kant); border-radius: 16px; padding: 22px 12px; text-align: center; min-height: 110px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.lp-int strong { font-size: 17px; }
.lp-int span { color: var(--dempet); font-size: 13px; }
.lp-int-planlagt { border-style: dashed; color: var(--dempet); }

/* Salgsside: mørk bunn med CTA-boks og lenkekolonner */
.lp-bunn { background: var(--primar-mork); border-top: 0; color: #c9d6e2; padding: 72px 0 32px; font-size: 15px; }
.lp-bunn a { color: #fff; text-decoration: none; }
.lp-bunn a:hover { text-decoration: underline; }
.lp-cta-boks { background: var(--panel); color: var(--tekst); border-radius: 24px; padding: 28px 32px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-bottom: 64px; }
.lp-cta-boks span { font-size: 18px; }
.lp-bunn-kolonner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.lp-bunn-kolonner h4 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.lp-bunn-kolonner div > a { display: block; margin-bottom: 10px; }
.lp-bunn-merke .lp-logo { color: #fff; margin-bottom: 8px; }
.lp-bunn-merke p { max-width: 260px; }
.lp-bunn-linje { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 48px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.lp-bunn-linje .lp-forbehold { margin: 0; color: #a9b8c8; max-width: 620px; }
.lp-bunn-rad { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* Registrering: skjema til venstre, tre fordeler til høyre */
.enkel-boks.enkel-bred { max-width: 980px; }
.reg-under { color: var(--dempet); font-size: 16px; margin: -6px 0 22px; }
.reg-rad { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 32px; align-items: start; text-align: left; }
.reg-fordeler { display: flex; flex-direction: column; gap: 12px; }
.reg-fordel { background: var(--primar-lys); border-radius: 18px; padding: 20px 22px; }
.reg-fordel strong { display: block; font-size: 16px; margin-bottom: 4px; }
.reg-fordel p { color: var(--dempet); font-size: 14.5px; }

@media (max-width: 700px) {
  .lp-mork { padding: 52px 0; }
  .lp-mork h2 { font-size: 30px; }
  .lp-storkort { padding: 24px 22px 22px; }
  .lp-int-tekst h2 { text-align: center; }
  .lp-int-rutenett { grid-template-columns: repeat(2, 1fr); }
  .lp-cta-boks { padding: 22px; }
  .lp-cta-boks .lp-knapp { width: 100%; }
  .lp-bunn-kolonner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .lp-bunn-merke { grid-column: 1 / -1; }
  .reg-rad { grid-template-columns: 1fr; }
}

/* Logo som bilde (SVG-ordmerke med fremdriftsring som «o») */
.logo-bilde { display: block; height: 30px; width: auto; }
.logo .logo-bilde { height: 28px; }
.logo-mork .logo-bilde { height: 40px; margin: 0 auto; }
.lp-logo .logo-bilde { height: 34px; }
.lp-bunn-merke .lp-logo .logo-bilde { height: 34px; }
.logo, .logo-mork, .lp-logo { display: flex; align-items: center; gap: 8px; }
.logo-mork { justify-content: center; }
.mobil-topp .logo .logo-bilde { height: 24px; }

/* Fremdriftsring – logoens «o» brukt som fremdriftsviser i hele systemet */
.ring { display: block; flex-shrink: 0; }
.ring-spor { fill: none; stroke: #c9dbea; stroke-width: 4; }
.ring-fyll { fill: none; stroke: var(--primar); stroke-width: 4; stroke-linecap: round; }
.ring-fyll.ferdig { stroke: var(--gronn); }
.ring-tekst { fill: var(--tekst); font-family: var(--sans); font-size: 9px; font-weight: 600; }

.fremdrift-rad { display: flex; align-items: center; gap: 12px; }
.fremdrift-tekst { display: flex; flex-direction: column; line-height: 1.35; }
.fremdrift-tekst strong { font-size: 14.5px; }
.ring-celle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.neste-steg-topp { display: flex; align-items: center; gap: 12px; }
.neste-steg-topp strong { font-size: 16px; }

/* Salgsside: ringene i demo-kortet, i stegene og som stort, dempet motiv bak hero */
.lp-demo-ringer { display: flex; gap: 28px; margin-bottom: 14px; }
.lp-demo-ring { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.lp-demo-ring .ring-tekst { font-size: 8.5px; }
.lp-steg-nr { background: none; width: auto; height: auto; }
.lp-steg-nr .ring-tekst { font-size: 11px; fill: var(--primar); }
.lp-hero { position: relative; overflow: hidden; }
.lp-hero-ring { position: absolute; width: 520px; height: 520px; right: -140px; top: -120px; opacity: .22; pointer-events: none; }
.lp-hero-ring .ring-spor { stroke: #d5e3ef; stroke-width: 3; }
.lp-hero-ring .ring-fyll { stroke-width: 3; }
.lp-hero .lp-innhold { position: relative; }
@media (max-width: 700px) {
  .lp-hero-ring { width: 300px; height: 300px; right: -120px; top: -80px; }
  .lp-demo-ringer { gap: 18px; }
}

/* Juridiske dokumenter (markdown-rendret) og lenker til dem */
.md-tabell { overflow-x: auto; margin: 12px 0 18px; }
.lp-artikkel .md-tabell table { font-size: 14.5px; }
.lp-artikkel .md-tabell th, .lp-artikkel .md-tabell td { vertical-align: top; }
.lp-artikkel h3 { font-size: 17px; margin: 22px 0 6px; }
.lp-artikkel ol { margin: 8px 0 8px 22px; }
.lp-artikkel .panel { margin-top: 14px; }
.juridisk-lenker { margin-top: 12px; font-size: 12.5px; color: var(--dempet); line-height: 1.7; }
.juridisk-lenker a { color: var(--dempet); text-decoration: none; }
.juridisk-lenker a:hover { text-decoration: underline; color: var(--primar); }
main > .juridisk-lenker { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--kant); }
.enkel-boks .juridisk-lenker { margin-top: 18px; }
@media (max-width: 700px) { .bruker-boks .juridisk-lenker { display: block; padding-bottom: 8px; } }

/* Sidemeny: hele skjermhøyden, menyen ruller for seg selv med fade som viser at det er mer,
   brukerboksen ligger alltid synlig nederst. Juridiske lenker på én linje. */
@media (min-width: 701px) {
  aside { position: sticky; top: 0; height: 100vh; }
  aside > nav { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  .bruker-boks { position: static; margin-top: 0; }
}
.bruker-boks .juridisk-lenker { display: block; margin-top: 10px; font-size: 12px; line-height: 1.6; }
.bruker-boks .juridisk-lenker a { display: inline; padding: 0; border-radius: 0; font-size: 12px; color: var(--dempet); }
a.lp-int { text-decoration: none; color: var(--tekst); }
a.lp-int:hover { border-color: var(--primar); }

/* «Hent fra BRREG» ved org.nr-feltet */
.brreg-rad { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.brreg-rad input { flex: 1; min-width: 140px; }
.brreg-status { flex-basis: 100%; }
.brreg-status.brreg-advarsel { color: var(--rod); font-weight: 500; }

/* Adresseforslag fra Kartverket */
.adresse-forslag { list-style: none; margin: 0; padding: 4px 0; position: absolute; z-index: 20; background: var(--panel, #fff); border: 1px solid var(--kant, #d0d5dd); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; min-width: 260px; }
.adresse-forslag li { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.adresse-forslag li:hover { background: var(--primar-lys, #f2f4f7); }
.adresse-forslag li.adresse-eget::after { content: " · eget bygg"; color: var(--dempet); font-size: 12px; }
.adresse-felt { position: relative; }
.matrikkel-status { display: block; margin-top: 4px; }

/* ---------- Assistent-panel (KI-hjelp) ---------- */
.assistent-knapp {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  background: var(--primar); color: #fff; border: 1px solid var(--primar); border-radius: 999px;
  padding: 10px 16px; font: 600 14px var(--sans); cursor: pointer; box-shadow: 0 6px 18px rgba(20, 61, 95, .25);
}
.assistent-knapp:hover { background: var(--primar-mork); }
.assistent-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 9500;
  background: var(--panel); border-left: 1px solid var(--kant); box-shadow: -8px 0 30px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column;
}
.assistent-panel[hidden] { display: none; }
.assistent-topp { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--kant); }
.assistent-topp strong { font-size: 16px; }
.assistent-topp .mini { flex: 1; }
.assistent-lukk { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--dempet); padding: 2px 6px; }
.assistent-meldinger { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.assistent-melding { max-width: 92%; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.assistent-melding.bruker { align-self: flex-end; background: var(--primar-lys); }
.assistent-melding.assistent { align-self: flex-start; background: var(--sand); }
.assistent-melding.feil { background: var(--rod-lys); color: var(--rod); }
.assistent-skjema { border-top: 1px solid var(--kant); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.assistent-skjema textarea { min-height: 58px; margin: 0; }
.assistent-knapper { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.assistent-status { font-size: 12px; color: var(--dempet); min-height: 16px; }
@media (max-width: 720px) {
  .assistent-knapp { right: auto; left: 14px; bottom: 14px; padding: 9px 14px; }
  .assistent-panel { top: auto; height: 80vh; width: 100vw; border-left: 0; border-top: 1px solid var(--kant); border-radius: 16px 16px 0 0; }
}