/* Dayny's Catering. Farver fra Brandfarver.png, skrift fra erhvervshæftet (Archivo + Newsreader). */

@font-face { font-family: "Archivo"; src: url("../fonte/archivo-normal-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonte/newsreader-normal-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonte/newsreader-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --sort: #1f0000;
  --sort-2: #2b0a0a;
  --bordeaux: #740628;
  --bordeaux-lys: #8f0a33;
  --sand: #f0c99a;
  --brun: #564441;
  --graa: #d9d9d9;
  --papir: #f5efe8;
  --tekst-lys: #f5efe8;
  --tekst-daemp: rgba(245, 239, 232, .68);
  --linje-lys: rgba(245, 239, 232, .16);
  --linje-mork: rgba(31, 0, 0, .14);
  --bred: "Archivo", "Arial Black", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --ramme: min(1240px, 100% - 2 * var(--kant));
  --kant: clamp(16px, 4vw, 48px);
  --top-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--sort); color: var(--tekst-lys); font: 400 clamp(17px, 1.1vw + 12px, 19px)/1.55 var(--serif); overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--bred); font-stretch: 125%; font-weight: 800; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.ramme { width: var(--ramme); margin-inline: auto; }
.sektion { padding-block: clamp(72px, 10vw, 140px); }
.kaempe { font-size: clamp(40px, 7.4vw, 112px); font-weight: 900; }
.stor { font-size: clamp(30px, 4.2vw, 60px); margin-bottom: .5em; }
.etiket { font: 700 12px/1.3 var(--bred); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
.etiket::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.etiket-lys { color: var(--sand); }
.spring { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--sand); color: var(--sort); padding: 8px 14px; }
.spring:focus { left: 8px; }

/* Knapper */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 2px solid var(--bordeaux); background: var(--bordeaux); color: var(--tekst-lys); font: 700 13px/1 var(--bred); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-radius: 3px; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s; }
.knap:hover { transform: translateY(-2px); background: var(--bordeaux-lys); border-color: var(--bordeaux-lys); }
.knap-lys { background: var(--sand); border-color: var(--sand); color: var(--sort); }
.knap-lys:hover { background: #f6d8b3; border-color: #f6d8b3; }
.knap-streg { background: transparent; border-color: var(--tekst-lys); color: var(--tekst-lys); }
.knap-streg:hover { background: var(--tekst-lys); border-color: var(--tekst-lys); color: var(--sort); }
.knap-streg-mork { background: transparent; border-color: var(--sort); color: var(--sort); }
.knap-streg-mork:hover { background: var(--sort); border-color: var(--sort); color: var(--tekst-lys); }
.knap-stor { min-height: 60px; width: 100%; font-size: 14px; }
.knapper { display: flex; flex-wrap: wrap; gap: 12px; }

/* Top */
.top { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--top-h); display: flex; align-items: center; gap: 24px; padding-inline: var(--kant); background: rgba(31, 0, 0, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linje-lys); transition: background .35s, border-color .35s; }
.mork-top .top:not(.rullet) { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.top-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sand); margin-right: auto; }
.top-logo .logo { width: 50px; height: 50px; }
.top-logo span { font: 700 11px/1 var(--bred); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase; color: var(--tekst-lys); }
.top-nav { display: none; gap: clamp(14px, 1.6vw, 26px); }
.top-nav a { font: 600 12.5px/1 var(--bred); font-stretch: 115%; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--tekst-daemp); padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--tekst-lys); border-color: var(--sand); }
.top .knap-tilbud { min-height: 42px; padding: 0 18px; background: var(--sand); border-color: var(--sand); color: var(--sort); font-size: 12px; }
.top .knap-tilbud:hover { background: #f6d8b3; }
.burger { width: 44px; height: 44px; border: 0; background: none; display: grid; place-content: center; gap: 7px; padding: 0; }
.burger span { width: 26px; height: 2px; background: var(--tekst-lys); transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.mobilmenu { position: fixed; inset: var(--top-h) 0 0; z-index: 49; background: var(--sort); padding: 24px var(--kant) 40px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.mobilmenu[hidden] { display: none; }
.mobilmenu nav { display: flex; flex-direction: column; }
.mobilmenu nav a:not(.knap) { font: 800 clamp(26px, 8vw, 40px)/1.1 var(--bred); font-stretch: 125%; text-transform: uppercase; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--linje-lys); }
.mobilmenu nav a[aria-current] { color: var(--sand); }
.mobilmenu .knap { margin-top: 24px; min-height: 58px; background: var(--sand); border-color: var(--sand); color: var(--sort); }
.mobilmenu-kontakt { color: var(--tekst-daemp); margin-top: 32px; }
@media (max-width: 599px) { .top .knap-tilbud { display: none; } }
@media (min-width: 1100px) {
  .top-nav { display: flex; }
  .burger { display: none; }
  .top-logo { margin-right: 0; }
  .top-nav { margin-inline: auto; }
}

/* Bånd */
.baand { background: var(--bordeaux); overflow: hidden; padding: 18px 0; border-block: 1px solid rgba(240, 201, 154, .2); }
.baand-spor { display: flex; width: max-content; align-items: center; animation: baand 38s linear infinite; }
.baand span { font: 900 clamp(22px, 3.4vw, 44px)/1 var(--bred); font-stretch: 125%; text-transform: uppercase; color: var(--sand); white-space: nowrap; padding-inline: clamp(16px, 2vw, 28px); }
.baand i { width: 12px; height: 12px; border-radius: 50%; background: var(--sand); flex: none; }
@keyframes baand { to { transform: translateX(-50%); } }
.baand-partnere { background: transparent; border: 0; padding: 10px 0 0; }
.baand-partnere .baand-spor { animation-duration: 60s; }
.baand-partnere span { color: transparent; -webkit-text-stroke: 1.2px var(--sand); font-size: clamp(30px, 5vw, 70px); }
.baand-partnere i { background: var(--bordeaux); }

/* Afslør ved scroll */
.vis { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--n, 0) * 70ms); }
.vis.synlig { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vis { opacity: 1; transform: none; transition: none; }
  .baand-spor { animation: none; }
  html { scroll-behavior: auto; }
}

/* Ord der glider op */
.ord-maske { display: inline-block; overflow: hidden; vertical-align: top; padding: .2em 0 .06em; margin: -.2em 0 -.06em; } /* plads over til ringen i Å */
.ord-ind { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--k) * 60ms); }
.ord-overskrift.synlig .ord-ind { transform: none; }
.hero .ord-ind, .side-hero .ord-ind, .verden-top .ord-ind { transition-delay: calc(var(--k) * 90ms + 200ms); }

