/* HolmestrandIT, delt grunnstil.
   Lastes FOER sidenes egne <style>, slik at sidespesifikke regler overstyrer.
   Endrer du noe her, slaar det gjennom paa alle sidene.

   ⚠️ Cloudflare cacher denne fila i 4 timer. Endrer du den, bump versjonen i
   <link rel="stylesheet" href="stil.css?v=...> paa alle sidene, ellers ser
   folk den gamle stilen lenge etter deploy. Ett sed over nettsted/*.html:
     sed -i '' 's#stil.css?v=[^"]*#stil.css?v=NYVERSJON#' *.html
   Bruk commit-hashen som versjon.

   ⛔️ Bruk en versjon Cloudflare ALDRI har sett. Hent aldri stil.css?v=X
   gjennom holmestrandit.no for aa "teste" foer X staar i sidene: da lagrer
   Cloudflare den gamle fila under den noekkelen, og fiksen blir liggende i
   cache i 4 timer likevel. Det skjedde 3. september 2026. Verifiser mot
   origin i stedet, eller med en helt fersk ?v=.

   ⭐ Gjennomgang 14. september 2026 etter ferdigheten design-taste.
   Lesningen: lokal tjenesteside for eldre og smaabedrifter, tillit foerst.
   Dialene: variasjon 4, bevegelse 2, tetthet 4. Det betyr rolige, nesten
   symmetriske flater, ingen innlastingsanimasjoner, og luft nok til aa lese
   uten aa vaere tom. Alle fargepar under er MAALT (scratch/kontrast.py) og
   tallet staar ved hvert av dem. */

:root{
  --navy:#143C52;
  --amber:#D99521;
  /* knappen naar pekeren ligger over: 4,84:1 mot knappeteksten #3A2708 */
  --amber-hover:#C98A1C;
  --sand:#FAF7F1;
  /* Ikke rent hvitt. Flatene og feltene ligger paa en varm hvit som sitter
     i samme familie som sanden, saa de ikke "lyser" mot bakgrunnen. */
  --hvit:#FFFDFA;
  --ink:#26333B;
  /* Var #5D6B74 = 5,14:1 mot sand. Godkjent, men graa broedtekst paa tonet
     bakgrunn er den vanligste feilen, og kundene er ofte eldre. #4F5E68 er
     6,27:1 mot sand og 5,77:1 mot navy-flaten. */
  --muted:#4F5E68;
  /* ingress og forklarende avsnitt: tettere paa ink enn muted, 7,69:1 */
  --ingress:#41515B;
  /* haarlinjen var #E7E1D6 = 1,16:1 mot sand, altsaa nesten borte. Denne er
     1,32:1: fortsatt en haarlinje, men en som synes. */
  --line:#E0D8C9;
  /* rammen paa felt og andre grensesnittkanter: 3,93:1 mot hvit, 3,73 mot sand */
  --line-sterk:#8B7E62;
  /* dempet gull. Var #a08a5c = 3,12:1 mot sand, under WCAG-kravet. 4,95:1. */
  --gull:#7E6939;
  /* amber er 2,37:1 mot sand og kan ikke brukes til tekst. Denne er 5,32:1. */
  --amber-tekst:#8A5E12;
  /* Kvitteringsgroent. Det fantes to: #2E7D52 paa prissida og #1F5A3C paa
     nettsidesida, for samme betydning, og ingen av dem var et token. Den
     moerkeste virker begge steder: 7,59:1 mot sand og 7,06:1 mot pillen. */
  --gronn:#1F5A3C;
  --gronn-flate:#e6f2ea;
  /* Tonet flate i navyens egen farge, til de viktige boksene. Erstatter de
     moerke navy-boksene midt paa lyse sider: ett tema per side, ikke to.
     ink 11,18:1 og navy 10,06:1 mot den. */
  --navy-flate:#E9EFF2;
  /* feilmelding i skjema: var #B5453A = 5,07:1, naa 5,96:1 */
  --roed:#A33E33;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1000px;
  --gutter:28px;
  /* Ett hjoernesystem for hele nettstedet: 12 for flater, 4 for knapper og
     felt, pille bare paa merker. Knappene var 8 til 23.09.2026; eier
     likte de kantete fra ny.holmestrandit.no bedre. Heroen hadde 24 og tilbudsboksen 20. */
  --radius:12px;
  --radius-s:4px;
  /* sterk ease-out til trykk og tilstandsbytter, de innebygde er for svake */
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* ---------- skriftstiger ----------
     ⚠️ Nettstedet brukte 26 forskjellige stoerrelser: 19 faste og 7 clamp.
     Flere gjorde samme jobb og laa en halv piksel fra hverandre. Oeyet leser
     det som uro, ikke som orden.
     ⭐ 14.09.2026: stigen gaar naa i steg paa omtrent 1,25, slik at hvert
     trinn faktisk leses som et trinn: 14, 17, 21, 26, 34, 46, 58. Minste
     tekst noen skal lese er 14 px; 13 brukes bare til fotokreditten. */
  --f-xs:13px;      /* bildekreditt                */
  --f-s:14px;       /* smaatekst i bunnen, merker  */
  --f-sm:14px;      /* meta, hjelpetekst           */
  --f-m:15px;       /* meny, knapper, felt         */
  --f-base:17px;    /* broedtekst                  */
  --f-l:21px;       /* ingress, mellomtitler       */
  --f-xl:26px;      /* seksjonsoverskrift          */
  --f-pris:44px;    /* prisen paa forsiden         */
  --f-h2:clamp(28px,3.2vw,34px);
  --f-h2-stor:clamp(32px,4.2vw,46px);   /* tillitsseksjonen, midtpunktet */
  --f-h1:clamp(34px,4.6vw,46px);
  --f-h1-rolig:clamp(30px,4vw,40px);    /* Om meg, artikler, juss */
  --f-hero:clamp(38px,5.2vw,58px);      /* de to heroene          */
}

