/* ===========================================================================
   SEKSJONER, TI BAAND, /old/seksjoner-ti/, 28 Sep 2026 (tools/ai/seksjoner_ti.py).
   Kopi av seksjoner.css slik den sto i commit a55452c2, foer kuttet til fem baand.
   Forsiden som helbredde baand: blekk, havblaa, prikker, mint, foto og aksjonsblaa,
   etter bunsenstudio.com, blueenergy.co og sanity.io. Martin: "se bort fra alle regler og
   gjoer noe veldig spennende og kreativt." Lastes bare av denne siden, og alt henger paa
   html.bred, saa ingen annen side kan naas.

   HVERT BAAND HAR SINE EGNE TOKENS. Et moerkt baand setter --paper, --ink og resten lokalt,
   saa grafen, brikkene og knappene inni snur seg selv uten egne regler.
   =========================================================================== */

html.bred{
  --hav:#0a3fa6;          /* Blue Energys dype blaa, i Sensas retning */
  --mint:#9aebb8;         /* --fluid-4 i lys modus */
  --cyan:#c2ffff;         /* --fluid-3 i lys modus */
  --aksjon:#008dff;
  --papir:#f5f6f4;
  --prikk:rgba(5,5,12,.2);
  --grid:rgba(5,5,12,.07);
  --fyll:rgba(5,5,12,.05);
  --maks:1440px;
  --bpad:clamp(80px,10vw,168px);
}
html.bred[data-theme="dark"]{--papir:#0a0a12;--prikk:rgba(242,249,252,.2);--grid:rgba(242,249,252,.07);--fyll:rgba(242,249,252,.08)}

/* Moerke tokens: blekkbaandet, havet og fotoet. */
html.bred .b-inv,html.bred[data-theme="dark"] .b-dyp,html.bred .b-hav,html.bred .b-foto,html.bred .kp,html.bred[data-theme="dark"] .pd-oversikt .pd-a{
  --paper:#05050c;--surface:#0e0e17;--surface-1:#0a0a12;--surface-2:#1a1a24;
  --ink:#f2f9fc;--ink-2:rgba(242,249,252,.78);--ink-3:rgba(242,249,252,.62);
  --accent:#f2f9fc;--on-accent:#05050c;--rule:#3b3b47;--rule-soft:#262631;
  --prikk:rgba(242,249,252,.2);--grid:rgba(242,249,252,.07);--fyll:rgba(242,249,252,.08);
}
/* Lyse tokens: mint, aksjonsblaa, og blekkbaandet naar siden selv er moerk. */
html.bred .b-mint,html.bred .b-aksjon,html.bred .dk-l,
html.bred[data-theme="dark"] .b-inv,
html.bred:not([data-theme="dark"]) .b-dyp,html.bred:not([data-theme="dark"]) .pd-oversikt .pd-a{
  --paper:#ffffff;--surface:#ffffff;--surface-1:#fafafa;--surface-2:#f1f1f1;
  --ink:#05050c;--ink-2:rgba(5,5,12,.78);--ink-3:rgba(5,5,12,.62);
  --accent:#05050c;--on-accent:#ffffff;--rule:rgba(5,5,12,.2);--rule-soft:rgba(5,5,12,.1);
  --prikk:rgba(5,5,12,.2);--grid:rgba(5,5,12,.07);--fyll:rgba(5,5,12,.05);
}
html.bred .b-hav{--paper:var(--hav);--rule:rgba(242,249,252,.22)}
/* Baandene som var Dyphav er lyse i lys modus fra 7 Okt 2026 (designeren: «den blå fargen ... gjør at det føles litt
   mørkt», Martin: «1B, 2B, 3B»): Sensas lyse toppfarge, ugjennomsiktig, saa flaten ikke staar bak. I moerk modus staar
   de som foer paa logoens svarte. Klassen heter fortsatt b-dyp. */
html.bred:not([data-theme="dark"]) .b-dyp{--paper:var(--wash);--rule:rgba(5,5,12,.12)}
html.bred[data-theme="dark"] .b-dyp{--paper:#05050c;--rule:#3b3b47}

/* ---- hele bredden --------------------------------------------------------------------- */
html.bred .boom main,html.bred body.boom main{max-width:none;margin:0;padding-inline:0}
html.bred .b-in{max-width:var(--maks);margin-inline:auto;padding-inline:var(--pad)}
/* Bunnlinjen staar i samme spalte som seksjonene over, 2 Okt 2026: med sin egen 1140 px laa merket 54 px
   innenfor kanten til avslutningen rett over. */
html.bred .ai-foot-in{max-width:var(--maks);padding-inline:var(--pad)}
html.bred .b-band{position:relative;padding-block:var(--bpad);color:var(--ink-2)}
html.bred .b-inv{background:var(--paper)}
html.bred:not([data-theme="dark"]) .b-dyp{background:var(--paper)}
html.bred[data-theme="dark"] .b-dyp{background-color:var(--paper)}
/* Blaakopien i «Et tall du kan stole paa» beholder rutenettet over Dyphav. */
html.bred:not([data-theme="dark"]) .b-dyp.b-blue{
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) -1px -1px/48px 48px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) -1px -1px/48px 48px,
    var(--paper);
}
html.bred .b-papir{background:var(--papir)}
html.bred .b-hav{
  background:
    linear-gradient(90deg,rgba(242,249,252,.1) 1px,transparent 1px) 0 0/25% 100%,
    var(--hav);
}
html.bred .b-prikk{
  background-image:radial-gradient(var(--prikk) 1px,transparent 1.4px);
  background-size:14px 14px;
}
html.bred .b-aksjon{background:var(--aksjon);overflow:hidden}