/* Billeder der åbner sig */
.aabn { clip-path: inset(12% 6% 12% 6% round 6px); transition: clip-path 1.3s var(--ease), transform .5s var(--ease); }
.aabn.synlig { clip-path: inset(0 0 0 0 round 4px); }
.valg-kort, .classic, .detalje { transition: transform .5s var(--ease), clip-path 1.3s var(--ease), background .3s; will-change: transform; }

.fremdrift { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--sand); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ord-ind { transform: none; transition: none; } .aabn { clip-path: none; transition: none; } }

/* Hero (forside) */
.hero { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: flex-end; }
.hero-medie { position: absolute; inset: 0; overflow: hidden; }
/* iPhone viser sin egen afspilningsknap, når den ikke må autoafspille; filmen starter ved første berøring */
.hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero-video::-webkit-media-controls { display: none !important; }
.hero-video, .side-hero-billede { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-skygge { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 0, 0, .55) 0, rgba(31, 0, 0, 0) 28%, rgba(31, 0, 0, .15) 50%, rgba(31, 0, 0, .9) 100%); }
.hero-tekst { position: relative; padding-bottom: clamp(56px, 9vh, 110px); }
.hero h1 { max-width: 11ch; font-size: clamp(42px, 8vw, 124px); }
.hero-under { max-width: 46ch; font-size: clamp(18px, 1.3vw + 12px, 23px); color: var(--tekst-lys); margin: 22px 0 30px; }
.hero-logo { position: absolute; z-index: 3; right: var(--kant); bottom: 0; transform: translateY(50%); width: clamp(110px, 15vw, 220px); aspect-ratio: 1; border-radius: 50%; background: var(--bordeaux); color: var(--sand); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 6px var(--sort); }
.hero-logo .logo { position: absolute; inset: 9%; width: 82%; height: 82%; }
.hero-lyd { position: absolute; left: var(--kant); top: calc(var(--top-h) + 16px); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linje-lys); background: rgba(31, 0, 0, .35); font-size: 10px; letter-spacing: -1px; opacity: .7; }
@media (max-width: 899px) {
  .hero-logo { width: 104px; }
  .hero-lyd { display: none; }
}

/* Undersidernes hero */
.side-hero { position: relative; min-height: min(86svh, 820px); display: flex; align-items: flex-end; overflow: hidden; }
.side-hero-lav { min-height: min(70svh, 640px); }
.side-om .side-hero-billede { object-position: center 25%; }
.side-hero-tekst { position: relative; padding-bottom: clamp(48px, 8vh, 96px); }
.side-hero .hero-under { margin-bottom: 28px; }
.side-hero h1 { max-width: 14ch; }

/* Forside: valg */
.valg { background: var(--papir); color: var(--sort); }
.valg-gitter { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 760px) { .valg-gitter { grid-template-columns: 1fr 1fr; gap: 20px; } }
.valg-kort { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; text-decoration: none; color: var(--tekst-lys); background: var(--sort); }
@media (min-width: 760px) { .valg-kort { aspect-ratio: 5 / 6; } }
.valg-kort img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.valg-kort::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(31, 0, 0, .9)); }
.valg-kort:hover img { transform: scale(1.05); }
.valg-tekst { position: absolute; inset: auto 0 0; z-index: 1; padding: clamp(22px, 3vw, 36px); display: grid; gap: 8px; }
.valg-titel { font: 900 clamp(30px, 4vw, 56px)/1 var(--bred); font-stretch: 125%; text-transform: uppercase; }
.valg-under { color: var(--tekst-daemp); max-width: 34ch; }
.valg-pil { position: absolute; right: clamp(22px, 3vw, 36px); bottom: clamp(22px, 3vw, 36px); width: 52px; height: 52px; border-radius: 50%; background: var(--sand); color: var(--sort); display: grid; place-items: center; font: 700 22px/1 var(--bred); transition: transform .35s var(--ease); }
.valg-kort:hover .valg-pil { transform: translateX(6px); }

/* Tal */
.tal-sektion { background: var(--papir); color: var(--sort); padding-top: 0; }
.tal-gitter { display: grid; gap: 28px clamp(48px, 6vw, 96px); border-top: 1px solid var(--linje-mork); padding-top: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) { .tal-gitter { grid-template-columns: repeat(3, 1fr); } }
.tal-stor { font: 900 clamp(60px, 7.4vw, 112px)/.9 var(--bred); font-stretch: 125%; color: var(--bordeaux); }
.tal-enhed { font: 800 clamp(16px, 1.4vw, 20px)/1 var(--bred); font-stretch: 125%; text-transform: uppercase; margin-left: 8px; color: var(--bordeaux); }
.tal p { margin-top: 10px; color: var(--brun); max-width: 26ch; }

/* Forside: Around the World-teaser */
.verden-teaser { background: var(--sort); overflow: hidden; }
.verden-teaser-gitter { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .verden-teaser-gitter { grid-template-columns: 1fr 1.1fr; } }
.verden-teaser-tekst p { color: var(--tekst-daemp); max-width: 44ch; margin-bottom: 30px; }
.bane { position: relative; width: min(100%, 600px); aspect-ratio: 1; margin-inline: auto; }
.bane::before { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(240, 201, 154, .35); border-radius: 50%; }
.bane-ring { position: absolute; inset: 0; }
.bane-pizza { --v: calc(var(--n) * 360deg / var(--i)); position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%; transform: rotate(var(--v)) translateY(-205%) rotate(calc(-1 * var(--v))); animation: bane 60s linear infinite; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.bane-midte { position: absolute; inset: 30%; border-radius: 50%; background: var(--bordeaux); display: grid; place-items: center; text-align: center; }
.bane-midte span { grid-area: 1 / 1; font: 900 clamp(16px, 2.2vw, 28px)/1 var(--bred); font-stretch: 125%; text-transform: uppercase; color: var(--sand); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); padding: 10px; }
.bane-midte span.aktiv { opacity: 1; transform: none; }
@keyframes bane { to { transform: rotate(calc(var(--v) + 360deg)) translateY(-205%) rotate(calc(-1 * var(--v) - 360deg)); } }
@media (prefers-reduced-motion: reduce) { .bane-pizza { animation: none; } }

