/* Menuplanlægger til Fødevaredagen 2026. Retning "Jord": landbrugets egen palette,
   dyb muldgrund i lag, korngul som det ene sted farven betyder noget - der hvor
   menneskets hånd går ind. Lyset kommer altid oppefra: hver hævet flade har en
   lyskant i toppen og en blød, næsten sort skygge under sig. */

:root {
  /* Grunde, fire lag dybde */
  --muld: #181d14;
  --jord: #232a1c;
  --mos: #2f3a28;
  --lav: #3c4b31;
  /* Blæk, tre vægte */
  --kridt: #f1ece0;
  --halm: #c9c2ad;
  /* Lysnet fra #9a9d8a: labels sættes i 11 px, og 4,31 på Mos er under AA for
     småtekst. #b2b5a2 giver 5,71 på Mos og 4,47 på Lav uden at skifte karakter. */
  --aske: #b2b5a2;
  /* Linjer */
  --linje: rgba(241, 236, 224, .10);
  --linje2: rgba(241, 236, 224, .22);
  /* Korn: links, uafgjort, ændret kort, primærknap */
  --korn: #e0b866;
  --korn-hover: #ecc97f;
  --korn-aktiv: #c99f4e;
  --metal: linear-gradient(135deg, #f0d896 0%, #d5ad5a 45%, #b8913f 60%, #e8c97d 100%);
  --paa-korn: #1f2418;
  /* Allergentilstande */
  --kollision: #cf6a48;
  --kollision-tekst: #eb9a7e;
  --kollision-flade: rgba(207, 106, 72, .14);
  --ok: #7fa36b;
  --uafgjort-flade: rgba(224, 184, 102, .10);
  /* Dybde. På mørk bund bærer skyggen ikke alene: lyskanten i toppen gør det. */
  --skygge1: inset 0 1px 0 rgba(241,236,224,.05), 0 1px 2px rgba(10,13,8,.30);
  --skygge2: inset 0 1px 0 rgba(241,236,224,.07), 0 2px 4px rgba(10,13,8,.35), 0 12px 32px -12px rgba(10,13,8,.55);
  --skygge3: inset 0 1px 0 rgba(241,236,224,.09), 0 4px 10px rgba(10,13,8,.40), 0 32px 64px -24px rgba(10,13,8,.70);
  --fokus: 0 0 0 3px rgba(224, 184, 102, .28);
  --haeldning: linear-gradient(180deg, rgba(241,236,224,.03), transparent 40%);
  /* Rum */
  --r1: 4px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 24px;
  --r6: 32px; --r7: 48px; --r8: 64px; --r9: 96px; --r10: 128px;
  --baand-bredde: 880px;
  --dagmargen: 96px;
  --serif: "Bitter", Georgia, "Times New Roman", serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font: var(--sans);
  --mono: ui-monospace, Menlo, Consolas, 'SF Mono', monospace;
  /* Bevægelse */
  --ind: cubic-bezier(.2,.7,.2,1);
  --skift: cubic-bezier(.4,0,.2,1);
  /* Gamle navne, så resten af arket ikke knækker under ombygningen */
  --bg: var(--jord); --bg2: var(--jord); --bg3: var(--muld);
  --panel: var(--mos); --panel2: var(--lav);
  --ink: var(--kridt); --muted: var(--halm); --faint: var(--aske);
  --line: var(--linje); --line2: var(--linje);
  --accent: var(--korn); --accent2: var(--korn);
  --varsel: var(--korn); --fejl: var(--kollision-tekst); --god: var(--ok);
  --sidebar-w: 268px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--halm);
  background: var(--jord);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Vignette og grain. To faste lag under indholdet: de giver rummet en kant og
   en overflade, uden at koste et eneste element i opbygningen. */
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
body::before {
  background: radial-gradient(120% 100% at 50% 30%, transparent 55%, rgba(12,15,10,.5) 100%);
}
body::after {
  opacity: .05; mix-blend-mode: soft-light; background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { body::after { display: none; } }
body > * { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--serif); color: var(--kridt); font-weight: 400; }
h1 { font-size: clamp(2.6rem, 2rem + 2.4vw, 4.25rem); font-weight: 300; line-height: 1.04; letter-spacing: -.02em; }
h1 em { font-style: italic; font-weight: 300; }
h2 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.012em; margin-bottom: var(--r2); }
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.008em; }
a { color: var(--korn); text-decoration: none; }
a:hover { color: var(--korn-hover); }
p { margin-bottom: .7rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r2); }

