/* Planuko hjemmeside. Tokens fra src/constants/theme.ts (v4) / BRAND-KIT.md.
   Forbilleder (struktur, ikke indhold): hero = Finch, tillidslinje = Headspace, strip = Duolingo,
   trin = Mealime, sticky telefon = Yuka/Headspace, flankeret slut-CTA = Finch, lag-loops = Forest. */
@font-face { font-family: "Fredoka"; src: url(/fonts/Fredoka-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url(/fonts/PlusJakartaSans-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(/fonts/Nunito-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(/fonts/Nunito-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(/fonts/Nunito-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bg: #FFF7EC; --flade: #FFFCF5; --baand: #F6EAD6; --tekst: #2B2B2B; --daempet: #6E5B4E;
  --primaer: #7A1F2B; --paa-primaer: #FFF7EC; --accent: #F4C95D; --positiv: #37704F; --logo: #7A1F2B;
  --himmel-top: #FFF3DC; --himmel-bund: #FCE3A8; --jord: #F2D59A;
  --linje: rgba(122, 31, 43, 0.12); --skygge: 0 1px 2px rgba(60, 20, 20, .06), 0 12px 32px -12px rgba(90, 30, 30, .22);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1); --fjeder: cubic-bezier(.34, 1.56, .64, 1);
  --r: 22px; --maks: 1160px;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171310; --flade: #231d18; --baand: #262019; --tekst: #F2E9DC; --daempet: #BFAE9C; --logo: #FFF7EC;
    --primaer: #E2A98D; --paa-primaer: #2A140F; --linje: rgba(242, 233, 220, 0.12);
    --himmel-top: #1d1712; --himmel-bund: #3a2a17; --jord: #4a3419;
    --skygge: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 18px/1.6 "Nunito", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--primaer); text-underline-offset: 3px; }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 .4em; text-wrap: balance; }
h3 { font-family: "Plus Jakarta Sans", "Nunito", sans-serif; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; font-size: 1.3rem; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spring { position: absolute; left: 12px; top: -60px; background: var(--primaer); color: var(--paa-primaer); padding: 10px 16px; border-radius: 12px; z-index: 30; }
.spring:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.kicker { font-weight: 800; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primaer); margin-bottom: .6em; }
.fodnote, .lille { font-size: .88rem; color: var(--daempet); line-height: 1.5; }
.center { text-align: center; }
.maskot { pointer-events: none; user-select: none; }

/* Logo: bogstaver (symbol) + maskot-O */
.wordmark { position: relative; display: inline-block; aspect-ratio: 1096 / 274; color: var(--logo); line-height: 0; }
.wordmark svg { width: 100%; height: 100%; display: block; }
.wordmark-o { position: absolute; left: 74.27%; top: 9.12%; width: 25.55%; height: auto; }

/* Top */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px max(16px, calc((100vw - var(--maks)) / 2)); background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.top.rullet { border-bottom-color: var(--linje); }
.logo { display: block; width: 132px; transition: opacity 200ms ease, transform 300ms var(--ease-out); }
.logo .wordmark { width: 100%; }
/* Forsiden: navbarens logo toner frem, når det store logo er rullet ud af syne (site.js). Ingen bevægelse. */
.js .side-home:not(.logo-oppe) .top .logo { opacity: 0; }
.js .side-home:not(.logo-oppe) .top .logo:focus-visible { opacity: 1; transform: none; }
.top nav { display: flex; align-items: center; gap: 6px; }
.top nav a { text-decoration: none; color: var(--tekst); font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 999px; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .top nav a:hover { background: var(--baand); } }
.top nav a.sprog { border: 1.5px solid var(--linje); font-weight: 800; letter-spacing: .04em; min-height: 44px; display: inline-flex; align-items: center; }
.top nav a.nav-cta { background: var(--primaer); color: #FFF7EC; font-weight: 800; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .top nav a.nav-cta:hover { background: var(--primaer); filter: brightness(1.1); } }
@media (max-width: 720px) { .top nav a:not(.sprog):not(.nav-cta) { display: none; } .top nav a.nav-cta { padding: 8px 14px; font-size: .88rem; } }

/* Sprog-hint (vises kun ved browser på det andet sprog, uden valgt sprog) */
.sprog-hint { position: fixed; z-index: 25; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(460px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; background: var(--flade); border: 1.5px solid var(--linje); border-radius: 18px; box-shadow: var(--skygge);
  animation: op 500ms var(--ease-out) both; }
.sprog-hint[hidden] { display: none; }
.sprog-hint p { margin: 0; flex: 1; font-weight: 600; }
.sprog-hint a { font-weight: 800; }
.luk { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--tekst); font-size: 1.5rem; cursor: pointer; }
@keyframes op { from { opacity: 0; transform: translate(-50%, 16px); } }

/* Knapper */
.knap { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 1.05rem; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 200ms ease; }
.knap:active { transform: scale(0.97); }
.knap.primaer { background: var(--primaer); color: var(--paa-primaer); box-shadow: 0 5px 0 #5a1520, 0 14px 24px -12px rgba(122, 31, 43, .55); }
.knap.primaer:active { transform: translateY(3px); box-shadow: 0 2px 0 #5a1520; }
.knap.sekundaer { background: var(--flade); color: var(--primaer); border: 2px solid var(--linje); box-shadow: 0 4px 0 var(--linje); }
@media (hover: hover) and (pointer: fine) {
  .knap.primaer:hover { transform: translateY(-2px); }
  .knap.sekundaer:hover { background: var(--baand); }
}
@media (prefers-color-scheme: dark) { .knap.primaer { box-shadow: 0 5px 0 #a8705a; } }

.status { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--primaer); margin-bottom: 14px; cursor: default; }
.prik { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(244, 201, 93, .7); animation: puls 2.4s var(--ease-out) infinite; }
@media (prefers-color-scheme: dark) { .status { color: var(--tekst); } }
@keyframes puls { 70% { box-shadow: 0 0 0 9px rgba(244, 201, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 201, 93, 0); } }

/* Hero (Finch): varm scene, centreret indhold, maskotter på jorden */
.hero { position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 0; text-align: center; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 38%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--himmel-top) 45%, var(--himmel-bund) 100%); }
.hero-midte { position: relative; width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.hero-maerke { width: min(320px, 70vw); margin: 0 0 14px; }
.hero-maerke .wordmark { width: 100%; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); color: var(--tekst); max-width: 15em; }
.lead { font-size: 1.2rem; color: var(--daempet); max-width: 34em; }
.tillid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 0; margin: 4px 0 0; font-size: .92rem; font-weight: 600; color: var(--daempet); }
.tillid li { display: inline-flex; align-items: center; gap: 7px; }
.tillid li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--positiv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
/* Telefonen rejser sig op af jorden mellem to maskotter; heroen skærer den af forneden. */
.hero-jord { position: relative; width: 100%; height: 400px; margin-top: 16px; }
.hero-jord::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -150px; height: 260px; border-radius: 50%; background: var(--jord); box-shadow: inset 0 10px 0 color-mix(in srgb, var(--jord) 70%, white); }
.hero-telefon { position: absolute; left: 50%; top: 0; --w: 300px; margin-left: -150px; z-index: 1; }
.js .hero-telefon { animation: rejs 1000ms var(--ease-out) 350ms both; }
@keyframes rejs { from { transform: translateY(120px); opacity: 0; } }
.hero-chip { left: calc(50% + 120px); top: 250px; }
.js .hero-chip { animation: loeft 700ms var(--fjeder) 1100ms both; }
.jord-maskot { position: absolute; bottom: 118px; width: 190px; z-index: 2; }
.jord-maskot.venstre { right: calc(50% + 150px); }
.jord-maskot.hoejre { left: calc(50% + 290px); width: 180px; bottom: 110px; }
.hero-himmel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rekvisit { position: absolute; width: 74px; filter: drop-shadow(0 10px 14px rgba(90, 40, 20, .18)); }
.r1 { left: 9%; top: 16%; animation: svaev 7s ease-in-out infinite; }
.r2 { left: 17%; top: 50%; width: 58px; animation: svaev 8.5s ease-in-out -2s infinite; }
.r3 { right: 10%; top: 13%; animation: svaev 9s ease-in-out -4s infinite; }
@keyframes svaev { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(5deg); } }

@keyframes loeft { from { opacity: 0; transform: translateY(18px); } }
/* Strip (Duolingo) */
.strip { border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); background: var(--flade); overflow: hidden; }
.strip ul { list-style: none; margin: 0 auto; padding: 14px 16px; max-width: var(--maks); display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; font-weight: 800; font-size: .9rem; color: var(--daempet); letter-spacing: .02em; }
.strip li { display: inline-flex; align-items: center; gap: 9px; }
.strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero-note { max-width: 640px; margin: 14px auto 0; padding: 0 16px; }

