@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/figtree.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ==========================================================================
   PUMELLA – pumella.com (issue #909). Selvstændigt stilark: byggets fontregler (public/fonts/fonts.css fra ciklider.dk) lægges FORAN af pumella/build.mjs.
   Udtrykket er retning A fra #906 (Martin 8.11.2026): ciklider.dk's skrifter (Manrope og Figtree), ink og flader i lyst og mørkt tema, men Pumellas egen turkise accent
   og pimpstenens sandgrå flade. Butikkens orange står kun i afsenderlinjen ”Fra CIKLIDER.DK”.
   Ingen indlejret stil i siderne (CSP: style-src 'self') og ingen evige animationer. Teksten har mindst 4,5:1 mod sin flade (WCAG AA) – build.mjs tjekker parrene nedenfor.
   --accent (turkis) er til flader, kanter og ikoner; tekst og knapper bruger --accent-ink.
   ========================================================================== */
:root{
  --bg:#fafafa; --surface:#ffffff; --sand:#f3f1ec;
  --ink:#36393e; --ink-2:#575c63; --ink-3:#686d74;
  --line:rgba(54,57,62,.12); --line-strong:rgba(54,57,62,.24);
  --accent:#169a8d; --accent-ink:#107067; --accent-soft:rgba(22,154,141,.12);
  --btn-bg:#107067; --btn-bg-hover:#0c5a52; --btn-fg:#ffffff;
  --sender-tld:#a4491a;
  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --radius:24px; --gutter:16px; --header-h:64px;
  --shadow-card:0 18px 40px -24px rgba(54,57,62,.35);
  color-scheme:light;
}
@media (min-width:700px){:root{--gutter:24px}}
@media (min-width:1100px){:root{--gutter:32px}}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1316; --surface:#171c20; --sand:#1d1c19;
    --ink:#e9ecef; --ink-2:#b6bcc3; --ink-3:#8b9299;
    --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.2);
    --accent:#19b2a2; --accent-ink:#19b2a2; --accent-soft:rgba(25,178,162,.16);
    --btn-bg:#19b2a2; --btn-bg-hover:#2cc7b6; --btn-fg:#0b1312;
    --sender-tld:#e58a4a;
    --shadow-card:0 18px 40px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
h1{font-family:var(--font-display);margin:0;text-wrap:balance;color:var(--ink)}
.wrap{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--surface);color:var(--ink);padding:.6rem 1rem;border-radius:999px;box-shadow:var(--shadow-card)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- header: logoet (#971) – udgaven med det forenklede tegn, 38 px høj, på mobil 28 px ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.brand img{display:block;height:38px;width:auto}
@media (max-width:699px){.brand img{height:28px}}

/* ---------- siden: ét kort på pimpstenens sandgrå flade ---------- */
main{flex:1;display:grid;align-content:center;background:radial-gradient(70% 55% at 88% 0%,var(--accent-soft),transparent 70%),var(--bg)}
.hero{padding-block:clamp(2.5rem,8vw,6rem) clamp(3rem,9vw,7rem)}
.card{max-width:720px;display:grid;gap:1.25rem;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:clamp(1.6rem,4.5vw,3.25rem)}
.eyebrow{font:700 .74rem/1.2 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:.5rem}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent);flex:none}
.sender-name{color:var(--ink);font-weight:800;letter-spacing:.14em}
.sender-tld{color:var(--sender-tld)}
.card h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.card h1 img{display:block;width:min(100%,403px);height:auto}   /* logoet i fuld udgave (fra 48 px) */
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.55;color:var(--ink-2);max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.85rem 1.35rem;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:700 .95rem/1 var(--font-display);text-decoration:none;transition:background-color .2s}
.btn:hover{background:var(--btn-bg-hover)}

/* ---------- footer: sprogene, stamdata og copyright ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg);padding-block:1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
.legal{display:grid;gap:.5rem;font-size:.85rem;line-height:1.6;color:var(--ink-2)}
.legal a{font-weight:600;color:var(--accent-ink);text-underline-offset:.2em}
.legal a:hover{text-decoration-thickness:2px}
.lang-foot ul{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.5rem}
.lang-foot a,.lang-cur{display:inline-flex;align-items:center;min-height:32px;font:600 .92rem/1.2 var(--font-display)}
.lang-cur{color:var(--ink);font-weight:800}
@media (pointer:coarse){.lang-foot a,.lang-cur,.legal a{min-height:44px;display:inline-flex;align-items:center}}

/* ---------- lanceringen (#907): menuen og indholdssiderne – kun i lanceringsbygget; før det er der kun forsiden og 404-siden ---------- */
.header-inner{flex-wrap:wrap;gap:.25rem 1.5rem}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font:600 .92rem/1.2 var(--font-display);color:var(--ink-2);text-decoration:none}
.site-nav a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:.3em}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.4em}
main:has(.page-flow){align-content:start}
.page-flow{display:grid;gap:clamp(1.5rem,4vw,3rem)}
.page-flow .hero{padding-bottom:0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn-quiet{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--accent-ink)}
.btn-quiet:hover{background:var(--accent-soft)}
h2{font:800 1.2rem/1.25 var(--font-display);letter-spacing:-.01em;margin:0;color:var(--ink);text-wrap:balance}
.facts-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.fact{display:grid;gap:.6rem;align-content:start;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem)}
.prose{max-width:72ch;display:grid;gap:1rem;padding-block:clamp(2rem,6vw,4rem) 0}
.prose h1{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.prose h2{margin-top:.75rem}
.prose ol,.prose ul{display:grid;gap:.6rem;padding-left:1.4rem}
.prose ol{list-style:decimal}
.prose ul{list-style:disc}
.prose li::marker{color:var(--accent-ink);font-weight:700}
.prose a:not(.btn),.contact a{color:var(--accent-ink);font-weight:600;text-underline-offset:.2em}
.prose .btn{justify-self:start}
.steps,.prose .steps{counter-reset:step;list-style:none;padding-left:0;gap:1.5rem}
.steps li{counter-increment:step;position:relative;display:grid;gap:.4rem;padding-left:3.1rem}
.steps li::before{content:counter(step);position:absolute;left:0;top:-.1rem;display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font:800 1rem/1 var(--font-display)}
.steps h2{margin-top:0}
.calc{border-collapse:collapse;width:100%;max-width:26rem;font-variant-numeric:tabular-nums}
.calc caption{text-align:left;font:700 .95rem/1.4 var(--font-display);color:var(--ink);padding-bottom:.5rem}
.calc th,.calc td{text-align:left;padding:.55rem .75rem .55rem 0;border-bottom:1px solid var(--line)}
.calc thead th{color:var(--ink-2);font:700 .76rem/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.calc tbody th{font-weight:700}
.contact{border-top:1px solid var(--line);padding-block:clamp(1.5rem,4vw,2.5rem) clamp(2rem,5vw,3.5rem)}
.contact .wrap{display:grid;gap:.5rem;max-width:72ch}