/* ---- raden oeverst i hvert baand, i mono ------------------------------------------------ */
html.bred .rail{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(40px,6vw,96px);
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
html.bred .rail-n{background:var(--ink);color:var(--paper);padding:6px 7px 5px}
html.bred .rail-r{display:flex;align-items:center;gap:14px;flex:1;color:var(--ink-3)}
html.bred .rail-r::before{content:"";flex:1;height:1px;background:var(--rule)}

/* ---- overskriftene, brede, som hos Blue Energy ------------------------------------------ */
html.bred .b-h{
  margin:0;max-width:16ch;color:var(--ink);font-family:var(--sans);font-weight:500;
  font-stretch:112%;font-size:clamp(40px,6vw,100px);line-height:.95;letter-spacing:-.035em;
  text-wrap:balance;
}
html.bred .b-h-xl{font-size:clamp(46px,8.4vw,150px);max-width:13ch}
html.bred .b-lede{margin:0;max-width:40ch;font-size:clamp(17px,1.5vw,22px);line-height:1.4;color:var(--ink-2)}
html.bred .b-go{margin:clamp(28px,3vw,44px) 0 0}
html.bred .b-lenke{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:6px;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1px no-repeat;
  transition:background-size .35s ease;
}
html.bred .b-lenke:hover{background-size:100% 1px}
html.bred .b-lenke i{font-style:normal;transition:transform .35s ease}
html.bred .b-lenke:hover i{transform:translateX(4px)}

/* ---- heroen ---------------------------------------------------------------------------- */
html.bred .boom-hero.b-hero{max-width:var(--maks);margin-inline:auto;padding-inline:var(--pad)}
/* Heroens overskrift i BOOM-skriften, 1 Okt 2026 (Martin, med skjermbilde av /old/boom/?vedtatt=av:
   «forsiden teksten, på alle versjoner, må ha denne font overskriften»): Archivo 400 i vanlig bredde
   og vanlige bokstaver, som .boom .boom-hero h1 i boom.css. Foer det: bred, 600, versaler. */
html.bred .boom .b-hero h1{
  font-stretch:100%;font-weight:400;text-transform:none;max-width:14ch;
  font-size:clamp(44px,8.8vw,112px);line-height:1;letter-spacing:-.04em;
}
/* «industrial AI possible» er to tegn lengre enn «industriell AI mulig», og ved 14ch fikk /en tre linjer */
html.bred[lang="en"] .boom .b-hero h1{max-width:16ch}
html.bred .boom .b-hero .boom-hero-sub{font-stretch:100%}

/* ---- tickeren --------------------------------------------------------------------------- */
html.bred .b-tick{padding:0;overflow:hidden;border-block:1px solid var(--rule)}
html.bred .tick-track{display:flex;width:max-content;animation:bred-tick 70s linear infinite}
html.bred .tick-row{
  display:flex;align-items:center;gap:30px;padding:24px 30px 24px 0;white-space:nowrap;
  font:500 clamp(13px,1.2vw,17px)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
html.bred .tick-row i{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}
@keyframes bred-tick{to{transform:translateX(-50%)}}

/* ---- 01 problemet ----------------------------------------------------------------------- */
html.bred .stmt{
  margin:0;max-width:17ch;color:var(--ink);font-family:var(--sans);font-weight:400;font-stretch:108%;
  font-size:clamp(38px,6.2vw,112px);line-height:.98;letter-spacing:-.04em;text-wrap:balance;
}
html.bred .stmt em{font-style:normal;color:var(--cyan)}
html.bred .stmt-sub{margin:clamp(32px,4vw,56px) 0 0 auto;max-width:30ch;font-size:clamp(18px,1.6vw,24px);line-height:1.35;color:var(--ink-2)}

/* ---- 02 koble: tre flater som blir én ------------------------------------------------------ */
html.bred #koble .b-h{margin-inline:auto;text-align:center;max-width:none}
html.bred .kb{--g:clamp(10px,1.8vw,26px);position:relative;margin-top:clamp(36px,5vw,72px);padding:clamp(52px,6vw,88px) clamp(16px,4vw,72px)}
html.bred .kb::before{
  content:"";position:absolute;inset:26px 0;pointer-events:none;
  --c:linear-gradient(var(--ink),var(--ink));
  background:
    var(--c) 0 0/16px 1px no-repeat,var(--c) 0 0/1px 16px no-repeat,
    var(--c) 100% 0/16px 1px no-repeat,var(--c) 100% 0/1px 16px no-repeat,
    var(--c) 0 100%/16px 1px no-repeat,var(--c) 0 100%/1px 16px no-repeat,
    var(--c) 100% 100%/16px 1px no-repeat,var(--c) 100% 100%/1px 16px no-repeat;
}
html.bred .kb-hj{
  position:absolute;margin:0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
html.bred .kb-hj b{font-weight:500;background:var(--ink);color:var(--paper);padding:5px 7px 4px;margin-left:4px}
html.bred .kb-tl{top:0;left:0}html.bred .kb-tr{top:0;right:0}
html.bred .kb-bl{bottom:0;left:0}html.bred .kb-br{bottom:0;right:0}
html.bred .kb-bryter{background:none;border:0;padding:0;cursor:pointer}
html.bred .kb-bryter:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
html.bred .kb.er-koblet .kb-bryter b{background:var(--aksjon);color:#05050c}
html.bred .kb-p{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
html.bred .kp{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  min-height:clamp(250px,25vw,380px);padding:clamp(16px,1.6vw,24px);background:var(--paper);color:var(--ink);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),color .5s ease;
}
html.bred .kp::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--aksjon);opacity:0;transition:opacity .6s ease}
html.bred .kp:nth-child(1){transform:rotate(-2.4deg) translateY(16px)}
html.bred .kp:nth-child(2){transform:rotate(1.6deg) translateY(-12px)}
html.bred .kp:nth-child(3){transform:rotate(-1deg) translateY(24px)}
html.bred .kb.er-koblet .kp{color:#05050c}
html.bred .kb.er-koblet .kp::before{opacity:1}
html.bred .kb.er-koblet .kp:nth-child(1){transform:translateX(var(--g))}
html.bred .kb.er-koblet .kp:nth-child(2){transform:none}
html.bred .kb.er-koblet .kp:nth-child(3){transform:translateX(calc(var(--g) * -1))}
html.bred .kp-top{display:flex;justify-content:space-between;gap:12px;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
html.bred .kp-v{display:flex;align-items:baseline;gap:8px}
html.bred .kp-v b{font:400 clamp(60px,8.4vw,150px)/.9 var(--mono);letter-spacing:-.05em;transition:opacity .22s ease}
html.bred .kp-v b.is-bytt{opacity:0}
html.bred .kp-v small{font:500 14px/1 var(--mono);letter-spacing:.06em}
html.bred .kp-kilde{font:400 12px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.82}

/* ---- 03 kjenner du deg igjen: nummererte rader over hele bredden ---------------------------- */
html.bred #gjenkjenn{--grc:64px minmax(0,1fr) 72px minmax(0,1fr);padding-bottom:0}
html.bred .gr-hd,html.bred .gr{
  display:grid;grid-template-columns:var(--grc);align-items:center;column-gap:clamp(12px,1.6vw,24px);
}
html.bred .gr-hd{
  margin-top:clamp(40px,5vw,80px);padding-block:14px;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
html.bred .gr-hd span:last-child{color:var(--ink)}
html.bred .gr-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
html.bred .gr{
  position:relative;isolation:isolate;border-bottom:1px solid var(--rule);
  padding-block:clamp(22px,2.6vw,40px);
  padding-inline:max(var(--pad),calc((100% - var(--maks)) / 2 + var(--pad)));
}
html.bred .gr::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
html.bred .gr-n{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--ink-3);transition:color .3s}
html.bred .gr-a,html.bred .gr-b{margin:0;font-size:clamp(20px,2.3vw,36px);line-height:1.14;letter-spacing:-.025em;transition:color .3s}
html.bred .gr-a{color:var(--ink-3)}
html.bred .gr-b{color:var(--ink)}
html.bred .gr-a .gr-k{text-decoration:line-through;text-decoration-thickness:.07em}
html.bred .gr-b .gr-k{background:var(--mint);color:#05050c;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
html.bred .gr-pil{position:relative;height:1px;background:var(--ink-3);transition:background .3s}
html.bred .gr-pil::after{
  content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;
  border-top:1px solid var(--ink-3);border-right:1px solid var(--ink-3);transform:rotate(45deg);transition:border-color .3s;
}
@media (hover:hover){
  html.bred .gr:hover::before{transform:scaleY(1)}
  html.bred .gr:hover .gr-n,html.bred .gr:hover .gr-a{color:rgba(127,127,135,1)}
  html.bred .gr:hover .gr-b{color:var(--paper)}
  html.bred .gr:hover .gr-pil{background:var(--mint)}
  html.bred .gr:hover .gr-pil::after{border-color:var(--mint)}
}

/* ---- 04 et tall du kan stole paa: blaakopi ------------------------------------------------- */
html.bred .b-blue{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
}
html.bred .tru-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px}
html.bred .boom .tru .tru-fig{margin-top:clamp(40px,5vw,80px)}
html.bred .boom .tru .tru-c circle{fill:var(--mint)}
html.bred .boom .tru .tru-e line{stroke-opacity:.55}
@media (max-width:899px){html.bred .tru-top{grid-template-columns:1fr}}

/* ---- 05 datakartet: delt i to flater ------------------------------------------------------ */
html.bred .b-split{padding:0}
html.bred .boom .boom-kart-row.dk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin:0;max-width:none;align-items:stretch}
html.bred .dk-l{
  background:var(--mint);color:var(--ink-2);
  padding:var(--bpad) clamp(24px,4vw,72px) var(--bpad) max(var(--pad),calc((100vw - var(--maks)) / 2 + var(--pad)));
}
html.bred .dk-l .b-h{max-width:12ch;margin-bottom:clamp(28px,3vw,44px)}
html.bred .dk-n{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--bpad) max(var(--pad),calc((100vw - var(--maks)) / 2 + var(--pad))) var(--bpad) clamp(24px,5vw,96px);
  background-image:radial-gradient(var(--prikk) 1px,transparent 1.4px);background-size:14px 14px;
}
html.bred .boom .dk-n .boom-kart-tall{font-size:clamp(140px,19vw,340px);line-height:.82;letter-spacing:-.06em}
html.bred .boom .dk-n .boom-kart-ord{font-size:clamp(18px,1.6vw,24px)}
html.bred .boom .dk-n .boom-kart-ex{max-width:34ch}
@media (max-width:899px){
  html.bred .boom .boom-kart-row.dk{grid-template-columns:1fr}
  html.bred .dk-l,html.bred .dk-n{padding:clamp(64px,14vw,96px) var(--pad)}
}

/* ---- 06 sitatet, paa havet -------------------------------------------------------------- */
html.bred .b-foto{
  background:linear-gradient(180deg,rgba(5,5,12,.5),rgba(5,5,12,.86) 70%),url(/assets/img/sea-3.webp) 50% 30%/cover #05050c;
  padding-block:clamp(64px,7vw,128px);
}
/* Sitatet tar mindre plass (2 Okt 2026, Martin: «denne seksjonen tar for mye plass»): 1 098 til ca. 680 px paa 1 570 */
html.bred #sitat .rail{margin-bottom:clamp(32px,3.5vw,56px)}
html.bred .sq{margin:0;max-width:1180px}
html.bred .sq-m{display:block;height:.42em;font:400 clamp(90px,9vw,150px)/1 var(--sans);color:var(--mint)}
html.bred .boom .sq blockquote{
  margin:0;color:var(--ink);font-family:var(--sans);font-stretch:104%;font-weight:400;
  font-size:clamp(24px,2.5vw,40px);line-height:1.14;letter-spacing:-.03em;text-wrap:pretty;
}
html.bred .sq figcaption{display:flex;align-items:center;gap:20px;margin-top:clamp(24px,2.5vw,40px);color:var(--ink);font-size:17px}
/* Birthes bilde stoerre (1 Okt 2026, Martin: «gjerne litt stoerre bilde av birthe») */
html.bred .sq figcaption img{width:clamp(88px,8vw,112px);height:clamp(88px,8vw,112px);border-radius:50%;object-fit:cover}
html.bred .sq figcaption span{display:flex;flex-direction:column;gap:6px}
/* Rollen er ord, saa den er Open Sans i vanlige bokstaver, ikke mono i versaler (2 Okt 2026, Martin: «ikke ser saa AI generert ut») */
html.bred .sq figcaption small{font:400 15px/1.4 "Open Sans",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink-2)}

/* ---- 07 resultatene: tre spalter over hele bredden --------------------------------------- */
html.bred #verdi{padding-bottom:0}
html.bred .vc-l{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,80px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
html.bred .boom main a.vc{
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:18px;text-decoration:none;
  min-height:clamp(380px,34vw,560px);padding:clamp(24px,2.8vw,44px);border-left:1px solid var(--rule);
}
html.bred .boom main a.vc:first-child{border-left:0;padding-left:max(var(--pad),calc((100vw - var(--maks)) / 2 + var(--pad)))}
html.bred .vc::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
html.bred .vc-k{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);transition:color .3s}
html.bred .vc-n{margin-top:auto;font:400 clamp(84px,10.6vw,196px)/.86 var(--mono);letter-spacing:-.06em;color:var(--ink);transition:color .3s}
html.bred .vc-n small{font-size:.3em;letter-spacing:0;margin-left:.12em}
html.bred .vc-t{max-width:18ch;font-size:clamp(19px,1.7vw,26px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);transition:color .3s}
html.bred .vc-go{display:flex;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color .3s}
html.bred .vc-go i{font-style:normal;transition:transform .35s}
@media (hover:hover){
  html.bred .vc:hover::before{transform:scaleY(1)}
  html.bred .vc:hover .vc-n{color:var(--mint)}
  html.bred .vc:hover :is(.vc-t,.vc-go){color:var(--paper)}
  html.bred .vc:hover .vc-k{color:rgba(127,127,135,1)}
  html.bred .vc:hover .vc-go i{transform:translateX(5px)}
}
@media (max-width:899px){
  html.bred .vc-l{grid-template-columns:1fr}
  html.bred .boom main a.vc,html.bred .boom main a.vc:first-child{border-left:0;border-top:1px solid var(--rule);min-height:0;padding:40px var(--pad)}
  html.bred .boom main a.vc:first-child{border-top:0}
  html.bred .vc-n{margin-top:12px}
}

/* ---- 08 avslutningen, i aksjonsblaa ------------------------------------------------------- */
html.bred .b-aksjon::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(5,5,12,.28) 1px,transparent 1.4px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 75%);mask-image:linear-gradient(to top,#000,transparent 75%);
}
html.bred .b-aksjon .b-in{position:relative}
html.bred .b-aksjon .rail-n{background:#05050c;color:var(--aksjon)}
html.bred .b-end{
  margin:0;color:var(--ink);font-family:var(--sans);font-weight:600;font-stretch:122%;text-transform:uppercase;
  font-size:clamp(46px,10vw,196px);line-height:.97;letter-spacing:-.03em;
}
/* .97, ikke .86: ringen i Å naar .93 em over grunnlinjen i Archivo og traff linja over (Martin 5 Okt 2026, MacBook Pro) */
html.bred .b-end-rad{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:clamp(40px,5vw,88px)}
html.bred .b-aksjon .b-lede{color:var(--ink)}
html.bred .b-aksjon .boom-cta{margin:0}

/* ---- bevegelse -------------------------------------------------------------------------- */
html.bred.rv-on [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
html.bred.rv-on [data-rv].is-in{opacity:1;transform:none}

@media (max-width:899px){
  html.bred #gjenkjenn{--grc:36px minmax(0,1fr)}
  html.bred .gr-hd{display:none}
  html.bred .gr{row-gap:10px}
  html.bred .gr-pil{display:none}
  html.bred .gr-b{grid-column:2}
  html.bred .kb-p{grid-template-columns:1fr}
  html.bred .kp{min-height:0}
  html.bred .kp:nth-child(n){transform:rotate(0)}
  html.bred .kb.er-koblet .kp:nth-child(1){transform:translateY(var(--g))}
  html.bred .kb.er-koblet .kp:nth-child(3){transform:translateY(calc(var(--g) * -1))}
  html.bred .stmt-sub{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html.bred .tick-track{animation:none}
  html.bred .kp,html.bred .kp::before,html.bred .gr::before,html.bred .vc::before{transition:none}
  html.bred.rv-on [data-rv]{opacity:1;transform:none;transition:none}
}