/* Versal-label. Bruges som eneste strukturmarkør over hver sektion. */
.maerke, .sb-titel, .mk-h3, .indkoeb-gruppe h4, .progress-label {
  font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}

/* ── Skelet ──────────────────────────────────────────────────────────────
   Én spalte. Sidebaren er væk: den var søstersidens signatur, og den stjal
   den luft, retningen lever af. Trinnene står i sidens egne overskrifter,
   og navigationen ligger i én stille topbjælke. */
.side { margin-left: 0; padding-bottom: var(--r8); }
.baand { max-width: var(--baand-bredde); margin: 0 auto; padding: 0 var(--r5); }
@media (min-width: 768px) { .baand { padding: 0 var(--r6); } }

/* Foden: makerens mærke og vejen tilbage til trinnene. */
.fod {
  max-width: var(--baand-bredde); margin: 0 auto; padding: var(--r8) var(--r5) var(--r9);
  border-top: 1px solid var(--linje);
  display: grid; gap: var(--r5); color: var(--aske); font-size: .8125rem;
}
@media (min-width: 768px) { .fod { padding-left: var(--r6); padding-right: var(--r6); } }
.fod .sb-titel { color: var(--kridt); }
.fod .sb-sub { font-size: .8125rem; color: var(--aske); }
.fod .sb-adskil { display: none; }
.fod .sb-fyld { display: none; }
.fod .sb-fod { display: block; font-size: .8125rem; color: var(--aske); }
.fod .sb-trin { gap: var(--r2); }
.fod .sb-trin a { padding: .2rem 0; }
.fod .sb-trin a:hover { background: transparent; color: var(--korn); }

/* Sektionshoved: label, overskrift, én lede. Så 32 px ned til arbejdet. */
section { padding: var(--r8) 0; }
@media (min-width: 768px) { section { padding: var(--r10) 0; } }
.maerke { color: var(--korn); display: block; margin-bottom: var(--r3); }
.lead { color: var(--halm); font-size: 1.0625rem; max-width: 62ch; margin-top: var(--r3); }
section > .baand > h2 + .lead, section > .baand > .lead { margin-bottom: var(--r6); }

/* ── Hero ────────────────────────────────────────────────────────────────
   Fotoet graderes ind til siden i stedet for omvendt: et varmt gulv løfter
   skyggen fra kold teal til muld, og en gradient opløser bunden i grunden.
   Målt på fotoet: venstre tredjedel er #06171b uden ét lyst pixel, så
   teksten kan stå direkte uden mørkt overlæg. */
