.hero{
    height:60vh;
}
.mat-image{
    background-color:#a68a6e;
}

.mat-image > h1{
    color:white;
    font-size:5rem;
    margin-top:30vh;
}

.menu-col > h2{
    line-height:0;
    font-size:1.6rem;
    padding-bottom:2rem;
}

.menu-col > p{
    font-size:1.2rem;
}

@media only screen and (max-width: 768px) {
    .hero{
        height:20vh;
    }

    .mat-image > h1{
        margin-top:0.5rem;
        font-size:3rem;
        text-align: center;
    }
}

/* ---------- Felles farger for menysidene ----------
   Samme palett som footeren og kurssiden: mørk brun til bånd,
   varm off-white i bunn, og husets brune som aksent. */

.menu-banner,
.meny-kategorier-felt,
.menu-page{
    --mork:#3f352c;
    --mork-strek:#55483c;
    --lys-tekst:#c4b7a7;
    --aksent:#a68a6e;
    --aksent-mork:#8a6e52;
    --kant:#e4dace;
    --blekk:#322c25;
    --blekk-dus:#6b6157;
    /* Dempet teglrød til varsler. Holdt innenfor den varme paletten med
       vilje — dette er en opplysning, ikke en feilmelding. */
    --varsel:#9c4b3f;
    /* Den lyse flaten sidene står på — samme som bakgrunnen i body. */
    --lys-flate:#faf7f2;
}

/* Varm off-white i stedet for helt blank hvit, så kortene løfter seg.
   Forsiden laster ikke dette arket og berøres derfor ikke. */
body{
    background-color:#faf7f2;
}

/* ---------- Banner øverst på menysidene ---------- */

.menu-banner{
    background-color:var(--mork);
    text-align:center;
    padding:4.25rem 1.5rem 4rem;
}

.menu-banner h1{
    color:white;
    font-size:3.3rem;
    letter-spacing:0.01em;
    margin:0;
}

/* Kort aksentstrek under tittelen — går igjen i seksjonsoverskriftene. */
.menu-banner h1::after{
    content:"";
    display:block;
    width:2.75rem;
    height:2px;
    background-color:var(--aksent);
    margin:1.5rem auto 0;
}

.menu-banner p{
    color:var(--lys-tekst);
    font-size:1.2rem;
    line-height:1.7;
    max-width:66rem;
    margin:1.5rem auto 0;
}

/* Feilsiden har lite innhold, og da tåler forklaringen å stå stort — den er
   det eneste den som har gått seg vill skal lese. Må ha .menu-banner foran
   for å slå regelen for vanlige bannerparagrafer på 1,2rem. */
.menu-banner .feilside-tekst{
    font-size:clamp(1.35rem, 2.6vw, 2rem);
    line-height:1.5;
    max-width:48rem;
}

/* Lenker i banneret — uten dette arver de nettleserens knallblå mot den
   mørke flaten. Brukes på feilsiden, der telefonnummeret skal kunne trykkes. */
.menu-banner a{
    color:white;
    border-bottom:1px solid var(--aksent);
    transition:border-color 0.25s ease;
}

.menu-banner a:hover{
    border-bottom-color:white;
}

/* ---------- Skriv ut ----------
   Sidene med et utskriftsark har ingen knapp: de som skriver ut menyen til
   bordene jobber der og kan Cmd+P, og en knapp er støy for alle andre.
   Utskriftsarket ligger i css/print-meny.css og lastes med media="print".
   Delene som bare finnes på papir — logoen øverst og kontaktlinja nederst —
   står i HTML-en og skjules her. */

.print-logo,
.print-bunn{
    display:none;
}

/* ---------- Åpningstider i banneret ----------
   Står mellom tittelen og ingressen, i egen ramme. Den som googler «lunsj
   Hamar» skal se når det er åpent uten å lese en setning først, så dette er
   bevisst løftet over brødteksten og gitt en egen flate. */

.apningstider{
    /* inline-flex i stedet for block: da midtstiller den seg av seg selv på
       den midtstilte bannerflaten, og rammen legger seg tett om innholdet. */
    display:inline-flex;
    flex-direction:column;
    gap:0.4rem;
    /* Uten taket stikker boksen ut av banneret på smale skjermer: på én linje
       er den 366px bred, og en telefon har 358px å gi. Med taket brekker
       teksten i to linjer i stedet, og den bredeste blir 195px. */
    max-width:100%;
    margin-top:2rem;
    padding:1.1rem 2.25rem;
    border:1px solid var(--aksent);
    border-top:3px solid var(--aksent);
    background-color:rgba(255, 255, 255, 0.05);
}

