/* minbabyliste.dk: rejsen (canvas "Rejsen på desktop" 13/10 2026). Tre temaer: overraskelse (fersken), pige (lyserød), dreng (blå). */
/* Skrifttyperne ligger på vores egen server (27/10 2026), så ingen IP-adresse sendes til Google. Variable fonte fra Google Fonts, OFL-licens i /fonts/. */
@font-face{font-family:"Baloo 2"; font-style:normal; font-weight:600 800; font-display:swap; src:url(/fonts/baloo2-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Baloo 2"; font-style:normal; font-weight:600 800; font-display:swap; src:url(/fonts/baloo2-latin.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:"Nunito"; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Nunito"; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/nunito-latin.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}
:root{
  --bg:#FFF7F0; --surface:#FFFFFF; --surface-2:#FBF5F0; --line:#EFE3D9; --line-2:#E3D6CC;
  --ink:#26304D; --ink-2:#3E4766; --ink-3:#5B6480; --ink-4:#8A90A8;
  --accent:#F4A587; --accent-soft:#FFE6DA; --accent-ink:#B9512F;
  --mint:#7CC6A5; --mint-soft:#E7F5EE; --mint-ink:#1F5E45;
  --lav:#5B47A8; --lav-2:#7A66C9; --lav-3:#9C8BE0; --lav-soft:#F4F0FD; --lav-line:#D9CFF7;
  --gold:#F2C14E; --warn-soft:#FFF1D6; --warn-ink:#7A4B06;
  --r-md:16px; --r-lg:22px; --r-xl:30px;
  --font-head:"Baloo 2",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;
  --maxw:1400px;
}
html[data-tema="pige"]{--bg:#FFF6F9; --surface-2:#FCF2F6; --line:#F4E2EA; --line-2:#EBCFDC; --accent:#F4A6C0; --accent-soft:#FDE4EE; --accent-ink:#A8326A}
html[data-tema="dreng"]{--bg:#F5FAFF; --surface-2:#EEF5FC; --line:#DFEAF5; --line-2:#CADCEE; --accent:#8EC3EE; --accent-soft:#E3F0FB; --accent-ink:#2563A8}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.55 var(--font-body); overflow-x:hidden; transition:background .8s ease}
.card,.sk,.tile,.plan,.slot,.pill{transition:background-color .8s ease, border-color .8s ease}
h1,h2,h3{font-family:var(--font-head); line-height:1.1; margin:0 0 .4em; letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,2.9rem); font-weight:800}
h2{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800}
h3{font-size:1.2rem; font-weight:700}
p{margin:0 0 1em}
a{color:var(--accent-ink)}
button,input{font:inherit; color:inherit}
[hidden]{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.narrow{max-width:820px}
.muted{color:var(--ink-3)} .small{font-size:.88rem}
.updated{font-size:.88rem; color:var(--ink-3)}
.lede{font-size:1.1rem; color:var(--ink-2)}

/* Header */
header.site .bar{display:flex; align-items:center; gap:16px; padding:16px 32px; max-width:var(--maxw); margin:0 auto; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800; font-size:24px; color:var(--ink); text-decoration:none; margin-right:auto}
.logo b{color:var(--accent-ink)}
.logo .mark{fill:var(--accent)}
.nav-links{display:flex; gap:4px}
.nav-links a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:22px; color:var(--ink); text-decoration:none; font-weight:700}
.nav-links a:hover{background:var(--surface)}
.pill{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:44px; padding:0 16px; border:0; border-radius:22px; font-weight:800; font-size:14px; text-decoration:none; cursor:pointer; white-space:nowrap}
.pill.lav{background:var(--lav); color:#FFFFFF}
.pill.lav.tom{background:#ECE6FB; color:#3E2F86}
.pill.soft{background:var(--accent-soft); color:var(--ink)}
.pill.plain{background:var(--surface); color:var(--ink)}
.count{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--accent-ink); color:#FFFFFF; font-size:12px}
.nav-toggle{display:none; width:44px; height:44px; border:0; border-radius:14px; background:var(--surface); cursor:pointer; align-items:center; justify-content:center}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink)}
.head-actions{display:flex; gap:8px}
@media(max-width:880px){
  header.site .bar{padding:12px 12px; gap:6px; flex-wrap:nowrap}
  .logo{font-size:20px; gap:6px} .logo svg{width:28px; height:28px}
  .head-actions{gap:6px} .head-actions .pill{padding:0 12px}
  .nav-links{position:absolute; left:0; right:0; top:64px; z-index:20; background:var(--surface); padding:8px 12px 12px; box-shadow:0 12px 24px rgb(38 48 77/.12)}
  header.site{position:relative}
  .nav-links{display:none; order:9; width:100%; flex-direction:column}
  body.nav-open .nav-links{display:flex}
  .nav-toggle{display:flex}
  .head-actions .lbl{display:none}
}

/* Appens ramme */
.app{max-width:var(--maxw); margin:0 auto; padding:0 32px 32px; scroll-margin-top:10px}
.app-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.app-top .lbl{font-weight:800; font-size:14px}
.prog{flex:1 1 200px; max-width:380px; height:10px; border-radius:5px; background:var(--line)}
.prog i{display:block; height:100%; width:3%; border-radius:inherit; background:var(--accent); transition:width .9s cubic-bezier(.22,1,.36,1), background .6s}
.prog.fuld i{background:var(--mint)}
.app-grid{display:grid; grid-template-columns:260px minmax(0,1fr) 360px; gap:24px; align-items:start}
.card{background:var(--surface); border-radius:26px; padding:20px}
.card h2{font-size:20px; margin-bottom:12px}
.col-rejse{display:flex; flex-direction:column; gap:16px}
.col-chat{border-radius:var(--r-xl); padding:24px 28px; min-height:700px; display:flex; flex-direction:column; min-width:0}
@media(max-width:1180px){.app-grid{grid-template-columns:minmax(0,1fr) 340px}.col-rejse{grid-column:1/-1; order:3; display:grid; grid-template-columns:1fr 1fr}}
@media(max-width:780px){
  .app{padding:0 12px 24px}
  .app-grid{grid-template-columns:minmax(0,1fr); gap:16px}
  .col-stole{order:2} .col-rejse{order:3; grid-template-columns:1fr}
  .col-chat{padding:18px 16px; min-height:0}
}

/* Rejsens stop og klistermærker */
.stops{list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:18px}
.stops::before{content:""; position:absolute; left:17px; top:18px; bottom:18px; border-left:2px dashed var(--line-2)}
.stop{position:relative; display:flex; align-items:center; gap:12px}
.stop .dot{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px; background:var(--surface); border:2px solid var(--line-2); color:var(--ink-4); transition:background .7s ease, border-color .7s ease, color .7s ease}
.stop b{display:block; font-size:15px; color:var(--ink-3)}
.stop small{display:block; font-size:13px; font-weight:700; line-height:1.3}
.stop.now .dot{border:3px solid var(--accent); color:var(--ink)}
.stop.now b{color:var(--ink)} .stop.now small{color:var(--accent-ink)}
.stop.done .dot{background:var(--mint); border-color:var(--mint); color:#FFFFFF}
.stop.done b{color:var(--ink)} .stop.done small{color:var(--mint-ink)}
.album{display:flex; flex-wrap:wrap; gap:6px}
.slot{width:38px; height:38px; border-radius:50%; border:2px dashed #CFC3F2; display:grid; place-items:center}
.slot.on{border:0; background:var(--lav); animation:svaev .9s cubic-bezier(.22,1,.36,1)}
.slot.on.s2{background:var(--lav-2)} .slot.on.s3{background:var(--lav-3)} .slot.on.s4{background:var(--gold)} .slot.on.s5{background:var(--accent)}
.album-txt{margin:10px 0 0; font-size:13px; font-weight:700; color:#3E2F86}
@keyframes svaev{from{opacity:0; transform:translateY(8px) scale(.96)}to{opacity:1; transform:none}}
@keyframes ind{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* Velkomst */
.welcome{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:20px 0}
.eyebrow{margin:0; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.welcome h1{max-width:640px; margin:0; font-size:clamp(2.1rem,4vw,2.9rem); line-height:1.05}
.welcome .lede{max-width:560px; margin:0}
.ask{width:100%; max-width:640px; display:flex; align-items:center; gap:10px; min-height:68px; padding:8px 8px 8px 24px; border:2px solid var(--ink); border-radius:34px; background:var(--surface)}
.ask input{flex:1; min-width:0; height:48px; border:0; outline:0; background:transparent; font-weight:600; font-size:18px}
.ask.lille{min-height:60px; padding:6px 6px 6px 20px; border-color:var(--line-2); border-radius:30px; max-width:none; margin-top:12px}
.ask.lille input{font-size:16px; height:46px}
.send{width:52px; height:52px; flex:none; border-radius:50%; border:0; background:var(--ink); display:grid; place-items:center; cursor:pointer}
.ask.lille .send{width:48px; height:48px}
.forslag{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:700px}
.chip-btn{min-height:44px; padding:0 18px; border:1.5px solid var(--line-2); border-radius:22px; background:var(--surface-2); font-weight:700; font-size:15px; cursor:pointer}
.chip-btn:hover{border-color:var(--ink)}
.personlig{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:6px; padding:14px 18px; border-radius:22px; background:var(--surface-2)}
.personlig .lbl{font-weight:800; font-size:14px}
.tema-valg{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1.5px solid var(--line-2); border-radius:22px; background:var(--surface); font-weight:700; font-size:14px; cursor:pointer}
.tema-valg i{width:16px; height:16px; border-radius:50%; display:inline-block}
.tema-valg[aria-pressed="true"]{border:2px solid var(--ink)}
.navn-felt{min-height:44px; width:200px; padding:0 14px; border:1.5px solid var(--line-2); border-radius:22px; background:var(--surface); font-weight:600; font-size:15px}
.fod{margin:6px 0 0; font-size:14px; color:var(--ink-3)}

/* Samtalen */
.chat-head{display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line)}
.chat-head b{display:block; font-family:var(--font-head); font-size:18px}
.chat-head small{font-size:13px; color:var(--ink-3)}
.chat-head .btn-text{margin-left:auto}
.thread{flex:1; display:flex; flex-direction:column; gap:12px; overflow-y:auto; max-height:600px; padding:2px 4px 8px 2px}
@media(max-width:780px){.thread{max-height:none; overflow:visible}}
.msg{max-width:560px; padding:12px 16px; border-radius:22px; font-size:17px; line-height:1.5; animation:ind .6s cubic-bezier(.22,1,.36,1) both}
.msg.puf{align-self:flex-start; background:var(--surface-2); border-bottom-left-radius:6px}
.msg.me{align-self:flex-end; background:var(--ink); color:#FFFFFF; border-bottom-right-radius:6px}
.forstod{align-self:flex-end; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px}
.forstod .t{font-size:13px; font-weight:700; color:var(--ink-3)}
.tok[disabled]{opacity:.5; cursor:default}
.tok{display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 12px; border:0; border-radius:22px; background:var(--mint-soft); color:var(--mint-ink); font-weight:800; font-size:13px; cursor:pointer}
.tok.usikker{background:var(--warn-soft); color:var(--warn-ink)}
.svar{display:flex; flex-wrap:wrap; gap:8px}
.svar-btn{min-height:44px; padding:0 18px; border:2px solid var(--ink); border-radius:22px; background:var(--surface); font-weight:800; font-size:15px; cursor:pointer; transition:background .35s ease, opacity .5s ease, transform .25s ease}
.svar-btn:active,.svar-kort:active,.chip-btn:active,.btn:active{transform:scale(.98)}
.svar-btn:hover,.svar-kort:hover{background:var(--accent-soft)}
.svar-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media(max-width:520px){.svar-grid{grid-template-columns:1fr}}
.svar-kort{display:flex; align-items:center; gap:12px; min-height:76px; padding:12px 16px; border:1.5px solid var(--line-2); border-radius:20px; background:var(--surface); text-align:left; cursor:pointer; transition:background .35s ease, opacity .5s ease, border-color .35s ease, transform .25s ease}
.svar-kort b{display:block; font-size:16px}
.svar-kort small{display:block; font-size:13px; color:var(--ink-2)}
.brugt button{opacity:.4; pointer-events:none}
.brugt [aria-pressed="true"]{opacity:1; background:var(--accent-soft); border-color:var(--ink)}
.klister{align-self:flex-start; max-width:580px; display:flex; gap:14px; align-items:center; background:var(--lav-soft); border:2px solid var(--lav-line); border-radius:22px; padding:14px 16px; animation:svaev 1s cubic-bezier(.22,1,.36,1) both}
.klister .stk{width:60px; height:60px; flex:none; border-radius:50%; background:var(--lav); display:grid; place-items:center; transform:rotate(-6deg)}
.klister small{display:block; font-weight:800; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--lav)}
.klister b{display:block; font-family:var(--font-head); font-size:19px}
.klister span{font-size:14px; line-height:1.45; color:var(--ink-2)}
.budget{background:var(--surface-2); border-radius:22px; padding:16px 20px}
.budget .top{display:flex; justify-content:space-between; align-items:baseline}
.budget output{font-family:var(--font-head); font-weight:800; font-size:28px}
.budget input[type=range]{width:100%; height:44px; accent-color:var(--accent-ink); margin:8px 0 4px}
.budget .skala{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-3)}
.budget .svar{margin-top:10px}
.budget .note{margin:8px 0 0; font-size:14px; font-weight:700; color:var(--accent-ink)}
.svar-btn[disabled]{opacity:.45; cursor:default}
.udfordr{display:flex; flex-wrap:wrap; align-items:center; gap:14px; background:var(--mint-soft); border-radius:22px; padding:14px 18px}
.udfordr p{flex:1 1 260px; margin:0; font-size:15px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border:0; border-radius:24px; font-weight:800; font-size:15px; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .25s ease, background .3s ease, opacity .3s ease}
.btn-ink,.btn-primary{background:var(--ink); color:#FFFFFF}
.btn-mint{background:var(--mint-ink); color:#FFFFFF}
.btn-line{background:var(--surface); color:var(--ink); border:2px solid var(--ink)}
.btn-ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--line-2)}
.btn-text{background:transparent; color:var(--accent-ink); text-decoration:underline; padding:0 10px}
.btn-sm{min-height:44px; padding:0 16px; font-size:14px}

/* Duellen */
.duel{border:2px solid var(--ink); border-radius:26px; overflow:hidden; animation:ind .8s cubic-bezier(.22,1,.36,1) both}
.duel-top{display:grid; grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr); align-items:center; background:var(--surface-2); padding:16px; text-align:center}
.duel-top b{font-family:var(--font-head); font-size:18px; line-height:1.15}
.vs{display:flex; flex-direction:column; align-items:center; gap:4px}
.vs span{width:52px; height:52px; border-radius:50%; background:var(--ink); color:#FFFFFF; display:grid; place-items:center; font-family:var(--font-head); font-weight:800}
.vs output{font-family:var(--font-head); font-weight:800; font-size:22px}
.duel-row{display:grid; grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr); align-items:center; padding:8px 16px; border-top:1px solid var(--line); font-size:16px; text-align:center}
.duel-row .k{font-size:13px; color:var(--ink-3); font-weight:700}
.duel-row .v{justify-self:center; font-weight:700; padding:6px 14px; border-radius:999px}
.duel-row .v.vinder{background:var(--mint-soft); color:var(--mint-ink); font-weight:800}
.duel-valg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.duel-valg .btn{white-space:normal; line-height:1.2; padding:8px 18px}
.tip{display:flex; gap:12px; align-items:center; background:var(--lav-soft); border-radius:18px; padding:12px 16px; font-size:15px; line-height:1.45}

/* Finalen */
.finale{position:relative; align-self:stretch; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 0 6px; overflow:hidden}
.finale h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin:0}
.finale p{margin:0; max-width:520px; color:var(--ink-2)}
.plan{width:100%; max-width:540px; background:var(--accent-soft); border:2px solid var(--ink); border-radius:28px; padding:22px; text-align:left; transform:rotate(-1deg); display:flex; flex-direction:column; gap:12px}
.plan-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.plan-top b{font-family:var(--font-head); font-size:24px}
.plan-top span{font-size:13px; font-weight:700; color:var(--accent-ink)}
.plan-row{display:flex; gap:12px; align-items:center; background:var(--surface); border-radius:18px; padding:10px 12px}
.plan-row .tag{font-weight:800; font-size:12px; padding:3px 9px; border-radius:999px; background:var(--ink); color:#FFFFFF}
.plan-row .tag.n{background:var(--mint); color:#13402E}
.plan-row span.i{flex:1; min-width:0}
.plan-row span.i b{display:block; font-size:16px}
.plan-row span.i small{font-size:13px; color:var(--ink-2)}
.plan .chips{margin:0}
.knapper{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.konfetti{position:absolute; inset:0; pointer-events:none}
.konfetti i{position:absolute; top:-14px; width:9px; height:12px; border-radius:50% 50% 50% 0; opacity:.85; animation:fald 4.5s cubic-bezier(.33,0,.4,1) forwards}
@keyframes fald{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,200px) rotate(140deg)}100%{transform:translate(-8px,440px) rotate(260deg); opacity:0}}
.enige{width:100%; max-width:540px; background:var(--mint-soft); border-radius:22px; padding:16px 18px; text-align:left}
.enige b{font-family:var(--font-head); font-size:20px}
.enige ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:15px}
.enige .nej{color:var(--accent-ink); font-weight:700}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* Jeres stole (hylden) */
.col-stole{display:flex; flex-direction:column; gap:12px}
.tragt{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tragt s{font-weight:800; font-size:18px; color:#A8AEC2}
.tragt b{font-family:var(--font-head); font-weight:800; font-size:44px; line-height:1}
.tragt span{font-size:14px; color:var(--ink-3); line-height:1.3}
.filtre{display:flex; flex-wrap:wrap; gap:6px}
.filtre span{background:var(--surface-2); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px}
.hylde{display:flex; flex-direction:column; gap:10px}
.sk{display:flex; gap:12px; align-items:center; padding:12px; border-radius:18px; background:var(--surface-2); cursor:pointer; transition:background .4s ease, border-color .4s ease}
.sk.ny{animation:ind .7s cubic-bezier(.22,1,.36,1) both}
.sk:hover{background:var(--accent-soft)}
.sk.top{background:var(--surface); border:2px solid var(--ink)}
.sk .tile{width:64px; height:64px; flex:none; border-radius:16px; background:var(--accent-soft); display:grid; place-items:center; overflow:hidden}
.sk.alt .tile{background:var(--mint-soft)}
.sk .info{flex:1; min-width:0}
.sk .info b{display:block; font-family:var(--font-head); font-weight:700; font-size:16px; line-height:1.2}
.sk .info small{display:block; font-size:13px; color:var(--ink-2); line-height:1.35}
.sk .badges{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:3px}
.nr{background:var(--ink); color:#FFFFFF; font-weight:800; font-size:11px; padding:2px 8px; border-radius:999px}
.flyt{font-size:12px; font-weight:800; color:var(--mint-ink)}
.hjerte{width:44px; height:44px; flex:none; border-radius:50%; border:1.5px solid var(--line-2); background:var(--surface); display:grid; place-items:center; cursor:pointer}
.hjerte path{fill:none; stroke:var(--ink); stroke-width:1.8}
.hjerte[aria-pressed="true"]{background:var(--accent-soft); border-color:transparent}
.hjerte[aria-pressed="true"] path{fill:var(--accent-ink); stroke:var(--accent-ink)}
.skelet{display:flex; gap:12px; align-items:center; padding:12px; border-radius:18px; background:var(--surface-2)}
.skelet i{width:56px; height:56px; border-radius:14px; background:var(--line)}
.skelet span{flex:1; display:flex; flex-direction:column; gap:6px}
.skelet span em{height:12px; width:70%; border-radius:6px; background:var(--line)}
.skelet span em+em{height:10px; width:45%}
.faldt{border-top:1px dashed var(--line-2); padding-top:10px; display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-4)}
.faldt b{color:var(--ink-3)}
.hylde-fod{margin:0; font-size:13px; line-height:1.5; color:var(--ink-3)}
.hylde a.alle{display:inline-flex; align-items:center; min-height:44px; font-weight:800; font-size:14px}

/* Kort til listen (/liste/) */
.recs{display:grid; gap:16px}
.rec{position:relative; background:var(--surface); border-radius:var(--r-lg); padding:20px}
.rec.top{border:2px solid var(--ink)}
.rank{position:absolute; top:-12px; left:18px; background:var(--ink); color:#FFFFFF; font-weight:800; font-size:.8rem; padding:.3em .8em; border-radius:999px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; padding:0; list-style:none}
.chip{font-size:.82rem; font-weight:700; background:var(--surface-2); border-radius:999px; padding:.25em .7em; color:var(--ink-2)}
.chip.ok{background:var(--mint-soft); color:var(--mint-ink)}
.chip.test{background:var(--warn-soft); color:var(--warn-ink)}
.why{margin:0 0 12px; padding-left:1.1em; color:var(--ink-2)}
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 14px}
@media(min-width:761px){#listview .facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{background:var(--surface-2); border-radius:12px; padding:8px 10px}
.fact .v{font-family:var(--font-head); font-weight:700}
.fact .k{font-size:.78rem; color:var(--ink-3)}
.obs{font-size:.88rem; background:var(--warn-soft); border-radius:10px; padding:8px 10px; margin:0 0 12px; color:var(--warn-ink)}
.buy{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.price{font-family:var(--font-head); font-weight:800; font-size:1.25rem}
.price small{display:block; font:500 .78rem var(--font-body); color:var(--ink-3)}
.buy .spacer{flex:1}
.save[aria-pressed="true"]{background:var(--mint-soft); border-color:var(--mint-ink); color:var(--mint-ink)}
.nores{background:var(--warn-soft); border-radius:12px; padding:12px 14px}

/* Indhold under appen */
section.block{padding:clamp(40px,6vw,72px) 0}
section.tint{background:var(--surface)}
.group{margin-top:34px; scroll-margin-top:20px}
.jump{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.seat{background:var(--bg); border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column}
.seat h3{margin-bottom:2px}
.seat .facts{margin-top:12px}
.seat .buy{margin-top:auto}
.seat dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:4px 0 8px; font-size:.93rem}
.seat dt{color:var(--ink-3)} .seat dd{margin:0; font-weight:600}
.seat .src{font-size:.8rem; color:var(--ink-3); margin:6px 0 0}
.more{margin-top:12px; border-top:1px solid var(--line); padding-top:4px}
.more summary{cursor:pointer; font-weight:700; color:var(--accent-ink); min-height:44px; display:flex; align-items:center}
.guide h3{margin-top:1.4em}
.faq details{background:var(--bg); border-radius:var(--r-md); margin-bottom:10px}
.faq summary{cursor:pointer; list-style:none; font-family:var(--font-head); font-weight:700; padding:14px 44px 14px 16px; position:relative; min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:16px; top:10px; font-size:1.4rem; color:var(--accent-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 16px 14px; margin:0; color:var(--ink-2)}
.affiliate-disclosure{font-size:.9rem; background:var(--surface-2); border-radius:var(--r-md); padding:12px 14px; color:var(--ink-2); margin:18px 0}
.sources{font-size:.88rem; color:var(--ink-2); padding-left:1.1em}
.sources li{overflow-wrap:anywhere}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0}
footer.site{background:var(--ink); color:#E9EAF2; padding:40px 0 28px; margin-top:40px}
footer.site a{color:#FFFFFF}
footer.site .cols{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between}
footer.site .fine{font-size:.85rem; opacity:.8; margin-top:22px}
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:#FFFFFF; padding:.6em 1.1em; border-radius:999px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .2s; z-index:80; max-width:calc(100vw - 32px); text-align:center}
.toast.on{opacity:1}
@media(max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .grid{grid-template-columns:1fr}
  .duel-row{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr); font-size:14px}
  .duel-top{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}
  .duel-valg{grid-template-columns:1fr}
}
.mark{fill:var(--accent)}
.chat{flex:1; display:flex; flex-direction:column; min-height:0}

/* Puf skriver */
.msg.skriver{padding:14px 18px}
.dots{display:inline-flex; gap:5px; align-items:center; height:14px}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--ink-4); animation:prik 1.4s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.18s} .dots i:nth-child(3){animation-delay:.36s}
@keyframes prik{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.svar>*,.svar-grid>*{animation:ind .6s cubic-bezier(.22,1,.36,1) both}
.svar>*:nth-child(2),.svar-grid>*:nth-child(2){animation-delay:.08s} .svar>*:nth-child(3),.svar-grid>*:nth-child(3){animation-delay:.16s} .svar>*:nth-child(4),.svar-grid>*:nth-child(4){animation-delay:.24s}
.forstod,.budget,.tip,.enige,.finale,.duel-valg,.karrusel-blok{animation:ind .7s cubic-bezier(.22,1,.36,1) both}

/* Produktkort i samtalen */
.karrusel-blok{display:flex; flex-direction:column; gap:10px}
.karrusel-blok .kh{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.karrusel-blok .kh b{font-family:var(--font-head); font-size:18px}
.karrusel-blok .kh a{font-weight:800; font-size:14px; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center}
.karrusel{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; scrollbar-width:thin}
.pk{flex:0 0 232px; scroll-snap-align:start; background:var(--surface); border:1.5px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; animation:ind .7s cubic-bezier(.22,1,.36,1) both; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.pk:nth-child(2){animation-delay:.12s} .pk:nth-child(3){animation-delay:.24s}
.pk:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgb(38 48 77/.10); border-color:var(--line-2)}
.pk.top{border:2px solid var(--ink)}
.pk .bill{position:relative; height:150px; background:var(--accent-soft); display:grid; place-items:center}
.pk:nth-child(2) .bill{background:var(--mint-soft)} .pk:nth-child(3) .bill{background:var(--lav-soft)}
.pk .bill img{max-width:88%; max-height:88%; object-fit:contain}
.pk .bill .nr{position:absolute; left:12px; top:12px}
.pk .bill .hjerte{position:absolute; right:10px; top:10px}
.pk .krop{padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.pk .krop b{font-family:var(--font-head); font-size:16px; line-height:1.2}
.pk .krop .chips{margin:0}
.pk .krop small{font-size:13px; color:var(--ink-2); line-height:1.35}
.pk .fod{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:6px}
.pk .fod .pris{font-family:var(--font-head); font-weight:800; font-size:18px}
.pk .fod .btn{min-height:44px; padding:0 14px; font-size:13px}

/* Detaljepanelet */
.slor{position:fixed; inset:0; background:rgb(38 48 77/.28); opacity:0; transition:opacity .5s ease; z-index:70}
.slor.vis{opacity:1}
.detalje{position:fixed; top:0; right:0; bottom:0; width:min(460px,100vw); background:var(--surface); z-index:71; overflow-y:auto; transform:translateX(100%); transition:transform .6s cubic-bezier(.22,1,.36,1); box-shadow:-20px 0 40px rgb(38 48 77/.12)}
.detalje.vis{transform:none}
.detalje .bill{height:240px; background:var(--accent-soft); display:grid; place-items:center; position:relative}
.detalje .luk{position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:50%; border:0; background:var(--surface); cursor:pointer; display:grid; place-items:center}
.detalje .indhold{padding:20px 22px 28px; display:flex; flex-direction:column; gap:12px}
.detalje h2{font-size:26px; margin:0}
.detalje .butikker{display:flex; flex-direction:column; gap:8px}
.detalje .butik{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:16px; background:var(--surface-2)}
.detalje .butik b{font-family:var(--font-head); font-size:18px}
.detalje .handling{display:flex; gap:10px; flex-wrap:wrap}
@media(max-width:780px){
  .detalje{top:auto; left:0; width:100%; max-height:88vh; border-radius:26px 26px 0 0; transform:translateY(100%)}
  .detalje.vis{transform:none}
  body.laast{overflow:hidden}
  /* Svarfeltet under den nyeste besked ruller op over den flydende knap (48 px høj, 16 px fra bunden) */
  #replyForm{scroll-margin-bottom:80px}
}
.detalje{overscroll-behavior:contain}
.sk[tabindex]:focus-visible,.plan-row[tabindex]:focus-visible{outline:3px solid var(--accent-ink); outline-offset:2px}

/* Flydende knap til stolene på mobil */
.hylde-pil{display:none}
@media(max-width:780px){
  .hylde-pil{position:fixed; left:50%; bottom:16px; transform:translate(-50%,140%); z-index:40; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 20px; border:0; border-radius:24px; background:var(--ink); color:#FFFFFF; font-weight:800; font-size:15px; box-shadow:0 12px 28px rgb(38 48 77/.25); transition:transform .6s cubic-bezier(.22,1,.36,1); cursor:pointer; white-space:nowrap}
  .hylde-pil.vis{transform:translate(-50%,0)}
}

/* Testbilleder (kun localhost) */
.bill{overflow:hidden}
.bill img.test{position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; display:block}
.tile img.test{width:100%; height:100%; object-fit:cover; display:block}
.bill .nr,.bill .hjerte,.bill .luk,.bill .testmaerke{z-index:1}
.tile img{width:100%; height:100%; object-fit:cover}
.duel-top .tile{width:96px; height:72px; margin:0 auto 6px; border-radius:14px; overflow:hidden; display:grid; place-items:center}
.testmaerke{position:absolute; left:10px; bottom:10px; background:rgb(38 48 77/.78); color:#FFFFFF; font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; letter-spacing:.02em}