/* ============================================================
   Greida kundeportal – for bedriftskundene.
   Lyst og ryddig arbeidsverktøy: tydelig status, raske bestillinger,
   fungerer like godt på mobil som på PC.
   ============================================================ */
:root{
  --ink:#151715; --mut:#5d635d; --mut2:#7a807a; --linje:#e2e4df; --linje2:#d3d6d0; --flate:#f5f6f3; --kort:#fff;
  --topp:#0A0B0A; --merke:#2EB873; --gronn:#1b7a4b; --gronn2:#16663e; --gronn-l:#e3f4ea;
  --blaa:#1c5f92; --blaa-l:#e6f0f9; --gul:#8a4b00; --gul-l:#fdf0dc; --rod:#a3361a; --rod-l:#fbe9e3;
  --lilla:#6b3f98; --lilla-l:#f1e9fa; --gra:#4a5560; --gra-l:#eceff2;
  --r:14px; --r2:10px; --skygge:0 1px 2px #0000000d, 0 4px 14px #0000000a;
  --sikker-b:env(safe-area-inset-bottom, 0px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--flate);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gronn)}
:focus-visible{outline:3px solid var(--merke);outline-offset:2px;border-radius:4px}
.hopp{position:absolute;left:-9999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100}
.hopp:focus{left:8px;top:8px}
h1{font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.15;letter-spacing:-.02em;font-weight:700}
h2{font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
h3{font-size:1rem;font-weight:700}
.mut{color:var(--mut)}
.liten{font-size:.85rem}
.tall{font-variant-numeric:tabular-nums}

/* --- Testmodus --- */
.testlinje{background:#E0A83A;color:#1b1e1b;font-size:.82rem;font-weight:600;padding:.4rem 16px;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
.testlinje b{font-weight:800}
.testlinje select{font-size:.82rem;font-weight:600;background:#1b1e1b;color:#fff;border:0;border-radius:99px;padding:.25rem .6rem;max-width:60vw}
.testlinje a{color:#1b1e1b;font-weight:800}

/* --- Toppfelt --- */
.topp{background:var(--topp);color:#F4F5F2;position:sticky;top:0;z-index:30}
.topp-inn{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:1.2rem;min-height:60px}
.merke{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit;flex:none}
.merke img{border-radius:8px;display:block}
.ord{font-weight:600;font-size:1.3rem;letter-spacing:-.03em}
.ord span{color:var(--merke)}
.topp-tittel{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;opacity:.65;border-left:1px solid #ffffff33;padding-left:.6rem}
.hovednav{display:flex;gap:.2rem;margin-left:.6rem}
.hovednav a{color:#F4F5F2;text-decoration:none;font-size:.92rem;font-weight:600;padding:.5rem .8rem;border-radius:99px;opacity:.78;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.hovednav a:hover{opacity:1;background:#ffffff14}
.hovednav a.aktiv{opacity:1;background:#ffffff1f}
.merkelapp{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:99px;background:var(--merke);color:#04140c;font-size:.72rem;font-weight:800;line-height:1}
.konto{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;color:#F4F5F2;line-height:1.2;padding:.35rem .6rem;border-radius:10px;min-width:0}
.konto:hover{background:#ffffff14}
.konto b{font-size:.88rem;font-weight:700;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.konto span{font-size:.75rem;opacity:.65;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Sider --- */
.app{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:24px 16px 48px;outline:none}
.laster{padding:3rem 0;text-align:center;color:var(--mut)}
.side-topp{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.3rem}
.overtittel{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--mut);margin-bottom:.25rem}
.tilbake{display:inline-flex;align-items:center;gap:.3rem;font-size:.9rem;font-weight:600;text-decoration:none;margin-bottom:.8rem;color:var(--mut)}
.tilbake:hover{color:var(--ink)}
.kort{background:var(--kort);border:1px solid var(--linje);border-radius:var(--r);padding:1.15rem 1.2rem;box-shadow:var(--skygge)}
.kort + .kort{margin-top:1rem}
.to-kol > .kort + .kort{margin-top:0}
.kort-h{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.75rem}
.kort-h a{font-size:.88rem;font-weight:600;text-decoration:none}
.to-kol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-top:1rem}
.hoved-side{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.2rem;align-items:start}
.sidepanel{position:sticky;top:76px}
.tom{color:var(--mut);padding:1rem 0;text-align:center}
.tom b{display:block;color:var(--ink);margin-bottom:.2rem}
.info{background:var(--blaa-l);color:#123f63;border-radius:var(--r2);padding:.7rem .9rem;font-size:.9rem;margin-bottom:1rem}
.info.gul{background:var(--gul-l);color:#5e3400}
.info.rod{background:var(--rod-l);color:#7a2610}
.info.gronn{background:var(--gronn-l);color:#124d30}

/* --- Knapper --- */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:99px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  font-weight:650;font-size:.93rem;padding:.6rem 1.15rem;text-decoration:none;white-space:nowrap;min-height:42px;transition:background .15s ease,border-color .15s ease}
.knapp:hover{background:#2c302c;border-color:#2c302c}
.knapp.gronn{background:var(--gronn);border-color:var(--gronn)}
.knapp.gronn:hover{background:var(--gronn2);border-color:var(--gronn2)}
.knapp.lys{background:#fff;color:var(--ink);border-color:var(--linje2)}
.knapp.lys:hover{border-color:var(--ink);background:#fff}
.knapp.fare{background:#fff;color:var(--rod);border-color:#e5b7a8}
.knapp.fare:hover{border-color:var(--rod)}
.knapp.bred{width:100%}
.knapp.liten{min-height:34px;padding:.35rem .85rem;font-size:.85rem}
.knapp:disabled{opacity:.5;cursor:not-allowed}
.knapper{display:flex;flex-wrap:wrap;gap:.5rem}
.lenkeknapp{background:none;border:0;color:var(--gronn);font-weight:600;padding:.2rem;text-decoration:underline;text-underline-offset:.15em}

/* --- Nøkkeltall --- */
.fliser{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}
.flis{background:var(--kort);border:1px solid var(--linje);border-radius:var(--r);padding:.95rem 1rem;text-decoration:none;color:var(--ink);box-shadow:var(--skygge);
  display:flex;flex-direction:column;gap:.15rem;transition:border-color .15s ease,transform .15s ease}
.flis:hover{border-color:var(--linje2);transform:translateY(-1px)}
.flis-tall{font-size:2rem;font-weight:750;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.flis-tekst{font-size:.84rem;color:var(--mut);font-weight:600;line-height:1.3}
.flis.fremhev{border-color:#9fd8b9;background:#f5fcf8}
.flis.fremhev .flis-tekst{color:var(--gronn)}
.flis.varsel{border-color:#efd09c;background:#fffaf1}
.flis.varsel .flis-tekst{color:var(--gul)}
.snarveier{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem}
.snarvei{display:flex;gap:.8rem;align-items:flex-start;background:var(--kort);border:1px solid var(--linje);border-radius:var(--r);padding:1rem;text-decoration:none;color:var(--ink);box-shadow:var(--skygge)}
.snarvei:hover{border-color:var(--gronn)}
.snarvei .ikon{flex:none;width:40px;height:40px;border-radius:12px;background:var(--gronn-l);color:var(--gronn);display:grid;place-items:center}
.snarvei b{display:block;font-size:.98rem}
.snarvei span{font-size:.86rem;color:var(--mut)}

/* --- Lister --- */
.liste{list-style:none}
.liste > li + li{border-top:1px solid var(--linje)}
.rad{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:center;padding:.75rem .2rem;text-decoration:none;color:var(--ink)}
a.rad:hover{background:#fafbf9}
.rad-tittel{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rad-under{display:block;font-size:.86rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rad-hoyre{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
.rad-dato{font-size:.86rem;color:var(--mut);white-space:nowrap}
.ordrenr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:var(--mut);font-weight:600}
.tabell-kort{padding:0;overflow:hidden}
.tabell-kort .liste > li{padding:0 1.1rem}
.tabell-kort .rad{padding:.85rem 0}
.vis-flere{display:block;margin:1rem auto 0}

/* --- Status --- */
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:99px;padding:.18rem .65rem;font-size:.8rem;font-weight:700;white-space:nowrap;background:var(--gra-l);color:var(--gra)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.mottatt{background:var(--gra-l);color:var(--gra)}
.pill.planlagt{background:var(--blaa-l);color:var(--blaa)}
.pill.underveis{background:var(--gul-l);color:var(--gul)}
.pill.levert,.pill.godkjent,.pill.akseptert{background:var(--gronn-l);color:var(--gronn)}
.pill.avvik,.pill.avvist{background:var(--rod-l);color:var(--rod)}
.pill.retur{background:var(--lilla-l);color:var(--lilla)}
.pill.kansellert,.pill.trukket,.pill.utlopt,.pill.avslatt{background:#ececea;color:#5a5f5a}
.pill.ny,.pill.sendt{background:var(--gul-l);color:var(--gul)}
.pill.pa-vei{background:var(--gul);color:#fff}
.pill.pa-vei::before{animation:puls 1.4s ease-in-out infinite}
@keyframes puls{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pill.pa-vei::before{animation:none}}

/* --- Verktøylinje (søk og filter) --- */
.verktoy{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.9rem}
.sok{flex:1 1 280px;position:relative}
.sok input{width:100%;padding:.65rem .9rem .65rem 2.4rem;border:1.5px solid var(--linje2);border-radius:99px;background:#fff;min-height:44px}
.sok input:focus{border-color:var(--gronn);outline:none;box-shadow:0 0 0 3px #2EB87333}
.sok svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--mut2)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{border:1.5px solid var(--linje2);background:#fff;border-radius:99px;padding:.4rem .85rem;font-size:.88rem;font-weight:600;color:var(--ink);min-height:38px}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .n{opacity:.6;font-weight:600;margin-left:.2rem}

/* --- Faner (Bestill) --- */
.faner{display:flex;gap:.3rem;border-bottom:1px solid var(--linje);margin-bottom:1.1rem;overflow-x:auto;scrollbar-width:none}
.faner::-webkit-scrollbar{display:none}
.faner a{padding:.65rem .9rem;text-decoration:none;color:var(--mut);font-weight:650;font-size:.94rem;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.faner a:hover{color:var(--ink)}
.faner a.aktiv{color:var(--ink);border-bottom-color:var(--merke)}

/* --- Oppdrag: fremdrift og tidslinje --- */
.fremdrift{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin:1rem 0 .4rem;list-style:none}
.fremdrift li{position:relative;padding-top:1.35rem;font-size:.84rem;font-weight:650;color:var(--mut2);text-align:center}
.fremdrift li::before{content:"";position:absolute;top:.35rem;left:0;right:0;height:5px;border-radius:99px;background:var(--linje)}
.fremdrift li.ferdig{color:var(--gronn)}
.fremdrift li.ferdig::before{background:var(--merke)}
.fremdrift li.na{color:var(--ink)}
.fremdrift li.na::before{background:linear-gradient(90deg,var(--merke) 55%,var(--linje) 55%)}
.fremdrift.avvik li.na::before{background:linear-gradient(90deg,#e0603a 55%,var(--linje) 55%)}
.nar{font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:700;letter-spacing:-.01em;margin-top:.6rem}
.pa-vei-banner{display:flex;align-items:center;gap:.7rem;background:#fff6e6;border:1.5px solid #efc987;color:#6a3a00;border-radius:var(--r);padding:.85rem 1rem;font-weight:650;margin-bottom:1rem}
.pa-vei-banner .prikk{width:12px;height:12px;border-radius:50%;background:#E0A83A;flex:none;box-shadow:0 0 0 0 #E0A83A88;animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 #E0A83A88}100%{box-shadow:0 0 0 12px #E0A83A00}}
@media (prefers-reduced-motion:reduce){.pa-vei-banner .prikk{animation:none}}
.fakta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.2rem}
.fakta dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);font-weight:700}
.fakta dd{margin-top:.1rem;overflow-wrap:anywhere}
.tidslinje{list-style:none;position:relative;padding-left:1.3rem}
.tidslinje::before{content:"";position:absolute;left:.33rem;top:.4rem;bottom:.4rem;width:2px;background:var(--linje)}
.tidslinje li{position:relative;padding:.3rem 0 .55rem}
.tidslinje li::before{content:"";position:absolute;left:-1.22rem;top:.62rem;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--linje2)}
.tidslinje li:last-child::before{border-color:var(--merke);background:var(--merke)}
.tidslinje b{display:block;font-weight:650}
.tidslinje span{font-size:.84rem;color:var(--mut)}
.bevis-bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin-top:.7rem}
.bevis-bilder a{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--linje);background:#eef0ec}
.bevis-bilder img{width:100%;height:100%;object-fit:cover;display:block}
.signatur{margin-top:.6rem;background:#fff;border:1px dashed var(--linje2);border-radius:10px;padding:.5rem;max-width:320px}
.signatur img{width:100%;height:auto;display:block}
.varelinjer{list-style:none}
.varelinjer li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-top:1px solid var(--linje)}
.varelinjer li:first-child{border-top:0}

/* --- Katalog --- */
.katalog{list-style:none}
.vare{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.3rem 1rem;align-items:center;padding:.8rem 1.1rem;border-top:1px solid var(--linje)}
.vare:first-child{border-top:0}
.vare-navn{font-weight:650}
.vare-under{display:flex;flex-wrap:wrap;gap:.2rem .7rem;font-size:.83rem;color:var(--mut);margin-top:.15rem;align-items:center}
.tilgj{display:inline-flex;align-items:center;gap:.3rem;font-weight:650}
.tilgj::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.tilgj.lager{color:var(--gronn)}
.tilgj.fa{color:var(--gul)}
.tilgj.bestilling{color:var(--gra)}
.pris{text-align:right;white-space:nowrap}
.pris b{font-size:1.02rem;font-variant-numeric:tabular-nums}
.pris s{display:block;font-size:.8rem;color:var(--mut2);font-variant-numeric:tabular-nums}
.pris small{display:block;font-size:.74rem;color:var(--mut)}
.legg{display:flex;align-items:center;gap:.4rem}
.antall{display:inline-flex;align-items:center;border:1.5px solid var(--linje2);border-radius:99px;background:#fff;height:40px}
.antall button{width:36px;height:100%;border:0;background:none;font-size:1.15rem;font-weight:700;color:var(--ink);border-radius:99px}
.antall button:hover{background:var(--flate)}
.antall input{width:2.4rem;border:0;text-align:center;font-weight:700;background:none;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.antall input::-webkit-outer-spin-button,.antall input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.i-kurv{font-size:.8rem;color:var(--gronn);font-weight:700}

/* --- Handlekurv --- */
.kurv-linjer{list-style:none;margin-bottom:.8rem}
.kurv-linjer li{display:flex;justify-content:space-between;gap:.8rem;padding:.45rem 0;border-top:1px solid var(--linje);font-size:.92rem}
.kurv-linjer li:first-child{border-top:0}
.sum{border-top:1.5px solid var(--ink);padding-top:.6rem;margin-top:.4rem}
.sum div{display:flex;justify-content:space-between;gap:1rem;padding:.12rem 0;font-variant-numeric:tabular-nums}
.sum div > span:last-child,.kurv-linjer li > span:last-child,.varelinjer li > span:last-child{white-space:nowrap;text-align:right}
.sum .total{font-size:1.1rem;font-weight:750;padding-top:.35rem}
.sum .mut{font-size:.86rem}
.kasselinje{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1rem;padding:.9rem 0;border-top:1px solid var(--linje);align-items:center}
.kasselinje:first-child{border-top:0;padding-top:.2rem}
.kasselinje .styr{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;grid-column:1 / -1}
.kasselinje select{flex:1 1 220px}
.fjern{background:none;border:0;color:var(--rod);font-weight:600;font-size:.86rem;padding:.3rem .2rem}
.kurvlinje{position:fixed;left:0;right:0;bottom:calc(64px + var(--sikker-b));z-index:25;padding:0 12px 10px;pointer-events:none}
.kurvlinje a{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--gronn);color:#fff;text-decoration:none;border-radius:14px;padding:.8rem 1rem;font-weight:700;box-shadow:0 8px 24px #0003;max-width:640px;margin:0 auto}

/* --- Skjema --- */
.skjema{display:grid;gap:.9rem}
.felt{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.felt > span,.felt legend{font-size:.86rem;font-weight:650}
.felt small{font-size:.8rem;color:var(--mut)}
.felt input,.felt select,.felt textarea,.kasselinje select,.jobblinje input,.jobblinje select{width:100%;border:1.5px solid var(--linje2);border-radius:var(--r2);padding:.6rem .75rem;background:#fff;min-height:44px}
.felt textarea{min-height:110px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus,.kasselinje select:focus,.jobblinje input:focus,.jobblinje select:focus{border-color:var(--gronn);outline:none;box-shadow:0 0 0 3px #2EB87333}
.felt .krav{color:var(--rod)}
.rad2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem}
.rad3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.valg{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;cursor:pointer}
.valg input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--gronn);flex:none}
fieldset.felt{border:0}
.radioer{display:grid;gap:.4rem}
.radioer label{display:flex;gap:.6rem;align-items:center;border:1.5px solid var(--linje2);border-radius:var(--r2);padding:.6rem .8rem;background:#fff;cursor:pointer}
.radioer label:has(input:checked){border-color:var(--gronn);background:#f5fcf8}
.radioer input{accent-color:var(--gronn);width:18px;height:18px}
.seksjon-tittel{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--mut);margin:.4rem 0 -.2rem}
.jobblinje{display:grid;grid-template-columns:minmax(0,2.2fr) 84px minmax(0,1.3fr) minmax(0,1.5fr) auto;gap:.5rem;align-items:end;padding:.7rem 0;border-top:1px solid var(--linje)}
.jobblinje:first-of-type{border-top:0}
.jobblinje label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;font-weight:650;min-width:0}
.jobblinje input,.jobblinje select{font-size:1rem;font-weight:400}
.feilmelding{color:var(--rod);font-weight:600;font-size:.9rem}
.kvittering{text-align:center;padding:2rem 1rem}
.kvittering .hake{width:64px;height:64px;border-radius:50%;background:var(--gronn-l);color:var(--gronn);display:grid;place-items:center;margin:0 auto 1rem}
.kvittering h1{margin-bottom:.4rem}
.kvittering p{max-width:48ch;margin:0 auto .3rem;color:var(--mut)}
.kvittering .knapper{justify-content:center;margin-top:1.2rem}

/* --- Tilbud --- */
.tilbudtabell{width:100%;border-collapse:collapse;font-size:.93rem}
.tilbudtabell th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:700;padding:.5rem .4rem;border-bottom:1.5px solid var(--ink)}
.tilbudtabell td{padding:.6rem .4rem;border-bottom:1px solid var(--linje);vertical-align:top}
.tilbudtabell .h{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tilbudtabell tr.tekst td{color:var(--mut);font-style:italic}
.tabell-rull{overflow-x:auto}
.svarboks{border:1.5px solid var(--gronn);background:#f7fcf9}
.fritekst{white-space:pre-line}

/* --- Innlogging --- */
.login{min-height:calc(100vh - 40px);display:grid;place-items:center;padding:24px 16px;width:100%}
.login-kort{width:100%;max-width:420px;background:#fff;border:1px solid var(--linje);border-radius:20px;padding:2rem 1.6rem;box-shadow:0 10px 40px #0000000f}
.login-kort .ikon{width:56px;height:56px;border-radius:14px;display:block;margin-bottom:1rem}
.login-kort h1{font-size:1.7rem}
.login-kort > p{color:var(--mut);margin:.4rem 0 1.3rem}
.login-kort .skille{display:flex;align-items:center;gap:.7rem;color:var(--mut2);font-size:.82rem;margin:1.1rem 0}
.login-kort .skille::before,.login-kort .skille::after{content:"";flex:1;height:1px;background:var(--linje)}

/* --- Bunn --- */
.bunn{text-align:center;font-size:.82rem;color:var(--mut);padding:1rem 16px 1.6rem}
.bunnnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--linje);display:none;padding-bottom:var(--sikker-b)}
.bunnnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;text-decoration:none;color:var(--mut);font-size:.7rem;font-weight:650;min-height:62px;position:relative}
.bunnnav a.aktiv{color:var(--gronn)}
.bunnnav .merkelapp{position:absolute;top:6px;left:calc(50% + 6px)}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--sikker-b));transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:.7rem 1rem;font-weight:600;font-size:.92rem;z-index:50;
  box-shadow:0 8px 24px #0004;max-width:calc(100vw - 32px);width:max-content}
.toast.feil{background:var(--rod)}

/* --- Tilpasset skjermstørrelse --- */
@media (max-width:1100px){
  .fliser{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hovednav a{padding:.5rem .6rem}
}
@media (max-width:900px){
  .hoved-side{grid-template-columns:1fr}
  .sidepanel{position:static}
  .to-kol{grid-template-columns:1fr}
  .snarveier{grid-template-columns:1fr}
  .jobblinje{grid-template-columns:minmax(0,1fr) 84px;}
  .jobblinje label.bred{grid-column:1 / -1}
}
@media (max-width:760px){
  .hovednav,.topp-tittel{display:none}
  .bunnnav{display:flex}
  body.har-nav{padding-bottom:calc(64px + var(--sikker-b))}
  body.har-kurv .app{padding-bottom:120px}
  .app{padding-top:18px}
  .fliser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flis-tall{font-size:1.7rem}
  .rad2,.rad3,.fakta{grid-template-columns:1fr}
  .vare{grid-template-columns:minmax(0,1fr) auto}
  .vare .legg{grid-column:1 / -1;justify-content:flex-end}
  .side-topp .knapper{width:100%}
  .konto b{max-width:14ch}
  .konto span{max-width:18ch}
  .bunn{display:none}
}
@media (min-width:761px){.kurvlinje{display:none!important}}
@media (max-width:760px){body.har-kurv .toast{bottom:calc(150px + var(--sikker-b))}}
@media print{.topp,.bunnnav,.kurvlinje,.testlinje,.toast,.bunn{display:none!important}body{background:#fff}.kort{box-shadow:none}}