/* ══════════════════════════════════════════════════════════════ Nirona — apex v2 (hjemmeside, opprettelse, innlogging, dokumenter) Lys flate. Bygger på tokens.css og komponenter.css, som lastes først. ══════════════════════════════════════════════════════════════ */ /* ── Sidens spalte. Ett tall, ett sted ─────────────────────────── * * M120. Hjemmesiden hadde tre spalter samtidig, og ingen av dem visste om * de andre: * * topplinjen og `.midtspalte` 1120 px, 26 px marg → innhold 1068 * heroen, `.hero .in` 1140 px, 24 px marg → innhold 1092 * bunnlinjen ingen bredde, 24 px marg * * Heroen lå altså 12 px lenger ut i begge kanter enn topplinjen rett over * den, og enn hver seksjon under. Det var det man så: merket og * overskriften startet ikke på samme loddrette linje, og ingen av tallene * var feil hver for seg. * * Nå er det ett tall. Endres det, endres alle tre. Bunnlinjen er * midtstilt og har ingen kant å stille på linje. * * Margen krymper på telefon — 26 px i hver kant av 390 er en åttendedel av * skjermen — og fordi den er ett tall, krymper den likt overalt. */ :root{--spalte:1120px;--spaltemarg:26px; /* Reservehøyden for topplinjen, til `topphoyde.js` har målt den — og for alltid om skriptet ikke lastes. Med vilje et tall og ikke null: en side uten JavaScript skal ha ankerlenker som stort sett lander riktig, ikke ankerlenker som lander helt oppe i skjermkanten. Målt til 58 px på maskinbredde 27. september 2026. Se L4d og tokens.css. */ --topp-h:58px} @media (max-width:640px){:root{--spaltemarg:18px}} /* ── Det trygge området, kant for kant ─────────────────────────── * * Landingssidestandard v1.2, L4b og L7. En telefon med utsparing har et * område i toppen som systemet eier, og det må håndteres per kant — ikke * som én fyll på dokumentet. * * Toppen hører BAREN til, ikke dokumentet. Det er hele poenget med L4b, og * grunnen står i standarden: `padding-top: env(safe-area-inset-top)` på * `:root` eller `body` er en del av dokumentflyten, og ruller derfor vekk. * Den klebrige baren står da igjen med en gjennomsiktig stripe mellom seg * og skjermkanten, og innholdet ruller opp i den — teksten dukker opp * *over* menyen i stedet for å forsvinne under den. * * Feilen ser ut som en z-indeks-feil og er det ikke. Den er en flytfeil, og * den finnes bare på en telefon med utsparing — altså på ingen maskin noen * av oss sitter ved. Funnet i Cue 27. september 2026, på en iPhone. * * Sidemargen legger venstre og høyre innfelling til seg selv. I liggende * stilling er de ikke null, og uten dette havner første bokstav i hver * linje under utsparingen. Margen bor i ett tall (`--spaltemarg`), så * innfellingen legges til der tallet brukes — se `.midtspalte` og `.top .in`. */ .top{position:sticky;top:0;z-index:40;background:var(--kort); border-bottom:1px solid var(--haar); /* L4b: baren bærer det trygge området selv. Negativ marg opp i skjermkanten, og samme mengde lagt tilbake som barens egen toppfyll. Da er stripen over baren en del av baren. */ margin-top:calc(-1 * env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px)} .top .in{max-width:var(--spalte);margin:0 auto; padding:13px calc(var(--spaltemarg) + env(safe-area-inset-right, 0px)) 13px calc(var(--spaltemarg) + env(safe-area-inset-left, 0px)); display:flex; align-items:center;gap:20px} /* Varemerkelockupen. Samme form som på inngangsflaten fra M107: hvelvmerket, CIRON, en tynn strek, produktnavnet. Tre ulike utgaver sto på tre flater fram til da, og en kunde som gikk fra innloggingen til brukervilkårene så to ulike avsendere på to klikk. */ .merke{display:flex;align-items:center;gap:11px;text-decoration:none; min-height:var(--trykk)} .merke .hvelvet{width:26px;height:26px;color:var(--blekk);flex:none} .merke .hvelvet svg{width:100%;height:100%;display:block} .merke .ord{display:flex;align-items:center;gap:9px;font-family:var(--disp); font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--blekk)} .merke .hus{color:var(--dempet);font-weight:600} .merke .strek{width:1px;height:15px;background:var(--haar-sterk);display:inline-block} .merke:hover .ord{opacity:.82} .top nav{display:flex;gap:2px;margin-left:8px} .top nav a{padding:8px 12px;min-height:var(--trykk);display:inline-flex;align-items:center;border-radius:var(--r-sm);font-size:14.5px;font-weight:500; color:var(--dempet);text-decoration:none} .top nav a:hover{color:var(--blekk);background:var(--felt)} .top .hoyre{margin-left:auto;display:flex;align-items:center;gap:8px} /* ── Berøringsflatene i baren er 44×44, uten at baren blir høyere ──── * * L4: «hvert element har minst 44×44 piksler berøringsflate.» Ingen kontroll * målte det fram til v1.0.3, og da var det ikke oppfylt noe sted i baren: * merket sto på 85×26, knappene på 112×36, lenkene på rundt 33 i høyden. * * Boksene kan ikke bare vokse til 44. Da blir raden 20 piksler høyere, * knappene mister formen de er tegnet med, og topplinjen — som skal stå på * én linje, målt av `porter/topplinje.mjs` — blir en annen bar. * * WCAG 2.5.8 skiller nettopp de to: kravet gjelder MÅLET, ikke det synlige. * Et pseudoelement strekker seg symmetrisk utenfor boksen og tar trykket. * Det som ser ut som en liten knapp, er en stor. * * `width:max(100%,44px)` og ikke `44px`: en bred knapp skal beholde hele sin * egen bredde som mål, ikke krympe til 44. */ .top a,.top button{position:relative} .top a::after,.top button::after{content:"";position:absolute; left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:max(100%,44px)} .midtspalte{max-width:var(--spalte);margin:0 auto; padding:0 calc(var(--spaltemarg) + env(safe-area-inset-right, 0px)) 0 calc(var(--spaltemarg) + env(safe-area-inset-left, 0px))} .dempet{color:var(--dempet)} /* ── Hjemmesidens stiler bor i hjem.css ────────────────────────── Fra M110. Her sto hele den gamle landingssiden — hero, sammenligning, trinn, roller, innvendinger, tall, trygghet, avslutning. Den ble ikke bare flyttet: da hjem.css kom, sto begge sett samtidig, og apex.css lastes først. `.hero h1{max-width:15ch}` herfra klemte den nye overskriften ned i en smal spalte, og `.hero::before` la et rutenett bak den. Siden så ødelagt ut i nettleseren og helt grei i koden. Lærdommen er ikke «husk å rydde». Den er at to sett regler for samme flate ikke kan leve side om side, og at det bare synes på et skjermbilde. Det som står igjen her, er rammen (topplinjen, merket, bunnen) og flatene hjem.css IKKE dekker: opprettelsen, meldingssidene og de juridiske dokumentene. */ footer{border-top:1px solid var(--haar);padding:26px 0 40px;font-family:var(--mono); font-size:12px;color:var(--dempet)} footer .in{display:flex;gap:22px;flex-wrap:wrap;align-items:center} footer a{text-decoration:none} footer a:hover{color:var(--blekk)} footer .hoyre{margin-left:auto;display:flex;align-items:center;gap:10px} /* `.orbitmini` sto her på 22 px. Ingen markup brukte den, og design-regler R9a lister «i mindre enn 200×200px format» under *ikke bruk*. En ferdig regel som bare venter på at noen skal ta den i bruk, er et avvik med framtidig dato. Fjernet i M98. */ /* ── Skjema- og meldingssider ────────────────────────────────── */ .boks{width:min(480px,100%);margin:56px auto;background:var(--kort); border:1px solid var(--haar);border-radius:var(--r-xl);padding:32px 34px; box-shadow:var(--skygge-hev)} .boks h1{font-size:28px;margin:0 0 10px;font-weight:800} .boks > p{margin:0 0 16px;color:var(--dempet);font-size:15.5px} .boks .etikett{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--aksent-tekst);font-weight:600;display:flex; align-items:center;gap:10px;margin-bottom:14px} .boks .etikett::after{content:"";flex:1;height:1px;background:var(--haar)} .boks label{display:block;font-size:13px;font-weight:700;margin:18px 0 7px} .boks .hjelp{font-size:13.5px;color:var(--dempet);margin-top:8px;line-height:1.55} .boks .avkryss{margin-top:20px;font-weight:400} .boks .avkryss input{margin-top:1px} .boks button,.boks .knapp{width:100%;min-height:50px;margin-top:20px;border:0; border-radius:var(--r-sm);background:var(--aksent);color:var(--paa-aksent); font:inherit;font-size:16px;font-weight:700;cursor:pointer;display:flex; align-items:center;justify-content:center} .boks button:hover,.boks .knapp:hover{filter:brightness(1.08)} .boks .liten{font-size:13.5px;color:var(--dempet);margin:16px 0 0;line-height:1.6} .boks .liten a{color:var(--aksent-tekst);font-weight:700} .boks .melding{margin:0 0 18px} .boks .idp{display:flex;align-items:center;gap:12px;width:100%;min-height:50px; padding:0 16px;margin-bottom:10px;background:var(--kort);border:1px solid var(--haar-sterk); border-radius:var(--r-sm);font:inherit;font-size:15.5px;font-weight:600;cursor:pointer; text-decoration:none;color:var(--blekk)} .boks .idp:hover{border-color:var(--aksent);background:var(--felt)} .boks .idp .m{width:28px;height:28px;border-radius:8px;display:grid;place-items:center; font-family:var(--mono);font-size:10px;font-weight:700;background:var(--felt); color:var(--dempet);flex:none} /* Orbiten (R9a) bor i komponenter.css, som hver flate laster. Den sto her også, med feil sveipkurve. Se der. */ /* Menyen viker der den slutter å få plass — 1080 px, ikke 900. * * 900 var et valgt tall. Det målte ingenting, og mellom 901 og 1070 px sto * menyen framme i en spalte som ikke rakk: hele siden rullet sidelengs ved * 1024 px, som er både eldre bærbare og nettbrett på tvers. * * Tallet nå er målt: merke 148 + meny 551 + høyrekant 280 + to mellomrom 40 * = 1019 px, som trenger 1071 px skjerm med spaltens marger. 1080 gir det * en piksel eller ni å gå på. * * Seksjonsrutenettene under står igjen på 900. De er en annen vurdering — * når en tospalte blir for trang — og skal ikke flytte seg fordi menyen * gjorde det. */ @media(max-width:1080px){.top nav{display:none}} @media(max-width:900px){ .smerte .to,.trinn,.rollegrid,.tallgrid{grid-template-columns:1fr} } footer .rett{font-weight:500;letter-spacing:.04em} /* ── Mot strømmen ──────────────────────────────────────────── Seksjonen der vi sier hva vi ikke gjør, og hvorfor. Den ligger tidlig, rett etter sammenligningen: en leser som har kjent seg igjen i problemet, er den som er klar til å høre at vi løser det annerledes enn resten. */ .motstroms{padding:60px 0;background:var(--kort); border-top:1px solid var(--haar);border-bottom:1px solid var(--haar)} .motstroms h2{font-size:clamp(26px,3.2vw,36px);max-width:20ch;margin-bottom:14px} .motstroms h2 em{font-style:normal;color:var(--aksent-tekst)} .motstroms .ing{color:var(--dempet);font-size:17px;max-width:62ch;margin:0 0 12px} .motgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 24px} .motkort{background:var(--side);border:1px solid var(--haar); border-radius:var(--r-lg);padding:22px 24px} .motkort .ik{width:40px;height:40px;border-radius:12px;background:var(--felt); color:var(--aksent-tekst);display:grid;place-items:center;margin-bottom:14px} .motkort .ik svg{width:21px;height:21px} .motkort h3{font-size:17px;margin-bottom:8px} .motkort p{margin:0;color:var(--dempet);font-size:14.5px} /* Innrømmelsen. Egen boks, fordi den skal leses — ikke gjemmes i brødteksten. En innvending vi tar opp selv, veier mer enn tre vi svarer på. */ .motinnrom{background:var(--felt);border-left:3px solid var(--aksent-hev); border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;font-size:15px; line-height:1.7;max-width:76ch} @media(max-width:900px){.motgrid{grid-template-columns:1fr}} /* ══════════════════════════════════════════════════════════════ M109 — portalen, språkbryteren og prisdelen ══════════════════════════════════════════════════════════════ */ /* Hopp til innholdet. Den første tabulatoren på siden skal føre forbi topplinjen, ikke gjennom den. Synlig bare når den har fokus — en skjult lenke som aldri vises, er en lenke som ikke finnes. */ .hopp{position:absolute;left:-9999px;top:0;z-index:60; background:var(--aksent);color:var(--paa-aksent);padding:11px 17px; border-radius:0 0 var(--r) 0;font-size:var(--t-sm);font-weight:600; text-decoration:none} .hopp:focus{left:0} /* Prisblokken lå her OG i hjem.css, med én piksels forskjell i to marger. Den brukes bare av hjemmesiden, og hjem.css lastes bare der — så den bor der nå, alene. */ /* ── Bryterne i topplinjen ────────────────────────────────────── Den ENESTE definisjonen. Den sto duplisert i hjem.css fram til M120, og de to utgavene hadde drevet fra hverandre med én piksel. ── Hvorfor knappene har en klasse ────────────────────────────── Temaknappene var klasseløse. `button:not([class])` i komponenter.css er sikkerhetsnettet for knapper noen glemte å gi en klasse — og det fanget dem: 44 px høye og vekt 600, mens søskenet i språkbryteren var 31 px og vekt 400. Verre: «Auto» HADDE klassen `on`, så nettet traff den ikke. Den aktive knappen ble dermed lettere enn de to inaktive. Stikk motsatt av det en markering skal si, og ingenting feilet. Kommentaren over nettet sier det selv: det er sikkerhetsnettet, ikke unnskyldningen for å droppe klassen. */ .sprakvalg,.temavalg{display:flex;gap:3px;align-items:center} .sprakvalg .spr,.temavalg .spr{display:inline-flex;align-items:center; justify-content:center;font-family:var(--sans);font-size:var(--t-xs); font-weight:500;background:transparent;color:var(--svak); border:1px solid var(--haar);border-radius:var(--r-sm); /* * ── Berøringsflaten er 44×44, og den er ikke det samme som boksen ────── * * Sto på `min-height:var(--trykk); min-width:var(--trykk)` for at høyden skulle stemme med * `.knapp.liten` — alt i høyrekanten på én linje. Målt 27. september 2026: * 41×36 og 39×36. L11 krever **minst 44×44 per valg**, og L4 sier det samme * om hvert element i baren. * * Boksen kan ikke bare vokse til 44: da blir raden høyere enn knappene ved * siden av, og topplinjen står ikke lenger på én linje — som er den ene * tingen `porter/topplinje.mjs` måler. * * Derfor vokser FLATEN og ikke boksen. Et `::after` strekker seg symmetrisk * utover den synlige kanten til 44×44 og tar trykket. Det som ser ut som en * liten bryter, er en stor knapp — og det er nøyaktig hva WCAG 2.5.8 ber om. */ position:relative; min-height:var(--trykk);padding:0 10px;cursor:pointer;text-decoration:none; min-width:var(--trykk);text-align:center;line-height:1} .sprakvalg .spr::after,.temavalg .spr::after{content:"";position:absolute; left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:44px} /* Den markerte er tyngre enn de umarkerte, ikke lettere. */ .sprakvalg .spr.on,.temavalg .spr.on{background:var(--felt); color:var(--aksent-tekst);border-color:var(--aksent-hev);font-weight:700} .sprakvalg .spr:hover,.temavalg .spr:hover{color:var(--aksent-tekst); border-color:var(--aksent-hev)} /* Bryterne i bunnlinjen. Fra M120 bor temabryteren bare her, og språkbryteren står begge steder — øverst for den som skal velge før hun leser, nederst for den som oppdager underveis at hun kan. Raden står mellom lenkene og opphavsretten, med luft over: den er kontroller, ikke tekst, og skal ikke leses som en fjerde lenkerad. */ .bverktoy{display:flex;justify-content:center;flex-wrap:wrap;gap:10px; margin:18px 0 4px} /* Topplinjen på liten skjerm. * * Under 640 px er det plass til merket og to ting til, ikke tre. Noe må ut. * * ── Hva som gikk ut før, og hvorfor det ble snudd ─────────────────────── * * Fram til v1.0.3 gikk SPRÅKBRYTEREN ut, med denne begrunnelsen: «den står i * bunnlinjen, og språket velges uansett av nettleseren først.» * * Den andre halvdelen av setningen sluttet å være sann samme dag. L11 gjorde * stien til det eneste som bestemmer språket, og `Accept-Language` avgjør * ingenting lenger — nettopp fordi en forhandlet rot gjorde `hreflang="nb" * href="/"` til en påstand som ikke holdt. Se lib/stisprak.ts. * * Dermed var bryteren i toppen plutselig den ENESTE veien en engelsk leser * på telefon har til engelsk tekst, og den lå skjult. Den som ikke leser * norsk, skulle altså rulle gjennom en norsk side for å finne bryteren i * bunnen. L11 sier dessuten hvor den skal stå: «segmentert kontroll i toppen * til høyre», med minst 44×44 berøringsflate per valg. * * «Logg inn» går ut i stedet, og begrunnelsen sto allerede skrevet for * bruddet ved 440 px: kunden som har en konto, går til SIN EGEN adresse — * ikke hit. Lenken blir dessuten stående i bunnlinjen. * * Målt ved 390 px: merke 148 + NO/EN 70 + «Kom i gang» 118 + mellomrom * = 348 px i en spalte på 354. */ @media (max-width:640px){ .top .in{gap:12px} /* Språkbryteren BLIR STÅENDE fra v1.0.3. Se merknaden over. */ .top .hoyre .knapp.kant{display:none} } /* Under 440 px er merket, språkbryteren og handlingen alt som står igjen. * * «Logg inn» gikk ut allerede ved 640 px fra v1.0.3 — se merknaden over. * Begrunnelsen er den samme som sto her: kunden som har en konto, går til * SIN EGEN adresse, ikke hit, og lenken blir stående i bunnlinjen. * * Her sto det først «og den står i portalstripen rett under heroen». Det var * ikke sant. Stripen er stilt i dette arket, i `.portal`-blokken lenger * nede, og tegnes ingen steder — se tester/varemerke.test.ts for hvordan * det ble funnet. En begrunnelse som viser til noe som ikke finnes, er * verre enn ingen: den ser ut som den er etterprøvd. * * Målt ved 360 px: merke 148 + NO/EN 70 + «Kom i gang» 112 + mellomrom * = 342 px i en spalte på 324 — altså for trangt, og merket krymper da til * bare hvelvet. Se regelen under. */ @media (max-width:440px){ /* Huset ut, produktet står. Lockupen er «hvelv · CIRON | Nirona»; under 440 px faller «CIRON» og streken bort, og igjen står hvelvmerket og «Nirona». Den rekkefølgen er ikke tilfeldig: hvelvet ER avsenderen (design-regler R9a-ii), og navnet på siden man står på er det som mangler hvis det forsvinner. En bruker som ikke vet hvilket produkt hun ser på, hjelpes ikke av å vite hvem som lagde det. */ .top .merke .ord .hus,.top .merke .strek{display:none} } /* ── Portalstripen ────────────────────────────────────────────── Mørk, av samme grunn som menyen inne i appen alltid er mørk: et mørkt felt sier «her er du», ikke «her er noe å lese». Den som skal inn, og den som skal kjøpe, skal ikke lete i samme flate. Fargene er skrevet mot --meny og ikke mot temaet for øvrig. Stripen ser lik ut i lyst og mørkt tema, og det er riktig: den er ett sted, ikke en del av siden rundt. */ .portal{background:var(--meny);color:var(--meny-tekst); border-bottom:1px solid var(--meny-haar)} .portal .midtspalte{padding-top:22px;padding-bottom:22px} .portalrad{display:grid;grid-template-columns:1fr auto 1fr;gap:26px; align-items:stretch} /* Uten en sist besøkt virksomhet står feltet alene, og da skal det ikke strekkes over hele bredden — et inntastingsfelt på 1080 px leser som en feil. */ .portalrad.alene{grid-template-columns:minmax(0,520px);justify-content:center} .portalrad .skille{display:flex;flex-direction:column;align-items:center; gap:9px;color:var(--meny-dempet);font-size:var(--t-xs);padding-top:26px} .portalrad .skille .strek{width:1px;flex:1;background:var(--meny-haar)} .pboks{background:var(--meny-teller);border:1px solid var(--meny-haar); border-radius:var(--r-lg);padding:16px 18px} .pboks h2{font-size:var(--t-md);font-weight:600;margin:0 0 4px; color:var(--meny-aktiv-tekst)} .pboks .u{font-size:var(--t-xs);color:var(--meny-dempet);margin:0 0 13px} .pboks .hjelp{font-size:var(--t-xs);color:var(--meny-dempet);margin:9px 0 0} .pboks .hjelp a{color:var(--meny-aktiv-tekst)} .sist{display:flex;align-items:center;gap:12px;text-decoration:none; background:var(--meny-aktiv);border:1px solid var(--meny-haar); border-radius:var(--r);padding:11px 13px;color:var(--meny-aktiv-tekst); min-height:var(--trykk)} .sist:hover{background:var(--meny-haar)} .sist .av{width:34px;height:34px;border-radius:var(--r-sm);flex:none; background:var(--meny-teller);color:var(--meny-aktiv-tekst); display:flex;align-items:center;justify-content:center; font-family:var(--disp);font-weight:700;font-size:13px} .sist .n{font-weight:600;font-size:var(--t-sm);display:block} .sist .a{font-size:var(--t-xs);color:var(--meny-dempet);display:block} .sist .pil{margin-left:auto;color:var(--meny-aktiv-tekst); width:18px;height:18px;flex:none} .sist .pil svg{width:100%;height:100%;display:block;fill:currentColor} /* Feltet og halen leser som én adresse: «ciron» + «.nirona.app». Halen er ikke et forslag, den er resten av adressen, og derfor står den inne i rammen og ikke under den. */ .adr{display:flex;align-items:stretch;margin:0 0 9px} .adr .felt{display:flex;align-items:center;background:var(--meny-teller); border:1px solid var(--meny-haar);border-right:none; border-radius:var(--r) 0 0 var(--r);padding-right:11px;flex:1;min-width:0} .adr input{font-family:var(--sans);font-size:var(--t-sm);background:transparent; border:none;color:var(--meny-aktiv-tekst);padding:0 4px 0 13px;height:var(--trykk);flex:1; min-width:0} .adr input::placeholder{color:var(--meny-dempet)} .adr .hale{font-size:var(--t-xs);color:var(--meny-dempet);white-space:nowrap} .adr .knapp{border-radius:0 var(--r) var(--r) 0;height:var(--trykk)} .adr:focus-within .felt{border-color:var(--aksent-hev)} .pfeil{font-size:var(--t-xs);color:var(--rod-paa-meny);margin:0 0 9px} @media (max-width:820px){ .portalrad{grid-template-columns:1fr;gap:14px} .portalrad .skille{flex-direction:row;padding:0} .portalrad .skille .strek{width:auto;height:1px;flex:1} } /* ── Prisdelen ────────────────────────────────────────────────── Ingen kronebeløp. Det er en forretningsbeslutning, ikke en teknisk, og porten porter/pris.mjs håndhever den — se den for hvorfor. Det som står, er modellen: du betaler for hvor mange som har tilgang, ikke for hvem som svarer. Det er argumentet konkurrentene ikke kan gjenta, og det tåler å stå uten et tall ved siden av. */ .prisdel{border-top:1px solid var(--haar)} @media (max-width:860px){.prisgrid{grid-template-columns:1fr}} @media (max-width:700px){.prisinkl ul{columns:1}} /* Sekundær handling i en boks. * * `.boks button` gir alle knapper i en boks aksentfarge, og det er riktig * for den ene handlingen boksen finnes for. En boks med to veier ut — * «fortsett» og «endre adressen» — trenger at den ene ikke konkurrerer. * * Regel 2-boksen på kvitteringssiden er den første som har to. Uten dette * så begge like primære ut, og unntaket bar like mye vekt som hovedveien. */ .boks button.sekundaer{background:transparent;color:var(--aksent-tekst); border:1px solid var(--haar-sterk)} .boks button.sekundaer:hover{background:var(--felt);filter:none}