/* KI-verktøy: smakebiter av verktøyene vi bygger. Brukes bare av ki-verktoy.html, oppå stil.css, lys.css og kurs.css. */
.kiside{--ink0:#002A3A;--teal:#1D6470;--myk:#F4F6F5}
.ki-fh h1{font-size:clamp(44px,7.2vw,116px)}
.ki-fh h1 em{font-style:normal;color:var(--gd,#5C9E12)}
.ki-fh .fh-ord{left:auto;right:-.02em;bottom:-.2em}

/* hopp-rekka under åpningen */
.ki-hopp{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(34px,5vw,64px)}
.ki-hopp a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 15px 9px 12px;border:1.5px solid rgba(0,42,58,.18);border-radius:999px;background:rgba(255,255,255,.7);color:var(--ink0);text-decoration:none;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.02em;transition:background .25s,border-color .25s,transform .25s}
.ki-hopp a span{font-size:12.5px;letter-spacing:.1em;color:var(--gt)}
.ki-hopp a:hover{background:var(--ink0);border-color:var(--ink0);color:#fff;transform:translateY(-2px)}
.ki-hopp a:hover span{color:#CDD751}

/* smakebitene */
.ki-smaker{background:var(--myk);padding-block:clamp(80px,10vw,150px) clamp(40px,5vw,80px);overflow-x:clip}
.ki-smaker .k-hode .lead{max-width:56ch}
.smak{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,90px);align-items:center;padding-block:clamp(44px,6vw,96px);border-top:1px dashed rgba(0,42,58,.25);scroll-margin-top:90px}
.smak.snu .smak-tekst{order:2}
.smak-tekst{display:grid;gap:12px;justify-items:start;align-content:start;position:relative}
.smak-nr{font-family:var(--display);font-weight:800;font-size:clamp(64px,7vw,120px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(0,42,58,.22);font-variant-numeric:tabular-nums;margin-bottom:4px}
.pille{display:inline-block;padding:5px 12px;border-radius:999px;background:#E3EEF0;color:var(--teal);font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase}
.smak h3{font-size:clamp(36px,4.4vw,68px);font-weight:800;line-height:.92;letter-spacing:-.01em;color:var(--ink0)}
.smak-slag{font-family:var(--display);font-weight:600;font-size:clamp(21px,1.9vw,28px);line-height:1.12;color:var(--teal)}
.smak-brod{font-size:clamp(17px,1.25vw,19.5px);line-height:1.5;max-width:50ch}
.smak-e{margin-top:10px;padding-top:14px;border-top:3px solid #78BE20;align-self:stretch;justify-self:stretch}
.smak-eff{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:7px}
.smak-eff li{position:relative;padding-left:24px;font-size:clamp(17px,1.25vw,19.5px);line-height:1.35;font-weight:500;color:var(--ink0)}
.smak-eff li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:3px;background:#78BE20}

/* rammen rundt skjermbildet */
.smak-vis{perspective:1600px;min-width:0}
.ramme{--vx:0;--vy:0;position:relative;border-radius:14px;background:#fff;border:1px solid #DDE3E5;box-shadow:0 40px 60px -34px rgba(0,42,58,.45),0 6px 16px -8px rgba(0,42,58,.18);overflow:hidden;opacity:0;transform:rotateY(-14deg) rotateX(6deg) translateY(50px) scale(.95);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transform-origin:50% 60%;will-change:transform}
.smak.snu .ramme{transform:rotateY(14deg) rotateX(6deg) translateY(50px) scale(.95)}
.ramme.sett,.smak.snu .ramme.sett{opacity:1;transform:rotateY(calc(var(--vx)*1deg)) rotateX(calc(var(--vy)*1deg))}
.ramme.vipper{transition:opacity .9s var(--ease),transform .18s linear}
.ramme-topp{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#EEF1F2;border-bottom:1px solid #DDE3E5}
.ramme-topp i{width:10px;height:10px;border-radius:50%;background:#CBD3D6}
.ramme-topp span{margin-left:10px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#566B76}
.ramme-inn{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F3F5F6}
.ramme-inn>img{display:block;width:100%;height:auto;transition:transform 5s cubic-bezier(.3,0,.2,1)}
.ramme.hoy .ramme-inn>img{transform:translateY(-16%)}
.ramme:hover .ramme-inn>img{transform:translateY(calc(-100% + 100cqh))}
.ramme-inn{container-type:size}
/* smakebiten toner ut nederst, resten vises i en demo */
.ramme-inn::after{content:"Smakebit";position:absolute;inset:auto 0 0 0;height:34%;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 14px 12px;background:linear-gradient(180deg,rgba(243,245,246,0) 0%,rgba(243,245,246,.94) 78%);font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#566B76;pointer-events:none;transition:opacity .5s}
.ramme:hover .ramme-inn::after{opacity:0}

/* levende illustrasjoner */
.illu{position:absolute;inset:0;padding:clamp(14px,2.2vw,30px);display:flex;flex-direction:column;gap:clamp(3px,.45vw,6px);font-family:var(--display);color:var(--ink0)}
.illu-hode{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:clamp(6px,1vw,14px)}
.illu-hode strong{font-weight:800;font-size:clamp(16px,1.7vw,24px);letter-spacing:.005em}
.illu-hode em{font-style:normal;font-weight:700;font-size:clamp(11px,1vw,14px);color:var(--teal)}
.illu-forkl{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:clamp(6px,1vw,12px);font-family:var(--body);font-size:clamp(11px,.95vw,13.5px)}
.illu-forkl span{display:inline-flex;align-items:center;gap:6px}
.illu-forkl i{width:11px;height:11px;border-radius:2px}
.tk-uker,.tk-rad{display:grid;grid-template-columns:clamp(40px,5vw,62px) repeat(14,minmax(0,1fr));gap:clamp(2px,.3vw,4px);align-items:center}
.rf-timer,.rf-rad{display:grid;grid-template-columns:clamp(74px,9vw,116px) repeat(9,minmax(0,1fr));gap:clamp(2px,.3vw,4px);align-items:center}
.tk-uker span,.rf-timer span{font-family:var(--body);font-size:clamp(9px,.8vw,12px);color:#566B76;text-align:center}
.rf-timer span{text-align:left}
.tk-rad b,.rf-rad b{font-family:var(--body);font-weight:400;font-size:clamp(10.5px,.9vw,13.5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-rad{flex:1;min-height:0}
.rf-rad{flex:1;min-height:0}
.tk-rad i,.rf-rad i{height:100%;min-height:10px;border-radius:clamp(2px,.35vw,5px);background:#ECEFF0;position:relative;overflow:hidden}
.tk-rad i[style]::after,.rf-rad i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--f);transform:scale(0);opacity:0;transition:transform .5s var(--ease),opacity .4s;transition-delay:var(--d)}
.rf-rad i.led::after{background:#D9EDBE}
.rf-rad i.opp::after{background:#1D6470}
.sett .tk-rad i[style]::after,.sett .rf-rad i::after{transform:none;opacity:1}
.rf-dag{display:inline-flex;align-items:center;gap:clamp(8px,1.2vw,18px);font-family:var(--body);font-size:clamp(11px,1vw,14px)}
.rf-dag u{text-decoration:none;font-weight:700;background:var(--ink0);color:#fff;padding:4px 11px;border-radius:999px}
.rf-dag s{text-decoration:none;color:#566B76}
.illu-onb{flex-direction:row;gap:clamp(12px,2vw,26px);padding:0;font-family:var(--body)}
.illu-onb ol{list-style:none;margin:0;padding:clamp(12px,1.6vw,20px);width:42%;background:#002A3A;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.illu-onb li{display:flex;align-items:center;gap:8px;font-size:clamp(10px,.95vw,13.5px);white-space:nowrap;overflow:hidden;opacity:.5;transition:opacity .4s;transition-delay:var(--d)}
.illu-onb li i{flex:none;width:clamp(11px,1.1vw,15px);height:clamp(11px,1.1vw,15px);border-radius:3px;border:1.5px solid rgba(255,255,255,.45);position:relative;transition:background .3s,border-color .3s;transition-delay:var(--d)}
.illu-onb li i::after{content:"";position:absolute;left:28%;top:8%;width:30%;height:58%;border:solid #002A3A;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s;transition-delay:var(--d)}
.sett .illu-onb li{opacity:1}
.sett .illu-onb li i{background:#78BE20;border-color:#78BE20}
.sett .illu-onb li i::after{transform:rotate(45deg) scale(1)}
.onb-kort{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,.9vw,12px);padding:clamp(10px,1.6vw,22px) clamp(14px,2vw,28px) clamp(10px,1.6vw,22px) 0;color:var(--ink0)}
.onb-steg{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:clamp(10.5px,.95vw,13px);letter-spacing:.08em;text-transform:uppercase;background:#FFE25A;padding:4px 10px;border-radius:999px}
.onb-kort strong{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,38px);line-height:.95}
.onb-kort p{font-size:clamp(12px,1.05vw,15.5px);line-height:1.35;max-width:30ch}
.onb-ring{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:clamp(15px,1.5vw,22px)}
.onb-ring svg{width:clamp(30px,3.4vw,46px);height:auto;transform:rotate(-90deg)}
.onb-ring circle{fill:none;stroke:#E3E8EA;stroke-width:5}
.onb-ring .onb-bue{stroke:#78BE20;stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5;transition:stroke-dashoffset 1.6s var(--ease) .5s}
.sett .onb-bue{stroke-dashoffset:8}
.onb-merker{display:flex;flex-wrap:wrap;gap:6px}
.onb-merker span{font-family:var(--display);font-weight:700;font-size:clamp(10.5px,.95vw,13px);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#E3EEF0;color:var(--teal)}

/* slik jobber vi */
.ki-steg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,38px)}
.ki-steg li{border-top:3px solid #78BE20;padding-top:clamp(14px,1.6vw,22px);display:grid;gap:8px;align-content:start}
.ki-steg b{font-family:var(--display);font-weight:800;font-size:clamp(44px,4.6vw,72px);line-height:.85;color:var(--teal);font-variant-numeric:tabular-nums}
.ki-steg h3{font-size:clamp(22px,2vw,30px);line-height:1}
.ki-steg p{font-size:clamp(17px,1.25vw,19.5px);line-height:1.42}
.ki-trygg{margin-top:clamp(36px,5vw,70px);background:#fff;border-radius:10px;padding:clamp(22px,2.6vw,38px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,38px)}
.ki-trygg b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.6vw,24px);margin-bottom:4px;color:var(--ink0)}
.ki-trygg p{font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.42}
.ki-trygg .lenke{grid-column:1/-1;justify-self:start}

@media (max-width:900px){
  .smak{grid-template-columns:1fr;gap:26px}
  .smak.snu .smak-tekst{order:0}
  .ramme,.smak.snu .ramme{transform:translateY(40px) scale(.97)}
  .ki-steg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ki-trygg{grid-template-columns:1fr}
  .ki-fh .fag-lapp{display:none}
  .ki-hopp{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter,20px)*-1);padding-inline:var(--gutter,20px);padding-bottom:6px;scrollbar-width:none}
  .ki-hopp::-webkit-scrollbar{display:none}
  .ki-hopp a{white-space:nowrap;flex:none}
  .ramme-inn{aspect-ratio:4/3}
  .illu-onb ol{width:46%}
}
@media (max-width:480px){.ki-steg{grid-template-columns:1fr}.tk-uker span:nth-child(odd){visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .ramme,.smak.snu .ramme{opacity:1;transform:none;transition:none}
  .ramme-inn>img,.tk-rad i::after,.rf-rad i::after,.illu-onb li,.illu-onb li i,.onb-bue{transition:none}
}

/* annenhver smakebit er speilvendt: bildet får den brede kolonnen der også */
@media (min-width:901px){.smak.snu{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}}
/* illustrasjonene vises hele, uten uttoning */
.ramme-inn:has(.illu)::after{content:none}

/* ICE-brettet som illustrasjon */
.ib-uker,.ib-rad{display:grid;grid-template-columns:clamp(96px,12vw,168px) repeat(12,minmax(0,1fr));align-items:center}
.ib-uker span{font-family:var(--body);font-size:clamp(9px,.8vw,12px);color:#566B76;text-align:center}
.ib-felt{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(2px,.35vw,5px);background-image:linear-gradient(90deg,transparent calc(100% - 1px),#E3E8EA 0);background-size:calc((100% - clamp(96px,12vw,168px))/12) 100%;background-position:clamp(96px,12vw,168px) 0;background-repeat:repeat-x}
.ib-rad{flex:1;min-height:0}
.ib-rad b{display:flex;align-items:center;gap:6px;font-family:var(--body);font-weight:400;font-size:clamp(10px,.88vw,13px);white-space:nowrap;overflow:hidden;padding:0 6px 0 clamp(8px,1.2vw,18px);background:#F3F5F6;height:100%}
.ib-rad.gr b{font-weight:700;padding-left:0}
.ib-rad b u{flex:none;text-decoration:none;font-family:var(--display);font-weight:700;font-size:.82em;color:#fff;padding:1px 5px;border-radius:3px;min-width:1.5em;text-align:center}
.ib-rad i{height:68%;min-height:9px;border-radius:3px;position:relative;transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:transform .8s var(--ease),opacity .4s;transition-delay:var(--d);background:radial-gradient(circle at 50% 50%,#fff 0 22%,rgba(0,42,58,.55) 23% 29%,transparent 30%) 0 0/calc(100%/var(--n)) 100%,color-mix(in srgb,var(--f) 28%,#fff)}
.ib-rad.gr i{height:84%;background:radial-gradient(circle at 50% 50%,#fff 0 24%,transparent 25%) 0 0/calc(100%/var(--n)) 100%,var(--f)}
.sett .ib-rad i{transform:none;opacity:1}
.ib-idag{position:absolute;top:-4px;bottom:-4px;left:calc(clamp(96px,12vw,168px) + (100% - clamp(96px,12vw,168px))*.54);width:2px;background:#E4572E;text-decoration:none}
/* usikkerhetsradaren som illustrasjon */
.illu-radar svg{flex:1;min-height:0;width:100%;overflow:visible}
.rd-ring{fill:none;stroke:#D3DADD;stroke-width:.7;stroke-dasharray:2 2.5}
.rd-bue{fill:none;stroke:#1D6470;stroke-width:3;stroke-linecap:round}
.rd-t{font-family:var(--display);font-weight:600;font-size:6.6px;letter-spacing:.08em;text-transform:uppercase;fill:#566B76}
.rd-m{font-family:var(--display);font-weight:700;font-size:7.5px;letter-spacing:.06em;fill:#fff}
.rd-p{stroke:rgba(0,42,58,.55);stroke-width:.5;transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .5s var(--ease),opacity .3s;transition-delay:var(--d)}
.sett .rd-p{transform:none;opacity:.92}
@media (max-width:900px){.rd-t{font-size:8px}}
@media (prefers-reduced-motion:reduce){.ib-rad i,.rd-p{transition:none}}

.ramme-inn:has(.illu-radar){aspect-ratio:4/3.3}

/* Gransking i modellen: 3D-plan fra et fiktivt prosjekt */
.illu-modell{padding:0}
.illu-modell svg{width:100%;height:100%;display:block;background:#EEF1F2}
.m3-h{font-family:var(--display);font-weight:800;font-size:9.5px;fill:#002A3A}
.m3-t{font-family:var(--display);font-weight:800;font-size:15px;fill:#002A3A}
.m3-e{font-family:var(--display);font-weight:700;font-size:6.2px;letter-spacing:.14em;text-transform:uppercase;fill:#566B76}
.m3-s{font-family:var(--body);font-size:6.6px;fill:#33505B}
.m3-x{font-family:var(--body);font-size:5.6px;fill:#33505B}
.m3-b{font-weight:700;fill:#002A3A}
.m3-rom{opacity:0;transform:translateY(-16px);transition:opacity .5s,transform .7s var(--ease);transition-delay:var(--d)}
.m3-merke{opacity:0;transform:translateY(5px);transition:opacity .4s,transform .5s var(--ease);transition-delay:var(--d)}
.sett .m3-rom,.sett .m3-merke{opacity:1;transform:none}
.m3-valgt .m3-kant{stroke:#002A3A;stroke-width:1.8;animation:m3puls 2.4s ease-in-out infinite}
@keyframes m3puls{50%{stroke:#FFE25A;stroke-width:2.6}}
@media (prefers-reduced-motion:reduce){.m3-rom,.m3-merke{transition:none}.m3-valgt .m3-kant{animation:none}}

/* bred smakebit: teksten i to spalter øverst, bildet i full bredde under */
@media (min-width:901px){
  .smak.bred{grid-template-columns:1fr;gap:clamp(26px,3vw,46px)}
  .smak.bred .smak-tekst{display:block;columns:2;column-gap:clamp(28px,5vw,90px)}
  .smak.bred .smak-tekst>*{margin-bottom:12px;break-inside:avoid}
  .smak.bred .smak-brod{break-before:column;max-width:none;margin-top:6px}
  .smak.bred .ramme{transform:rotateX(14deg) translateY(60px) scale(.94)}
  .smak.bred .ramme.sett{transform:rotateY(calc(var(--vx)*.5deg)) rotateX(calc(var(--vy)*.5deg))}
}
/* på mobil vises selve 3D-planen, uten sidepanelene */
@media (max-width:900px){.illu-modell{overflow:hidden}.illu-modell svg{width:186%;height:auto;max-width:none;margin:-12% 0 0 -36.6%}}

/* gratis verktøy */
.ki-gratis{background:#fff}
.gratis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,80px)}
.gratis{display:grid;gap:12px;justify-items:start;align-content:start;scroll-margin-top:90px;perspective:1600px}
.gratis .ramme{display:block;justify-self:stretch;margin-bottom:clamp(10px,1.4vw,20px);text-decoration:none;color:inherit}
.ramme.hel .ramme-inn::after{content:none}
.ramme.hel:hover .ramme-inn>img{transform:scale(1.03)}
.ramme.hel .ramme-inn>img{transition:transform .8s var(--ease)}
.ramme.hel:focus-visible{outline:3px solid #78BE20;outline-offset:4px}
.gratis h3{font-size:clamp(34px,3.8vw,58px);font-weight:800;line-height:.92;letter-spacing:-.01em;color:var(--ink0)}
.pille-gratis{background:#78BE20;color:#002A3A}
.gratis .btn{margin-top:8px}
.ki-hopp a.hopp-gratis{border-color:#78BE20;background:#EFF7E2}
@media (max-width:900px){.gratis-grid{grid-template-columns:1fr}}