*{box-sizing:border-box}
[hidden]{display:none !important}

/* ---------- skrift ----------
   Systemskriften, med vilje. San Francisco paa iPhone, Segoe paa Windows,
   Roboto paa Android: den skriften kundene leser alt annet i, null
   ventetid, og ingen tredjepart faar IP-adressen til de som besoeker oss.
   Personvernerklaeringen lover at bare Resend, Cloudflare og Meta er
   involvert; en Google Fonts-lenke ville gjort den usann. */
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;font-size:var(--f-base);-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto}
/* Overskrifter: 700, ikke 800. Paa Windows blir 800 til Segoe UI Black, og
   det roper. Vekt 700 og stoerrelse gjoer jobben sammen. */
h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
p,li{text-wrap:pretty}

/* Hopp-lenke for tastatur og skjermleser. Usynlig til den faar fokus.
   Ingen overgang paa den: tastaturhandlinger animeres aldri. */
.hopp{position:absolute;left:var(--gutter);top:-200px;z-index:30;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:var(--radius-s);font-weight:700;text-decoration:none}
.hopp:focus{top:14px}

/* Synlig fokus for tastaturbrukere. Fantes ikke noe sted foer.

   ⚠️ Ringen var amber, og amber er bare 2,37:1 mot sand. Kravet for et
   grensesnittelement er 3:1, saa ringen fantes uten aa vaere synlig nok til
   aa telle. Navy er 10,92:1 mot sand, men 1,00:1 mot seg selv, altsaa borte
   inne i den moerke heroen og i bunnen. Derfor to ringer: navy ytterst, sand
   innerst. Sand mot navy er 10,92:1, saa minst én av dem synes uansett hvor
   elementet staar. box-shadow fyller nettopp gapet outline-offset lager. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--navy);outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 2px var(--sand);
}

/* ---------- trykkflater ----------
   ⛔️ Maalt i nettleseren 3. september 2026: menylenkene var 24 px hoeye,
   lenkene i bunnen 17 px og logoen 32 px. Minstemaal for en tommel er 44 px.

   Vi utvider treffet med et usynlig felt i stedet for med padding, av to
   grunner. Padding paa lenkene i bunnen ville dyttet understreken vekk fra
   ordet, og padding i menyen ville gjort den klistrede toppen hoeyere.
   Teksten staar der den stod. */
.nav a.link,.mark,.foot a.mail,.foot .juss a,.cta .alt,.cta2 .alt2,.backlink{position:relative}
.nav a.link::after,.mark::after,.foot a.mail::after,.foot .juss a::after,
.cta .alt::after,.cta2 .alt2::after,.backlink::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- topp ----------
   Toppen var halvgjennomsiktig med blur bak. Det er glass for glassets
   skyld; naa er den tett sand med en haarlinje. Den er fortsatt klistret,
   fordi telefonknappen skal vaere naer uansett hvor langt ned man er. */
header{position:sticky;top:0;z-index:20;background:var(--sand);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:72px}
.mark{font-weight:800;font-size:var(--f-l);color:var(--navy);letter-spacing:-.01em;text-decoration:none;margin-right:auto}
.mark b{color:var(--amber)}
.nav{display:flex;align-items:center;gap:24px}
.nav a.link{color:var(--navy);text-decoration:none;font-weight:600;font-size:var(--f-m);
  padding:4px 0;transition:color .15s ease}