/* Citater */
.citater { background: var(--bordeaux); }
.citater .etiket { color: var(--sand); }
.citat-skinne { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 24px; }
.citat-skinne::-webkit-scrollbar { display: none; }
.citat { margin: 0; scroll-snap-align: start; }
.citat blockquote { margin: 0 0 32px; font: italic 400 clamp(26px, 3.4vw, 50px)/1.18 var(--serif); max-width: 30ch; text-wrap: balance; }
.citat blockquote::before { content: "“"; display: block; font: 900 90px/.6 var(--bred); color: var(--sand); margin-bottom: 18px; }
.citat figcaption { display: grid; gap: 4px; }
.citat strong { font: 800 14px/1.2 var(--bred); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; }
.citat figcaption span { color: var(--tekst-daemp); }
.skinne-knapper { display: flex; gap: 10px; margin-top: 36px; }
.skinne-knapper button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--sand); background: none; color: var(--sand); font: 700 18px/1 var(--bred); transition: background .2s, color .2s; }
.skinne-knapper button:hover { background: var(--sand); color: var(--bordeaux); }

.partnere { background: var(--sort); padding-block: clamp(56px, 7vw, 96px); overflow: hidden; }
.partnere-top { margin-bottom: 18px; }
.logo-baand { overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-baand .baand-spor { gap: 0; animation-duration: 70s; }
.logo-baand-modsat .baand-spor { animation-direction: reverse; animation-duration: 80s; }
.logo-celle { flex: none; display: grid; place-items: center; height: 72px; padding-inline: clamp(22px, 2.6vw, 40px); }
.logo-celle img { height: calc(clamp(24px, 2.4vw, 34px) * var(--hf, 1)); width: auto; max-width: 200px; object-fit: contain; opacity: .72; transition: opacity .3s, transform .4s var(--ease); }
.logo-celle:hover img { opacity: 1; transform: scale(1.08); }
.logo-celle b { font: 800 12px/1.2 var(--bred); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); text-align: center; padding: 0 10px; }

/* Instagram */
.instagram { background: var(--papir); color: var(--sort); }
.instagram-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.instagram-top .stor { margin: 0; }
.instagram-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .instagram-gitter { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.instagram-gitter a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--graa); }
.instagram-gitter img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; }
.instagram-gitter a:hover img { transform: scale(1.06); filter: brightness(.85); }