.hero { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: center; padding: var(--r9) 0 var(--r8); }
.hero-bg {
  position: absolute; inset: 0;
  background: url('/slides/fodevaredagen/15092026/session2/s2-assets/divider-raavarer.jpg') 30% 50%/cover no-repeat;
  filter: sepia(.22) saturate(1.08);
  animation: foto-ind 1400ms var(--ind) both;
}
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background: #2e2818; mix-blend-mode: lighten;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--jord) 100%);
}
@keyframes foto-ind { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.hero .baand { position: relative; z-index: 2; }
.hero-tekst { max-width: 55%; }
@media (max-width: 899px) { .hero-tekst { max-width: 100%; } }
/* Hero'ens eneste metal. */
.hero-streg {
  width: 64px; height: 2px; background: var(--metal);
  border-radius: 2px; margin-bottom: var(--r5);
}
.hero h1 { animation: afsloer 900ms var(--ind) 200ms both; }
@keyframes afsloer {
  from { clip-path: inset(0 0 100% 0); filter: blur(6px); opacity: 0; }
  to { clip-path: inset(0); filter: blur(0); opacity: 1; }
}
.hero .lead { animation: loeft 640ms var(--ind) 440ms both; }
.hero .hero-felt { animation: loeft 640ms var(--ind) 560ms both; }
@keyframes loeft { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Topbjælke, brandmærke ───────────────────────────────────────────────
   Den eneste flade med blur. Paneler og tabeller får det ikke: det koster
   læsbarhed på 35 felter og GPU på en laptop. */
.top {
  position: sticky; top: 0; z-index: 40; padding: var(--r3) 0;
  border-bottom: 1px solid var(--linje);
  background: rgba(24, 29, 20, .82); backdrop-filter: blur(8px);
}
.top .baand { display: flex; align-items: center; justify-content: space-between; gap: var(--r4); }
.brand { display: flex; flex-direction: column; }
.brand-navn { font-family: var(--serif); font-weight: 400; color: var(--kridt); font-size: 1.05rem; }
.brand-navn .prik { color: var(--korn); margin: 0 .35em; }
.brand-sub { font-size: .75rem; color: var(--aske); }
.maerke.m-logo, .top .maerke { display: inline-flex; align-items: center; gap: .28em; font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.maerke .m-ai { color: var(--kridt); }
.maerke .m-boks { background: var(--kridt); color: var(--jord); padding: .08em .45em .15em; border-radius: .38em; font-style: italic; }

/* ── Sidebarens trin-liste (bruges nu i topbjælken) ─────────────────── */
.sb-trin { list-style: none; display: flex; gap: var(--r1); flex-wrap: wrap; }
.sb-trin a {
  display: flex; align-items: baseline; gap: .45rem; padding: .3rem .6rem; border-radius: var(--r2);
  color: var(--aske); font-size: .8125rem; cursor: pointer;
  transition: color .16s var(--skift), background .16s var(--skift);
}
.sb-trin a:hover { background: rgba(241,236,224,.05); color: var(--kridt); }
.sb-trin a.aktiv { color: var(--kridt); }
.sb-nr { font-weight: 600; font-size: .6875rem; letter-spacing: .1em; color: var(--aske); font-variant-numeric: tabular-nums; }
.sb-trin a.aktiv .sb-nr { color: var(--korn); }
.sb-flueben { margin-left: auto; font-size: .62rem; color: var(--aske); opacity: 0; }
.sb-trin a.klar .sb-flueben { color: var(--korn); opacity: 1; }
.sb-adskil { width: 1px; align-self: stretch; background: var(--linje); margin: 0 var(--r2); }
.sb-fyld { flex: 1 1 auto; }
.sb-fod { display: none; }
@media (max-width: 639px) { .sb-trin a .nav-tekst, .sb-adskil { display: none; } }

/* ── Knapper og felter ───────────────────────────────────────────────────
   Guld betyder ét sted i hele systemet: her går menneskets hånd ind. */
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px;
  background: var(--metal); background-size: 160% 160%; background-position: 0% 50%;
  color: var(--paa-korn); padding: 0 var(--r5); border-radius: var(--r2);
  font-family: var(--sans); font-size: .9375rem; font-weight: 600; border: 0; cursor: pointer;
  box-shadow: var(--skygge1); transition: background-position 400ms var(--skift), opacity .16s;
}
.knap:hover:not(:disabled) { background-position: 12% 50%; }
.knap:disabled { opacity: .45; cursor: default; }
.knap-linje {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px;
  background: transparent; color: var(--kridt); padding: 0 var(--r5);
  border: 1px solid var(--linje2); border-radius: var(--r2);
  font-family: var(--sans); font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: border-color .16s var(--skift), color .16s var(--skift);
}
.knap-linje:hover:not(:disabled) { border-color: var(--korn); color: var(--korn); }
.knap-linje:disabled { opacity: .4; cursor: default; }
.knap-lille { min-height: 34px; padding: 0 var(--r3); font-size: .78rem; }

textarea, input[type="text"], input[type="number"] {
  width: 100%; background: rgba(24, 29, 20, .88); color: var(--kridt); font-family: var(--sans);
  font-size: 1rem; line-height: 1.55; border: 1px solid var(--linje2); border-radius: var(--r3);
  padding: var(--r4); resize: vertical; box-shadow: var(--skygge1);
}
textarea:focus, input[type="text"]:focus, input[type="number"]:focus {
  outline: none; border-color: var(--korn); box-shadow: var(--fokus);
}
textarea::placeholder { color: var(--aske); }

.chips { display: flex; flex-wrap: wrap; gap: var(--r2); }
.chip {
  background: var(--lav); border: 0; color: var(--halm);
  padding: .4rem .85rem; border-radius: 99px; font-size: .8125rem; cursor: pointer;
  font-family: var(--sans); box-shadow: var(--skygge1);
  transition: background .16s var(--skift), color .16s var(--skift);
}
.chip:hover { color: var(--kridt); background: #46573a; }
.chip[aria-pressed="true"] { background: var(--uafgjort-flade); color: var(--korn); box-shadow: inset 0 0 0 1px rgba(224,184,102,.5); }

.maerkat { color: var(--korn); display: block; margin-bottom: var(--r3); }
.skelet { display: grid; gap: var(--r3); margin-top: var(--r6); }
.skelet .plads {
  height: 108px; border-radius: var(--r3); background: var(--mos);
  background-image: var(--haeldning); box-shadow: var(--skygge2); opacity: .5;
}

/* ── Flader ──────────────────────────────────────────────────────────────
   Hver hævet flade bærer tre ting: en lysere grund end laget under, en
   hældning der læses som lys ovenfra, og en lyskant i toppen. */
.kort {
  background: var(--mos); background-image: var(--haeldning);
  border: 0; border-radius: var(--r3); padding: var(--r6);
  box-shadow: var(--skygge2);
}
@media (max-width: 767px) { .kort { padding: var(--r5); } }

/* ── Ugen ────────────────────────────────────────────────────────────────
   Fem slabs under hinanden. Dagen står UDEN for kortet i venstremargenen:
   fem flugtende venstrekanter er det, der gør listen rolig i stedet for tæt. */
.dage { display: grid; gap: var(--r3); margin-top: var(--r6); }

.dagkort {
  position: relative; display: grid; gap: var(--r4);
  background: var(--mos); background-image: var(--haeldning);
  border-radius: var(--r3); padding: var(--r6); box-shadow: var(--skygge2);
  transition: box-shadow .32s var(--skift);
}
@media (min-width: 1040px) {
  .dage { padding-left: var(--dagmargen); }
  .dagkort .dagnavn {
    position: absolute; left: calc(var(--dagmargen) * -1); top: var(--r6);
    width: calc(var(--dagmargen) - var(--r5)); text-align: right;
  }
}
.dagkort .dagnavn {
  font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--aske);
}
.dagkort-hoved { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r5); }
.dagkort h3 { margin: 0; }
/* Under 520 px kan retnavn og klimatal ikke stå ved siden af hinanden uden at
   skubbe kortet ud af skærmen. Så lægger klimatallet sig under i stedet. */
@media (max-width: 519px) {
  .dagkort-hoved { flex-direction: column; gap: var(--r3); }
  .klima { align-items: flex-start; }
  .klima-enhed { white-space: normal; }
}
.dagkort .beskrivelse {
  color: var(--halm); font-size: .9375rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Netop byttet: en korngul kant der fader væk. */
.dagkort.byttet { box-shadow: var(--skygge3), inset 0 0 0 1px var(--korn); animation: kant-fader 1600ms var(--skift) forwards; }
@keyframes kant-fader {
  from { box-shadow: var(--skygge3), inset 0 0 0 1px var(--korn); }
  to { box-shadow: var(--skygge2), inset 0 0 0 1px transparent; }
}
.dagkort.ny { animation: kort-ind 640ms var(--ind) both; }
@keyframes kort-ind {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.dagkort.skifter .dagkort-krop { opacity: 0; filter: blur(3px); transition: opacity 220ms var(--skift), filter 220ms var(--skift); }

/* Klimamærket er farveløst. Farve er forbeholdt allergener og menneskets hånd. */
.klima { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex: none; }
.klima-tal { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--kridt); font-variant-numeric: tabular-nums; }
.klima-enhed { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aske); }
.klima-segmenter { display: flex; gap: 3px; margin-top: .15rem; }
.klima-segmenter i { width: 14px; height: 3px; border-radius: 2px; background: var(--linje2); display: block; }
.klima-segmenter i.fyldt { background: var(--kridt); }

/* Råvarer som chips. Sæsonen er en 6 px prik, ikke en farvet flade. */
.raavarer { display: flex; flex-wrap: wrap; gap: var(--r2); max-height: 4.6rem; overflow: hidden; }
.raavare {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem;
  padding: .3rem .7rem; border-radius: 99px; border: 0;
  background: var(--lav); color: var(--kridt); cursor: pointer;
  box-shadow: var(--skygge1); transition: background .16s var(--skift);
  font-family: var(--sans);
}
.raavare:hover { background: #46573a; }
.raavare .gram { color: var(--halm); font-variant-numeric: tabular-nums; font-size: .75rem; }
.prik { display: inline-block; }
.raavare .prik { width: 6px; height: 6px; border-radius: 50%; background: var(--aske); flex: none; }
.raavare .prik.i_dansk_saeson { background: var(--korn); }
.raavare .prik.paa_vej_ind, .raavare .prik.paa_vej_ud { background: var(--ok); }
.raavare .prik.ikke_dansk_saeson { background: transparent; box-shadow: inset 0 0 0 1px var(--aske); }
.raavare.hoved { background: #46573a; }

/* Kort skjuler prosa, aldrig tal. */
.grundlag { border-top: 1px solid var(--linje); padding-top: var(--r4); }
.grundlag summary {
  list-style: none; cursor: pointer; color: var(--aske);
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.grundlag summary::-webkit-details-marker { display: none; }
.grundlag summary:hover { color: var(--kridt); }
.grundlag[open] summary { margin-bottom: var(--r3); }
.grundlag .hvorfor { font-size: .9375rem; color: var(--halm); border-left: 1px solid var(--korn); padding-left: var(--r3); margin-bottom: .6rem; }
.grundlag .note { font-size: .875rem; color: var(--aske); }

.dagkort footer { display: flex; align-items: center; justify-content: space-between; gap: var(--r4); }
.maerker { display: flex; gap: var(--r3); align-items: center; }
.maerkeplade { font-size: .8125rem; color: var(--halm); display: inline-flex; gap: .4rem; align-items: baseline; }
.maerkeplade b { color: var(--kridt); font-weight: 500; }

/* ── Kilder og gennemsigtighed ───────────────────────────────────────────
   De tre lag bruger tabellens formsprog: fyldt prik, ring, stiplet ring.
   Formen bærer forskellen, farven bekræfter den. */
.kildeknap {
  font-family: var(--sans); font-size: .75rem; font-weight: 600; color: var(--korn);
  background: var(--uafgjort-flade); border: 0; border-radius: var(--r1);
  padding: .1rem .4rem; cursor: pointer; transition: background .16s var(--skift);
}
.kildeknap:hover { background: rgba(224, 184, 102, .2); }

.tre-lag { display: grid; gap: var(--r3); margin-top: var(--r5); }
.lag {
  background: var(--mos); background-image: var(--haeldning); border-radius: var(--r3);
  padding: var(--r5); box-shadow: var(--skygge2);
  display: grid; gap: var(--r3); align-items: start;
}
@media (min-width: 900px) { .lag { grid-template-columns: var(--dagmargen) 1fr; gap: var(--r5); } }
.lag h4 {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--aske); display: flex; align-items: center; gap: .45rem; line-height: 1.5;
}
.lag h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lag.ved h4::before { background: var(--korn); }
.lag.regner h4::before { box-shadow: inset 0 0 0 1px var(--korn); }
.lag.ikke h4::before { border: 1px dashed var(--korn); }
.lag ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.lag li { font-size: .9375rem; color: var(--halm); }
.lag .hvem { color: var(--aske); font-size: .8125rem; }

/* ── Allergentabel ───────────────────────────────────────────────────────
   Tre tilstande, tre former: fyldt bjælke, prik, stiplet ramme. Tabellen kan
   skannes i gråtoner. Den midterste er produktets vigtigste og er lysest. */
.tabelramme {
  overflow-x: auto; margin-top: var(--r5); border-radius: var(--r3);
  background: var(--mos); background-image: var(--haeldning); box-shadow: var(--skygge2);
}
table.allergen { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 640px; }
table.allergen th, table.allergen td { padding: var(--r3) var(--r4); text-align: left; vertical-align: top; }
table.allergen tbody tr { border-top: 1px solid var(--linje); }
table.allergen thead th {
  color: var(--aske); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; border-bottom: 1px solid var(--linje2); position: sticky; top: 0;
  background: var(--mos);
}
table.allergen td.ret { color: var(--kridt); min-width: 200px; font-family: var(--serif); font-size: 1rem; font-weight: 400; }
table.allergen td.ret small { display: block; font-family: var(--sans); color: var(--aske); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .2rem; }
tr.foraeldet { opacity: .45; }
tr.foraeldet td.ret::after {
  content: " forældet"; color: var(--korn); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.felt {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 500;
  cursor: help; min-height: 44px; padding: .4rem .6rem; border-radius: var(--r2); color: var(--halm);
}
.felt.kolliderer {
  color: var(--kollision-tekst); background: var(--kollision-flade);
  border-left: 3px solid var(--kollision); border-radius: 0 var(--r2) var(--r2) 0;
}
.felt.ok { color: var(--halm); }
.felt.ok .ikon { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.felt.kan_ikke_afgoeres {
  color: var(--korn); background: var(--uafgjort-flade);
  border: 1px dashed rgba(224, 184, 102, .7);
}
.felt.kan_ikke_afgoeres .ikon { font-family: var(--serif); font-weight: 400; }
.felt .ikon { font-weight: 500; }
.skjult-maerke {
  font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--aske); border: 1px solid var(--linje2); border-radius: var(--r1); padding: 0 .3rem;
}
table.allergen td { animation: celle-ind 260ms var(--ind) both; }

.erstatninger { margin-top: var(--r5); display: grid; gap: var(--r3); }
.erstatning { font-size: .9375rem; color: var(--halm); border-left: 3px solid var(--kollision); padding-left: var(--r4); }
.erstatning b { color: var(--kridt); font-weight: 500; }
.erstatning .aendrer { color: var(--aske); font-size: .8125rem; }

/* ── Paneler (kilder, sæson, leverandører, profil) ───────────────────── */
.panel-baggrund {
  position: fixed; inset: 0; background: rgba(4, 12, 14, .72); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.panel-baggrund.aaben { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; inset: 0 0 0 auto; width: min(560px, 100%); background: var(--bg3);
  border-left: 1px solid var(--line); z-index: 95; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease; overflow: hidden;
}
.panel.aaben { transform: none; }
.panel header { padding: 1.4rem 1.5rem 1rem; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel .krop { overflow-y: auto; padding: 1.2rem 1.5rem 3rem; flex: 1; }
.luk { background: none; border: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.luk:hover { color: #fff; }

.filterrække { display: flex; gap: .4rem; flex-wrap: wrap; margin: .9rem 0 1.2rem; }
.kilde {
  border-bottom: 1px solid var(--line2); padding: .9rem 0; scroll-margin-top: 1rem;
}
.kilde:target, .kilde.fremhaev { background: rgba(217, 181, 134, .08); border-radius: 10px; padding: .9rem .7rem; }
.kilde .id { font-family: var(--mono); font-size: .76rem; color: var(--accent); font-weight: 700; }
.kilde .type { font-size: .7rem; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.kilde h4 { font-size: .96rem; color: #fff; margin: .2rem 0 .3rem; font-weight: 700; }
.kilde p { font-size: .84rem; color: var(--muted); margin-bottom: .35rem; }
.kilde .forbehold { color: var(--varsel); opacity: .85; }

.maanedsrække { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: 1.2rem; }
.maaned { text-align: center; padding: .45rem; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; font-size: .82rem; font-family: var(--font); }
.maaned:hover { border-color: var(--accent); color: var(--ink); }
.maaned.valgt { background: rgba(217, 181, 134, .18); border-color: var(--accent); color: #fff; font-weight: 700; }

.grossist { border-bottom: 1px solid var(--line2); padding: .9rem 0; }
.grossist h4 { font-size: .96rem; color: #fff; }
.grossist .links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.grossist .links a { font-size: .8rem; border: 1px solid var(--line); border-radius: 14px; padding: .22rem .65rem; }
.grossist .links a:hover { border-color: var(--accent2); }
.grossist .status { font-size: .78rem; color: var(--faint); margin-top: .35rem; }

/* ── Profil ──────────────────────────────────────────────────────────── */
.profil-felt { margin-bottom: 1.2rem; }
.profil-felt label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .4rem; letter-spacing: .04em; }
.profil-felt .hjaelp { font-size: .78rem; color: var(--faint); margin-top: .35rem; }
.dropzone {
  border: 1px dashed var(--line); border-radius: 14px; padding: 1.4rem; text-align: center;
  color: var(--muted); font-size: .88rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: rgba(217, 181, 134, .07); color: var(--ink); }
.filliste { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
.fil { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--muted); }
.fil .navn { flex: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.besked { padding: .8rem 1rem; border-radius: 12px; font-size: .88rem; margin-top: 1rem; border: 1px solid var(--line); }
.besked.god { border-color: rgba(70, 214, 160, .4); color: var(--god); }
.besked.varsel { border-color: rgba(232, 168, 124, .45); color: var(--varsel); }
.besked.fejl { border-color: rgba(226, 133, 123, .5); color: var(--fejl); }

/* ── Status og fremdrift ─────────────────────────────────────────────── */
.status { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .9rem; margin-top: 1.2rem; }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: snur .8s linear infinite; flex: none; }
@keyframes snur { to { transform: rotate(360deg); } }
.skjult { display: none !important; }

.vaerktoej { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; align-items: center; }

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #111; }
  .sidebar, .top, .vaerktoej, .panel, .panel-baggrund, .chips, textarea, .knap, .knap-linje, .hero-bg { display: none !important; }
  .side { margin: 0; }
  section { padding: 1rem 0; border: none; }
  .kort, .dagkort { border: 1px solid #ccc; background: #fff; break-inside: avoid; }
  h1, h2, h3, .dagkort h3 { color: #111; }
  .dage { grid-template-columns: repeat(2, 1fr); }
  .dagkort .beskrivelse, .lead, .lag li { color: #333; }
  table.allergen { min-width: 0; font-size: .8rem; }
  a { color: #111; }
}

/* ── Indkøbsliste ───────────────────────────────────────────────── */
.indkoeb-hoved { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.kuvert-felt { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted); }
.kuvert-felt input {
  width:5.5rem; padding:.4rem .6rem; border-radius:10px; font:inherit; font-variant-numeric:tabular-nums;
  background:rgba(7,20,23,.6); color:var(--ink); border:1px solid var(--line);
}
.kuvert-felt input:focus { outline:none; border-color:var(--accent); }
.indkoeb-sum { margin-top:.5rem; font-size:.88rem; color:var(--muted); }
.indkoeb-grupper { margin-top:1rem; display:grid; gap:1.1rem; }
.indkoeb-gruppe h4 { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.4rem; }
.indkoeb-gruppe h4 .gruppe-sum { font-size:.8rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.indkoeb-varer { list-style:none; display:grid; gap:.15rem; }
.indkoeb-varer li { display:flex; gap:.7rem; align-items:baseline; font-size:.95rem; padding:.18rem 0; border-bottom:1px solid rgba(238,231,215,.06); }
.indkoeb-varer .maengde { min-width:4.6rem; text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent); }
.indkoeb-varer .vare { flex:1 1 auto; }
.indkoeb-varer .dage { font-size:.76rem; color:var(--faint); }
.gruppe-lev { margin-top:.35rem; font-size:.78rem; color:var(--faint); }
.gruppe-lev a { color:var(--accent2); }
.indkoeb-note { margin-top:1rem; font-size:.8rem; color:var(--faint); max-width:70ch; }
@media print { .indkoeb-hoved .kuvert-felt, #indkoeb-kort .vaerktoej { display:none; } }

@keyframes celle-ind { from { opacity: 0; } to { opacity: 1; } }

/* Mandag morgen scroller hun hurtigt. Respektér den der har slået bevægelse fra. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .15s !important; animation-delay: 0s !important;
    transition-duration: .15s !important;
  }
  .hero-bg, .hero h1, .hero .lead, .hero .hero-felt, .dagkort.ny { animation: none !important; }
  .dagkort.ny, .hero h1 { opacity: 1; transform: none; filter: none; clip-path: none; }
}