/* Skovbunden: blødt grønt, varm lys baggrund, runde former. Indholdet først, som et brev til en ven. */
:root{
  --bg:#f4f6f0; --surface:#ffffff; --fg:#1f2b23; --muted:#5a6a5e; --line:#d7dfd1;
  --green:#3f6b4a; --accent:#a9cba3; --accent-ink:#1f2b23; --tint:#e6eddf;
  --display:'Bricolage Grotesque','Trebuchet MS',Arial,sans-serif; --body:'Figtree',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141b16; --surface:#1d2720; --fg:#e8eee4; --muted:#9db0a1; --line:#33423a;
  --green:#8fc59a; --accent:#8fc59a; --accent-ink:#13201a; --tint:#223027; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.7 var(--body)}
.inner{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--green);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--green);outline-offset:2px}
img{max-width:100%;height:auto;border-radius:12px}
article img{background:#e9eee4;padding:8px}
article p:has(> img + img){display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:none}
article p:has(> img + img) img{width:100%;aspect-ratio:4/3;object-fit:cover;padding:0}
article p:has(> img:only-child) img{display:block}

.top{background:var(--bg);border-bottom:1px solid var(--line)}
.top .inner{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;padding-block:18px}
.navn{font:800 1.2rem var(--display);text-decoration:none;color:var(--fg)}
nav{display:flex;flex-wrap:wrap;gap:4px 20px}
nav a{font:600 .95rem var(--body);text-decoration:none;color:var(--fg);padding:4px 0;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--accent)}

main{padding-block:44px 24px}
h1{font:800 clamp(2.1rem,6vw,3.1rem)/1.1 var(--display);margin:0 0 14px;text-wrap:balance}
h2{font:700 1.5rem/1.25 var(--display);margin:38px 0 8px;text-wrap:balance}
h3{font:700 1.15rem var(--display);margin:24px 0 4px}
p,ul,ol{max-width:64ch}
article h2{margin-top:44px}
blockquote{margin:18px 0;padding:6px 18px;background:var(--tint);border-radius:12px;color:var(--fg)}
code{background:var(--tint);padding:1px 6px;border-radius:6px;font-size:.92em}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}

.hero{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:center;padding-block:12px 8px}
.hero > div{flex:1 1 320px;min-width:0}
.logo{width:210px;height:auto;border-radius:0}
@media (prefers-color-scheme:dark){.logo{filter:invert(1)}}
.lead{font-size:1.25rem;line-height:1.55;color:var(--muted);max-width:50ch;margin:0}
.sek{font:700 .85rem var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--green);margin:44px 0 14px}
.mere{margin:14px 0 0}
.tom{color:var(--muted)}

.kort-liste{display:grid;gap:14px}
.kort{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--fg)}
.kort:hover{border-color:var(--green)}
.kort strong{font:700 1.2rem var(--display)}
.kort span:last-child{color:var(--muted)}
.etiket{align-self:flex-start;font:600 .78rem var(--body);background:var(--accent);color:var(--accent-ink);padding:2px 10px;border-radius:999px}
.meta{display:flex;gap:12px;align-items:center;color:var(--muted);margin:0 0 26px}

.tabel{overflow-x:auto;margin:18px 0;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:480px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font:600 .8rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--tint)}

footer{padding-block:36px 56px;color:var(--muted);font-size:.9rem}
[hidden]{display:none!important}

/* Ønskesedler */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 4px}
.tabs button{font:600 .95rem var(--body);padding:10px 18px;border:2px solid var(--green);background:transparent;color:var(--fg);border-radius:999px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tabs button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.gruppe-h{display:flex;justify-content:space-between;gap:12px;font:700 .85rem var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--green);border-bottom:2px solid var(--green);padding-bottom:6px;margin:36px 0 0}
.gruppe-note{color:var(--muted);font-size:.9rem;margin:10px 0 0}
.onsker{list-style:none;margin:0;padding:0;max-width:none}
.onske{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.thumb{display:flex;width:72px;height:72px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0}
.thumb--ide{background:var(--tint);color:var(--muted);font:600 .7rem var(--body);text-transform:uppercase;letter-spacing:.06em}
.onske .tekst{min-width:0}
.onske .tekst a,.onske .tekst strong{font:700 1rem/1.3 var(--display);color:var(--fg);text-decoration:none}
.onske .tekst a:hover{text-decoration:underline}
.onske small{display:block;color:var(--muted);font-size:.85rem;line-height:1.4}
.onske .butik{color:var(--green)}
.pris{font:700 1rem var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:480px){.onske{grid-template-columns:56px 1fr}.thumb{width:56px;height:56px}.pris{grid-column:2}}