/* Bund */
.bund { background: var(--sort); border-top: 1px solid var(--linje-lys); }
.bund-cta { background: var(--bordeaux); text-align: center; padding: clamp(64px, 9vw, 120px) var(--kant); }
.bund-cta .etiket { color: var(--sand); }
.bund-cta h2 { font-size: clamp(34px, 6vw, 88px); font-weight: 900; margin-bottom: 32px; }
.bund-gitter { width: var(--ramme); margin: 0 auto; padding-block: 64px 32px; display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .bund-gitter { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.bund-logo { grid-column: 1 / -1; color: var(--sand); }
@media (min-width: 860px) { .bund-logo { grid-column: auto; } }
.bund-logo .logo { width: 110px; height: 110px; }
.bund-gitter .etiket { color: var(--sand); margin-bottom: 10px; }
.bund-gitter p { color: var(--tekst-daemp); font-size: 16px; }
.bund-gitter a { text-decoration: none; }
.bund-gitter a:hover { color: var(--sand); }
.bund-slogan { width: var(--ramme); margin: 0 auto; padding: 24px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linje-lys); font: italic 16px/1.4 var(--serif); color: var(--tekst-daemp); }

/* Forløb */
.forloeb { background: var(--papir); color: var(--sort); }
.forloeb-liste { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; counter-reset: trin; border-top: 1px solid var(--linje-mork); }
@media (min-width: 760px) { .forloeb-liste { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
@media (min-width: 1100px) { .forloeb-liste { grid-template-columns: repeat(3, 1fr); } }
.forloeb-liste li { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--linje-mork); }
.forloeb-nr { grid-row: span 2; font: 900 clamp(44px, 5vw, 64px)/.8 var(--bred); font-stretch: 125%; color: var(--bordeaux); }
.forloeb-liste h3 { font-size: clamp(19px, 1.8vw, 24px); margin-bottom: 8px; }
.forloeb-liste p { margin: 0; color: var(--brun); font-size: 17px; }

/* Mærker (anledninger) */
.anledninger { background: var(--sort); }
.maerker { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.maerker li { font: 800 clamp(16px, 1.6vw, 22px)/1 var(--bred); font-stretch: 125%; text-transform: uppercase; padding: 16px 22px; border: 1.5px solid var(--sand); color: var(--sand); border-radius: 999px; }
.maerker .maerke-mere { border-style: dashed; text-transform: none; font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Private: stemning */
.stemning { background: var(--papir); padding-bottom: 0; }
.stemning-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .stemning-gitter { grid-template-columns: 1.2fr .8fr 1fr .9fr; gap: 14px; align-items: end; } }
.stemning-gitter img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
@media (min-width: 900px) { .stemning-gitter img:nth-child(2) { aspect-ratio: 3 / 5; } .stemning-gitter img:nth-child(4) { aspect-ratio: 4 / 5; } }

/* Private: beskeden */
.besked { background: var(--papir); color: var(--sort); }
.besked .etiket { color: var(--bordeaux); }
.besked-gitter { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .besked-gitter { grid-template-columns: 1fr 420px; gap: 80px; } }
.telefon { background: #fff; border-radius: 36px; border: 10px solid var(--sort); box-shadow: 0 40px 80px rgba(31, 0, 0, .25); overflow: hidden; max-width: 420px; width: 100%; margin-inline: auto; }
.telefon-top { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid #eee; background: #f7f7f7; font-family: system-ui, sans-serif; }
.telefon-top small { display: block; font-size: 12px; color: #888; }
.telefon-top strong { font-size: 15px; }
.telefon-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bordeaux); color: #fff; display: grid; place-items: center; font: 700 16px/1 system-ui; }
.telefon-traad { padding: 20px 16px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 420px; font-family: system-ui, -apple-system, sans-serif; }
.boble { margin: 0; background: #e9e9eb; color: #111; padding: 9px 14px; border-radius: 18px 18px 18px 6px; max-width: 86%; font-size: 15.5px; line-height: 1.35; opacity: 0; transform: translateY(12px) scale(.96); transform-origin: left bottom; transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--n) * 380ms + 200ms); }
.boble-hilsen { margin-top: 6px; }
.besked.synlig .boble { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .boble { opacity: 1; transform: none; } }

/* Infoboks */
.infoboks-sektion { background: var(--sort); }
.infoboks { display: grid; gap: 0; border-radius: 6px; overflow: hidden; background: var(--papir); color: var(--sort); }
@media (min-width: 900px) { .infoboks { grid-template-columns: 380px 1fr; } }
.infoboks-pris { background: var(--bordeaux); color: var(--tekst-lys); padding: clamp(32px, 4vw, 52px); }
.infoboks-pris .etiket { color: var(--sand); }
.infoboks-tal { font: 900 clamp(72px, 6.4vw, 92px)/.85 var(--bred); white-space: nowrap; font-stretch: 125%; color: var(--sand); margin: 0 0 8px; }
.infoboks-tal span { font-size: .26em; margin-left: 8px; }
.infoboks-pris ul { list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid rgba(240, 201, 154, .3); display: grid; gap: 8px; }
.infoboks-pris li { display: flex; justify-content: space-between; gap: 12px; }
.infoboks-tekst { padding: clamp(32px, 4vw, 56px); }
.infoboks-tekst p { color: var(--brun); max-width: 56ch; }
.infoboks-tekst p:last-of-type { color: var(--sort); font-style: italic; font-size: 1.1em; }
.infoboks-tekst .knap { margin-top: 12px; }

/* Cases */
.case { background: var(--papir); color: var(--sort); }
.case-mork { background: var(--sort); color: var(--tekst-lys); }
.case-gitter { display: grid; gap: 40px; align-items: start; margin-top: 28px; }
@media (min-width: 960px) { .case-gitter { grid-template-columns: 1fr 1fr; gap: 72px; } .case-mork .case-gitter { grid-template-columns: .9fr 1.1fr; align-items: center; margin-top: 0; } }
.case-tekst p { color: inherit; opacity: .85; }
.case-tal { display: flex; flex-wrap: wrap; gap: 28px 48px; margin: 8px 0 32px; }
.case-tal div { display: grid; }
.case-tal strong { font: 900 clamp(44px, 5vw, 72px)/.9 var(--bred); font-stretch: 125%; color: var(--sand); }
.case:not(.case-mork) .case-tal strong { color: var(--bordeaux); }
.case-tal span { font: 700 12px/1.3 var(--bred); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-top: 8px; }
.case > .ramme > .kaempe { font-size: clamp(34px, 6.2vw, 96px); overflow-wrap: anywhere; }
.case-tal-stor { margin-top: 32px; padding-block: 28px; border-block: 1px solid var(--linje-mork); }
.case-tal-stor strong { font-size: clamp(64px, 9vw, 140px); }
.case-citat { margin: 0; padding: clamp(28px, 3vw, 40px); background: var(--bordeaux); color: var(--tekst-lys); border-radius: 4px; }
.case-citat blockquote { margin: 0 0 20px; font: italic 400 clamp(20px, 1.8vw, 26px)/1.35 var(--serif); }
.case-citat figcaption { font: 700 12px/1.4 var(--bred); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
.case-billeder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 40px; }
.case-billeder img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
@media (max-width: 599px) { .case-billeder { grid-template-columns: 1fr 1fr; } .case-billeder img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } }

/* YouTube */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 4px; overflow: hidden; background: #000; }
.yt img, .yt iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt::after { content: ""; position: absolute; inset: 0; background: rgba(31, 0, 0, .35); transition: background .3s; }
.yt:hover::after { background: rgba(31, 0, 0, .15); }
.yt-knap { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--sand); color: var(--sort); padding: 18px 26px; border-radius: 999px; font: 800 13px/1 var(--bred); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.yt-tom .yt-knap { background: rgba(245, 239, 232, .9); }

/* Slut-CTA */
.slut-cta { background: var(--papir); color: var(--sort); text-align: center; }
.slut-cta h2 { max-width: 16ch; margin: 0 auto 32px; font-size: clamp(36px, 6vw, 90px); }

/* Firma */
.b2b-video { background: var(--papir); color: var(--sort); }
.video-ramme { border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.video-ramme video { width: 100%; height: 100%; object-fit: cover; }
.anledninger-mork { background: var(--bordeaux); }
.tryghed { background: var(--sort); }
.tryghed-gitter { display: grid; gap: 1px; background: var(--linje-lys); border: 1px solid var(--linje-lys); margin-top: 24px; }
@media (min-width: 760px) { .tryghed-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tryghed-gitter { grid-template-columns: repeat(4, 1fr); } }
.tryghed-gitter > div { background: var(--sort); padding: 32px 28px; }
.tryghed-gitter h3 { font-size: 19px; color: var(--sand); margin-bottom: 12px; }
.tryghed-gitter p { color: var(--tekst-daemp); margin: 0; font-size: 17px; }

/* Hæftet */
.haefte { background: var(--sort-2); overflow: hidden; }
.haefte-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; }
.haefte-top p { color: var(--tekst-daemp); max-width: 52ch; margin: 0; }
.bog { position: relative; perspective: 2400px; outline: none; }
.bog-sider { position: relative; width: min(100%, 980px); margin-inline: auto; aspect-ratio: 840 / 595; }
.bog-side { position: absolute; top: 0; width: 50%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); background: var(--sort); backface-visibility: hidden; transition: transform .7s var(--ease), opacity .3s; }
.bog-side.venstre { left: 0; transform-origin: right center; }
.bog-side.hoejre { left: 50%; transform-origin: left center; }
.bog-side.skjult { opacity: 0; pointer-events: none; }
.bog-side.vender-frem { transform: rotateY(-180deg); }
.bog-side.vender-tilbage { transform: rotateY(180deg); }
.bog-sider::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 40px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35), transparent); pointer-events: none; }
.bog.enkelt .bog-sider { aspect-ratio: 420 / 595; width: min(100%, 460px); }
.bog.enkelt .bog-side { width: 100%; left: 0; }
.bog.enkelt .bog-sider::after { display: none; }
.bog-pil { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--sand); color: var(--sort); font: 700 20px/1 var(--bred); z-index: 2; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.bog-pil:disabled { opacity: .3; cursor: default; }
.bog-tilbage { left: 0; }
.bog-frem { right: 0; }
@media (min-width: 1100px) { .bog-tilbage { left: -8px; } .bog-frem { right: -8px; } }
.bog-taeller { text-align: center; margin-top: 24px; color: var(--tekst-daemp); font: 700 12px/1 var(--bred); font-stretch: 125%; letter-spacing: .2em; }

/* Om */
.om-citat { background: var(--papir); color: var(--sort); }
.stort-citat { margin: 0; font: italic 400 clamp(28px, 3.8vw, 58px)/1.18 var(--serif); max-width: 26ch; text-wrap: balance; }
.stort-citat .ord { opacity: .15; transition: opacity .5s; }
.stort-citat .ord.taendt { opacity: 1; }
.personer { background: var(--papir); color: var(--sort); padding-top: 0; }
.person { display: grid; gap: 28px; align-items: center; margin-bottom: clamp(64px, 8vw, 120px); }
@media (min-width: 860px) { .person { grid-template-columns: 1fr 1.1fr; gap: 72px; } .person-spejl img { order: 2; } }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.person h2 { color: var(--bordeaux); margin-bottom: 12px; }
.person .etiket { color: var(--brun); letter-spacing: .12em; }
.person .etiket::before { display: none; }
.person-tekst p:not(.etiket) { color: var(--brun); max-width: 46ch; }
.artikel { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: clamp(28px, 4vw, 48px); background: var(--sort); color: var(--tekst-lys); border-radius: 6px; text-decoration: none; transition: background .3s; }
.artikel:hover { background: var(--bordeaux); }
.artikel .etiket { color: var(--sand); margin: 0; grid-column: 1; }
.artikel-titel { grid-column: 1; font: 800 clamp(22px, 2.6vw, 38px)/1.1 var(--bred); font-stretch: 125%; text-transform: uppercase; }
.artikel-pil { grid-column: 2; grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 50%; background: var(--sand); color: var(--sort); display: grid; place-items: center; font-size: 26px; }
.inspiration { background: var(--sort); }
.inspiration-gitter { display: grid; gap: 40px; }
@media (min-width: 960px) { .inspiration-gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } .inspiration-klister .kaempe { font-size: clamp(36px, 4.2vw, 68px); } .inspiration-klister { position: sticky; top: calc(var(--top-h) + 40px); align-self: start; } }
.inspiration-tekst p { color: var(--tekst-daemp); font-size: clamp(18px, 1.3vw + 10px, 22px); }
.inspiration-tekst p.fremhaevet { color: var(--sand); font-style: italic; font-size: clamp(22px, 1.8vw + 10px, 30px); line-height: 1.3; }
.detaljer { display: grid; gap: 20px; margin-top: clamp(64px, 8vw, 110px); }
@media (min-width: 860px) { .detaljer { grid-template-columns: repeat(3, 1fr); } }
.detalje { background: var(--bordeaux); border-radius: 6px; padding: 28px 28px 32px; text-align: center; }
.detalje img { width: 70%; margin: -10px auto 18px; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .45)); transition: transform 1s var(--ease); }
.detalje:hover img { transform: rotate(25deg) scale(1.04); }
.detalje p { font: italic 400 clamp(19px, 1.5vw, 23px)/1.35 var(--serif); margin: 0; }
.inspiration-slut { text-align: center; padding-top: clamp(64px, 8vw, 110px); }
.inspiration-slut .stor { margin-bottom: 12px; }
.slogan { font: italic 400 clamp(20px, 2vw, 28px)/1.3 var(--serif); color: var(--sand); margin-bottom: 32px; }

