/* Studio Avtrykk – app.studioavtrykk.no
   Bygget på designprofilen «Utkast 01»: Schibsted Grotesk, blekk/papir/stein og ett rødt stempel (maks 5 %).
   Appen er bevisst lys (papir) for lesbarhet; kundesiden åpner mørkt med ringene, som nettsiden. */

:root{
  --blekk:#0D0D0F; --blekk-2:#17171B; --blekk-linje:#2A2A30;
  --grafitt:#1C1C21; --dempet:#6C6C73; --dempet-mork:#A3A3AB;
  --linje:#E4E2DD; --papir:#F6F5F1; --stein:#ECEAE4; --hvit:#FFFFFF;
  --stempel:#E4492B; --stempel-lys:#F9DDD5; --stempel-mork:#B8361C;
  --ok:#2F7A4F; --ok-lys:#DCEFE3; --vent:#8A5A00; --vent-lys:#F6E7C8;
  --font:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:18px; --r-liten:10px;
  --kant:clamp(16px,4vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--papir);color:var(--grafitt)}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance;color:var(--blekk)}
h1{font-size:clamp(34px,5vw,56px);line-height:.98;letter-spacing:-.04em}
h2{font-size:clamp(22px,2.6vw,30px);line-height:1.05;letter-spacing:-.03em}
h3{font-size:17px;font-weight:600;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--stempel);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.dempet{color:var(--dempet)}
.hint{font-size:13px;color:var(--dempet)}
.etikett{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dempet)}
.etikett b{color:var(--stempel);font-weight:600;margin-right:6px}
.side{max-width:1240px;margin:0 auto;padding-inline:var(--kant);padding-block:0 80px}

/* ---------- merke ---------- */
.merke{display:inline-flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.03em;font-size:16px;text-decoration:none;color:inherit;white-space:nowrap}
.merke svg{width:24px;height:24px;flex:none}