.apningstider-etikett{
    font-family:'Reem Kufi', sans-serif;
    font-size:1.2rem;
    /* Sperringen er strammet inn fra 0.16em: den var satt for en liten
       etikett på 0.8rem, og følger ikke med opp i størrelse. */
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--aksent);
}

.apningstider-tid{
    font-family:'Prosto One', cursive;
    font-size:1.45rem;
    color:white;
}

@media only screen and (max-width: 768px) {
    .apningstider{
        margin-top:1.5rem;
        padding:0.95rem 1.25rem;
    }

    .apningstider-tid{
        font-size:1.15rem;
        line-height:1.4;
    }
}

/* Allergennotisen ligger under ingressen, tonet litt ned. Fargen er lysere
   enn den ser ut til å trenge: #9d8e7c ga bare 3,75:1 mot den mørke flaten,
   under WCAG AA-kravet på 4,5:1. Denne ligger på 5,1:1 og er fortsatt et
   hakk svakere enn ingressen over, som har 6,1:1. */
.menu-banner-notis{
    font-size:1rem !important;
    color:#b5a795 !important;
    margin-top:1rem !important;
}

/* ---------- Kategorier øverst ----------
   Rett under banneret står seksjonene som fire kort med undertekst og
   antall, så man ser hva sida inneholder før man begynner å scrolle.
   Samme formspråk som menykortene på catering.html. */

/* Den mørke flaten fra banneret fortsetter ned gjennom kategoriene og
   stopper rett over første seksjonstittel. Da leses toppen som én blokk,
   og skillet mot den lyse menyen under blir tydelig. */
.meny-kategorier-felt{
    background-color:var(--mork);
    padding-bottom:7.5rem;
}

/* Omslutteren holder bredden, slik at overskriften og streken flukter
   nøyaktig med ytterkanten av kortene under. */
.meny-kategorier{
    max-width:1400px;
    margin:0 auto;
    padding:0 1.25rem;
}

.kategorier-tittel{
    font-family:'Prosto One', cursive;
    font-size:1.55rem;
    letter-spacing:0.01em;
    color:white;
    margin:0 0 1.6rem;
    padding-bottom:1.1rem;
    border-bottom:1px solid var(--lys-flate);
}

/* Flex framfor grid: da tåler raden at en seksjon kommer til eller faller
   bort uten at regelen må endres, og kortene fordeler seg selv på bredden.
   Et grid ville låst dem til faste spalter, og en siste rad med færre kort
   enn de andre hadde blitt stående igjen til venstre i stedet for midtstilt. */
.meny-snarveier{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.25rem;
}

/* Kortene ligger nå på den mørke flaten, og må derfor være et hakk lysere
   enn bakgrunnen for å leses som egne flater man kan trykke på. */
.meny-snarveier a{
    /* 15rem er bredden de krymper til før raden brekker, 21rem taket som
       hindrer at få kort strekkes ut over hele feltet. */
    flex:1 1 15rem;
    max-width:21rem;
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    padding:1.75rem 1.6rem;
    background-color:var(--mork-strek);
    border:1px solid #635446;
    border-top:3px solid var(--aksent);
    transition:background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.meny-snarveier a:hover,
.meny-snarveier a:focus{
    background-color:#6b5c4d;
    border-color:#7d6d5d;
    border-top-color:var(--aksent);
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0, 0, 0, 0.28);
    text-decoration:none;
}

.snarvei-navn{
    font-family:'Prosto One', cursive;
    font-size:1.25rem;
    color:white;
}

/* Liten pil som viser at kortet er en lenke — går igjen på catering.html. */
.snarvei-navn::after{
    content:"\2192";
    color:var(--aksent);
    margin-left:0.5rem;
    transition:margin-left 0.3s ease;
}

.meny-snarveier a:hover .snarvei-navn::after{
    margin-left:0.85rem;
}

.snarvei-undertekst{
    font-family:'Reem Kufi', sans-serif;
    font-size:0.95rem;
    line-height:1.5;
    color:var(--lys-tekst);
}

html{
    scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }
}

/* ---------- Menyinnhold ---------- */