/* FAQ */
.side-faq main, .side-tilbud main { padding-top: var(--top-h); }
.faq-top { background: var(--papir); color: var(--sort); padding-bottom: 32px; }
.faq-intro { color: var(--brun); max-width: 52ch; margin-top: 20px; }
.faq { background: var(--papir); color: var(--sort); padding-top: 0; }
.faq-liste { border-top: 2px solid var(--sort); }
.faq-kategori { border-bottom: 2px solid var(--sort); }
.faq-kategori > summary { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px 24px; padding: clamp(22px, 3vw, 34px) 0; cursor: pointer; list-style: none; }
.faq-kategori > summary::-webkit-details-marker, .faq-sp > summary::-webkit-details-marker { display: none; }
.faq-nr { font: 900 clamp(18px, 2vw, 26px)/1 var(--bred); font-stretch: 125%; color: var(--bordeaux); }
.faq-titel { font: 900 clamp(24px, 3.6vw, 52px)/1 var(--bred); font-stretch: 125%; text-transform: uppercase; }
.faq-antal { font: 700 11px/1 var(--bred); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--brun); }
@media (max-width: 599px) { .faq-antal { display: none; } .faq-kategori > summary { grid-template-columns: auto 1fr auto; } }
.faq-ikon { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: transform .35s var(--ease), background .3s, color .3s; }
.faq-ikon::before, .faq-ikon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq-ikon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
details[open] > summary > .faq-ikon::after { transform: translate(-50%, -50%) rotate(0); }
.faq-kategori[open] > summary .faq-ikon { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--tekst-lys); }
.faq-spoergsmaal { padding: 0 0 28px; }
@media (min-width: 760px) { .faq-spoergsmaal { padding-left: calc(clamp(18px, 2vw, 26px) * 1.6 + 24px); } }
.faq-sp { border-top: 1px solid var(--linje-mork); }
.faq-sp > summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font: 700 clamp(17px, 1.4vw, 20px)/1.3 var(--bred); font-stretch: 105%; }
.faq-sp .faq-ikon { width: 30px; height: 30px; }
.faq-sp .faq-ikon::before, .faq-sp .faq-ikon::after { width: 10px; }
.faq-svar { padding: 0 0 22px; color: var(--brun); max-width: 64ch; }
.faq-svar p:last-child { margin: 0; }
.faq-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 48px; }
.faq-kontakt p { margin: 0 12px 0 0; font: 800 18px/1 var(--bred); font-stretch: 125%; text-transform: uppercase; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  details[open]::details-content { height: auto; }
}

/* Menu: verdenskortet */
.side-menu { background: var(--sort); }
.verden { position: relative; padding: calc(var(--top-h) + clamp(32px, 6vw, 72px)) 0 clamp(48px, 6vw, 80px); background: radial-gradient(ellipse 80% 60% at 50% 60%, #3a0712 0, var(--sort) 70%); overflow: hidden; }
.verden-top h1 { font-size: clamp(44px, 9vw, 140px); }
.verden-intro { color: var(--tekst-daemp); max-width: 50ch; margin-top: 18px; }
.kort { position: relative; width: min(100% - 2 * var(--kant) + 40px, 1340px); margin: clamp(16px, 3vw, 40px) auto 0; overflow: hidden; border-radius: 8px; }
.kort-flade { position: relative; aspect-ratio: 1000 / 520; transform-origin: 0 0; transition: transform 1.1s var(--ease); }
.verden-svg { width: 100%; height: 100%; }
.verden-svg path { fill: #3b1414; stroke: var(--sort); stroke-width: .35; transition: fill .6s; }
.verden-svg path[data-land] { fill: #5a0b22; }
.verden-svg path[data-land].aktiv { fill: var(--bordeaux); }
.kort-streger { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .5s; }
.kort-streger line { stroke: var(--sand); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
.kort-prik { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--sand); transition: opacity .5s; }
.kort.zoomet .kort-streger, .kort.zoomet .kort-prik { opacity: 0; }
.kort-pin { position: absolute; left: var(--x); top: var(--y); width: clamp(30px, 4.4vw, 62px); aspect-ratio: 1; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); transition: transform .5s var(--ease), opacity .5s; z-index: 1; }
.kort-pin img { width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); animation: svaev 4s ease-in-out infinite; animation-delay: calc(var(--n) * -.4s); transition: transform .4s var(--ease); }
.kort-pin::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--sand); opacity: 0; animation: puls 2.6s ease-out infinite; animation-delay: calc(var(--n) * .3s); }
.kort-pin span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); white-space: nowrap; font: 800 clamp(8px, .8vw, 11px)/1 var(--bred); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); text-shadow: 0 1px 8px var(--sort); transition: opacity .3s; }
.kort-pin:hover img { transform: scale(1.18) rotate(30deg); }
@keyframes svaev { 50% { transform: translateY(-4px); } }
@keyframes puls { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.5); } }