/* Sådan (Mealime): bare telefoner på række, nummereret tekst under */
.sadan, .pris, .faq { max-width: var(--maks); margin: 0 auto; padding: 88px 16px 24px; text-align: center; }
.trin-liste { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.trin { display: flex; flex-direction: column; align-items: center; position: relative; isolation: isolate; }
.trin::before { content: ""; position: absolute; top: 40px; left: 50%; width: 300px; max-width: 100%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, var(--baand) 0 55%, transparent 72%); z-index: -1; }
.trin h3 { margin-top: 22px; font-size: 1.2rem; }
.trin .nr { color: var(--primaer); }
.trin p { color: var(--daempet); max-width: 20em; }
.trin-note { text-align: center; margin-top: 28px; }
.telefon { --w: 250px; margin: 0; position: relative; width: var(--w); }
.telefon img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; box-sizing: border-box;
  }
.telefon::before { content: ""; position: absolute; left: 50%; z-index: 3; }
.telefon.lille { --w: 220px; }
.trin:nth-child(2) .telefon { transform: translateY(18px); }
.telefon { container-type: inline-size; }
.statuslinje { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 8cqw 11cqw 0 12cqw; font: 700 5.4cqw/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1b1512; letter-spacing: -.01em; pointer-events: none; }
.statuslinje svg { width: 21cqw; height: auto; fill: currentColor; }