.nav a.link:hover{color:var(--amber-tekst);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
/* siden du staar paa: navy tekst med en strek under, ikke bare en farge */
.nav a.link.active{color:var(--navy);text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--amber-tekst)}

/* ---------- knapp ----------
   line-height staar eksplisitt: en <button> arver ikke 1.6 fra body slik en
   <a> gjoer, saa samme klasse ble 39 px paa skjemaet og 46 px i toppen.
   Med 1.5 her er begge 46 px. Trykket gir scale(.97) paa 160 ms, det er
   hele bevegelsesbudsjettet paa en knapp. */
.btn{background:var(--amber);color:#3A2708;font-weight:700;text-decoration:none;
  padding:12px 20px;border-radius:var(--radius-s);font-size:var(--f-m);line-height:1.5;
  white-space:nowrap;display:inline-block;border:0;cursor:pointer;font-family:inherit;
  transition:background-color .15s ease,transform .16s var(--ease-out)}
.btn:hover{background:var(--amber-hover)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:default;transform:none}

/* ---------- bunn ---------- */
footer{background:var(--navy);color:#DCE7EE}
/* ⚠️ padding-block, ikke padding. .foot ligger sammen med .wrap paa samme
   element, og "padding:44px 0" nullet sidepaddingen fra .wrap. Paa skrivebord
   skjulte sentreringen det; paa telefon laa bunnteksten helt inntil kanten. */
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap;padding-block:44px}
.foot .mark{color:#fff;margin-right:0}
.foot .mark b{color:var(--amber)}
/* sekundaer tekst i bunnen: var #9fb4c2 = 5,44:1, naa 5,96:1 */
.foot .place{font-size:var(--f-sm);color:#A9BCC8;margin-top:8px}
.foot .right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot a{color:#DCE7EE}
/* ⚠️ Understreken var #35566b, altsaa 1,50:1 mot navy. Den er det eneste som
   skiller lenken fra vanlig tekst her nede, siden fargen er den samme.
   #6E8A9E er 3,22:1 og oppfyller kravet til et grensesnittelement. */
.foot a.mail{color:#DCE7EE;text-decoration:none;border-bottom:1px solid #6E8A9E;padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.foot a.mail:hover{color:#fff;border-color:#fff}
/* juridiske lenker i bunnen: luft mellom dem, ikke prikker */
.foot .juss{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px;font-size:var(--f-s)}
.foot .juss a{color:#A9BCC8;text-decoration:none;border-bottom:1px solid #6E8A9E;transition:color .15s ease,border-color .15s ease}
.foot .juss a:hover{color:#fff;border-color:#fff}
.foot .orgnr{font-size:var(--f-s);color:#A9BCC8;margin-top:6px}
/* var #6f8697 = 3,08:1 mot navy, under kravet. #93A8B6 er 4,74:1. */
.credit{margin:0;padding:0 0 30px;font-size:var(--f-xs);color:#93A8B6}

/* ---------- mobil ----------
   Navigasjonen ble tidligere SKJULT under 620/720/760px, slik at Priser og
   Tips ikke lot seg naa fra telefon. Naa brytes den til egen linje i stedet.
   ⭐ 14.09.2026: telefonknappen er tilbake paa telefon, som en liten knapp
   til hoeyre for logoen paa foerste rad. Den laa i menyen og brakk raden i
   tre; naa er den et eget barn av .bar og legger seg der den skal. Kundene
   er ofte eldre og paa telefon, og nummeret skal vaere ett trykk unna. */
@media(max-width:760px){
  header .bar{height:auto;padding-block:12px 14px;flex-wrap:wrap;row-gap:10px;column-gap:14px}
  .mark{order:1}
  .bar > .btn{order:2;padding:9px 14px;font-size:var(--f-s)}
  .nav{order:3;width:100%;gap:2px 18px;flex-wrap:wrap}
  .nav a.link{display:inline-block;padding:6px 0}
}
@media(max-width:480px){
  :root{--gutter:22px}
}

/* Bevegelse er lite her uansett (bare trykk og fargeskift), men det lille
   som er, slaas av for dem som har bedt om det. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- felles smaadeler ----------
   ⚠️ Alt under stod tidligere avskrevet for haand i undersidene. .bar laa i
   ALLE elleve, bunnteksten i aatte, og hele artikkel- og juss-blokken i tre
   hver. Naa eier denne filen dem, og sidene beholder bare det som er sitt. */

/* Merkelappen over en overskrift. Var monospace, versaler og sperret, altsaa
   akkurat den lille "eyebrow" som staar over hver seksjon paa halvparten av
   alle maskinlagde sider. Naa er den en vanlig setning i messing, og den
   brukes bare der den forteller noe overskriften ikke sier selv. */
.eyebrow{font-size:var(--f-m);font-weight:700;color:var(--amber-tekst);margin:0 0 12px;letter-spacing:0}

/* ---------- artikkelsidene (tips-*.html) ---------- */
main.article{max-width:680px;margin:0 auto;padding:56px var(--gutter) 20px}
.article h1{font-size:var(--f-h1-rolig);margin:0 0 18px}
.article .ingress{font-size:var(--f-l);line-height:1.45;color:var(--ingress);margin:0 0 32px}
.article h2{font-size:var(--f-xl);margin:36px 0 10px}
.article p{margin:0 0 16px}
.article ul{margin:0 0 16px;padding-left:22px}
.article li{margin:8px 0}
.article strong{color:var(--navy)}
.article a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
.article a:hover{color:var(--amber-tekst)}
.cta-inline{margin:44px 0 6px;padding-top:26px;border-top:1px solid var(--line)}
.cta-inline p{margin:0 0 16px;color:var(--ingress)}
/* var amber paa hover, 2,37:1. Naa navy med strek. */
.backlink{display:inline-block;margin-top:28px;color:var(--muted);text-decoration:none;font-size:var(--f-m);font-weight:600}
.backlink:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}

/* ---------- de juridiske sidene ----------
   Reglene her var uskrevne element-selektorer (h1, h2, p, table ...) i tre
   filer. De kan ikke bare flyttes hit, for da ville de slaatt gjennom paa
   hele nettstedet. Derfor baerer vilkar, personvern og databehandleravtale
   <body class="juss">, og alt er skrudd fast til den. */
body.juss{--max:740px}   /* 17 px broedtekst gir da rundt 75 tegn per linje */
body.juss .bar{max-width:1000px;margin:0 auto;padding:0 var(--gutter)}
/* ⭐ Her stod "main{padding:56px 0 20px}" i alle tre filene, og den virket
   aldri: main baerer ogsaa class="wrap", og .wrap (0,1,0) slaar en naken
   elementselektor (0,0,1). Resultatet var at overskriften laa klistret
   rett under toppen. Naa staar regelen med hoeyere spesifisitet enn .wrap,
   og bare paa blokkretningen, saa sidepaddingen fra .wrap beholdes. */
body.juss main.wrap{padding-block:52px 20px}
body.juss h1{font-size:var(--f-h1-rolig);margin:0 0 10px}
body.juss .oppdatert{color:var(--muted);font-size:var(--f-m);margin:0 0 40px}
body.juss h2{font-size:var(--f-xl);margin:44px 0 12px}
body.juss h3{font-size:var(--f-l);margin:28px 0 8px}
body.juss p,body.juss li{color:var(--ink)}
/* ⚠️ "body.juss a" (0,1,1) ville slaatt ".foot a" (0,1,1) fordi den staar
   senere i fila, og bunnlenkene hadde blitt navy paa navy. Derfor main. */
body.juss main a{color:var(--navy);text-underline-offset:3px}
body.juss main a:hover{color:var(--amber-tekst)}
body.juss ul{padding-left:22px}
body.juss li{margin:7px 0}
body.juss .fyll{background:#FDF3DC;border:1px dashed var(--amber);border-radius:6px;padding:2px 8px;font-family:var(--mono);font-size:var(--f-sm);color:var(--amber-tekst)}
body.juss .boks{background:var(--hvit);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin:26px 0}
body.juss .boks h3{margin-top:0}
/* Var navy med hvit tekst, altsaa et moerkt tema midt i et lyst dokument.
   Naa en tonet flate i navyens egen farge, med heltrukken kant. */
body.juss .viktig{background:var(--navy-flate);border:1px solid #C9D6DE;border-radius:var(--radius);padding:26px 28px;margin:26px 0}
body.juss .viktig h3{margin-top:0}
body.juss table{width:100%;border-collapse:collapse;margin:18px 0;font-size:var(--f-base)}
body.juss th,body.juss td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
/* versaler i tabellhodene er tyngre aa lese for eldre; vanlig setning i navy holder */
body.juss th{color:var(--navy);font-size:var(--f-m);font-weight:700}
body.juss footer{margin-top:60px}
/* ⚠️ align-items skal IKKE staa her. Den gamle .foot-regelen i disse sidene
   satte den heller ikke, og da falt egenskapen tilbake til center fra .foot
   over. Kaskaden gjelder per egenskap, ikke per regel. Setter man stretch
   her, blir hoeyre kolonne like hoey som venstre, 46 px blir 122 px. */
body.juss .foot{gap:24px 40px;padding:40px var(--gutter);max-width:1000px;margin:0 auto}
@media(max-width:760px){
  body.juss .boks,body.juss .viktig{padding:20px 22px}
  body.juss th,body.juss td{padding:9px 8px}
}