.kort.zoomet .kort-pin:not(.aktiv) { opacity: 0; pointer-events: none; }
.kort.zoomet .kort-pin.aktiv { opacity: 0; }
.kort-kort { position: absolute; z-index: 3; inset: auto 12px 12px 12px; display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; padding: 18px; background: rgba(31, 0, 0, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--linje-lys); border-radius: 8px; animation: kort-ind .7s var(--ease) both; }
.kort-kort[hidden] { display: none; }
.kort-pizza { width: 100%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); animation: pizza-ind 1.1s var(--ease) both; }
.kort-kort h2 { font-size: clamp(26px, 3vw, 46px); margin-bottom: 10px; }
.kort-kort .etiket { color: var(--sand); margin-bottom: 8px; }
.kort-beskrivelse { color: var(--tekst-lys); font-size: 17px; }
.ingredienser { font: 600 12.5px/1.6 var(--bred); font-stretch: 110%; letter-spacing: .05em; text-transform: uppercase; color: var(--sand); opacity: .9; }
.kort-luk { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linje-lys); background: none; font-size: 22px; line-height: 1; }
.kort-skift { display: flex; gap: 8px; margin-top: 14px; }
.kort-skift button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linje-lys); background: none; }
.kort-skift button:hover, .kort-luk:hover { background: var(--tekst-lys); color: var(--sort); }
@media (max-width: 699px) {
  .kort { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-radius: 0; width: 100%; -webkit-overflow-scrolling: touch; }
  .kort::-webkit-scrollbar { display: none; }
  .kort-flade { width: 240%; }
  .kort-pin { width: 38px; }
  .kort-pin span { display: block; font-size: 8px; }
  .kort-kort .etiket { letter-spacing: .12em; padding-right: 44px; }
  .kort-kort h2 { font-size: 30px; }
  .kort-kort .tilfoej { white-space: normal; }
  .kort-beskrivelse { font-size: 16px; }
  .kort-swipe { display: block; text-align: center; color: var(--tekst-daemp); font: 700 11px/1 var(--bred); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; margin-top: 12px; }
  .kort-kort { position: fixed; inset: auto 0 0 0; border-radius: 16px 16px 0 0; grid-template-columns: 80px minmax(0, 1fr); padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 78svh; overflow-y: auto; z-index: 60; }
}
@media (min-width: 700px) {
  .kort-kort { inset: 50% 24px auto auto; transform: translateY(-50%); width: min(560px, 52%); grid-template-columns: 1fr; padding: 28px; animation-name: kort-ind-side; }
  .kort-pizza { position: absolute; width: 260px; left: -150px; top: 50%; margin-top: -130px; }
  .kort-tekst { padding-left: 100px; }
}
@media (min-width: 1100px) { .kort-pizza { width: 330px; left: -200px; margin-top: -165px; } .kort-tekst { padding-left: 120px; } }
@keyframes kort-ind { from { opacity: 0; transform: translateY(30px); } }
@keyframes kort-ind-side { from { opacity: 0; transform: translate(40px, -50%); } }
@keyframes pizza-ind { from { opacity: 0; transform: rotate(-120deg) scale(.6); } }
.kort-swipe { display: none; }
.lande-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.lande-liste button { border: 1px solid var(--linje-lys); background: none; border-radius: 999px; padding: 10px 16px; font: 700 11.5px/1 var(--bred); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-daemp); transition: all .2s; }
.lande-liste button:hover, .lande-liste button.aktiv { background: var(--sand); border-color: var(--sand); color: var(--sort); }

/* Tilføj-knap */
.tilfoej { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 0 18px 0 6px; min-height: 44px; border: 1.5px solid var(--sand); border-radius: 999px; background: none; color: var(--sand); font: 700 11.5px/1 var(--bred); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s; }
.tilfoej-plus { width: 32px; height: 32px; border-radius: 50%; background: var(--sand); color: var(--sort); display: grid; place-items: center; font: 700 18px/1 var(--bred); transition: transform .35s var(--ease); }
.tilfoej:hover { background: var(--sand); color: var(--sort); }
.tilfoej.valgt { background: var(--sand); color: var(--sort); }
.tilfoej.valgt .tilfoej-plus { background: var(--sort); color: var(--sand); transform: rotate(45deg); }
.tilfoej.fuld { opacity: .45; cursor: not-allowed; }
.tilfoej.fuld:hover { background: none; color: var(--sand); }
.classic .tilfoej.fuld:hover { background: none; color: var(--bordeaux); }