/* Telefon: realistisk iPhone 16/17 Pro (titanium-ramme, knapper, Dynamic Island), valgt af council 27/9
   (A overalt; hero-telefonen drejet let i 3D på desktop). Alle mål følger telefonens bredde --w. */
.telefon { aspect-ratio: 1 / 2.0885; border-radius: calc(var(--w) * .175); padding: calc(var(--w) * .034);
  background: linear-gradient(145deg, #9a948e 0%, #4b4642 12%, #242020 40%, #1a1716 62%, #57514c 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .012) #0e0c0b, inset 0 calc(var(--w) * .005) 0 calc(var(--w) * .014) rgba(255,255,255,.08),
    0 40px 70px -24px rgba(90, 36, 22, .5), 0 14px 28px -12px rgba(90, 36, 22, .35); }
.telefon img { border-radius: 14cqw; }
.telefon::before { top: 5.6cqw; width: 30cqw; height: 8.8cqw; margin-left: -15cqw; border-radius: 99px; background: #050505; }
.telefon::after { content: ""; position: absolute; left: -1.1cqw; top: 22%; width: 1.4cqw; height: 7%; border-radius: 1cqw 0 0 1cqw;
  background: #3b3633; box-shadow: 0 11cqw 0 #3b3633, 0 26cqw 0 #3b3633, calc(100cqw + .8cqw) 16cqw 0 #3b3633; }
@media (min-width: 961px) {
  .hero-telefon.telefon { transform: perspective(1400px) rotateY(-16deg) rotateX(6deg) rotateZ(2deg);
    box-shadow: inset 0 0 0 calc(var(--w) * .012) #0e0c0b, 30px 50px 80px -24px rgba(90, 36, 22, .55); }
}

/* Chips (UI-kort der stikker ud af telefonen, Headspace/Flo) */
.chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 16px; border-radius: 16px;
  background: var(--flade); color: var(--tekst); font-weight: 800; font-size: .95rem; border: 1px solid var(--linje); box-shadow: var(--skygge); }
.chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

/* Funktioner: scrolly (desktop) + almindelige rækker (mobil/uden JS) */
.funktion { max-width: var(--maks); margin: 0 auto; padding: 72px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.funktion-tekst { max-width: 30em; }
.funktion-tekst > p:not(.kicker):not(.fodnote) { font-size: 1.12rem; color: color-mix(in srgb, var(--tekst) 78%, var(--daempet)); }
.funktion-visuel { position: relative; display: flex; justify-content: center; }
.funktion-visuel::before { content: ""; position: absolute; width: 420px; max-width: 90%; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--baand) 0 58%, transparent 72%); z-index: -1; }
.funktion-visuel .telefon { --w: 260px; }
.maskot.hjoerne { position: absolute; width: 140px; right: max(0px, calc(50% - 240px)); bottom: -18px; z-index: 2; }
.scene { display: none; }

@media (min-width: 961px) {
  .js .scrolly { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--maks); margin: 40px auto 0; padding: 0 16px 200px; }
  .js .scene { display: block; order: 2; }
  .js .scrolly { --tw: min(330px, calc((100vh - 150px) * .462)); }
  .js .scene-ramme { position: sticky; top: calc(50vh - var(--tw) * 1.082 + 36px); width: var(--tw); height: calc(var(--tw) * 2.164); margin: 0 auto; }
  .js .scene-ramme::before { content: ""; position: absolute; width: 520px; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--baand) 0 55%, transparent 71%); }
  .js .lag { position: absolute; inset: 0; opacity: 0; transition: opacity 450ms ease; }
  .js .lag.aktiv { opacity: 1; }
  .js .scene-telefon { --w: var(--tw); transform: scale(.96) translateY(10px); transition: transform 600ms var(--ease-out); }
  .js .lag.aktiv .scene-telefon { transform: none; }
  .js .lag .chip { opacity: 0; transition: opacity 400ms ease 180ms, transform 700ms var(--fjeder) 180ms; }
  .js .lag .chip-0 { left: -120px; top: 70%; transform: translateX(24px) scale(.9); }
  .js .lag .chip-1 { right: -130px; top: 58%; transform: translateX(-24px) scale(.9); }
  .js .lag.aktiv .chip { opacity: 1; transform: none; }
  .js .scene-maskot { position: absolute; width: 170px; bottom: -40px; right: -140px; opacity: 0; transform: translateY(40px) rotate(-8deg) scale(.85); transition: opacity 300ms ease 250ms, transform 800ms var(--fjeder) 250ms; }
  .js .lag.aktiv .scene-maskot { opacity: 1; transform: none; animation: vug 4.2s ease-in-out 1.2s infinite; }
  .js .scrolly-trin { order: 1; }
  .js .scrolly .funktion { display: flex; min-height: 68vh; padding: 0; }
  .js .scrolly .funktion-visuel { display: none; }
  .js .scrolly .funktion-tekst { opacity: .3; transform: translateY(8px); transition: opacity 400ms ease, transform 500ms var(--ease-out); }
  .js .scrolly .funktion.aktiv .funktion-tekst { opacity: 1; transform: none; }
}

