@charset "utf-8";

/* =========================================================================
   Camillas Catering AS
   Fargene er målt ut av menyen for 2026 med ImageMagick, ikke gjettet.
   Se MERKEVARE.md for målepunkter og kontrasttall.
   ========================================================================= */

/* --- Fonter, selvhostet. Ingen eksterne kall ved sidevisning. ------------ */
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/ebgaramond-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2-variations"),
      url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* Målt i menyen for 2026 */
  --navy-dyp:#132B37;
  --navy-myk:#1B3746;
  --krem:#F6F2EA;
  --hvit:#FFFFFF;
  --solv:#C7CCD1;

  /* Messing i to nivåer fordi én verdi ikke kan bestå AA på begge flater */
  --messing:#B08D57;      /* på navy: 4,76 */
  --messing-dyp:#725730;  /* på krem: 6,03 */

  --ink:#16191C;
  --graa:#495259;         /* på krem: 7,14 (AAA) */
  --graa-lys:#B4BEC4;     /* på navy: 7,77 (AAA) */

  --linje:#DDD6C7;        /* dekorativ hairline på krem */
  --linje-sterk:#8C8578;  /* feltkant, 3:1 mot krem */
  --linje-navy:rgba(199,204,209,.28);

  /* Flater i bruk */
  --flate:var(--krem);
  --tekst:var(--ink);
  --tekst-svak:var(--graa);
  --aksent:var(--messing-dyp);
  --kant:var(--linje);
  --fokus:var(--navy-dyp);

  --bredde:1120px;
  --marg:clamp(1.25rem,5vw,3rem);
  --radius:3px;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --grotesk:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Navy-flater bytter tokens i stedet for å overstyre hver regel */
.paa-navy{
  --flate:var(--navy-dyp);
  --tekst:var(--krem);
  --tekst-svak:var(--graa-lys);
  --aksent:var(--messing);
  --kant:var(--linje-navy);
  --fokus:var(--krem);
  background:var(--flate); color:var(--tekst);
}
.paa-navy-myk{ --flate:var(--navy-myk); background:var(--flate); }

/* --- Grunn --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--krem); color:var(--ink);
  font-family:var(--grotesk); font-size:17px; line-height:1.6;
  font-synthesis-weight:none; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-inline-size:100%; block-size:auto; display:block}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.1; margin:0; text-wrap:balance}
h1{font-size:clamp(2.05rem,1.15rem + 3.5vw,3.5rem); letter-spacing:-.012em}
h2{font-size:clamp(1.6rem,1.1rem + 2.1vw,2.5rem); letter-spacing:-.008em}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:inherit}
ul,ol{margin:0; padding:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--fokus); outline-offset:3px; border-radius:2px;
}
::selection{background:var(--messing); color:var(--navy-dyp)}

/* --- Struktur ------------------------------------------------------------ */
.ramme{max-inline-size:var(--bredde); margin-inline:auto; padding-inline:var(--marg)}
.seksjon{padding-block:clamp(3rem,7vw,5.5rem)}
.seksjon--tett{padding-block:clamp(2rem,4vw,3rem)}
.hopp{
  position:absolute; inset-inline-start:-9999px; z-index:100;
  background:var(--navy-dyp); color:var(--krem);
  padding:.75rem 1.25rem; text-decoration:none;
}
.hopp:focus{inset-inline-start:.5rem; inset-block-start:.5rem}

/* Overskrift med hairline over, brukt som seksjonsmerkelapp */
.stikkord{
  font-family:var(--grotesk); font-size:.78rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tekst-svak);
  margin:0 0 .75rem;
}

