/* Enora Cyber: designsystemet for de kundevendte sidene (security og ai-readiness).
   Bygget én gang fra den godkjente mockupen (dokumentasjon/mockups/kundereise-salg.tpl.html).
   Sidene er tynne skall rundt disse klassene. IT-DD sine sider (start.html, takk.html,
   skjema-app.html) bruker fortsatt sin egen innebygde CSS og er ikke beroert.

   Regelen bak alt her: kunden skal se tre ting uten aa lese. Raskt, gratis, verdifullt.
   Typografi, ro og ekte tall er luksusen. Ingen ikonpakker, ingen dekor for dekorens skyld. */

/* Brand-fontene som filer, ikke base64. Eliza til overskrifter og tall, Geist Mono til
   etiketter. Feiler en fil, faller siden til Georgia og Arial, som er lesbart men ikke oss.
   Portalen bruker fortsatt den innbakte utgaven i design/fonts-embedded.css. */
@font-face{font-family:'Eliza';src:url(../fonts/eliza.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Eliza';src:url(../fonts/eliza-italic.woff2) format('woff2');font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(../fonts/geist-mono.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(../fonts/geist-mono-bold.woff2) format('woff2');font-weight:500 700;font-display:swap}

:root{--ink:#0A3311;--ink2:#0F0F0E;--green:#0C7A1F;--mid:#56CC5E;--light:#B0F5A2;--mint:#DDFFD6;--pink:#FACDE3;
--paper:#F0F0EB;--card:#FFFFFF;--line:#C8C8C0;--mut:#5c625b;--disp:'Eliza',Georgia,serif;--mono:'Geist Mono',Arial,sans-serif;
--text:'Segoe UI',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--paper);color:#1a231c;font-family:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);margin:0;line-height:1.1;font-weight:400}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--mid);outline-offset:2px}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;max-width:1120px;margin:0 auto;gap:14px}
.topbar .logo{display:inline-flex}
.topbar .logo svg{display:block;height:24px;width:auto}
.topbar .rett{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.8;text-align:right}
.topbar.moerk .logo svg path{fill:#fff}.topbar.moerk .rett{color:var(--mint)}

/* Demobanner. Vises bare med ?demo=1 eller en DEMO-referanse. */
.demo-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:#8a5a00;color:#fff;text-align:center;font-size:12.5px;font-weight:600;padding:7px 12px;letter-spacing:.03em}
body.is-demo .demo-banner{display:block}

/* Heroen. To kolonner: budskap og bevis til venstre, skjema til hoeyre. Alt over folden. */
.hero{background:var(--ink);color:var(--mint);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:52vw;height:52vw;max-width:720px;max-height:720px;border-radius:50%;
background:radial-gradient(circle,rgba(86,204,94,.35),rgba(86,204,94,0) 70%);top:-20%;right:-12%;filter:blur(40px);pointer-events:none}
.hero-in{max-width:1120px;margin:0 auto;padding:22px 28px 54px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,420px);gap:48px;align-items:start;position:relative}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--light);margin-bottom:18px}
.kicker b{color:#fff;font-weight:600}
.hero h1{color:#fff;font-size:clamp(36px,4.3vw,54px);max-width:16ch;margin-bottom:16px}
.hero .ing{font-size:17px;line-height:1.55;color:var(--mint);max-width:46ch;margin-bottom:30px}
/* De tre bevisene. Ett tall eller ett ord, en linje under. Ikke tre avsnitt. */
.bevis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bevis div{border:1px solid rgba(176,245,162,.35);border-radius:14px;padding:16px 16px 14px;background:rgba(255,255,255,.04)}
.bevis .v{font-family:var(--disp);font-size:34px;color:#fff;line-height:1;margin-bottom:6px}
.bevis .v small{font-size:16px;color:var(--light);margin-left:3px}
.bevis .t{font-size:12.5px;line-height:1.5;color:var(--mint);opacity:.95}
.bevis .t a{color:var(--light);text-decoration:none;border-bottom:1px solid rgba(176,245,162,.5)}
.bevis div.gratis{background:var(--light);border-color:var(--light)}
.bevis div.gratis .v{color:var(--ink)}.bevis div.gratis .t{color:#1f3a1a;opacity:1}

/* Bestillingskortet. Tre felter. DPA-teksten kollapset rett under avkrysningen. */
.bestill{background:var(--card);border-radius:18px;padding:26px 26px 22px;box-shadow:0 22px 60px rgba(0,0,0,.28);color:#1a231c;margin:0}
.bestill h2{font-size:22px;margin-bottom:4px}
.bestill .und{font-size:13px;color:var(--mut);margin-bottom:18px}
.felt{display:block;margin-bottom:12px}
.felt span{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}
.felt input,.felt select,.felt textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;color:#1a231c}
.felt textarea{resize:vertical;min-height:64px}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:2px solid var(--mid);outline-offset:-1px}
/* hidden-attributtet skal vinne over display-regler som .frem{display:inline-flex}. */
[hidden]{display:none!important}
.kort.ferdig{border-color:var(--mid);background:var(--mint)}
.kort.ferdig .nr{color:var(--ink)}
.krys{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:#3b4a3e;margin-top:12px}
.krys input{margin-top:3px;flex:none}
.krys a{color:var(--green)}
details.dpa-inline{margin:6px 0 0 26px;font-size:12px}
details.dpa-inline summary{cursor:pointer;color:var(--green);list-style:none}
details.dpa-inline summary::-webkit-details-marker{display:none}
details.dpa-inline .doc{margin-top:8px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--paper);font-size:11.5px;line-height:1.55;color:#3b4a3e}
/* Honningpotte mot roboter. Skjult for mennesker, fylt av skript. Sjekkes paa serveren. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;padding:14px 26px;font-size:15px;font-weight:600;text-decoration:none;line-height:1.2;font-family:inherit}
.knapp:disabled{opacity:.55;cursor:wait}
.knapp.full{width:100%;margin-top:16px}
.knapp.gron{background:var(--green);border-color:var(--green)}
.knapp.lys{background:var(--light);color:var(--ink);border-color:var(--light)}
.knapp.tom{background:transparent;color:var(--ink)}
.knapp.dempet{opacity:.35;pointer-events:none}
.knapp.liten{padding:10px 18px;font-size:13.5px}
.mikro{font-size:12px;color:var(--mut);text-align:center;margin-top:10px}
.form-msg{display:none;margin-top:12px;font-size:13.5px;line-height:1.5;padding:12px 14px;border-radius:10px}
.form-msg.err{display:block;background:#F8DCD2;color:#7a2a12}
.form-msg.ok{display:block;background:var(--mint);color:var(--ink)}

/* Seksjoner under folden */
section.sek{padding:72px 0}
section.sek.lys{background:var(--card)}
.sek-kick{font-family:var(--mono);font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.sek h2{font-size:34px;max-width:24ch;margin-bottom:12px}
.lede{font-size:16px;color:#3b4a3e;max-width:60ch;margin-bottom:26px}

/* Rapportutdraget: den ekte rapportens foerste side, rendret fra demokjoeringen og lagt i en
   ramme (utdrag/<type>.html). Rammen viser toppen og toner ut, saa det ser ut som et ark. */
.rapp-ramme{position:relative;height:760px;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 2px 18px rgba(10,51,17,.07);margin-top:6px;background:#fff}
.rapp-ramme iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.rapp-ramme .fade{position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(rgba(255,255,255,0),#fff 85%);pointer-events:none}
@media(max-width:560px){.rapp-ramme{height:640px}}
/* Klassene under brukes av mockupen og av utdraget i mockupen. */
.rapp{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 2px 18px rgba(10,51,17,.07);margin-top:6px}
.rapp-topp{background:var(--ink);color:var(--mint);padding:26px 28px;display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.rapp-kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--light);margin-bottom:8px}
.rapp-topp b{display:block;font-family:var(--disp);font-size:30px;color:#fff;line-height:1.1;font-weight:400}
.rapp-topp p{margin-top:9px;font-size:13.5px;line-height:1.6;max-width:56ch;color:var(--mint)}
.rapp-tall{margin-left:auto;text-align:right;flex:none}
.rapp-tall b{font-family:var(--disp);font-size:40px;color:var(--light);line-height:1}
.rapp-tall span{display:block;font-size:11.5px;color:var(--mint);opacity:.85;margin-top:2px}
.nivstige{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.nivstige.fire{grid-template-columns:repeat(4,1fr)}
.nivsteg{background:var(--paper);padding:13px 16px;text-align:center}
.nivsteg b{display:block;font-family:var(--disp);font-size:15px;color:var(--ink);font-weight:400}
.nivsteg span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.nivsteg.paa{background:var(--light)}
.nivsteg.paa span{color:#22401f;font-weight:600}
.rapp-del{padding:22px 28px 6px}
.rapp-h{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mut);margin:14px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.rapp-del .rapp-h:first-child{margin-top:0}
.funnrad{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline;padding:9px 0}
.funnrad b{display:block;font-family:var(--disp);font-size:15px;color:var(--ink);font-weight:400}
.funnrad i{display:block;font-style:normal;font-size:12.5px;line-height:1.55;color:#4a4f49;margin-top:3px}
.pill{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;font-weight:600}
.pill.av{background:#7a1410;color:#fff}
.pill.ok{background:var(--mint);color:#14400f;border:1px solid var(--light)}
.pill.obs{background:var(--paper);color:#4a4f49;border:1px solid var(--line)}
.rapp-bunn{display:flex;gap:22px;flex-wrap:wrap;padding:16px 28px;border-top:1px solid var(--line);background:var(--paper);font-size:12px;color:#4a4f49}
.rapp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.rapp-stat{background:var(--paper);padding:13px 16px;text-align:center}
.rapp-stat b{display:block;font-family:var(--disp);font-size:26px;color:var(--ink);line-height:1;font-weight:400}
.rapp-stat span{display:block;font-size:11.5px;color:var(--mut);margin-top:4px}
.rapp-stat.rod b{color:#7a1410}
.sbar{display:grid;grid-template-columns:1fr 130px 44px;gap:12px;align-items:center;padding:6px 0;font-size:13px;color:var(--ink)}
.sbar .tr{height:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.sbar .tr i{display:block;height:100%;background:var(--mid)}
.sbar .tr i.lav{background:#7a1410}
.sbar em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--mut);text-align:right;white-space:nowrap}
.sbar-mer{font-size:12px;color:var(--mut);padding:6px 0 10px}
.liten-note{font-size:12px;color:var(--mut);margin-top:14px;line-height:1.6;max-width:70ch}

/* Fire steg. Hvem som gjoer steget staar oppe i hjoernet, saa kunden ser at to av fire er deres. */
.steg4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.steg4 div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;position:relative}
.steg4 div::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--disp);font-size:26px;color:var(--mid);display:block;margin-bottom:8px}
.steg4 b{display:block;font-size:15.5px;color:var(--ink);font-weight:600;margin-bottom:3px}
.steg4 span{display:block;font-size:12.5px;color:var(--mut)}
.steg4 .tid{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;background:var(--mint);color:var(--green);border-radius:999px;padding:3px 9px}
.steg4 .hvem{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.steg4 .hvem.dere{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Hvem staar bak. Ett bilde, tre linjer. Fjernes ved aa slette seksjonen med id="bak". */
.bak{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 26px}
.bak .foto{width:150px;height:170px;border-radius:14px;overflow:hidden;background:#ccd}
.bak .foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;filter:saturate(.92)}
.bak h3{font-size:24px;margin-bottom:2px}
.bak .rolle{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.bak p{font-size:15px;line-height:1.6;color:#2b3a2e;max-width:78ch}

/* Kollapsede seksjoner med aerlige overskrifter. Ingenting slettes, alt pakkes. */
details.kort{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
details.kort>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:var(--ink)}
details.kort>summary::-webkit-details-marker{display:none}
details.kort>summary .for{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);font-weight:400;text-align:right}
details.kort>summary::before{content:'+';font-family:var(--disp);font-size:22px;color:var(--green);width:18px;flex:none}
details.kort[open]>summary::before{content:'\2212'}
details.kort .inn{padding:0 20px 20px;font-size:14px;line-height:1.6;color:#3b4a3e}
details.kort .inn p+p{margin-top:8px}
details.kort .inn table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
details.kort .inn td,details.kort .inn th{text-align:left;padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
details.kort .inn th{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);border-top:0}
details.kort .inn .doc{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--paper);font-size:12.5px;line-height:1.6;margin-top:8px}
/* Det lille spoersmaalstegnet. Et klikk viser forklaringen under, ogsaa paa mobil. */
.hvorfor{display:inline-flex;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;font-size:11px;color:var(--green);font-weight:700;vertical-align:1px;margin-left:5px;cursor:help;background:#fff;padding:0;line-height:1}
.forkl{display:block;font-size:12.5px;line-height:1.55;color:#3b4a3e;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px}
.forkl[hidden]{display:none}
footer.fot{background:var(--ink);color:var(--mint);padding:34px 0;font-size:12.5px}
footer.fot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer.fot a{color:var(--light);text-decoration:none}

/* ---- Kom i gang ---- */
.kig-topp{max-width:1120px;margin:0 auto;padding:36px 28px 22px;display:flex;gap:18px;align-items:center}
.hake{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:24px;flex:none}
.kig-topp h1{font-size:34px;margin-bottom:4px}
.kig-topp p{font-size:15px;color:#3b4a3e;max-width:60ch}
.tokort{max-width:1120px;margin:0 auto;padding:0 28px 30px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.kort{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.kort .nr{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.kort h2{font-size:24px;margin-bottom:8px}
.kort p{font-size:14.5px;color:#3b4a3e;line-height:1.55}
.kort .sp{font-size:16px;color:var(--ink);font-weight:600;margin:14px 0 12px}
.kort .rad{display:flex;gap:10px;flex-wrap:wrap}
.kort .bunn{margin-top:auto;padding-top:16px}
.kort .lite{font-size:12px;color:var(--mut);margin-top:10px}
.sendboks{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px}
.sendboks label{display:block;font-size:12.5px;color:#3b4a3e;margin-bottom:6px}
.sendboks .r{display:flex;gap:8px;flex-wrap:wrap}
.sendboks input{flex:1;min-width:180px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px}
.sendboks .eller{font-size:12px;color:var(--mut);margin-top:9px}
.sendboks .eller a{color:var(--green)}
.sendboks .eller button{background:none;border:0;padding:0;color:var(--green);font:inherit;text-decoration:underline;cursor:pointer}
.kig-under{max-width:1120px;margin:0 auto;padding:10px 28px 60px}
.kig-under .sek-kick{margin-bottom:12px}
.ekstra{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.ekstra .felt{margin-bottom:0}
.ekstra select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;color:#1a231c}

/* ---- Tilgang gitt ---- */
.tg{max-width:760px;margin:0 auto;padding:60px 28px 30px;text-align:center}
.tg .hake{width:64px;height:64px;font-size:32px;margin:0 auto 18px}
.tg .hake.varsel{background:#8a5a00}
.tg h1{font-size:38px;margin-bottom:10px}
.tg p{font-size:16px;color:#3b4a3e;max-width:50ch;margin:0 auto 24px}
.frem{display:inline-flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 10px;font-size:13px;color:#3b4a3e;margin-bottom:22px}
.frem .ring{width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--pct,0%),var(--mint) var(--pct,0%) 100%)}
.tg-under{max-width:760px;margin:0 auto;padding:0 28px 60px}
/* Stegene paa Tilgang gitt: utvidet tilgang (2 av 3) og spoersmaalene (3 av 3). */
.tg-steg{max-width:1120px;margin:0 auto;padding:6px 28px 34px}
.tg-steg .kort h2{font-size:24px;margin-bottom:8px}
.tg-steg .kort p{font-size:14.5px;color:#3b4a3e;line-height:1.55}
.tg-steg .frem{margin:12px 0 0}
.tg-steg .lede{margin-bottom:20px}
.tokort.dekk-rad{padding:0;max-width:none}
.kort.dekk .tall{font-family:var(--disp);font-size:20px;color:var(--ink);margin:6px 0 10px}
.kort.dekk .tall b{font-size:44px;font-weight:400;line-height:1}
.kort.dekk.anbefalt{border-color:var(--mid);box-shadow:0 12px 34px rgba(10,51,17,.12)}
.merke{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;background:var(--light);color:var(--ink);border-radius:999px;padding:2px 8px;vertical-align:1px}
/* Én stolpe: groenn for det som alt dekkes, stiplet for det utvidet tilgang legger til. */
.dekkbar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.dekkbar i{display:block;height:100%}
.dekkbar .fylt{background:var(--green)}
.dekkbar .ekstra{background:repeating-linear-gradient(135deg,var(--mint) 0 6px,#fff 6px 12px);border-left:2px dashed var(--green)}
.dekkbar{margin-top:6px}
.dekklabels{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 12px;font-size:13px;color:#3b4a3e}
.dekklabels b{font-family:var(--disp);font-size:20px;color:var(--ink);font-weight:400}
.dekklabels .pluss{color:var(--green)}
.dekklabels .pluss b{color:var(--green)}
.dekktekst{font-size:14.5px;line-height:1.55;color:#2b3a2e;margin-bottom:8px}
#utvid .aapner div{padding:8px 0}
#utvid .aapner b{font-size:14.5px}
#utvid .aapner span{font-size:13px}
#utvid .aerlig{margin:12px 0 0;font-size:13px}
#utvid .rad{margin-top:14px}
.aapner div{padding:11px 0;border-top:1px solid var(--line)}
.aapner div:first-child{border-top:0;padding-top:0}
.aapner b{display:block;font-size:15.5px;color:var(--ink);font-weight:600;margin-bottom:2px}
.aapner span{display:block;font-size:13.5px;line-height:1.5;color:#3b4a3e}
.aerlig{font-size:13.5px;color:#3b4a3e;margin:16px 0 14px;max-width:70ch}
.oppskrift{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.oppskrift .kort p{margin-top:8px}
ol.stegliste{margin:8px 0 0;padding-left:22px;font-size:14.5px;line-height:1.55;color:#2b3a2e}
ol.stegliste li{margin-bottom:8px}
.tg-steg .lite{font-size:12.5px;color:var(--mut);margin-top:12px}
@media(max-width:900px){.oppskrift{grid-template-columns:1fr}}
.tg-under pre{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px;overflow:auto;white-space:pre-wrap}

/* ---- Velgersiden ---- */
.velg{max-width:1120px;margin:0 auto;padding:28px 28px 60px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.velg .kort h2{font-size:26px}
.velg .kort .tall{font-family:var(--disp);font-size:44px;color:var(--green);line-height:1;margin:14px 0 4px}
.velg .kort .tall small{font-size:13px;color:var(--mut);font-family:var(--text);margin-left:6px}

@media(max-width:900px){
  .hero-in,.tokort,.velg,.ekstra{grid-template-columns:1fr}
  .hero-in{gap:30px;padding-bottom:40px}
  .bevis,.steg4{grid-template-columns:1fr 1fr}
  .bak{grid-template-columns:1fr}.bak .foto{width:100%;height:220px}
}
@media(max-width:560px){
  .wrap,.topbar,.hero-in,.kig-topp,.tokort,.kig-under,.tg,.tg-under,.velg{padding-left:16px;padding-right:16px}
  .bevis,.steg4{grid-template-columns:1fr}
  .nivstige,.nivstige.fire{grid-template-columns:1fr}
  .rapp-stats{grid-template-columns:1fr 1fr}
  .sbar{grid-template-columns:1fr 90px 44px}
  .sek h2{font-size:28px}
  .bestill{padding:20px 18px 18px;box-shadow:0 12px 30px rgba(0,0,0,.22)}
  .kig-topp{flex-direction:column;align-items:flex-start}
  footer.fot .wrap{flex-direction:column;align-items:flex-start}
}