/* Almbekk, delt stilark. Én kilde for palett, typografi og komponenter. */

:root{
  --svart:#151d2d;
  --gra:#6e747c;
  --gra-svak:#5a616c;
  --oransje:#d4400c;
  --oransje-mork:#b1350a;
  --oransje-lys:#fdeee8;
  /* Samme oransje, morknet for TEKST paa lys flate. Monsteret er aftenhaugs --gull /
     --gull-paa-lys: merkefargen staar urort der den er en FLATE, mens bokstavene som ligger
     PAA lys bunn faar den morke varianten. #f46938 gir 3,03:1 mot hvit, #c43c12 gir 4,90:1. */
  --oransje-paa-lys:#c43c12;
  --sand:#e4dec4;
  --sand-2:#c6b584;
  --sand-3:#c1b99a;
  --sand-mork:#9b8650;
  --lime:#92ce29;
  --lime-mork:#71a304;
  --magenta:#c44bc1;
  --lilla:#9e359e;
  --marine:#2e374b;
  --lysebla:#e5ecf2;
  --offhvit:#f3f3f4;
  --hvit:#fff;
  --kant:#e3e4e6;
  --topp:76px;
  --rund:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hvit);color:var(--svart);
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
section[id],div[id]{scroll-margin-top:calc(var(--topp) + 24px)}

/* ---------- typografi ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.035em;line-height:0.95}
.h-jumbo{font-size:clamp(42px,8.4vw,112px);line-height:0.9;letter-spacing:-0.038em}
.h-stor{font-size:clamp(32px,5vw,64px);line-height:1;letter-spacing:-0.032em}
.h-mid{font-size:clamp(27px,3.4vw,40px);line-height:1.15;letter-spacing:-0.03em}
.h-liten{font-size:clamp(20px,2.1vw,24px);line-height:1.25;letter-spacing:-0.02em}
.dempet{color:var(--gra)}
.lead{font-size:clamp(17px,1.7vw,24px);line-height:1.35;color:var(--svart);margin:0}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
.smatt{font-size:13px;line-height:1.5;color:var(--gra-svak)}

/* ---------- flater ---------- */
.ramme{width:100%;max-width:1216px;margin:0 auto;padding:0 24px}
.ramme-smal{max-width:820px}
.seksjon{padding:96px 0}
.seksjon-tett{padding:64px 0}
.flate-lys{background:var(--offhvit)}
.midtstilt{text-align:center}
.midtstilt .lead{margin-left:auto;margin-right:auto}

/* ---------- knapper ---------- */
.knapp{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--oransje);color:#fff;font-weight:500;
  padding:6px 6px 6px 24px;border-radius:999px;border:0;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.knapp:hover{background:var(--oransje-mork);transform:translateY(-1px)}
.knapp .pil{
  width:34px;height:34px;flex:none;border-radius:999px;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease;
}
.knapp:hover .pil{transform:translateX(3px)}
.knapp .pil svg{width:15px;height:15px;stroke:var(--oransje)}

.knapp-sand{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sand);color:var(--svart);font-weight:500;
  padding:12px 26px;border-radius:999px;border:0;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.knapp-sand:hover{background:var(--sand-3);transform:translateY(-1px)}

.knapp-blokk{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--oransje);color:#fff;font-weight:500;
  padding:13px 26px;border-radius:8px;border:0;cursor:pointer;
  transition:background .18s ease;
}
.knapp-blokk:hover{background:var(--oransje-mork)}

.tekstlenke{
  display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--oransje-paa-lys);
  transition:gap .18s ease;
}
.tekstlenke:hover{gap:13px}
.tekstlenke svg{width:15px;height:15px;stroke:currentColor}

/* ---------- topp ---------- */
.topp{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.topp[data-rullet]{border-bottom-color:var(--kant);box-shadow:0 1px 14px rgba(21,29,45,.05)}
.topp .ramme{display:flex;align-items:center;gap:24px;height:var(--topp)}
.merke{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-0.03em;font-size:19px}
.merke-glyf{width:32px;height:32px;flex:none;position:relative}
.merke-glyf i{position:absolute;display:block;border-radius:999px}
.merke-glyf i:nth-child(1){inset:0 12px 12px 0;background:var(--marine);border-bottom-right-radius:3px}
.merke-glyf i:nth-child(2){inset:12px 0 0 12px;background:var(--oransje);border-top-left-radius:3px}
.merke small{display:block;font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--gra);line-height:1}