.menu-page{
    /* Kun topp/bunn — .container skal beholde sin egen sidemarg,
       ellers nulles den ut av padding-snarveien og teksten klistrer
       seg til skjermkanten på mobil. */
    padding-top:3rem;
    padding-bottom:5rem;
}

/* Tekstlenker i menyinnholdet — uten dette arver de nettleserens knallblå.
   Menykort og knapper har egne stiler og skal ikke treffes. */
.menu-page a:not(.btn-order):not(.meny-kort){
    color:var(--aksent-mork);
    border-bottom:1px solid rgba(166, 138, 110, 0.45);
    transition:color 0.25s ease, border-color 0.25s ease;
}

.menu-page a:not(.btn-order):not(.meny-kort):hover{
    color:var(--blekk);
    border-bottom-color:var(--blekk);
}

.menu-intro{
    max-width:46rem;
    margin:0 auto;
    text-align:center;
}

.menu-intro p{
    font-size:1.12rem;
    line-height:1.75;
    color:var(--blekk-dus);
}

.menu-section{
    margin-top:4.5rem;
    /* Litt luft over overskriften når man hopper hit fra kategorikortene. */
    scroll-margin-top:2rem;
}

.section-title{
    font-family:'Prosto One', cursive;
    text-align:center;
    font-size:2.1rem;
    letter-spacing:0.01em;
    color:var(--blekk);
    margin:0;
}

.section-title::after{
    content:"";
    display:block;
    width:2.75rem;
    height:2px;
    background-color:var(--aksent);
    margin:1.15rem auto 0;
}

.section-lead{
    text-align:center;
    max-width:44rem;
    margin:1.5rem auto 0;
    font-size:1.05rem;
    line-height:1.7;
    color:var(--blekk-dus);
}

/* ---------- Retter ---------- */

.dish-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.75rem;
    margin-top:2.75rem;
}

/* Hver rett er nå et kort med tynn ramme og aksentstrek på toppen,
   samme grep som stegkortene på kurssiden. */
.dish{
    background-color:white;
    border:1px solid var(--kant);
    border-top:3px solid var(--aksent);
    padding:1.75rem 1.85rem 1.9rem;
}

/* ---------- Kompakt rutenett ----------
   Når kortene er foldet sammen er de alle like lave, og da er det plass til
   tre i bredden. Scopet til .menu-kompakt fordi de andre menysidene fortsatt
   viser fulle ingredienslister og trenger bredere kort. */

/* Bootstrap stopper .container på 1140px. Tre kort i bredden har godt av
   mer plass, så vi hever taket her. Dobbel klasse for å slå Bootstrap. */
.menu-page.menu-kompakt{
    max-width:1400px;
}

/* Den mørke toppen slutter rett over «Julemat», så første seksjon trenger
   ikke sin vanlige luft på toppen i tillegg. */
.menu-kompakt .menu-section:first-child{
    margin-top:0;
}

/* ---------- Seksjonstittel ved siden av kortene ----------
   Tittelen står i egen spalte til venstre i stedet for midtstilt over
   rettene. Det sparer en hel skjermlinje per seksjon, og navnet blir
   stående ved siden av kortene mens man leser dem. Skillelinja nederst
   erstatter den midtstilte aksentstreken. */

.menu-kompakt .menu-section{
    display:grid;
    grid-template-columns:14.5rem minmax(0, 1fr);
    gap:0 3rem;
    align-items:start;
    margin-top:3.25rem;
    padding-bottom:3.25rem;
    border-bottom:2px solid var(--aksent);
}

/* Siste seksjon beholder skillestreken sin. Da trenger ikke bestill-knappen
   sin egen strek på toppen i tillegg — to streker rett etter hverandre. */
.menu-kompakt .menu-cta{
    border-top:none;
    padding-top:0;
}

/* Tittel og ingress står sammen i venstre spalte og sentreres som én
   gruppe mot kortene. */
.menu-kompakt .seksjon-tittel{
    grid-column:1;
    align-self:center;
}

.menu-kompakt .section-title{
    text-align:left;
    font-size:1.85rem;
    /* Ett langt ord som «Tradisjonsretter» har ikke noe naturlig brekkpunkt
       og renner ut av spalten uten dette. Myk bindestrek i HTML-en styrer
       hvor det brekker; disse to er sikkerhetsnettet for andre titler. */
    overflow-wrap:break-word;
    hyphens:auto;
}

/* Aksentstreken under tittelen er overflødig når seksjonene allerede
   skilles av en strek i full bredde. */
.menu-kompakt .section-title::after{
    display:none;
}