/* Menu: Originals */
.originals { background: var(--bordeaux); padding-top: clamp(72px, 10vw, 140px); }
.originals-top p { color: var(--tekst-daemp); max-width: 46ch; }
.originals-scene { height: calc(var(--antal) * 85svh); position: relative; }
.originals-klister { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.originals-navne { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.originals-navne span { grid-area: 1 / 1; font: 900 clamp(64px, 15vw, 260px)/.82 var(--bred); font-stretch: 125%; text-transform: uppercase; text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(240, 201, 154, .35); max-width: 9ch; opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.originals-navne span.aktiv { opacity: 1; transform: none; }
.originals-tallerken { position: absolute; left: 50%; top: 42%; width: min(62vw, 54svh, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.originals-tallerken img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)); opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.originals-tallerken img.aktiv { opacity: 1; transform: none; }
.originals-tekster { position: absolute; inset: auto var(--kant) clamp(24px, 5svh, 56px); display: grid; }
.original { grid-area: 1 / 1; max-width: 420px; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.original.aktiv { opacity: 1; transform: none; pointer-events: auto; }
.original-nr { font: 700 12px/1 var(--bred); font-stretch: 125%; letter-spacing: .2em; color: var(--sand); }
.original h3 { font-size: clamp(28px, 3.4vw, 48px); margin: 10px 0 12px; }
.original p { color: var(--tekst-daemp); margin-bottom: 8px; font-size: 17px; }
.original .ingredienser { color: var(--sand); }
.originals-prikker { position: absolute; right: var(--kant); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.originals-prikker i { width: 8px; height: 8px; border-radius: 50%; background: rgba(240, 201, 154, .35); transition: all .3s; }
.originals-prikker i.aktiv { background: var(--sand); height: 26px; border-radius: 4px; }
@media (min-width: 900px) {
  .originals-tallerken { left: 58%; top: 50%; width: min(44vw, 72svh, 640px); }
  .originals-tekster { inset: auto auto 50% var(--kant); transform: translateY(50%); left: max(var(--kant), (100% - 1240px) / 2); }
}
@media (max-width: 899px) { .originals-tallerken { top: 36%; } .originals-tekster { background: linear-gradient(transparent, rgba(116, 6, 40, .95) 30%); padding-top: 40px; inset: auto 0 0; padding-inline: var(--kant); padding-bottom: 28px; } }

/* Menu: Classics, i samme greb som det trykte menukort */
.classics { background: var(--graa); color: var(--bordeaux); }
.classics .etiket { color: var(--bordeaux); }
.classics-intro { color: var(--brun); max-width: 46ch; margin-top: 16px; }
.classics-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; margin-top: 48px; }
.classic { background: #e6e6e6; border-radius: 6px; padding: 24px 22px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform .4s var(--ease), background .3s; }
.classic:hover { transform: translateY(-6px); background: #efefef; }
.classic img { width: 78%; margin: -4px auto 18px; filter: drop-shadow(0 18px 18px rgba(31, 0, 0, .22)); transition: transform 1s var(--ease); }
.classic:hover img { transform: rotate(8deg); }
.classic h3 { font-size: 22px; letter-spacing: .06em; margin-bottom: 10px; }
.classic .ingredienser { color: var(--bordeaux); flex: 1; margin-bottom: 10px; }
.classic-note { font-style: italic; color: var(--brun); font-size: 15px; }
.classic .tilfoej { border-color: var(--bordeaux); color: var(--bordeaux); font-stretch: 100%; letter-spacing: .05em; padding-right: 14px; }
.classic .tilfoej-plus { background: var(--bordeaux); color: var(--tekst-lys); }
.classic .tilfoej:hover, .classic .tilfoej.valgt { background: var(--bordeaux); color: var(--tekst-lys); }
.classic .tilfoej.valgt .tilfoej-plus { background: var(--tekst-lys); color: var(--bordeaux); }

/* Kurven nede til højre */
.kurv { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 55; width: min(320px, calc(100% - 24px)); background: var(--sand); color: var(--sort); border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); animation: kurv-ind .5s var(--ease); }
.kurv[hidden] { display: none; }
.kurv-knap { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 14px 16px; font: 800 12.5px/1 var(--bred); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.kurv-knap::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(-135deg); transition: transform .3s; }
.kurv-knap[aria-expanded="true"]::after { transform: rotate(45deg) translateY(-3px); }
.kurv-antal { width: 30px; height: 30px; border-radius: 50%; background: var(--bordeaux); color: var(--tekst-lys); display: grid; place-items: center; font-size: 13px; letter-spacing: 0; }
.kurv-indhold { display: none; padding: 0 16px 16px; }
.kurv.aaben .kurv-indhold { display: block; }
.kurv ul { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--linje-mork); }
.kurv li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linje-mork); font: 600 14px/1.2 var(--bred); }
.kurv li button { border: 0; background: none; font-size: 20px; line-height: 1; padding: 4px 8px; color: var(--bordeaux); }
.kurv .knap { width: 100%; }
.kurv.ryst { animation: ryst .5s; }
@keyframes kurv-ind { from { transform: translateY(30px); opacity: 0; } }
@keyframes ryst { 30% { transform: scale(1.04); } 60% { transform: scale(.98); } }
.side-tilbud .kurv, .side-kvittering .kurv { display: none; }

/* Få et tilbud */
.side-tilbud { background: var(--papir); color: var(--sort); }
.tilbud-top { padding-bottom: 32px; }
.tilbud-intro { color: var(--brun); margin: 16px 0 28px; }
.vaelger { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--graa); border-radius: 999px; padding: 5px; }
.vaelger input { position: absolute; opacity: 0; pointer-events: none; }
.vaelger label { position: relative; z-index: 1; padding: 14px 30px; font: 800 13px/1 var(--bred); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-align: center; transition: color .3s; }
.vaelger-glider { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--bordeaux); transition: transform .45s var(--ease); }
.vaelger input:checked + label { color: var(--tekst-lys); }
.vaelger:has(#type-erhverv:checked) .vaelger-glider { transform: translateX(100%); }
.vaelger input:focus-visible + label { outline: 2px solid var(--bordeaux); outline-offset: 2px; border-radius: 999px; }
.tilbud { display: grid; gap: 20px; padding-bottom: clamp(72px, 10vw, 140px); align-items: start; }
@media (min-width: 1100px) {
  .tilbud { grid-template-columns: 1fr 1.15fr 1fr; grid-template-areas: "t1 t2 o" "t1 t2 t3"; grid-template-rows: auto 1fr; }
  #trin-1 { grid-area: t1; } #trin-2 { grid-area: t2; } .overslag { grid-area: o; } #trin-3 { grid-area: t3; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .tilbud { grid-template-columns: 1fr 1fr; grid-template-areas: "t1 t2" "o t2" "o t3"; }
  #trin-1 { grid-area: t1; } #trin-2 { grid-area: t2; } .overslag { grid-area: o; } #trin-3 { grid-area: t3; }
}
.trin { margin: 0; min-width: 0; border: 0; background: #fff; border-radius: 8px; padding: 28px clamp(20px, 2.4vw, 32px) 32px; box-shadow: 0 1px 0 var(--linje-mork); }
.trin legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 0 20px; margin-bottom: 8px; border-bottom: 1px solid var(--linje-mork); font: 900 clamp(16px, 1.2vw, 19px)/1 var(--bred); font-stretch: 100%; text-transform: uppercase; }
.trin > * { clear: both; }
.trin-nr { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bordeaux); color: var(--tekst-lys); display: grid; place-items: center; font-size: 15px; }
.trin-hjaelp { color: var(--brun); font-size: 16px; }
.felt { display: grid; gap: 6px; margin-top: 18px; }
.felt-raekke { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.felt-raekke .felt-smal { max-width: 120px; }
.felt-raekke:has(.felt-smal) { grid-template-columns: auto 1fr; }
.felt label:not(.flueben), .felt .label { font: 700 11.5px/1.2 var(--bred); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; }
.valgfri { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--brun); margin-left: 4px; font-size: 13px; }
.felt input:not([type=checkbox]):not([type=radio]), .felt select, .felt textarea { width: 100%; min-height: 50px; border: 1.5px solid #cfc6bd; border-radius: 6px; background: #fff; padding: 12px 14px; font: 400 17px/1.3 var(--serif); color: var(--sort); transition: border-color .2s, box-shadow .2s; }
.felt textarea { resize: vertical; }
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(116, 6, 40, .15); }
.felt input:disabled { background: #f1ece6; color: #9a8f88; }
.felt .ugyldig { border-color: #c0392b !important; }
.flueben { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; width: fit-content; }
.flueben input, .tilvalg input, .kontakt-valg input, .chip input { accent-color: var(--bordeaux); width: 20px; height: 20px; margin: 0; }
.hjaelp { font-size: 14px; color: var(--brun); margin: 0; }
.taeller-felt { display: grid; grid-template-columns: 50px 1fr 50px; }
.taeller-felt button { border: 1.5px solid #cfc6bd; background: var(--papir); font: 600 22px/1 var(--bred); }
.taeller-felt button:first-child { border-radius: 6px 0 0 6px; border-right: 0; }
.taeller-felt button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.taeller-felt input { border-radius: 0 !important; text-align: center; font: 800 20px/1 var(--bred) !important; -moz-appearance: textfield; }
.taeller-felt input::-webkit-inner-spin-button { -webkit-appearance: none; }
.valgte { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.valgte-pladser { display: contents; }
.valgt { padding: 8px 12px; border-radius: 999px; background: var(--bordeaux); color: var(--tekst-lys); font: 700 11.5px/1 var(--bred); font-stretch: 115%; letter-spacing: .06em; text-transform: uppercase; }
.valgt-tom { background: none; border: 1.5px dashed #cfc6bd; color: #9a8f88; }
.pizza-gruppe { font: 700 11px/1 var(--bred); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin: 14px 0 8px; }
.pizza-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: block; padding: 10px 14px; border: 1.5px solid #cfc6bd; border-radius: 999px; font: 600 14px/1 var(--bred); font-stretch: 105%; transition: all .2s; }
.chip:hover span { border-color: var(--bordeaux); }
.chip input:checked + span { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--tekst-lys); }
.chip input:focus-visible + span { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.tilvalg { display: grid; margin-top: 22px; border-top: 1px solid var(--linje-mork); }
.tilvalg-linje { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linje-mork); cursor: pointer; }
.tilvalg-linje span { font: 700 15px/1.2 var(--bred); font-stretch: 110%; }
.tilvalg-linje em { color: var(--brun); font-size: 14px; }
.kontakt-valg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kontakt-valg label { position: relative; cursor: pointer; }
.kontakt-valg input { position: absolute; opacity: 0; }
.kontakt-valg span { display: block; text-align: center; padding: 14px 8px; border: 1.5px solid #cfc6bd; border-radius: 6px; font: 700 13px/1 var(--bred); font-stretch: 115%; text-transform: uppercase; letter-spacing: .08em; transition: all .2s; }
.kontakt-valg input:checked + span { background: var(--sort); border-color: var(--sort); color: var(--tekst-lys); }
.kontakt-valg input:focus-visible + span { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.kun-erhverv { display: none; }
.tilbud.erhverv .kun-erhverv { display: grid; }
.honning { position: absolute; left: -9999px; }
.fejl { margin: 18px 0 0; padding: 12px 14px; background: #fbe9e7; color: #8e2418; border-radius: 6px; font-size: 15px; }
#trin-3 .knap-stor { margin: 22px 0 12px; }
.knap[aria-busy="true"] { opacity: .6; pointer-events: none; }
.overslag { background: var(--sort); color: var(--tekst-lys); border-radius: 8px; padding: 28px clamp(20px, 2.4vw, 32px); }
.overslag .etiket { color: var(--sand); margin-bottom: 10px; }
.overslag-total { font: 900 clamp(40px, 4vw, 58px)/1 var(--bred); font-stretch: 125%; color: var(--sand); margin: 0; }
.overslag-moms { color: var(--tekst-daemp); font-size: 15px; margin: 6px 0 18px; }
.overslag-linjer { margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--linje-lys); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 15px; }
.overslag-linjer dt { color: var(--tekst-daemp); }
.overslag-linjer dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.overslag-note { font-size: 13.5px; color: var(--tekst-daemp); font-style: italic; margin: 0; padding-top: 14px; border-top: 1px solid var(--linje-lys); }

/* Kvittering */
.side-kvittering { background: var(--papir); color: var(--sort); }
.side-kvittering main { padding-top: var(--top-h); }
.kvittering-top { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.kvittering-top p { color: var(--brun); }
.kvittering-top .knapper { justify-content: center; margin-top: 24px; }
.kvittering-flueben { width: 76px; height: 76px; border-radius: 50%; background: var(--bordeaux); color: var(--sand); display: grid; place-items: center; font: 900 34px/1 var(--bred); margin: 0 auto 24px; animation: pizza-ind .8s var(--ease) both; }
.kvittering-papir { max-width: 720px; margin: 0 auto; background: #fff; border-radius: 8px; padding: clamp(24px, 5vw, 56px); box-shadow: 0 30px 70px rgba(31, 0, 0, .12); }
.kvittering-papir header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--sort); text-align: right; }
.kvittering-papir header .logo { width: 84px; height: 84px; color: var(--bordeaux); flex: none; }
.kvittering-papir header p { margin: 0; font-size: 15px; color: var(--brun); }
.kvittering-papir header .etiket { margin-bottom: 6px; }
.kvittering-id { font: 900 22px/1.2 var(--bred) !important; font-stretch: 125% !important; color: var(--sort) !important; }
.kvittering-papir h2 { font-size: 15px; letter-spacing: .14em; color: var(--bordeaux); margin: 32px 0 12px; }
.kvittering-papir dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 20px; margin: 0; font-size: 16px; }
@media (max-width: 499px) { .kvittering-papir dl { grid-template-columns: 1fr; gap: 2px; } .kvittering-papir dd { margin-bottom: 10px; } }
.kvittering-papir dt { color: var(--brun); }
.kvittering-papir dd { margin: 0; }
.kvittering-pris dd { text-align: right; font-variant-numeric: tabular-nums; }
.kvittering-pris .total { padding-top: 12px; border-top: 1px solid var(--linje-mork); font: 800 18px/1.2 var(--bred); font-stretch: 115%; color: var(--sort); }
.kvittering-note { margin-top: 18px; font-size: 14px; font-style: italic; color: var(--brun); }
.kvittering-papir footer { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--linje-mork); font-size: 13px; color: var(--brun); text-align: center; }

@media print {
  .top, .mobilmenu, .bund, .kurv, .ikke-print, .spring { display: none !important; }
  body, .side-kvittering { background: #fff; }
  main { padding: 0 !important; }
  .sektion { padding: 0; }
  .kvittering-top { margin-bottom: 16px; }
  .kvittering-flueben { display: none; }
  .kvittering-papir { box-shadow: none; padding: 0; }
}