/* --- Header -------------------------------------------------------------- */
.topp{border-block-end:1px solid var(--linje-navy)}
.topp__rad{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  min-block-size:104px; padding-block:.9rem;
}
.merke{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.merke svg{block-size:clamp(62px,6vw,86px); inline-size:auto}
.nav{margin-inline-start:auto; display:none}
.nav ul{display:flex; gap:clamp(1rem,2.2vw,2rem); list-style:none}
.nav a{
  text-decoration:none; font-size:.95rem; padding-block:.4rem; white-space:nowrap;
  border-block-end:2px solid transparent;
}
.nav a:hover{border-block-end-color:var(--messing)}
.nav a[aria-current="page"]{border-block-end-color:var(--messing)}
.topp__handling{display:none; align-items:center; gap:1.25rem; flex:0 0 auto}
.topp__tlf{text-decoration:none; font-size:.95rem; white-space:nowrap}
.topp__tlf:hover{text-decoration:underline}
@media (min-width:62rem){ .nav,.topp__handling{display:flex} }
.bytte{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:.55rem;
  background:none; border:1px solid var(--linje-navy); color:inherit;
  font:inherit; font-size:.9rem; padding:.55rem .85rem; border-radius:var(--radius); cursor:pointer;
}
.bytte__strek{display:block; inline-size:18px; block-size:1.5px; background:currentColor; position:relative}
.bytte__strek::before,.bytte__strek::after{
  content:""; position:absolute; inset-inline:0; block-size:1.5px; background:currentColor;
}
.bytte__strek::before{inset-block-start:-6px} .bytte__strek::after{inset-block-start:6px}
@media (min-width:62rem){ .bytte{display:none} }
.mobilnav{display:none; border-block-start:1px solid var(--linje-navy); padding-block:1rem 1.5rem}
.mobilnav[data-apen="ja"]{display:block}
.mobilnav ul{list-style:none; display:grid; gap:.25rem}
.mobilnav a{display:block; text-decoration:none; padding:.7rem 0; font-size:1.05rem; border-block-end:1px solid var(--linje-navy)}
@media (min-width:62rem){ .mobilnav{display:none!important} }

/* --- Knapper ------------------------------------------------------------- */
.knapp{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; font-size:1rem; line-height:1.2;
  padding:.95rem 1.6rem; border-radius:var(--radius);
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knapp--primar{background:var(--messing); color:var(--navy-dyp); border-color:var(--messing)}
.knapp--primar:hover{background:#c19b62; border-color:#c19b62}
.knapp--linje{background:none; color:inherit; border-color:currentColor}
.knapp--linje:hover{background:currentColor; color:var(--flate)}
.knapper{display:flex; flex-wrap:wrap; gap:.85rem}

/* --- Bunnstripe på mobil ------------------------------------------------- */
.bunnstripe{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:40;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--navy-dyp); border-block-start:1px solid var(--linje-navy);
  padding-block-end:env(safe-area-inset-bottom);
}
.bunnstripe a{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:1rem .5rem; text-decoration:none; font-weight:600; font-size:.95rem;
  color:var(--krem);
}
.bunnstripe a+a{background:var(--messing); color:var(--navy-dyp)}
body{padding-block-end:0}
@media (max-width:61.99rem){
  body{padding-block-end:calc(60px + env(safe-area-inset-bottom))}
  :target{scroll-margin-block-start:6rem}
}
@media (min-width:62rem){ .bunnstripe{display:none} }

/* --- Hero, asymmetrisk --------------------------------------------------- */
.hero{overflow:hidden}
.hero__rad{
  display:grid; gap:clamp(2rem,4vw,3rem);
  padding-block:clamp(2.75rem,6vw,5rem);
  align-items:center;
}
.hero__tekst h1{margin-block-end:1.25rem}
.hero__ingress{font-size:clamp(1.05rem,1rem + .4vw,1.22rem); color:var(--tekst-svak); max-inline-size:46ch}
.hero__pris{
  margin-block:1.75rem; padding-block-start:1.25rem;
  border-block-start:1px solid var(--kant);
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
}
.hero__pris b{
  font-family:var(--serif); font-size:clamp(1.9rem,1.35rem + 2.1vw,2.75rem);
  font-weight:600; color:var(--aksent); font-variant-numeric:tabular-nums lining-nums;
  line-height:1;
}
.hero__pris i{font-style:normal; font-size:.95rem; color:var(--tekst-svak); display:block; width:100%; margin-block-end:.35rem; letter-spacing:.08em; text-transform:uppercase}
.hero__pris span{color:var(--tekst-svak); font-size:.95rem}
.hero__bilde{position:relative; margin-inline-end:calc(var(--marg)*-1)}
.hero__bilde img{
  inline-size:100%; block-size:clamp(320px,42vw,560px); object-fit:cover;
  border-radius:var(--radius) 0 0 var(--radius);
}
@media (min-width:56rem){
  .hero__rad{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .hero__bilde{margin-inline-end:calc(50vw - var(--bredde)/2 - var(--marg))}
  .hero__bilde img{block-size:min(66vh,540px)}
}
@media (min-width:70rem){
  .hero__bilde{margin-inline-end:calc((100vw - var(--bredde))/-2 - var(--marg))}
}

/* --- Tillitsstripe ------------------------------------------------------- */
.stripe{border-block:1px solid var(--kant)}
.stripe ul{
  list-style:none; display:grid; gap:.7rem 2rem; padding-block:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
.stripe li{font-size:.95rem}
.stripe li>span{display:block}
.stripe b{font-weight:600; font-variant-numeric:tabular-nums}
.stripe a{color:var(--tekst-svak); font-size:.85rem; text-underline-offset:2px}

/* --- Kategorikort -------------------------------------------------------- */
.kort-rutenett{
  list-style:none; display:grid; gap:1px; background:var(--kant);
  border:1px solid var(--kant); margin-block-start:2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:34rem){ .kort-rutenett{grid-template-columns:repeat(2,1fr)} }
@media (min-width:62rem){ .kort-rutenett{grid-template-columns:repeat(4,1fr)} }
.kort{background:var(--krem); padding:1.6rem 1.5rem 1.75rem; display:flex; flex-direction:column}
.kort h3{margin-block-end:.35rem}
.kort__pris{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--aksent);
  font-variant-numeric:tabular-nums lining-nums; margin-block-end:.9rem; display:block;
}
.kort ul{list-style:none; color:var(--tekst-svak); font-size:.93rem; margin-block-end:1.1rem}
.kort ul li{padding-block:.18rem}
.kort a{margin-block-start:auto; font-weight:600; font-size:.95rem; text-underline-offset:3px}

/* --- Bildebånd i full bredde --------------------------------------------- */
.baand-bilde img{inline-size:100%; block-size:clamp(240px,34vw,460px); object-fit:cover}

/* --- Steg, asymmetrisk --------------------------------------------------- */
.steg-rad{display:grid; gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:56rem){ .steg-rad{grid-template-columns:minmax(0,4fr) minmax(0,8fr)} }
.steg{list-style:none; counter-reset:n; display:grid; gap:1.5rem}
.steg li{
  counter-increment:n; display:grid; grid-template-columns:2.6rem 1fr;
  gap:1.1rem; align-items:start;
}
.steg li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--serif); font-size:1.35rem; font-weight:600;
  color:var(--aksent); font-variant-numeric:tabular-nums lining-nums;
  padding-block-start:.1rem;
}
.steg h3{font-size:1.15rem; margin-block-end:.25rem}
.steg p{color:var(--tekst-svak); font-size:.97rem}

/* --- Sitater ------------------------------------------------------------- */
.sitat{border-inline-start:2px solid var(--messing); padding-inline-start:1.4rem; margin:0}
.sitat p{font-family:var(--serif); font-weight:600; font-size:clamp(1.1rem,.98rem + .72vw,1.5rem); line-height:1.42}
.sitat--stor p{font-size:clamp(1.35rem,1.05rem + 1.5vw,2.05rem)}
.sitat figcaption{margin-block-start:.9rem; font-size:.88rem; color:var(--tekst-svak)}
.sitat figcaption b{color:var(--tekst); font-weight:600}
.sitat-rad{display:grid; gap:2.25rem; margin-block-start:2.5rem}
@media (min-width:56rem){
  .sitat-rad{grid-template-columns:repeat(3,1fr)}
  .sitat--stor{grid-column:1/-1; max-inline-size:56ch}
}

/* --- Merkelapper --------------------------------------------------------- */
.merkelapp{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; padding:.3rem .6rem; border:1px solid var(--messing);
  color:var(--aksent); border-radius:var(--radius); vertical-align:.15em;
}
.notat{
  border:1px dashed var(--linje-sterk); border-inline-start-width:3px;
  padding:1.1rem 1.25rem; margin-block-start:2rem;
  font-size:.92rem; color:var(--tekst-svak); background:#FBF9F4;
}
.notat b{color:var(--tekst)}

/* --- CTA-bånd, den ene sentrerte seksjonen ------------------------------- */
.baand{text-align:center}
.baand h2{margin-block-end:1rem; max-inline-size:22ch; margin-inline:auto}
.baand p{color:var(--tekst-svak); max-inline-size:52ch; margin-inline:auto; margin-block-end:1.9rem}
.baand .knapper{justify-content:center}

/* --- Meny ---------------------------------------------------------------- */
.meny-topp{padding-block:clamp(2.25rem,5vw,3.5rem)}
.meny-topp__pris{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline;
  margin-block-start:1.5rem; padding-block-start:1.25rem; border-block-start:1px solid var(--kant);
}
.meny-topp__pris b{
  font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); font-weight:600;
  color:var(--aksent); font-variant-numeric:tabular-nums lining-nums;
}
.meny-topp__pris span{color:var(--tekst-svak); font-size:.95rem}