.menu-kompakt .section-lead{
    text-align:left;
    max-width:none;
    margin:1.1rem 0 0;
    font-size:0.98rem;
}

.menu-kompakt .dish-grid{
    grid-column:2;
    margin-top:0;
}

.menu-kompakt .dish-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    /* Uten denne strekkes naboene like høye som et kort man åpner. */
    align-items:start;
}

/* Brede kort gir ingen mening når alt er foldet inn — da blir de bare
   en tom stripe med navn og pris. */
.menu-kompakt .dish-wide{
    grid-column:auto;
}

/* Men et kort man åpner legger beslag på hele raden. Da får innholdet
   bredden det trenger, og lista kan settes i spalter i stedet for å bli
   én lang og smal kolonne. */
.menu-kompakt .dish[open]{
    grid-column:1 / -1;
}

.dish-wide{
    grid-column:1 / -1;
}

.dish-head{
    display:flex;
    /* Smale kort har ikke plass til navn og pris på samme linje — da faller
       prisen ned under i stedet for å presse navnet sammen. */
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:baseline;
    gap:0.35rem 1.5rem;
    border-bottom:1px solid var(--kant);
    padding-bottom:0.65rem;
}

.dish-name{
    font-family:'Prosto One', cursive;
    font-size:1.2rem;
    color:var(--blekk);
    margin:0;
    transition:color 0.25s ease;
}

.dish-price{
    font-family:'Reem Kufi', sans-serif;
    font-size:1.12rem;
    color:var(--aksent-mork);
    white-space:nowrap;
}

.dish-desc{
    font-size:1.05rem;
    margin:0.75rem 0 0;
}

.dish-part{
    font-size:1.05rem;
    margin:0.75rem 0 0;
}

.dish-part span{
    font-family:'Prosto One', cursive;
}

/* Prisen for et tillegg står på egen linje under innholdet, og låner
   prisfargen fra .dish-price så den leses som en pris og ikke som brødtekst. */
.dish-part-price{
    font-family:'Reem Kufi', sans-serif;
    font-size:1.05rem;
    color:var(--aksent-mork);
    margin:0.35rem 0 0;
}

/* Underoverskrift når innholdet i et kort deles i grupper — koldtbord,
   varmmat, desserter. Bevisst mindre enn .dish-name, så korttittelen
   fortsatt leses som den øverste i hierarkiet. */
.dish-gruppe{
    font-family:'Prosto One', cursive;
    font-size:1rem;
    margin:1.15rem 0 0.45rem;
}

/* ---------- Sammenfoldet kortinnhold ----------
   Hvert kort er et <details>: topplinja med navn og pris er <summary>, så
   hele den synlige delen av kortet er klikkbar — ikke bare en liten lenke.
   Alt annet (innhold, tillegg, minsteantall og allergener) ligger foldet
   inn, slik at siden blir en kompakt prisliste man åpner det man vil av.
   Innholdet ligger fortsatt i HTML-en, så søkemotorene ser det uansett. */

.dish-topp{
    display:block;
    cursor:pointer;
    /* Bort med nettleserens egen trekant — vi tegner vår egen pil. */
    list-style:none;
}

.dish-topp::-webkit-details-marker{
    display:none;
}

.dish-topp:focus-visible{
    outline:2px solid var(--aksent);
    outline-offset:4px;
}

.dish-toggle{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-top:0.95rem;
    font-family:'Reem Kufi', sans-serif;
    font-size:1.15rem;
    color:var(--aksent-mork);
    transition:color 0.25s ease;
}

.dish-topp:hover .dish-toggle{
    color:var(--blekk);
}

/* Vinkel som peker til høyre når kortet er lukket og ned når det er åpent. */
.dish-toggle::before{
    content:"";
    flex:none;
    width:0.7rem;
    height:0.7rem;
    border-right:3px solid var(--aksent);
    border-bottom:3px solid var(--aksent);
    transform:rotate(-45deg);
    transition:transform 0.25s ease;
}

.dish[open] .dish-toggle::before{
    transform:rotate(45deg);
}

/* Navnet får aksentfarge når man holder over kortet, så det er tydelig at
   hele topplinja er klikkbar og ikke bare «Se innholdet». */
.dish-topp:hover .dish-name{
    color:var(--aksent-mork);
}

/* Åpent kort lukkes ved klikk hvor som helst i det (se js/meny.js), så
   innholdet skal vise samme pekefinger som topplinja. */