.topp nav{margin:0 auto}
.topp nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.topp nav a{font-size:15px;transition:color .18s ease}
.topp nav a:hover,.topp nav a[aria-current="page"]{color:var(--oransje-paa-lys)}
.topp-handling{display:flex;align-items:center;gap:20px;flex:none}
.topp-handling .logginn{font-size:15px;transition:color .18s ease}
.topp-handling .logginn:hover{color:var(--oransje-paa-lys)}
.topp-handling .knapp-sand{padding:10px 22px;font-size:15px}

#menyknapp{position:absolute;opacity:0;pointer-events:none}
.hamburger{display:none;width:42px;height:42px;margin-left:auto;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--svart);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.mobil-cta{display:none}

/* ---------- hero ---------- */
.hero{padding:64px 0 0;position:relative;overflow:hidden}
.merkelapp{
  display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--kant);
  border-radius:999px;padding:5px 16px 5px 6px;font-size:14px;color:var(--gra-svak);
  transition:border-color .18s ease;
}
.merkelapp:hover{border-color:var(--sand-2)}
.merkelapp b{background:var(--oransje-lys);color:var(--oransje-paa-lys);font-size:11px;font-weight:700;
  letter-spacing:.03em;padding:3px 9px;border-radius:999px}
.merkelapp svg{width:13px;height:13px;stroke:currentColor}

.collage{position:relative;margin-top:56px}
.collage .rad{display:flex;align-items:flex-end;gap:20px;position:relative;z-index:2}
.collage .bildekort{border-radius:var(--rund);overflow:hidden;box-shadow:0 18px 44px rgba(21,29,45,.14)}
.collage .bildekort img{width:100%;height:100%;object-fit:cover}
.collage .stor{flex:1 1 58%;aspect-ratio:4/3;max-height:420px}
.collage .liten{flex:1 1 42%;aspect-ratio:3/2;max-height:300px}

/* dekor-sirkler */
.sirkel{position:absolute;border-radius:999px;z-index:1;pointer-events:none}
.sirkel-magenta{background:var(--magenta)}
.sirkel-sand{background:var(--sand)}
.sirkel-marine{background:var(--marine)}
.sirkel-lime{background:var(--lime)}
.blaff{border-radius:999px;border-bottom-left-radius:6px}

/* ---------- rullebånd ---------- */
.rullebaand{overflow:hidden}
.rulle-spor{display:flex;width:max-content;will-change:transform}
.rulle-gruppe{display:flex;align-items:center;flex:none}
.rulle-gruppe > *{flex:none;margin-right:56px}
.rulle-tekst{white-space:nowrap;font-size:19px;font-weight:700;letter-spacing:-0.02em;color:var(--gra)}
.rullebaand[data-rulle-klar] .rulle-spor{animation:rulle var(--rulle-varighet) linear infinite}
.rullebaand[data-rulle-klar]:hover .rulle-spor{animation-play-state:paused}
@keyframes rulle{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rullebaand[data-rulle-klar] .rulle-spor{animation:none}
  .rulle-spor > [data-rulle-gruppe][aria-hidden="true"]{display:none}
}

/* ---------- fargestripe ---------- */
.fargestripe{display:flex;height:11px;width:100%}
.fargestripe i{flex:1}
.fargestripe i:nth-child(1){background:var(--marine)}
.fargestripe i:nth-child(2){background:var(--sand)}
.fargestripe i:nth-child(3){background:var(--sand-2)}
.fargestripe i:nth-child(4){background:var(--lime)}
.fargestripe i:nth-child(5){background:var(--oransje)}
.fargestripe i:nth-child(6){background:var(--magenta)}

/* ---------- kort og rutenett ---------- */
.rutenett{display:grid;gap:24px}
.rutenett-2{grid-template-columns:repeat(2,1fr)}
.rutenett-3{grid-template-columns:repeat(3,1fr)}
.rutenett-4{grid-template-columns:repeat(4,1fr)}