.kategorinav{
  position:sticky; inset-block-start:0; z-index:30;
  background:var(--krem); border-block-end:1px solid var(--kant);
}
.kategorinav ul{
  list-style:none; display:flex; gap:.35rem; overflow-x:auto; padding-block:.7rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
@media (min-width:62rem){ .kategorinav ul{flex-wrap:wrap; overflow-x:visible} }
.kategorinav a{
  display:block; white-space:nowrap; text-decoration:none; font-size:.9rem;
  padding:.45rem .8rem; border:1px solid transparent; border-radius:var(--radius);
}
.kategorinav a:hover{border-color:var(--linje-sterk)}

.filter{border-block-end:1px solid var(--kant); padding-block:1.4rem}
.filter[hidden]{display:none}
.filter__topp{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; margin-block-end:.9rem}
.filter__topp h2{font-family:var(--grotesk); font-size:1rem; font-weight:600; letter-spacing:0}
.filter__hjelp{font-size:.88rem; color:var(--tekst-svak)}
.filter__knapper{display:flex; flex-wrap:wrap; gap:.45rem}
.filter__knapper button{
  font:inherit; font-size:.88rem; padding:.42rem .8rem; cursor:pointer;
  background:none; color:var(--ink); border:1px solid var(--linje-sterk); border-radius:var(--radius);
}
.filter__knapper button:hover{border-color:var(--ink)}
.filter__knapper button[aria-pressed="true"]{
  background:var(--navy-dyp); color:var(--krem); border-color:var(--navy-dyp);
}
.filter__nullstill{margin-inline-start:auto}
.filter__status{margin-block-start:.85rem; font-size:.9rem; color:var(--tekst-svak); min-block-size:1.4em}

.kategori{border-block-start:1px solid var(--kant); padding-block:clamp(2.25rem,5vw,3.5rem)}
.kategori:first-of-type{border-block-start:0}
.kategori__hode{display:grid; gap:.5rem 2.5rem; margin-block-end:1.75rem}
@media (min-width:56rem){
  .kategori__hode{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end}
}
.kategori__pris{
  font-family:var(--serif); font-size:clamp(1.85rem,1.4rem + 1.9vw,2.7rem); font-weight:600; line-height:1;
  color:var(--aksent); font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
}
@media (min-width:56rem){ .kategori__pris{text-align:right} }
.kategori__note{color:var(--tekst-svak); font-size:.95rem; grid-column:1}
.kategori__innhold{display:grid; gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:56rem){ .kategori__innhold{grid-template-columns:minmax(0,8fr) minmax(0,4fr); align-items:start} }
.retter{list-style:none; column-gap:2.5rem}
@media (min-width:56rem){ .retter{columns:2} }
.rett{break-inside:avoid; padding-block:.55rem; border-block-end:1px solid var(--kant)}
.rett:last-child{border-block-end:0}
.rett__navn{display:block}
.rett__allergen{display:block; font-size:.85rem; color:var(--tekst-svak); margin-block-start:.15rem}
.rett[hidden]{display:none}
.rett--pris{display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.rett--pris b{font-variant-numeric:tabular-nums lining-nums; font-weight:600; color:var(--aksent); white-space:nowrap}
.varmrett{break-inside:avoid; padding-block:1rem; border-block-end:1px solid var(--kant)}
.varmrett:last-child{border-block-end:0}
.varmrett__hode{display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.varmrett__hode h3{font-size:1.12rem}
.varmrett__pris{
  font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--aksent);
  font-variant-numeric:tabular-nums lining-nums; white-space:nowrap;
}
.varmrett p{margin:.35rem 0 0; color:var(--tekst-svak); font-size:.95rem}
.varmrett__allergen{display:block; font-size:.85rem; color:var(--tekst-svak); margin-block-start:.3rem}

/* --- Figur --------------------------------------------------------------- */
.figur{margin:0}
.figur img{inline-size:100%; border-radius:var(--radius)}
.figur figcaption{margin-block-start:.55rem; font-size:.82rem; color:var(--tekst-svak)}

/* --- To spalter ---------------------------------------------------------- */
.spalter{display:grid; gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:56rem){ .spalter{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.spalter--motsatt{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.brodtekst{max-inline-size:62ch}
.brodtekst h2{margin-block-end:1rem}
.brodtekst h3{margin-block:2rem .6rem}
.brodtekst ul:not([class]){margin:0 0 1em 1.15rem; padding:0}
.brodtekst ul:not([class]) li{padding-block:.22rem}
.brodtekst a{text-underline-offset:3px}

/* --- Definisjonsliste for kontakt ---------------------------------------- */
.fakta{display:grid; gap:0; margin:0}
.fakta div{
  display:grid; gap:.15rem .5rem; padding-block:.85rem;
  border-block-end:1px solid var(--kant);
}
@media (min-width:34rem){ .fakta div{grid-template-columns:9.5rem 1fr; align-items:baseline} }
.fakta dt{font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tekst-svak)}
.fakta dd{margin:0; font-size:1.02rem}
.fakta a{text-underline-offset:3px}

/* --- Skjema -------------------------------------------------------------- */
.varsel{
  border:1px solid var(--messing-dyp); border-inline-start-width:4px;
  padding:1.25rem 1.4rem; background:#FBF7EF; margin-block-end:2.25rem;
}
.varsel h2{font-family:var(--grotesk); font-size:1.05rem; font-weight:600; letter-spacing:0; margin-block-end:.4rem}
.varsel p{font-size:.97rem; color:var(--graa)}

.skjema{display:grid; gap:1.4rem; max-inline-size:44rem}
.felt{display:grid; gap:.4rem}
.felt > label,.gruppe > legend{font-weight:600; font-size:.95rem}
.felt small,.gruppe small{color:var(--graa); font-size:.87rem}
.felt input,.felt select,.felt textarea{
  font:inherit; font-size:1rem; padding:.75rem .85rem; color:var(--ink);
  background:var(--hvit); border:1px solid var(--linje-sterk); border-radius:var(--radius);
  inline-size:100%;
}
.felt textarea{min-block-size:7rem; resize:vertical}
.felt input:user-invalid,.felt select:user-invalid,.felt textarea:user-invalid{border-color:#8C2F1E; border-width:1.5px}
.feilmelding{color:#8C2F1E; font-size:.9rem; min-block-size:1.3em}
.feilmelding:empty{min-block-size:0}
.gruppe{border:1px solid var(--kant); border-radius:var(--radius); padding:1.1rem 1.25rem; margin:0}
.gruppe legend{padding-inline:.4rem}
.valg{display:grid; gap:.15rem; margin-block-start:.75rem}
.valg label{
  display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:baseline;
  padding:.5rem .2rem; border-block-end:1px solid var(--kant); cursor:pointer; font-size:.98rem;
}
.valg label:last-child{border-block-end:0}
.valg input{inline-size:1.05rem; block-size:1.05rem; accent-color:var(--navy-dyp); margin:0}
.valg .pris{
  font-variant-numeric:tabular-nums lining-nums; color:var(--aksent);
  font-weight:600; font-size:.95rem; white-space:nowrap;
}
.merker{display:flex; flex-wrap:wrap; gap:.45rem; margin-block-start:.7rem}
.merker button{
  font:inherit; font-size:.87rem; padding:.38rem .75rem; cursor:pointer;
  background:none; border:1px solid var(--linje-sterk); border-radius:var(--radius); color:var(--ink);
}
.merker button:hover{border-color:var(--ink)}
.honning{position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.sammendrag{
  border:1px solid var(--kant); border-block-start:3px solid var(--messing);
  padding:1.25rem 1.4rem; background:var(--hvit);
}
.sammendrag h2{font-family:var(--grotesk); font-size:1rem; font-weight:600; letter-spacing:0; margin-block-end:.6rem}
.sammendrag p{font-size:1.02rem}
.sammendrag .sum{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--aksent);
  font-variant-numeric:tabular-nums lining-nums; display:block; margin-block:.5rem .3rem;
}
.sammendrag small{color:var(--graa); font-size:.87rem; display:block}

.vilkaar{border-inline-start:3px solid var(--messing); padding-inline-start:1.5rem; margin-block-start:3.5rem}
.vilkaar h2{margin-block-end:1rem}
.vilkaar ul{list-style:none; display:grid; gap:.75rem}
.vilkaar li{padding-inline-start:1.15rem; position:relative; color:var(--graa)}
.vilkaar li::before{content:""; position:absolute; inset-inline-start:1px; inset-block-start:.6em; inline-size:5px; block-size:5px; border-radius:50%; background:var(--messing-dyp)}
.vilkaar b{color:var(--ink)}

/* --- Kart ---------------------------------------------------------------- */
.kart{border:1px solid var(--kant); border-radius:var(--radius); overflow:hidden; background:#EFEAE0}
.kart svg{inline-size:100%; block-size:auto; display:block}

/* --- Footer -------------------------------------------------------------- */
.bunn{padding-block:clamp(3rem,6vw,4.5rem) 2.5rem}
.bunn__rad{display:grid; gap:2.5rem}
@media (min-width:48rem){ .bunn__rad{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))} }
.bunn h2{font-family:var(--grotesk); font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--graa-lys); margin-block-end:.9rem}
.bunn p,.bunn li{font-size:.95rem; color:var(--graa-lys)}
.bunn ul{list-style:none; display:grid; gap:.4rem}
.bunn a{color:var(--krem); text-underline-offset:3px}
.bunn__logo{margin-block-end:1.25rem}
.bunn__logo svg{inline-size:150px}
.bunn__slutt{
  margin-block-start:3rem; padding-block-start:1.5rem; border-block-start:1px solid var(--linje-navy);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.87rem; color:var(--graa-lys);
}

/* --- 404 og kvittering --------------------------------------------------- */
.midtstilt-side{min-block-size:70vh; display:grid; align-content:center; padding-block:clamp(3rem,10vw,7rem)}
.midtstilt-side p{color:var(--tekst-svak); max-inline-size:52ch; margin-block:1.25rem 2rem}

/* --- Små hjelpeklasser. Ingen inline style, så CSP kan være stram. ------- */
.ingress{
  font-size:clamp(1.05rem,1rem + .4vw,1.22rem); color:var(--tekst-svak);
  max-inline-size:52ch; margin-block-start:1.25rem;
}
.ledetekst{max-inline-size:56ch; color:var(--tekst-svak)}
.dempet{color:var(--tekst-svak)}
.enhet{font-size:.95rem; font-family:var(--grotesk); font-weight:400; color:var(--tekst-svak)}
.enhet--liten{font-size:.9rem}
.kildelinje{margin-block-start:2.5rem; font-size:.92rem; color:var(--tekst-svak)}
.kildelinje--liten{font-size:.9rem; color:var(--tekst-svak)}
.pris-inline{font-family:var(--serif); color:var(--aksent); font-variant-numeric:tabular-nums lining-nums}
.retter--enkel{columns:auto}
.h3--forst{margin-block-start:0}
.varmrett__enhet{margin-block-start:.1rem; font-size:.88rem}
.mt-liten{margin-block-start:.5rem}
.mt{margin-block-start:1.5rem}
.mt-stor{margin-block-start:2rem}
.mb-stor{margin-block-end:2rem}
.portrettplass{
  border:1px dashed var(--linje-navy); border-radius:var(--radius);
  aspect-ratio:4/5; display:grid; place-content:center; text-align:center; padding:2rem;
}
.portrettplass p{color:var(--graa-lys); font-size:.92rem; max-inline-size:24ch}
.portrettplass b{color:var(--krem)}

/* Prikkskillet i tillitsstripen henger stygt igjen når den brekker.
   Under 48rem stables punktene i stedet. */

/* Lange e-postadresser skal brekke, ikke sprenge spalten */
.bunn a,.fakta dd a{overflow-wrap:anywhere}
.valgfritt{font-weight:400; font-size:.85rem; color:var(--graa); margin-inline-start:.35rem}

/* Elementer som skjules med hidden maa vinne over sin egen display-regel */
.felt[hidden],.sammendrag[hidden],.gruppe[hidden],.merker[hidden]{display:none}