.dish[open] .dish-innhold{
    cursor:pointer;
}

.dish-list{
    list-style:none;
    font-family:'Reem Kufi', sans-serif;
    font-size:1.05rem;
    padding:0;
    margin:0.75rem 0 0;
}

.dish-list li{
    position:relative;
    padding-left:1.35rem;
    margin-bottom:0.45rem;
}

/* Lange rettlister settes i spalter. Spaltebredde framfor fast antall gjør at
   et bredt kort får tre spalter og et smalt kort én, uten egne regler. */
.dish-list-spalter{
    columns:16rem;
    column-gap:2.25rem;
}

.dish-list-spalter li{
    break-inside:avoid;
}

/* Firkantet merke i stedet for tankestrek — strammere og mer presist. */
.dish-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:0.55rem;
    width:0.45rem;
    height:0.45rem;
    background-color:var(--aksent);
}

/* Merknadene er en egen bolk under innholdet — «minimum 10 personer»,
   «to ganger servering». De skal løsne fra rettlista, ikke klistre seg til
   siste punkt, så det er god luft over den første. */
.dish-meta{
    font-family:'Reem Kufi', sans-serif;
    font-size:1rem;
    color:#5d5d5d;
    margin:1.5rem 0 0;
}

/* Flere merknader hører sammen. Luften skal stå mellom innholdet og
   merknadsblokka, ikke inne i den. */
.dish-meta + .dish-meta{
    margin-top:0.35rem;
}

/* En merknad som begrenser bestillingen — «tilbys ikke fra 18. november».
   Den får farge, og beholder luften over seg også når den ikke står først.
   Settes fra arket med «!» først på linja; se RettInnhold.astro. */
.dish-meta.dish-varsel{
    color:var(--varsel);
    margin-top:1.5rem;
}

/* Uthevet blokk inne i et kort — en historie om retten, eller et tillegg man
   kan velge til. Skal fange blikket, så den låner prisfargen og en
   aksentstrek i stedet for den dempede gråtonen i .dish-meta. Tåler både et
   enkelt avsnitt og en omslutter om flere. */
.dish-uthevet{
    font-family:'Reem Kufi', sans-serif;
    font-size:1.08rem;
    line-height:1.55;
    color:var(--aksent-mork);
    border-left:3px solid var(--aksent);
    padding-left:0.9rem;
    margin:0.95rem 0 0;
}

/* Avsnittene inni har sine egne toppmarger, og de ville dyttet teksten ned
   forbi aksentstreken. Avstanden mellom dem settes her i stedet. */
.dish-uthevet > p{
    margin:0;
}

.dish-uthevet > p + p{
    margin-top:0.35rem;
}

.dish-allergen{
    font-size:0.92rem;
    color:#6b6b6b;
    margin:0.75rem 0 0;
}

/* ---------- Notiser, priser og allergenliste ---------- */

.price-banner{
    text-align:center;
    font-family:'Prosto One', cursive;
    font-size:1.5rem;
    color:#8a6e52;
    margin-top:2.5rem;
}

.menu-note{
    max-width:46rem;
    margin:2.5rem auto 0;
    padding:1.5rem 1.85rem;
    background-color:white;
    border:1px solid var(--kant);
    border-left:3px solid var(--aksent);
}

.menu-note p{
    font-size:1.03rem;
    line-height:1.7;
    color:var(--blekk-dus);
    margin:0;
}

.menu-note p + p{
    margin-top:0.65rem;
}

.allergen-legend{
    max-width:46rem;
    margin:4.5rem auto 0;
    padding:2rem 2.25rem;
    background-color:white;
    border:1px solid var(--kant);
    border-top:3px solid var(--aksent);
}

.allergen-legend h2{
    font-family:'Prosto One', cursive;
    font-size:1.2rem;
    letter-spacing:0.02em;
    text-align:center;
    color:var(--blekk);
    margin:0 0 1.5rem;
}

.allergen-legend ol{
    font-family:'Reem Kufi', sans-serif;
    font-size:0.98rem;
    columns:2;
    column-gap:2.5rem;
    margin:0;
    padding-left:1.3rem;
}

.allergen-legend li{
    margin-bottom:0.3rem;
    break-inside:avoid;
}

.allergen-legend .legend-footer{
    font-size:0.9rem;
    color:#6b6b6b;
    text-align:center;
    margin:1.25rem 0 0;
}