/* Allergier: rigtige knapper, prøv selv */
.allergen-kort { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(470px, 100%); }
.allergen { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; cursor: pointer; font: 600 .86rem "Nunito", sans-serif; color: var(--tekst);
  background: var(--flade); border: 1.5px solid var(--linje); border-radius: 18px; box-shadow: var(--skygge); position: relative; transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
.allergen img { width: 60px; }
.allergen:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .allergen:hover { transform: translateY(-3px); } }
.allergen[aria-pressed="true"] { border-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 9%, var(--flade)); }
.allergen[aria-pressed="true"]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--primaer) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF7EC' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; animation: pop 380ms var(--fjeder); }
@keyframes pop { from { transform: scale(0); } }
.allergen.pop { animation: tryk 380ms var(--fjeder); }
@keyframes tryk { 40% { transform: scale(.9); } }
.prov { position: absolute; top: -40px; left: 0; right: 0; text-align: center; font-weight: 800; color: var(--primaer); font-size: .95rem; margin: 0; }
.allergi .funktion-visuel { flex-direction: column; align-items: center; }
.allergi { background: var(--baand); box-shadow: 0 0 0 100vmax var(--baand); clip-path: inset(0 -100vmax); margin-top: 80px; padding-top: 96px; padding-bottom: 96px; }
.allergi .funktion-visuel::before { display: none; }
.valgte { min-height: 3.2em; font-weight: 700; color: var(--tekst); background: var(--flade); border: 1.5px solid var(--linje); border-radius: 14px; padding: 10px 14px; font-size: .98rem; }
.valgte:empty { display: none; }
.allergen-kort li:nth-child(n) { transition: opacity 500ms var(--ease-out), transform 600ms var(--fjeder); }
.vent .allergen-kort li { opacity: 0; transform: translateY(14px) scale(.9); }
.inde .allergen-kort li { opacity: 1; transform: none; }
.inde .allergen-kort li:nth-child(2) { transition-delay: 40ms; } .inde .allergen-kort li:nth-child(3) { transition-delay: 80ms; }
.inde .allergen-kort li:nth-child(4) { transition-delay: 120ms; } .inde .allergen-kort li:nth-child(5) { transition-delay: 160ms; }
.inde .allergen-kort li:nth-child(6) { transition-delay: 200ms; } .inde .allergen-kort li:nth-child(7) { transition-delay: 240ms; }
.inde .allergen-kort li:nth-child(8) { transition-delay: 280ms; } .inde .allergen-kort li:nth-child(9) { transition-delay: 320ms; }
.inde .allergen-kort li:nth-child(10) { transition-delay: 360ms; } .inde .allergen-kort li:nth-child(11) { transition-delay: 400ms; }
.inde .allergen-kort li:nth-child(12) { transition-delay: 440ms; }