/* ---------- svevende glassmeny ---------- */
.meny-wrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding:14px 0 0}
.meny{display:flex;align-items:center;gap:8px;background:rgba(13,13,15,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;border:1px solid var(--blekk-linje);border-radius:999px;padding:7px 8px 7px 16px;box-shadow:0 10px 30px rgba(13,13,15,.12)}
.meny .faner{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.meny .faner::-webkit-scrollbar{display:none}
.fane{background:none;border:0;color:var(--dempet-mork);font-size:13px;font-weight:500;padding:8px 12px;border-radius:999px;white-space:nowrap}
.fane:hover{color:#fff}
.fane[aria-selected="true"]{background:#fff;color:var(--blekk)}
.fane .n{font-size:11px;margin-left:5px;opacity:.7}
.meny .ny{background:var(--stempel);color:#fff;border:0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap}
@media (max-width:640px){.meny .merke span{display:none}.meny{padding-left:12px}}

/* ---------- knapper ---------- */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--linje);background:var(--hvit);color:var(--blekk);border-radius:12px;padding:9px 16px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.knapp:hover{border-color:var(--blekk)}
.knapp.blekk{background:var(--blekk);border-color:var(--blekk);color:#fff}
.knapp.blekk:hover{background:var(--grafitt)}
.knapp.stempel{background:var(--stempel);border-color:var(--stempel);color:#fff}
.knapp.liten{padding:5px 11px;font-size:13px;border-radius:10px}
.knapp.spokelse{background:transparent;border-color:transparent;color:var(--dempet)}
.knapp.spokelse:hover{color:var(--blekk);border-color:var(--linje)}
.knapp:disabled{opacity:.45;cursor:default}
.knapp.fare{color:var(--stempel-mork)}
.knapp.fare.armert{background:var(--stempel);border-color:var(--stempel);color:#fff}
.x{border:0;background:none;color:var(--dempet);font-size:12px;padding:0 2px}
.x:hover,.x.armert{color:var(--stempel-mork)}

/* ---------- topp ---------- */
.topp{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding:40px 0 24px}
.topp h1{font-size:clamp(32px,4.4vw,48px)}
.tall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);overflow:hidden;margin-bottom:28px}
.tall>div{padding:16px 18px;border-left:1px solid var(--linje);min-width:0}
.tall>div:first-child{border-left:0}
.tall b{display:block;font-size:30px;font-weight:500;letter-spacing:-.04em;color:var(--blekk);margin-top:4px;font-variant-numeric:tabular-nums}
.tall small{font-size:12px;color:var(--dempet)}
@media (max-width:760px){.tall{grid-template-columns:repeat(2,minmax(0,1fr))}.tall>div:nth-child(3){border-left:0}.tall>div:nth-child(n+3){border-top:1px solid var(--linje)}}

.banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--stein);border-radius:14px;padding:10px 14px;font-size:13px;margin-top:14px}
.banner b{color:var(--blekk)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--stein);color:var(--dempet);white-space:nowrap}
.chip.stempel{background:var(--stempel-lys);color:var(--stempel-mork)}
.chip.ok{background:var(--ok-lys);color:var(--ok)}
.chip.vent{background:var(--vent-lys);color:var(--vent)}
.chip.blekk{background:var(--blekk);color:#fff}

/* ---------- paneler og lister ---------- */
.rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.panel{background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);min-width:0;overflow:hidden}
.panel>header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--linje)}
.panel .innhold{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.rader{list-style:none;margin:0;padding:0}
.rad{display:flex;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--linje);cursor:pointer}
.rad:first-child{border-top:0}
.rad:hover{background:var(--papir)}
.rad .hoved{flex:1;min-width:0}
.rad .hoved b{display:block;font-weight:600;color:var(--blekk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rad .hoved span{font-size:13px;color:var(--dempet)}
.rad.tom{cursor:default;color:var(--dempet)}
.rad.tom:hover{background:none}
.tomt{border:1px dashed var(--linje);border-radius:var(--radius);padding:36px 24px;text-align:center;color:var(--dempet)}
.tomt h2{margin-bottom:8px}
.tomt p{max-width:52ch;margin:0 auto}

/* ---------- ringer (status) ---------- */
.ringer{flex:none;display:block}
.ringer circle{fill:none;stroke-width:1.6;stroke:var(--linje)}
.ringer circle.på{stroke:var(--blekk)}
.ringer circle.punkt{stroke:none;fill:var(--linje)}
.ringer circle.punkt.på{fill:var(--stempel)}
.ringer.mork circle{stroke:var(--blekk-linje)}
.ringer.mork circle.på{stroke:#fff}
.ringer.mork circle.punkt{fill:var(--blekk-linje)}
.ringer.mork circle.punkt.på{fill:var(--stempel)}

/* ---------- kundekort ---------- */
.kortgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.kkort{background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:14px;cursor:pointer;min-width:0;text-align:left}
.kkort:hover{border-color:var(--blekk)}
.kkort .hode{display:flex;gap:12px;align-items:center;min-width:0}
.kkort .hode>div{min-width:0}
.kkort h3{font-size:19px;font-weight:500;letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kkort .lev{display:flex;flex-direction:column;gap:6px}
.kkort .lev div{display:flex;align-items:center;gap:10px;font-size:13px}
.kkort .lev span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.logo{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--blekk);color:#fff;font-weight:600;font-size:16px;letter-spacing:-.02em}
.logo img{width:100%;height:100%;object-fit:contain;background:var(--hvit)}
.logo.stor{width:72px;height:72px;font-size:24px;border-radius:18px}

/* ---------- salg ---------- */
.trakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:20px}
@media (max-width:860px){.trakt{grid-template-columns:1fr}}
.stolper{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.stolpe{display:grid;grid-template-columns:90px minmax(0,1fr) 84px;gap:10px;align-items:center;font-size:13px}
.stolpe .spor{height:8px;background:var(--stein);border-radius:99px;overflow:hidden}
.stolpe .fyll{height:100%;background:var(--blekk);border-radius:99px}
.stolpe .v{text-align:right;font-variant-numeric:tabular-nums}
.ttab{width:100%;border-collapse:collapse;font-size:13px}
.ttab th,.ttab td{padding:8px 18px;border-top:1px solid var(--linje);text-align:left}
.ttab th{border-top:0}
.ttab td.n,.ttab th.n{text-align:right;font-variant-numeric:tabular-nums}
.tavle{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.kolonne{background:var(--stein);border-radius:var(--radius);padding:10px;min-width:0}
.kolonne>h3{display:flex;justify-content:space-between;font-size:13px;padding:4px 6px 10px}
.kolonne>h3 span{color:var(--dempet);font-weight:400}
.lapper{display:flex;flex-direction:column;gap:8px}
.lapp{background:var(--hvit);border:1px solid var(--linje);border-radius:12px;padding:11px 12px;cursor:pointer}
.lapp:hover{border-color:var(--blekk)}
.lapp b{display:block;font-weight:600;color:var(--blekk);line-height:1.3}
.lapp .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:12px;color:var(--dempet)}
.lapp .flytt{display:flex;justify-content:space-between;margin-top:9px}
.lapp .flytt button{border:1px solid var(--linje);background:var(--papir);border-radius:8px;min-width:30px;height:26px;padding:0 8px;font-size:12px;color:var(--dempet)}
.lapp .flytt button:hover{color:var(--blekk);border-color:var(--blekk)}
.lapp .flytt button:disabled{opacity:.3;cursor:default}

/* ---------- logg ---------- */
.verktoy{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--hvit);border:1px solid var(--linje);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 11px;font-size:13px;font-weight:500;color:var(--dempet);border-radius:9px}
.seg button[aria-pressed="true"]{background:var(--blekk);color:#fff}
.logg{list-style:none;margin:0;padding:0;background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius)}
.logg li{display:grid;grid-template-columns:72px 120px minmax(0,1fr);gap:12px;padding:12px 18px;border-top:1px solid var(--linje);align-items:baseline}
.logg li:first-child{border-top:0}
.logg .hvem{font-weight:600;cursor:pointer;color:var(--blekk)}
.logg .hvem:hover{text-decoration:underline}
.logg p{color:var(--dempet);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
@media (max-width:620px){.logg li{grid-template-columns:1fr}}

/* ---------- maler ---------- */
.maler{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.mal{background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mal pre{margin:0;font-family:var(--font);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;max-height:200px;overflow:auto;background:var(--papir);border-radius:12px;padding:12px}
.mal .handlinger{display:flex;gap:6px;margin-top:auto}

/* ---------- profil ---------- */
.tilbake{margin:22px 0 12px;padding-left:0}
.profilhode{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;background:var(--blekk);color:#fff;border-radius:24px;padding:24px;position:relative;overflow:hidden}
.profilhode h1{color:#fff;font-size:clamp(30px,4vw,44px)}
.profilhode .etikett{color:var(--dempet-mork)}
.profilhode .tekst{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative}
.profilhode .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--dempet-mork)}
.profilhode select{background:var(--blekk-2);color:#fff;border:1px solid var(--blekk-linje);border-radius:10px;padding:4px 8px;font-size:13px}
.profilhode .kontakt{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--dempet-mork)}
.profilhode .kontakt a{color:#fff}
.profilhode .bakgrunn{position:absolute;right:-120px;top:-120px;width:420px;height:420px;pointer-events:none;opacity:.5}
.profilhode .knapper{display:flex;gap:8px;flex-wrap:wrap;position:relative}
.profilhode .knapp{background:transparent;color:#fff;border-color:var(--blekk-linje)}
.profilhode .knapp:hover{border-color:#fff}
.profilhode .chip{background:var(--blekk-2);color:var(--dempet-mork)}
.profilhode .chip.stempel{background:var(--stempel);color:#fff}
.profilhode .chip.ok{background:#173326;color:#9fe0b9}
.logoknapp{position:relative;display:block;cursor:pointer}
.logoknapp input{position:absolute;width:1px;height:1px;opacity:0}

.kundelenke{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);padding:12px 14px;margin-top:14px}
.kundelenke code{font-family:var(--font);font-size:13px;background:var(--papir);border-radius:8px;padding:5px 9px;flex:1 1 220px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.kundelenke select{border:1px solid var(--linje);background:var(--hvit);border-radius:10px;padding:5px 8px;font-size:13px}

.profilgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
@media (max-width:920px){.profilgrid{grid-template-columns:1fr}}
.kol{display:flex;flex-direction:column;gap:16px;min-width:0}

.levgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:12px}
.levkort{border:1px solid var(--linje);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:11px;background:var(--papir);min-width:0}
.levkort.levert{background:var(--hvit)}
.levkort .topp-rad{display:flex;gap:10px;align-items:center}
.levnavn{border:0;background:transparent;font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--blekk);padding:2px 0;min-width:0;flex:1;border-bottom:1px dashed transparent;border-radius:0}
.levnavn:hover,.levnavn:focus{border-bottom-color:var(--linje);outline:none}
.trinn{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.trinn button{height:7px;border:0;border-radius:99px;background:var(--stein);padding:0}
.trinn button.på{background:var(--blekk)}
.trinn button.ferdig{background:var(--stempel)}
.trinn button:hover{outline:1px solid var(--dempet)}
.statuslinje{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blekk)}
.felt3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.minifelt{display:flex;flex-direction:column;gap:3px;min-width:0}
.minifelt span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dempet);font-weight:600}
.minifelt input,.minifelt select,.lenkefelt input,.levkort select{border:1px solid var(--linje);background:var(--hvit);border-radius:8px;padding:5px 7px;font-size:13px;width:100%;min-width:0}
.lenkefelt{display:flex;gap:6px;align-items:center}
.levbunn{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.levbunn label{display:flex;gap:5px;align-items:center;color:var(--dempet)}
.levkort details summary{font-size:12px;color:var(--dempet);cursor:pointer}
.levkort textarea{width:100%;border:1px solid var(--linje);background:var(--hvit);border-radius:8px;padding:6px 8px;font-size:13px;margin-top:6px;resize:vertical}
.tur{display:inline-flex;border:1px solid var(--linje);border-radius:99px;overflow:hidden;flex:none;background:var(--hvit)}
.tur button{border:0;background:none;font-size:11px;font-weight:600;padding:3px 9px;color:var(--dempet)}
.tur button[aria-pressed="true"].deg{background:var(--stempel-lys);color:var(--stempel-mork)}
.tur button[aria-pressed="true"].kunde{background:var(--blekk);color:#fff}
.legg-til{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

.spokfelt{display:flex;flex-direction:column;gap:4px}
.spokfelt textarea{border:1px solid transparent;background:var(--papir);border-radius:12px;padding:8px 10px;resize:vertical;min-height:42px;width:100%;field-sizing:content}
.spokfelt textarea:hover{border-color:var(--linje)}
.spokfelt textarea:focus{border-color:var(--blekk);background:var(--hvit);outline:none}

.samtale{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.samtale li{padding:12px 0 12px 12px;border-top:1px solid var(--linje);display:flex;flex-direction:column;gap:4px;border-left:2px solid transparent}
.samtale li:first-child{border-top:0}
.samtale li.inn{border-left-color:var(--blekk)}
.samtale li.kunde{border-left-color:var(--stempel)}
.samtale .linje1{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.samtale .emne{font-weight:600;color:var(--blekk)}
.samtale .tekst{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.samtale details summary{cursor:pointer;font-size:13px;color:var(--blekk)}
.skjema{background:var(--papir);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.skjema input,.skjema textarea{border:1px solid var(--linje);background:var(--hvit);border-radius:10px;padding:8px 10px;width:100%;min-width:0}
.skjema .rad2{display:flex;gap:8px;flex-wrap:wrap}
.skjema .rad2 label{flex:1 1 130px;display:flex;flex-direction:column;gap:3px}

.grupper{display:flex;flex-direction:column;gap:14px}
.gruppe h3{font-size:13px;margin-bottom:6px;display:flex;gap:6px;align-items:baseline}
.gruppe h3 small{font-weight:400;color:var(--dempet)}
.punkter{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:4px}
.punkter li{display:flex;gap:8px;align-items:flex-start;font-size:14px;background:var(--papir);border-radius:10px;padding:7px 9px}
.punkter li>span{flex:1;min-width:0;overflow-wrap:anywhere}
.leggrad{display:flex;gap:6px}
.leggrad input{flex:1;min-width:0;border:1px solid var(--linje);background:var(--hvit);border-radius:10px;padding:6px 9px;font-size:14px}
.sjekk li label{display:flex;gap:8px;align-items:flex-start;flex:1;cursor:pointer}
.sjekk li.ferdig span{text-decoration:line-through;color:var(--dempet)}
.sjekk input[type=checkbox]{margin-top:4px;accent-color:var(--blekk)}

.okonomi{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.okonomi .v{text-align:right;font-variant-numeric:tabular-nums}
.okonomi .sum{font-weight:600;color:var(--blekk);border-top:1px solid var(--linje);padding-top:6px}

.filer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.filer li{display:flex;gap:10px;align-items:center;background:var(--papir);border-radius:10px;padding:6px 8px;font-size:14px}
.filer .mini{width:36px;height:36px;border-radius:8px;background:var(--stein);flex:none;overflow:hidden;display:grid;place-items:center;font-size:10px;color:var(--dempet);font-weight:600}
.filer .mini img{width:100%;height:100%;object-fit:cover}
.filer .fnavn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opplast{position:relative;overflow:hidden}
.opplast input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- skuff ---------- */
.skygge{position:fixed;inset:0;background:rgba(13,13,15,.4);z-index:40}
.skuff{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--papir);border-left:1px solid var(--linje);display:flex;flex-direction:column;z-index:41;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.skuff>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px;border-bottom:1px solid var(--linje);background:var(--hvit)}
.skuff>header h2{overflow-wrap:anywhere}
.skuffkropp{overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:20px}
.skuffbunn{display:flex;justify-content:space-between;gap:8px;padding:14px 20px;border-top:1px solid var(--linje);background:var(--hvit)}
.felter{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.felter .hel{grid-column:1/-1}
@media (max-width:480px){.felter{grid-template-columns:1fr}}
.felt{display:flex;flex-direction:column;gap:4px;min-width:0}
.felt input,.felt select,.felt textarea{border:1px solid var(--linje);background:var(--hvit);border-radius:10px;padding:8px 10px;width:100%;min-width:0}
.felt textarea{resize:vertical;min-height:70px}
.raske{display:flex;flex-wrap:wrap;gap:6px}
.lagret{font-size:12px;color:var(--ok);opacity:0;transition:opacity .2s}
.lagret.vis{opacity:1}
.tidslinje{list-style:none;margin:0 0 0 6px;padding:0;border-left:2px solid var(--linje)}
.tidslinje li{position:relative;padding:0 0 14px 16px}
.tidslinje li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--papir);border:2px solid var(--blekk)}
.tidslinje p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--blekk);color:#fff;padding:11px 18px;border-radius:12px;font-weight:600;font-size:14px;z-index:60;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.skuff{animation:inn .2s ease-out}@keyframes inn{from{transform:translateX(24px);opacity:.6}}}

/* =========================================================
   KUNDESIDEN
   ========================================================= */
.kunde{background:var(--papir)}
.kunde-hero{background:var(--blekk);color:#fff;position:relative;overflow:hidden;padding-bottom:clamp(48px,8vw,96px)}
.kunde-hero .side{position:relative;padding-bottom:0}
.kunde-hero .ringbg{position:absolute;left:50%;top:58%;width:min(1100px,180vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.kunde-hero .ringbg circle{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.kunde-hero .glod{position:absolute;left:50%;top:58%;width:520px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(228,73,43,.28),rgba(228,73,43,0) 65%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.kunde-hero .ringbg{animation:pust 6s ease-in-out infinite}@keyframes pust{50%{transform:translate(-50%,-50%) scale(1.035)}}}
.kunde-hero .meny{background:rgba(23,23,27,.7)}
.kunde-hero .tittel{text-align:center;max-width:760px;margin:0 auto;padding-top:clamp(56px,9vw,110px);display:flex;flex-direction:column;align-items:center;gap:18px;position:relative}
.kunde-hero h1{color:#fff;font-size:clamp(40px,7vw,72px)}
.kunde-hero .etikett{color:var(--dempet-mork)}
.kunde-hero p.ingress{color:var(--dempet-mork);font-size:17px;max-width:46ch}
.kunde-hero .oversikt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.kunde-hero .chip{background:rgba(255,255,255,.08);color:#fff}
.kunde-hero .chip.stempel{background:var(--stempel);color:#fff}
.kseksjon{padding-top:clamp(48px,7vw,88px)}
.kseksjon>header{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;max-width:640px}
.kseksjon>header p{color:var(--dempet);font-size:16px}
.klev{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.klevkort{background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.klevkort.handling{border-color:var(--blekk);box-shadow:6px 6px 0 var(--blekk)}
.klevkort .hode{display:flex;gap:14px;align-items:center}
.klevkort h3{font-size:20px;font-weight:500;letter-spacing:-.03em}
.klevkort .steg{display:flex;gap:4px}
.klevkort .steg i{flex:1;height:4px;border-radius:99px;background:var(--stein)}
.klevkort .steg i.på{background:var(--blekk)}
.klevkort .steg i.ferdig{background:var(--stempel)}
.klevkort textarea{border:1px solid var(--linje);border-radius:12px;padding:9px 11px;width:100%;resize:vertical;background:var(--papir)}
.klevkort .knapper{display:flex;gap:8px;flex-wrap:wrap}
.ksjekk{list-style:none;margin:0;padding:0;background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);overflow:hidden}
.ksjekk li{display:flex;gap:14px;align-items:center;padding:16px 20px;border-top:1px solid var(--linje);flex-wrap:wrap}
.ksjekk li:first-child{border-top:0}
.ksjekk .nr{font-size:12px;font-weight:600;color:var(--stempel);width:22px}
.ksjekk .t{flex:1 1 200px;min-width:0}
.ksjekk .t b{display:block;font-weight:500;color:var(--blekk)}
.ksjekk li.ferdig .t b{color:var(--dempet);text-decoration:line-through}
.kavtalt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
.kavtalt li{background:var(--hvit);border:1px solid var(--linje);border-radius:14px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start}
.kavtalt svg{flex:none;margin-top:3px}
.pakker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.pakke{background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pakke.din{background:var(--blekk);color:#fff;border-color:var(--blekk)}
.pakke.din h3,.pakke.din .pris{color:#fff}
.pakke h3{font-size:22px;font-weight:500;letter-spacing:-.03em}
.pakke .under{color:var(--stempel);font-size:13px;font-weight:600}
.pakke .pris{font-size:30px;font-weight:500;letter-spacing:-.04em;color:var(--blekk);padding-bottom:12px;border-bottom:1px solid var(--linje)}
.pakke.din .pris{border-bottom-color:var(--blekk-linje)}
.pakke ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.pakke li{display:flex;gap:8px}
.pakke li::before{content:"";flex:none;width:12px;height:7px;margin-top:6px;border-left:1.6px solid var(--stempel);border-bottom:1.6px solid var(--stempel);transform:rotate(-45deg)}
.pakke .eks{font-size:13px;color:var(--dempet)}
.pakke.din .eks{color:var(--dempet-mork)}
.pakke .knapp{margin-top:auto}
.pakke.din .knapp{background:#fff;color:var(--blekk);border-color:#fff}
.kfaktura{background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);overflow:hidden}
.kfaktura table{width:100%;border-collapse:collapse;font-size:14px}
.kfaktura th,.kfaktura td{padding:13px 20px;border-top:1px solid var(--linje);text-align:left}
.kfaktura th{border-top:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dempet);font-weight:600}
.kfaktura td.n,.kfaktura th.n{text-align:right;font-variant-numeric:tabular-nums}
.kkontakt{background:var(--blekk);color:#fff;border-radius:24px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:clamp(48px,7vw,88px)}
.kkontakt h2{color:#fff}
.kkontakt p{color:var(--dempet-mork)}
.kkontakt textarea{width:100%;background:var(--blekk-2);border:1px solid var(--blekk-linje);border-radius:12px;color:#fff;padding:10px 12px;resize:vertical}
.kkontakt textarea::placeholder{color:var(--dempet)}
@media (max-width:760px){.kkontakt{grid-template-columns:1fr}}
.kbunn{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:28px 0 0;font-size:12px;color:var(--dempet);letter-spacing:.1em;text-transform:uppercase}
.forhand{background:var(--stempel);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:8px var(--kant)}
.forhand button{background:#fff;color:var(--blekk);border:0;border-radius:8px;padding:3px 10px;font-weight:600;font-size:12px;margin-left:8px}