.kort{background:#fff;border:1px solid var(--kant);border-radius:var(--rund);padding:28px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.kort:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(21,29,45,.08);border-color:#d6d8db}
.kort h3{margin-bottom:10px}
.kort p{color:var(--gra-svak)}
.kort-ikon{width:44px;height:44px;border-radius:11px;background:var(--oransje-lys);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.kort-ikon svg{width:21px;height:21px;stroke:var(--oransje)}

.stripekort{background:#fff;border-radius:var(--rund);overflow:hidden;
  box-shadow:0 20px 46px rgba(21,29,45,.1);max-width:520px;margin:0 auto;text-align:center}
.stripekort .innhold{padding:40px 32px}

/* sjekkliste */
.sjekk{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.sjekk li{display:flex;gap:12px;align-items:flex-start;color:var(--gra-svak)}
.sjekk .hake{width:22px;height:22px;flex:none;border-radius:6px;background:var(--oransje-lys);
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.sjekk .hake svg{width:12px;height:12px;stroke:var(--oransje)}

/* fordelsblokk */
.fordel{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0}
/* :not(.panel) er ikke pynt: uten det slår `.fordel .bilde` (0,2,0) ut panel-fargene (0,1,0),
   og alle de typografiske panelene blir off-white. */
.fordel .bilde{border-radius:var(--rund);overflow:hidden;position:relative;aspect-ratio:4/3}
.fordel .bilde:not(.panel){background:var(--offhvit)}
.fordel .bilde img{width:100%;height:100%;object-fit:cover}
.fordel.speil .tekst{order:2}
.fordel.speil .bilde{order:1}

/* sitat */
.sitat{background:#fff;border:1px solid var(--kant);border-radius:var(--rund);padding:32px}
.sitat blockquote{margin:0;font-size:19px;line-height:1.45;letter-spacing:-0.01em}
.sitat .kilde{margin-top:22px;font-size:14px;color:var(--gra-svak)}
.sitat .kilde b{display:block;color:var(--svart);font-weight:500;font-size:15px}

/* tall */
.tall-rad{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.tall b{display:block;font-size:clamp(38px,4.4vw,58px);font-weight:700;letter-spacing:-0.035em;line-height:1}
.tall span{display:block;margin-top:10px;font-size:15px}

/* ---------- mørke fotoflater ---------- */
.foto-flate{position:relative;overflow:hidden;color:#fff;background:var(--marine)}
.foto-flate > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-flate::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,29,45,.58),rgba(21,29,45,.76));z-index:1}
.foto-flate > *:not(img){position:relative;z-index:2}
.foto-flate .dempet{color:rgba(255,255,255,.62)}
.foto-flate .tall span{color:rgba(255,255,255,.72)}
.foto-flate .knapp-sand{background:var(--sand);color:var(--svart)}
.foto-flate .lead{color:rgba(255,255,255,.86)}

/* ---------- trekkspill ---------- */
.trekkspill{border-top:1px solid var(--kant)}
.trekkspill details{border-bottom:1px solid var(--kant)}
.trekkspill summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(17px,1.6vw,20px);font-weight:500;letter-spacing:-0.02em;
  transition:color .18s ease;
}
.trekkspill summary::-webkit-details-marker{display:none}
.trekkspill summary:hover{color:var(--oransje-paa-lys)}
.trekkspill summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gra);border-bottom:2px solid var(--gra);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.trekkspill details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.trekkspill .svar{padding:0 44px 26px 0;color:var(--gra-svak);max-width:760px}

/* ---------- skjema ---------- */
.skjemakort{background:#fff;border-radius:var(--rund);padding:36px;box-shadow:0 20px 50px rgba(21,29,45,.09)}
.felt{margin-bottom:20px}
.felt label{display:block;font-size:15px;margin-bottom:8px}
.felt input,.felt textarea,.felt select{
  width:100%;padding:12px 14px;border:1px solid var(--kant);border-radius:8px;background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.felt textarea{min-height:126px;resize:vertical}
.felt input:focus,.felt textarea:focus,.felt select:focus{
  outline:none;border-color:var(--oransje);box-shadow:0 0 0 3px rgba(244,105,56,.14);
}
.felt input::placeholder,.felt textarea::placeholder{color:#a9adb4}
.takk{background:var(--oransje-lys);border-radius:var(--rund);padding:32px;text-align:center}
.takk .hake-stor{width:50px;height:50px;border-radius:999px;background:var(--oransje);margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center}
.takk .hake-stor svg{width:23px;height:23px;stroke:#fff}
.skjul{display:none}

.kontaktrad{display:flex;align-items:center;gap:14px;margin-top:16px}
.kontaktrad .ikon{width:36px;height:36px;flex:none;border-radius:9px;background:var(--oransje-lys);
  display:flex;align-items:center;justify-content:center}
.kontaktrad .ikon svg{width:17px;height:17px;stroke:var(--oransje)}
.kontaktrad a:hover{color:var(--oransje-paa-lys)}

/* ---------- artikkeltekst ---------- */
.brodtekst{max-width:760px}
.brodtekst h2{margin:44px 0 14px;font-size:clamp(23px,2.4vw,30px)}
.brodtekst h2:first-child{margin-top:0}
.brodtekst p,.brodtekst li{color:var(--gra-svak)}
.brodtekst ul{padding-left:20px;margin:0 0 16px}
.brodtekst li{margin-bottom:8px}
.brodtekst a{color:var(--oransje-paa-lys);text-decoration:underline}

/* ---------- seksjonshoder og rader ---------- */
.seksjon-topp{max-width:760px;margin-bottom:48px}
.seksjon-topp.midtstilt{margin-left:auto;margin-right:auto}
.seksjon-topp h2{margin-bottom:18px}
.seksjon-topp .lead:only-of-type,.seksjon-topp p{margin-bottom:0}
.dempet-tekst{color:var(--gra-svak)}
.knapp-rad{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:34px 0 0}
.midtstilt-rad{justify-content:center}
.skjul-visuelt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hero-avstander */
.hero{padding-bottom:96px}
.hero .merkelapp{margin-bottom:26px}
.hero h1{margin-bottom:22px}
.hero .lead{max-width:600px;margin:0 auto 34px;color:var(--gra-svak)}

/* venstrestilt hero på undersider */
.hero-side{padding-bottom:80px}
.hero-side .lead{max-width:660px;margin:0;color:var(--gra-svak)}
.bildetekst{display:flex;align-items:flex-start;justify-content:flex-end;gap:10px;
  margin:20px 0 0;font-size:14px;color:var(--gra-svak);text-align:right}
.bildetekst svg{width:38px;height:26px;flex:none;stroke:var(--svart);margin-top:2px}

/* to kolonner: hode til venstre, tekst til høyre */
.todelt{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start}

/* kontaktsiden */
.kontakt-oppsett{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
.kontakt-lead{margin-top:22px}
.kontakt-liste{margin-top:36px}
.nyhet-vilkar{margin-top:14px}

/* juridiske sider */
.jus-topp{padding-bottom:0}
.jus-ingress{margin-top:20px;max-width:660px}
.jus-kropp{padding-top:40px;padding-bottom:96px}

/* dekor-sirkler i heroen */
.dekor-1{width:230px;height:230px;left:-150px;bottom:-70px}
.dekor-2{width:190px;height:190px;left:calc(58% - 78px);top:-64px}
.dekor-3{width:150px;height:150px;right:-84px;top:32%}
.dekor-4{width:120px;height:120px;left:14%;bottom:-58px}

/* bånd og misjon */
.baand-ledd{margin:0 0 26px}
.misjon-2{margin-top:20px}
.misjon-tekst{margin:28px 0;color:var(--gra-svak);font-size:clamp(17px,1.7vw,21px);line-height:1.5}

/* stripekort */
.stripekort{margin-top:72px}
.stripe-glyf{width:56px;height:56px;display:inline-block;position:relative;margin-bottom:20px}
.stripe-glyf i{position:absolute;display:block;border-radius:999px}
.stripe-glyf i:nth-child(1){inset:0 21px 21px 0;background:var(--magenta);border-bottom-right-radius:5px}
.stripe-glyf i:nth-child(2){inset:21px 0 0 21px;background:var(--sand-2);border-top-left-radius:5px}
.stripekort h3{margin-bottom:12px}

/* typografiske paneler i fordelsblokkene */
.panel{display:flex;align-items:center;justify-content:center;padding:44px}
.panel-sand{background:var(--sand)}
.panel-bla{background:var(--lysebla)}
.panel-off{background:var(--offhvit);border:1px solid var(--kant)}
.panel-innhold{max-width:340px;text-align:center;color:var(--gra-svak)}
.panel-tall{display:block;font-size:clamp(56px,7vw,92px);font-weight:700;letter-spacing:-0.05em;
  line-height:1;color:var(--svart);margin-bottom:18px}
.pille-rad{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:22px}
.pille{background:#fff;border-radius:999px;padding:7px 15px;font-size:14px;color:var(--svart);
  box-shadow:0 2px 8px rgba(21,29,45,.06)}

/* mørk heldekket flate */
.flate-marine{background:var(--marine);color:#fff}
.flate-marine .dempet{color:rgba(255,255,255,.55)}
.flate-marine .tall span{color:rgba(255,255,255,.72)}
.flate-marine .pille{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.slutt-cta .lead{max-width:600px;margin-left:auto;margin-right:auto}
.slutt-cta h2{margin-bottom:22px}

/* ---------- footer ---------- */
footer{background:#fff;padding:64px 0 32px}
.footer-topp{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:44px}
.footer-merke .merke{margin-bottom:22px}
.footer-merke .h-liten{margin-bottom:24px}
.footer-nyhet{max-width:330px}
.footer-nyhet .felt{margin-bottom:12px}
.footer-nyhet .knapp-sand{width:100%;border-radius:999px}
/* UU (WCAG 1.3.1): fotspaltene var h4 rett etter h2, altså et hopp over h3. Nivå er semantikk,
   størrelse er CSS, så stilen følger med taggen. */
.footer-kol h3{font-size:15px;font-weight:500;color:var(--gra);margin-bottom:18px;letter-spacing:0}
.footer-kol ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.footer-kol a{font-size:15px;transition:color .18s ease}
.footer-kol a:hover{color:var(--oransje-paa-lys)}
.footer-bunn{margin-top:56px;padding-top:26px;border-top:1px solid var(--kant);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.footer-bunn,.footer-bunn a{font-size:13px;color:var(--gra-svak)}
.footer-bunn a:hover{color:var(--oransje-paa-lys)}
.footer-bunn nav{display:flex;gap:24px;flex-wrap:wrap}

/* ---------- mobil ---------- */
@media (max-width:1024px){
  .fordel{grid-template-columns:1fr;gap:36px;padding:40px 0}
  .fordel.speil .tekst{order:1}
  .fordel.speil .bilde{order:2}
  .rutenett-4{grid-template-columns:repeat(2,1fr)}
  .todelt,.kontakt-oppsett{grid-template-columns:1fr;gap:40px}
  .footer-topp{grid-template-columns:1fr 1fr;gap:40px}
  .footer-merke{grid-column:1 / -1}
}

@media (max-width:860px){
  :root{--topp:66px}
  .hamburger{display:flex}
  .topp .ramme{position:relative;gap:12px}
  .topp nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;margin:0;
    max-height:0;overflow:hidden;transition:max-height .28s ease;border-bottom:0 solid var(--kant);
  }
  #menyknapp:checked ~ .ramme nav{max-height:420px;border-bottom-width:1px}
  #menyknapp:checked ~ .ramme .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #menyknapp:checked ~ .ramme .hamburger span:nth-child(2){opacity:0}
  #menyknapp:checked ~ .ramme .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .topp nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  .topp nav a{display:block;padding:13px 0;font-size:17px;border-bottom:1px solid var(--kant)}
  .topp nav li:last-child a{border-bottom:0}
  .mobil-cta{display:block}
  .mobil-cta a{color:var(--oransje-paa-lys);font-weight:500}
  .topp-handling{display:none}
  .seksjon{padding:64px 0}
  .seksjon-tett{padding:48px 0}
  .seksjon-topp{margin-bottom:36px}
  .hero{padding:40px 0 56px}
  .hero-side{padding-bottom:48px}
  .bildetekst{justify-content:flex-start;text-align:left}
  .jus-kropp{padding-bottom:64px}
  .collage{margin-top:40px}
  .dekor-2,.dekor-4{display:none}
  .dekor-1{width:150px;height:150px;left:-92px;bottom:-48px}
  .dekor-3{width:104px;height:104px;right:-54px;top:auto;bottom:22%}
  .panel{padding:34px 22px}
  .fordel .bilde.panel{aspect-ratio:auto;min-height:0}
  .stripekort{margin-top:48px}
  .knapp-rad{margin-top:28px}
  .collage .rad{flex-direction:column;align-items:stretch;gap:16px}
  .collage .stor,.collage .liten{flex:none;width:100%;max-height:none}
  .rutenett-2,.rutenett-3,.rutenett-4{grid-template-columns:1fr}
  .tall-rad{grid-template-columns:1fr;gap:26px;text-align:left}
  .skjemakort{padding:26px 20px}
  .sitat{padding:26px 22px}
  .kort{padding:24px 22px}
  .footer-topp{grid-template-columns:1fr;gap:34px}
  .footer-nyhet{max-width:none}
  .footer-bunn{margin-top:40px}
  .rulle-gruppe > *{margin-right:36px}
  .rulle-tekst{font-size:17px}
}

@media (max-width:420px){
  .ramme{padding:0 18px}
  .knapp{padding-left:20px}
}