/* Pris */
.pris-kort { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; max-width: 860px; margin: 40px auto 18px; text-align: left; align-items: stretch; }
.kort { border-radius: var(--r); padding: 30px 28px; position: relative; }
.kort ul { list-style: none; padding: 0; margin: 18px 0 0; }
.kort li { padding: 8px 0 8px 30px; position: relative; border-top: 1px solid var(--linje); }
.kort li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: var(--positiv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.gratis { background: color-mix(in srgb, var(--baand) 55%, var(--flade)); border: 2px solid color-mix(in srgb, var(--primaer) 22%, transparent); box-shadow: var(--skygge); }
.belob { font: 700 2.2rem/1.1 var(--display); margin: 0 0 4px; letter-spacing: -0.01em; }
.pro { background: #7A1F2B; color: #FFF7EC; box-shadow: 0 30px 60px -24px rgba(122, 31, 43, .7); }
.pro::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 60% at 85% 0%, rgba(244, 201, 93, .28), transparent 70%); pointer-events: none; }
.planer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.plan { margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 247, 236, .12); border: 1px solid rgba(255, 247, 236, .22); display: flex; flex-direction: column; }
.plan-navn { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.plan .belob { font-size: 2rem; margin: 2px 0 0; }
.plan-per { font-weight: 700; }
.plan-note { font-size: .85rem; opacity: .85; margin-top: 4px; }
.plan { position: relative; }
.plan-bedst { background: rgba(244, 201, 93, .16); border: 2px solid #F4C95D; }
.spar { position: absolute; top: -11px; right: 10px; padding: 3px 9px; border-radius: 999px; background: #F4C95D; color: #2B2B2B; font-weight: 800; font-size: .78rem; }
.pro .proeve { display: inline-block; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; background: #F4C95D; color: #2B2B2B; font-weight: 800; font-size: .9rem; }
.pro li { border-top-color: rgba(255, 247, 236, .16); }
.pro li::before { background-color: #F4C95D; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1F2B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.pro-maskot { position: absolute; width: 104px; right: 18px; top: -38px; animation: vug 4.4s ease-in-out infinite; }

/* FAQ */
.faq-liste { max-width: 760px; margin: 32px auto 0; text-align: left; }
details { border-bottom: 1px solid var(--linje); }
summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-weight: 800; font-size: 1.08rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2.5px solid var(--primaer); border-bottom: 2.5px solid var(--primaer); transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
details p { color: var(--daempet); margin: -4px 0 20px; }
@media (min-width: 961px) { .faq-liste { max-width: 1080px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; } }

/* Slut (Finch): to maskotter flankerer panelet */
.slut { position: relative; max-width: calc(var(--maks) - 32px); margin: 110px auto 0; padding: 64px 24px 56px; text-align: center; background: #7A1F2B; color: #FFF7EC; border-radius: 32px; }
.slut::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(50% 70% at 50% 0%, rgba(244, 201, 93, .3), transparent 70%); pointer-events: none; }
.slut h2 { color: #FFF7EC; max-width: 14em; margin-left: auto; margin-right: auto; }
.slut p { opacity: .85; }
.slut-maskot { position: absolute; width: 170px; bottom: -8px; }
.slut-maskot.venstre { left: -30px; animation: vug 4.4s ease-in-out infinite; }
.slut-maskot.hoejre { right: -30px; animation: vug 3.6s ease-in-out -1s infinite; }
.status.paa-bordeaux { background: rgba(255, 247, 236, .1); border-color: rgba(255, 247, 236, .25); color: #FFF7EC; }

/* Bund */
.bund { position: relative; max-width: var(--maks); margin: 0 auto; padding: 56px 16px 32px; }
.bund-kig { position: absolute; right: 6%; top: -58px; width: 110px; }
.bund-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--linje); padding-top: 32px; }
.bund .wordmark { width: 132px; margin-bottom: 12px; }
.bund nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; }
.bund nav a { font-weight: 600; text-decoration: none; }
.copy { margin-top: 32px; }

/* Dokument-sider */
.doc { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 16px; }
.doc h2 { font-size: 1.5rem; margin-top: 2em; }
.tilbage { font-weight: 800; text-decoration: none; }
.tilbage::before { content: "← "; }
.kladde { background: color-mix(in srgb, var(--accent) 28%, var(--flade)); border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 16px; padding: 14px 18px; font-weight: 600; }
.oversat { font-style: italic; color: var(--daempet); }
mark.udfyld { background: color-mix(in srgb, var(--accent) 45%, transparent); color: inherit; padding: 1px 8px; border-radius: 6px; font-weight: 800; font-size: .9em; white-space: nowrap; }
.tabel { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--linje); border-radius: 16px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--linje); }
th { background: var(--baand); font-weight: 800; }
tr:last-child td { border-bottom: 0; }
.support-maskot { width: 170px; margin: 32px auto 0; animation: vug 4.4s ease-in-out infinite; }
.fejl { text-align: center; padding-top: 80px; }
.fejl img { width: 180px; margin: 0 auto 16px; }

/* Indgange (kun med JS, kun uden reduceret bevægelse) */
.vis.vent { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.vis.vent.inde { opacity: 1; transform: none; }
.trin.vent:nth-child(2) { transition-delay: 90ms; }
.trin.vent:nth-child(3) { transition-delay: 180ms; }
.vent .maskot.hjoerne { opacity: 0; transform: translateY(24px) rotate(-6deg) scale(.94); transition: opacity 500ms ease 250ms, transform 800ms var(--fjeder) 250ms; }
.inde .maskot.hjoerne { opacity: 1; transform: none; animation: vug 4s ease-in-out 1.2s infinite; }
@keyframes vug { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Tablet/mobil */
@media (max-width: 960px) {
  .trin-liste { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; gap: 48px; }
  .trin:nth-child(2) .telefon { transform: none; }
  .funktion { grid-template-columns: 1fr; gap: 36px; padding: 56px 16px; }
  .funktion-tekst { max-width: none; }
  .allergi .funktion-visuel { margin-top: 40px; }
  .pris-kort { grid-template-columns: 1fr; max-width: 520px; }
  .r2 { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .hero { padding-top: 20px; }
  .hero-maerke { width: 170px; margin-bottom: 10px; }
  .hero h1 { font-size: 1.9rem; }
  .tillid { gap: 4px 14px; font-size: .8rem; }
  .hero-jord { height: 300px; margin-top: 4px; }
  .hero-telefon { --w: 220px; margin-left: -110px; }
  .hero-chip { display: none; }
  .knap.primaer { width: min(100%, 320px); }
  .lead { font-size: 1.08rem; }
  .jord-maskot { width: 112px; bottom: 24px; }
  .jord-maskot.venstre { right: auto; left: 0; }
  .jord-maskot.hoejre { left: auto; right: 0; width: 108px; bottom: 24px; }
  .rekvisit { width: 48px; }
  .rekvisit { display: none; }
  .strip ul { justify-content: center; gap: 6px 16px; font-size: .82rem; }
  .telefon { --w: 212px; }
  .maskot.hjoerne { width: 104px; right: 0; }
  .funktion-visuel .telefon { --w: 224px; }
  .allergen-kort { grid-template-columns: repeat(3, 1fr); }
  .slut { margin-left: 16px; margin-right: 16px; padding: 48px 20px 150px; }
  .slut-maskot { width: 120px; bottom: -6px; }
  .slut-maskot.venstre { left: 8px; } .slut-maskot.hoejre { right: 8px; }
  .pro-maskot { width: 88px; right: 10px; top: -30px; }
  .kort { padding: 26px 20px; }
}

/* Kontaktformular (support) */
.kontakt { display: grid; gap: 14px; max-width: 560px; margin: 8px 0 24px; }
.kontakt label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.kontakt input, .kontakt textarea { font: 400 1rem/1.5 "Nunito", system-ui, sans-serif; color: var(--tekst); background: var(--flade);
  border: 1.5px solid var(--linje); border-radius: 14px; padding: 12px 14px; min-height: 48px; }
.kontakt textarea { resize: vertical; }
.kontakt input:focus-visible, .kontakt textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--primaer); }
.kontakt .knap { justify-self: start; border: 0; cursor: pointer; }
.kontakt .knap:disabled { opacity: .7; cursor: default; }
.kontakt-status:empty { display: none; }
/* Venteliste i den bordeaux slut-boks */
.venteliste { position: relative; z-index: 1; display: grid; gap: 12px; max-width: 520px; margin: 22px auto 0; text-align: left; }
.vl-raekke { display: flex; gap: 8px; min-width: 0; }
.venteliste input[type=email] { flex: 1; min-width: 0; min-height: 54px; padding: 0 18px; border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem "Nunito", system-ui, sans-serif; color: #2b1b14; background: #FFF7EC; }
.venteliste input[type=email]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.venteliste .knap { border: 0; cursor: pointer; background: var(--accent); color: #3a1610; white-space: nowrap; }
.venteliste .knap:disabled { opacity: .7; cursor: default; }
.venteliste .samtykke { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; color: #FFF7EC; opacity: .92; cursor: pointer; }
.venteliste .samtykke input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.venteliste .tilbud { margin: 0 auto; justify-self: center; display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(244, 201, 93, .18); font-weight: 800; color: #F4C95D; }
.venteliste .kontakt-status { color: #2b1b14; }
.venteliste .lille { margin: 0; text-align: center; }
.venteliste .lille a { color: #FFF7EC; }
@media (max-width: 520px) { .vl-raekke { flex-direction: column; } .venteliste .knap { width: 100%; } }
.venteliste .foelg { margin: 0; text-align: center; font-weight: 800; }
.venteliste .foelg a { color: #FFF7EC; }
.venteliste.faerdig .vl-raekke, .venteliste.faerdig .samtykke { display: none; }
/* Samme formular på lys baggrund (hero og /da/uge/): bordeaux knap, mørk tekst */
.venteliste.lys { width: 100%; max-width: 480px; margin: 4px auto 16px; gap: 10px; }
.venteliste.lys input[type=email] { border-color: color-mix(in srgb, var(--primaer) 30%, transparent); box-shadow: var(--skygge); }
.venteliste.lys .knap { background: var(--primaer); color: var(--paa-primaer); }
.venteliste.lys .samtykke { color: var(--tekst); opacity: 1; font-size: .85rem; line-height: 1.4; }
.venteliste.lys .lille a, .venteliste.lys .foelg a { color: var(--primaer); }
.venteliste.lys .kontakt-status { color: var(--tekst); }
.venteliste.lys .tilbud { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--primaer); }
@media (prefers-color-scheme: dark) { .venteliste.lys .tilbud { color: var(--tekst); } }
.doc .venteliste.lys { margin: 16px 0 4px; }
.uge-tilmeld { margin: 32px 0; padding: 4px 20px 20px; border-radius: 20px; background: var(--baand); }
/* Forsiden: heroens formular er synlig, så navbarens "Skriv dig op" venter, til man har rullet forbi. */
.js .side-home:not(.logo-oppe) .top nav a.nav-cta { visibility: hidden; }
@media (max-width: 520px) {
  .venteliste.lys .vl-raekke { flex-direction: row; }
  .venteliste.lys .knap { width: auto; padding: 0 18px; }
}
.kontakt-status { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--baand); font-weight: 700; }
.kontakt-status.sendt, .kontakt-status.tilmeldt { background: color-mix(in srgb, #2f7d4f 16%, var(--flade)); }
.faelde { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Scan køleskabet: foto af køleskabet med telefonen foran og et flydende kort */
.scan { display: grid; gap: 40px; align-items: center; max-width: var(--maks); margin: 0 auto; padding: 96px 16px; }
.scan .status { margin: 0 0 12px; }
.scan-tekst > p:not(.kicker):not(.status):not(.fodnote) { font-size: 1.12rem; color: color-mix(in srgb, var(--tekst) 78%, var(--daempet)); }
.scan-trin { list-style: none; counter-reset: s; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.scan-trin li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-weight: 600; }
.scan-trin li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--primaer); color: var(--bg); font: 700 1rem/1 var(--display); }
.scan-visuel { position: relative; display: flex; justify-content: center; padding: 20px 0 40px; }
.koeleskab { width: min(420px, 78%); aspect-ratio: 720 / 964; object-fit: cover; border-radius: 28px; box-shadow: var(--skygge);
  transform: rotate(-3deg); translate: -18% 0; }
.scan-telefon { position: absolute; --w: 230px; right: max(0px, calc(50% - 250px)); bottom: 0; }
.scan-chip { position: absolute; left: max(0px, calc(50% - 260px)); bottom: 10%; }
@media (min-width: 961px) { .scan { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .scan { padding: 64px 16px; }
  .koeleskab { width: 78%; translate: -10% 0; }
  .scan-telefon { --w: 180px; right: 0; }
  .scan-chip { left: 0; bottom: 30%; }
}

/* Efter scan: køleskabs-resultatet ruller langsomt inde i telefonen; ret-scan viser kcal + makroer */
.efter { max-width: var(--maks); margin: 0 auto; padding: 24px 16px 40px; text-align: center; }
.efter-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; text-align: left; }
.efter-kort { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; isolation: isolate; }
.efter-kort::before { content: ""; position: absolute; top: 40px; left: 50%; width: 340px; max-width: 100%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, var(--baand) 0 55%, transparent 72%); z-index: -1; }
.efter-kort h3 { margin-top: 26px; font-size: 1.3rem; }
.efter-kort p { color: var(--daempet); max-width: 24em; }
.efter .telefon { --w: 270px; }
.telefon.ruller { min-height: 0; overflow: hidden; } /* ellers strækker det høje billede rammen (aspect-ratio giver efter for indhold) */
.rul { width: 100%; height: 100%; overflow: hidden; border-radius: 14cqw; }
.telefon .rul img { height: auto; border-radius: 0; animation: rul 16s ease-in-out infinite alternate; }
/* 100cqw = skærmens bredde, så skærmens højde = 100cqw × 852/393 */
@keyframes rul { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(calc(-100% + 216.8cqw)); } }
@media (prefers-reduced-motion: reduce) { .telefon .rul img { animation: none; } }
@media (max-width: 760px) { .efter-liste { grid-template-columns: 1fr; gap: 56px; } .efter .telefon { --w: 236px; } }
.uge .kr { text-align: right; white-space: nowrap; }