/* ---------- Oversikt over menyer ---------- */

.meny-oversikt{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.75rem;
    max-width:68rem;
    margin:3rem auto 0;
}

.meny-kort{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:190px;
    padding:2.15rem 1.9rem;
    background-color:white;
    border:1px solid var(--kant);
    border-top:3px solid var(--aksent);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.meny-kort:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(63, 53, 44, 0.1);
    /* Uten dette tegner Bootstrap understreken i sin egen knallblå. */
    text-decoration-color:var(--mork);
    text-underline-offset:0.18em;
}

.meny-kort h2{
    font-family:'Prosto One', cursive;
    font-size:1.35rem;
    color:var(--blekk);
    margin:0;
}

/* Liten pil som viser at kortet er en lenke. */
.meny-kort h2::after{
    content:"\2192";
    color:var(--aksent);
    margin-left:0.5rem;
    transition:margin-left 0.3s ease;
}

.meny-kort:hover h2::after{
    margin-left:0.85rem;
}

.meny-kort p{
    font-family:'Reem Kufi', sans-serif;
    font-size:0.95rem;
    line-height:1.6;
    color:var(--blekk-dus);
    margin:0.75rem 0 0;
}

/* ---------- Bestill-knapp ---------- */

.menu-cta{
    text-align:center;
    margin-top:4.5rem;
    padding-top:3rem;
    border-top:1px solid var(--kant);
}

/* Firkantet, sperret knapp på menysidene — som på kurssiden.
   Scopet til .menu-page, så forsidens runde knapper står urørt. */
.menu-page .btn-order{
    font-size:0.88rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:1rem 2.5rem;
    border-radius:0;
}

@media only screen and (max-width: 768px) {
    .menu-banner{
        padding:2.5rem 1rem;
    }

    .menu-banner h1{
        font-size:2.2rem;
    }

    .menu-page{
        padding-top:2rem;
        padding-bottom:3.5rem;
        padding-left:1.25rem;
        padding-right:1.25rem;
    }

    .section-title{
        font-size:1.7rem;
    }

    .meny-kategorier-felt{
        padding-bottom:4rem;
    }

    .meny-kategorier{
        padding:0 1.25rem;
    }

    .kategorier-tittel{
        font-size:1.3rem;
        margin-bottom:1.15rem;
        padding-bottom:0.85rem;
    }

    .meny-snarveier{
        gap:0.85rem;
    }

    /* To i bredden på mobil — halve feltet minus halve mellomrommet. */
    .meny-snarveier a{
        flex:1 1 calc(50% - 0.425rem);
        max-width:none;
        padding:1.25rem 1.1rem;
    }

    .snarvei-navn{
        font-size:1.05rem;
    }

    .snarvei-undertekst{
        font-size:0.88rem;
    }

    .dish-grid{
        grid-template-columns:minmax(0, 1fr);
        gap:1.35rem;
    }

    /* Tittelspalten har ikke plass på mobil — da legger tittelen seg
       over kortene igjen, men fortsatt venstrestilt. */
    .menu-kompakt .menu-section{
        display:block;
        padding-bottom:2.25rem;
    }

    .menu-kompakt .section-title{
        padding-top:0;
    }

    /* Må gjentas med .menu-kompakt foran: regelen for tre kort i bredden
       har to klasser og slår ellers .dish-grid alene, også her inne. */
    .menu-kompakt .dish-grid{
        grid-template-columns:minmax(0, 1fr);
        gap:1.35rem;
        margin-top:1.75rem;
    }

    /* Lister med korte punkter settes i to spalter også på mobil — halverer
       høyden når noen først åpner dem. Lister med lange rettnavn beholder
       én spalte, ellers blir hvert punkt brukket over tre linjer. */
    .dish-list-tett{
        columns:9.5rem;
        column-gap:1.25rem;
    }

    .dish{
        padding:1.5rem 1.4rem 1.6rem;
    }

    .meny-oversikt{
        grid-template-columns:minmax(0, 1fr);
        gap:1.25rem;
        margin-top:2rem;
    }

    .meny-kort{
        min-height:0;
        padding:1.75rem 1.5rem;
    }

    .allergen-legend ol{
        columns:1;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1100px) {
    .meny-oversikt{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    /* Tre kort blir for smale på nettbrett — da holder vi på to. */
    .menu-kompakt .dish-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .meny-snarveier a{
        flex:1 1 calc(50% - 0.625rem);
        max-width:none;
    }
}