/* =========================================================
   Hjerteguiden — skabelon-styles
   Bruges af: single-review (anmeldelse), single (artikel), page (om os)
   Bygger ovenpå ds.css (tokens, nav, footer, brand, stars)
   ========================================================= */

html{ scroll-behavior:smooth; scroll-padding-top:104px; }
body{ margin:0; background:var(--cream); }

/* sticky inder-nav */
.nav.nav--sticky{ position:sticky; top:0; z-index:50; }

/* ---------------------------------------------------------
   SIDE-SKAL
   --------------------------------------------------------- */
.tpage{ font-family:var(--font-body); color:var(--ink); background:var(--cream); }
.tpage *{ box-sizing:border-box; }

/* breadcrumbs */
.crumbs{ max-width:1120px; margin:0 auto; padding:22px 48px 0; }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); font-weight:600; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--red-deep); }
.crumbs li[aria-current]{ color:var(--ink); }
.crumbs .sep{ color:var(--red-300); }

/* hovedlayout: indhold + sidebar */
.layout{ max-width:1120px; margin:0 auto; padding:34px 48px 88px; display:grid; grid-template-columns:minmax(0,1fr) 304px; gap:56px; align-items:start; }
.layout--narrow{ max-width:880px; grid-template-columns:1fr; }

/* ---------------------------------------------------------
   SIDEBAR + TOC
   --------------------------------------------------------- */
.sidebar{ position:sticky; top:104px; display:flex; flex-direction:column; gap:22px; }
.toc{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 22px 24px; box-shadow:var(--shadow-sm); }
.toc-h{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
.toc-h svg{ width:17px; height:17px; color:var(--red); }
.toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.toc a{ display:block; padding:9px 13px; border-radius:10px; text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:14.5px; line-height:1.35; border-left:3px solid transparent; transition:.16s; }
.toc a:hover{ background:var(--red-50); color:var(--red-deep); }
.toc a.on{ background:var(--red-50); color:var(--red-deep); border-left-color:var(--red); }

/* lille CTA-boks i sidebar */
.aside-cta{ background:linear-gradient(165deg,var(--red) 0%, var(--red-deep) 100%); border-radius:var(--r-lg); padding:26px 24px; color:#fff; box-shadow:var(--shadow-md); position:relative; overflow:hidden; }
.aside-cta .deco{ position:absolute; right:-22px; bottom:-26px; opacity:.16; }
.aside-cta .deco svg{ width:130px; height:130px; color:#fff; }
.aside-cta h4{ font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; line-height:1.12; }
.aside-cta p{ color:rgba(255,255,255,.9); font-size:14px; line-height:1.55; margin-top:10px; position:relative; }
.aside-cta .sbtn{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; background:#fff; color:var(--red-deep); border:none; cursor:pointer; width:100%; padding:13px; border-radius:12px; font-family:var(--font-body); font-weight:700; font-size:15px; position:relative; }
.aside-cta .sbtn svg{ width:16px; height:16px; }

/* nyhedsbrev-boks i sidebar */
.aside-news{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); }
.aside-news h4{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); }
.aside-news p{ color:var(--muted); font-size:13.5px; line-height:1.5; margin-top:8px; }
.aside-news form{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.aside-news input{ border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; font-family:var(--font-body); font-size:14.5px; color:var(--ink); }
.aside-news input:focus{ outline:none; border-color:var(--red-300); }
.aside-news button{ background:var(--ink); color:#fff; border:none; cursor:pointer; border-radius:11px; padding:12px; font-family:var(--font-body); font-weight:700; font-size:14.5px; }
.aside-news .news-msg{ font-size:13px; font-weight:600; line-height:1.4; margin-top:10px; }
.aside-news .news-msg--ok{ color:var(--green-deep); }
.aside-news .news-msg--err{ color:var(--red-deep); }

/* ---------------------------------------------------------
   PROSE (brødtekst)
   --------------------------------------------------------- */
.prose{ color:var(--ink-soft); }
.prose > * + *{ margin-top:22px; }
.prose p{ font-size:17.5px; line-height:1.78; }
.prose .lead{ font-size:21px; line-height:1.6; color:var(--ink); font-weight:500; }
.prose h2{ font-family:var(--font-display); font-weight:800; font-size:31px; color:var(--ink); line-height:1.12; letter-spacing:-.02em; margin-top:54px; scroll-margin-top:104px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--ink); margin-top:36px; letter-spacing:-.01em; }
.prose a{ color:var(--red-deep); text-decoration:underline; text-decoration-color:var(--red-300); text-underline-offset:2px; font-weight:600; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose ul, .prose ol{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.prose ul li{ position:relative; padding-left:32px; font-size:17px; line-height:1.65; }
.prose ul li::before{ content:""; position:absolute; left:4px; top:9px; width:9px; height:9px; border-radius:3px; background:var(--red); transform:rotate(45deg); }
.prose ol{ counter-reset:n; }
.prose ol li{ position:relative; padding-left:42px; font-size:17px; line-height:1.65; counter-increment:n; }
.prose ol li::before{ content:counter(n); position:absolute; left:0; top:-1px; width:27px; height:27px; border-radius:9px; background:var(--red-100); color:var(--red-deep); font-family:var(--font-display); font-weight:800; font-size:14px; display:grid; place-items:center; }

/* citat / highlight */
.prose blockquote{ margin:40px 0; padding:30px 34px; background:linear-gradient(170deg,var(--red-50),#fff); border:1.5px solid var(--red-200); border-radius:var(--r-lg); position:relative; }
.prose blockquote p{ font-family:var(--font-display); font-weight:600; font-size:23px; line-height:1.4; color:var(--ink); letter-spacing:-.01em; }
.prose blockquote cite{ display:block; margin-top:14px; font-style:normal; font-size:14.5px; font-weight:700; color:var(--red-deep); }
.prose blockquote .qmark{ position:absolute; top:-16px; left:28px; width:42px; height:42px; border-radius:13px; background:var(--red); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-size:30px; font-weight:800; box-shadow:0 8px 18px rgba(232,84,107,.35); }

/* sektion-ankre generelt */
.anchor{ scroll-margin-top:104px; }

/* ---------------------------------------------------------
   ANMELDELSE — review-header
   --------------------------------------------------------- */
/* ── Review header — compact single row ────────────────── */
.rev-head{
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px 24px;
    background:var(--white);
    border:1.5px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--shadow-sm);
    margin-bottom:16px;
}
/* Logo wrapper */
.rev-logo-wrap{
    width:72px; height:72px;
    border-radius:16px;
    border:1.5px solid var(--line);
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex:none;
    overflow:visible;
}
.rev-logo-img{
    width:72px; height:72px;
    object-fit:contain;
    padding:8px;
    box-sizing:border-box;
    display:block;
    border-radius:14px;
    border:1.5px solid var(--line);
    background:#fff;
}
.rev-logo-initials{
    color:#fff;
    font-family:var(--font-display);
    font-weight:800;
    font-size:22px;
}
/* Info column */
.rev-info{ display:flex; flex-direction:column; gap:4px; }
.rev-info h1{
    font-family:var(--font-display);
    font-weight:800;
    font-size:36px;
    color:var(--ink);
    line-height:1;
    letter-spacing:-.025em;
    margin:0;
}
/* Stars + score + date on one line */
.rev-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.rev-meta .dc-stars{ display:inline-flex; gap:2px; }
.rev-meta .dc-stars svg{ width:17px; height:17px; }
.rev-meta .dc-star--full  svg{ fill:#E8546B; color:#E8546B; }
.rev-meta .dc-star--half  svg{ fill:#E8546B; color:#E8546B; }
.rev-meta .dc-star--empty svg{ fill:none; stroke:#E0E0E0; color:#E0E0E0; }
.rev-score-num{
    font-family:var(--font-display);
    font-weight:800;
    font-size:15px;
    color:#E8546B;
}
.rev-updated{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--muted);
    font-size:12.5px;
    font-weight:500;
}
.rev-updated svg{ color:#3B9350; flex:none; }

/* verdict-boks */
.verdict{ display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; background:var(--white); border:1.5px solid var(--red-200); border-radius:var(--r-xl); padding:34px 36px; box-shadow:var(--shadow-md); margin:26px 0 14px; position:relative; overflow:hidden; }
.verdict::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,var(--red),var(--red-deep)); }
.vscore{ text-align:center; }
.vscore .ring{ width:142px; height:142px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--ring-color,var(--green)) calc(var(--p,91)*1%), var(--red-100) 0); position:relative; }
.vscore .ring::after{ content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; }
.vscore .ring .inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; line-height:1; }
.vscore .ring .num{ font-family:var(--font-display); font-weight:800; font-size:42px; color:var(--ink); }
.vscore .ring .den{ font-size:13px; font-weight:700; color:var(--muted); margin-top:3px; }
.vscore .label{ margin-top:12px; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--green-deep); }
.vscore .stars{ display:flex; justify-content:center; margin-top:6px; }
.vscore .stars svg{ width:16px; height:16px; }
.vbody .vk{ display:inline-flex; align-items:center; gap:7px; color:var(--red-deep); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; background:var(--red-100); padding:5px 12px; border-radius:999px; }
.vbody h2{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--ink); margin:13px 0 0; letter-spacing:-.02em; }
.vbody p{ color:var(--ink-soft); font-size:16px; line-height:1.6; margin-top:11px; }
.vbody .acts{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.btn-go.btn-go--lg{ padding:15px 26px; font-size:16px; border-radius:13px; }
.btn-ghost{ display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--ink); border:1.5px solid var(--line); cursor:pointer; padding:14px 22px; border-radius:13px; font-family:var(--font-body); font-weight:700; font-size:16px; }
.btn-ghost:hover{ border-color:var(--red-300); color:var(--red-deep); }
.btn-ghost svg{ width:17px; height:17px; }

/* faktaboks */
.factbox{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:14px; }
.factbox .f{ padding:18px 16px; text-align:center; border-right:1px solid var(--line); }
.factbox .f:last-child{ border-right:none; }
.factbox .f .k{ color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; }
.factbox .f .v{ color:var(--ink); font-weight:700; font-size:16px; font-family:var(--font-display); }
.factbox .f .v.free{ color:var(--green-deep); }

/* score-nedbrydning */
.scorebars{ display:flex; flex-direction:column; gap:16px; background:#fff; border:1.5px solid #E5E7EB; border-radius:16px; padding:26px 28px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.bar{ display:grid; grid-template-columns:172px 1fr 52px; align-items:center; gap:16px; }
.bar .bk{ font-weight:600; font-size:15px; color:#1E1A24; }
.bar .track{ height:10px; border-radius:999px; background:#FFE4EA; position:relative; }
.bar .fill{ position:absolute; left:0; top:0; height:100%; border-radius:999px; background:#C73E54; }
.bar .bv{ text-align:right; font-family:var(--font-display); font-weight:800; font-size:16px; color:#C73E54; }

/* pros & cons */
.proscons{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.pc{ border-radius:var(--r-lg); padding:24px 26px; border:1.5px solid; }
.pc h3{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:18px; margin:0 0 16px; }
.pc h3 .ic{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:none; }
.pc h3 .ic svg{ width:18px; height:18px; }
.pc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.pc li{
    display:flex; align-items:flex-start; gap:11px;
    font-size:15.5px; line-height:1.5; color:var(--ink-soft);
    position:static;   /* override any inherited position:relative */
    padding-left:0;    /* no indent for bullet */
}
.pc li::before{ display:none !important; }  /* kill .prose ul li::before diamond */
.pc li svg{ width:19px; height:19px; flex:none; margin-top:1px; }
.pc--pro{ background:linear-gradient(170deg,#F1FAF3,#fff); border-color:#CDEAD4; }
.pc--pro h3{ color:var(--green-deep); }
.pc--pro h3 .ic{ background:var(--green); }
.pc--pro li svg{ color:var(--green); }
.pc--con{ background:linear-gradient(170deg,var(--red-50),#fff); border-color:var(--red-200); }
.pc--con h3{ color:var(--red-deep); }
.pc--con h3 .ic{ background:var(--red); }
.pc--con li svg{ color:var(--red); }

/* galleri */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:128px; gap:14px; }
.gallery image-slot{ display:block; width:100%; height:100%; border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.gallery .g-lg{ grid-column:span 4; grid-row:span 2; }
.gallery .g-sm{ grid-column:span 2; }

/* FAQ */
.faq{ display:flex; flex-direction:column; gap:13px; }
.faq details{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:.18s; }
.faq details[open]{ border-color:var(--red-200); box-shadow:var(--shadow-sm); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ width:22px; height:22px; color:var(--red); flex:none; transition:.22s; }
.faq details[open] summary .chev{ transform:rotate(180deg); }
.faq .a{ padding:0 24px 22px; color:var(--ink-soft); font-size:16px; line-height:1.7; }

/* section-overskrift inde i indhold */
.sec-h{ font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--ink); letter-spacing:-.02em; margin:0 0 6px; scroll-margin-top:104px; }
.sec-sub{ color:var(--muted); font-size:16px; line-height:1.5; margin:0 0 22px; max-width:640px; }
.sec{ margin-top:54px; }
.sec:first-child{ margin-top:0; }

/* Luft mellem vurderingsboksen (karakterer/faktaboks) og indholdet ("Første indtryk") */
.review-content{ margin-top:54px; }

/* ---------------------------------------------------------
   ARTIKEL (single)
   --------------------------------------------------------- */
.art-head{ max-width:820px; }
.eyebrow{ display:inline-flex; align-items:center; gap:7px; color:var(--red-deep); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; background:var(--red-100); padding:6px 13px; border-radius:999px; }
.art-head h1{ font-family:var(--font-display); font-weight:800; font-size:48px; line-height:1.06; color:var(--ink); letter-spacing:-.025em; margin:18px 0 0; text-wrap:balance; }
.art-head .dek{ color:var(--ink-soft); font-size:20px; line-height:1.55; margin-top:18px; }
.artmeta{ display:flex; align-items:center; gap:16px; margin-top:24px; }
.artmeta .av{ width:50px; height:50px; border-radius:50%; overflow:hidden; flex:none; border:2px solid var(--white); box-shadow:var(--shadow-sm); }
.artmeta .av image-slot{ display:block; width:100%; height:100%; }
.artmeta .who{ font-weight:700; font-size:15.5px; color:var(--ink); }
.artmeta .when{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13.5px; font-weight:600; margin-top:2px; }
.artmeta .when .d{ width:3px; height:3px; border-radius:50%; background:var(--red-300); }
.art-hero{ margin:30px 0 8px; }
.art-hero image-slot{ display:block; width:100%; height:440px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md); }
.art-hero .cap{ color:var(--muted); font-size:13px; margin-top:11px; text-align:center; font-style:italic; }

/* inline-billede i artikel */
.art-figure{ margin:38px 0; }
.art-figure image-slot{ display:block; width:100%; height:330px; border-radius:var(--r-lg); overflow:hidden; border:1.5px solid var(--line); }
.art-figure figcaption{ color:var(--muted); font-size:13px; margin-top:10px; text-align:center; font-style:italic; }

/* forfatter-boks */
.authorbox{ display:flex; gap:20px; align-items:flex-start; background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:26px 28px; box-shadow:var(--shadow-sm); margin-top:48px; }
.authorbox .av{ width:72px; height:72px; border-radius:50%; overflow:hidden; flex:none; }
.authorbox .av image-slot{ display:block; width:100%; height:100%; }
.authorbox .k{ color:var(--red-deep); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.authorbox h4{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); margin:5px 0 0; }
.authorbox p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin-top:9px; }

/* relaterede artikler */
.relgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.relcard{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s; cursor:pointer; display:flex; flex-direction:column; }
.relcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--red-200); }
.relcard image-slot{ display:block; width:100%; height:160px; }
.relcard .b{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.relcard .cat{ color:var(--red-deep); font-weight:700; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; }
.relcard h4{ font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1.2; color:var(--ink); letter-spacing:-.01em; }
.relcard .rm{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-weight:700; font-size:13.5px; }
.relcard .rm svg{ width:15px; height:15px; color:var(--red); }

/* ---------------------------------------------------------
   PAGE (om os)
   --------------------------------------------------------- */
.page-hero{ background:linear-gradient(155deg,var(--red) 0%, var(--red-deep) 62%, var(--red-dark) 100%); color:#fff; position:relative; overflow:hidden; }
.page-hero .deco1{ position:absolute; right:-50px; top:-40px; opacity:.12; }
.page-hero .deco1 svg{ width:300px; height:300px; color:#fff; }
.page-hero .deco2{ position:absolute; left:6%; bottom:-30px; opacity:.1; }
.page-hero .deco2 svg{ width:150px; height:150px; color:#fff; }
.page-hero .inner{ max-width:1120px; margin:0 auto; padding:64px 48px 72px; position:relative; z-index:2; text-align:center; }
.page-hero .eyebrow{ background:rgba(255,255,255,.16); color:#fff; }
.page-hero h1{ font-family:var(--font-display); font-weight:800; font-size:60px; line-height:1.02; letter-spacing:-.03em; margin:20px auto 0; max-width:820px; text-wrap:balance; }
.page-hero p{ color:rgba(255,255,255,.9); font-size:20px; line-height:1.55; margin:20px auto 0; max-width:600px; }

.statband{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:1000px; margin:0 auto; transform:translateY(-50%); background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.statband .s{ padding:28px 20px; text-align:center; border-right:1px solid var(--line); }
.statband .s:last-child{ border-right:none; }
.statband .s .n{ font-family:var(--font-display); font-weight:800; font-size:38px; color:var(--red); line-height:1; }
.statband .s .l{ color:var(--muted); font-weight:600; font-size:14px; margin-top:8px; }

/* team */
.teamgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.teamcard{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); text-align:center; }
.teamcard image-slot{ display:block; width:100%; height:220px; }
.teamcard .b{ padding:20px 18px 24px; }
.teamcard h4{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); }
.teamcard .role{ color:var(--red-deep); font-weight:700; font-size:13.5px; margin-top:4px; }
.teamcard p{ color:var(--muted); font-size:14px; line-height:1.55; margin-top:11px; }

/* værdi-kort */
.valuegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.valuecard{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm); }
.valuecard .ic{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--red),var(--red-deep)); box-shadow:0 8px 18px rgba(232,84,107,.3); }
.valuecard .ic svg{ width:26px; height:26px; }
.valuecard h4{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); margin:16px 0 0; }
.valuecard p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin-top:9px; }

/* CTA-band før footer */
.ctaband{ max-width:1120px; margin:0 auto 80px; }
.ctaband .inner{ background:linear-gradient(155deg,var(--red) 0%, var(--red-deep) 100%); border-radius:var(--r-xl); padding:52px 56px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; position:relative; overflow:hidden; box-shadow:var(--shadow-md); }
.ctaband .deco{ position:absolute; right:-30px; bottom:-40px; opacity:.14; }
.ctaband .deco svg{ width:200px; height:200px; color:#fff; }
.ctaband h2{ font-family:var(--font-display); font-weight:800; font-size:34px; line-height:1.08; letter-spacing:-.02em; position:relative; }
.ctaband p{ color:rgba(255,255,255,.9); font-size:16.5px; line-height:1.5; margin-top:10px; max-width:440px; position:relative; }
.ctaband .b-cta{ display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--red-deep); border:none; cursor:pointer; padding:17px 30px; border-radius:999px; font-family:var(--font-body); font-weight:700; font-size:17px; box-shadow:0 14px 30px rgba(0,0,0,.18); position:relative; white-space:nowrap; }
.ctaband .b-cta svg{ width:18px; height:18px; }

/* ---------------------------------------------------------
   RESPONSIV
   --------------------------------------------------------- */
@media (max-width:1080px){
  .layout{ grid-template-columns:1fr; gap:40px; }
  .sidebar{ position:static; order:2; flex-direction:row; flex-wrap:wrap; }
  .sidebar > *{ flex:1; min-width:240px; }
  .toc{ display:none; }
}
@media (max-width:760px){
  .crumbs, .layout{ padding-left:24px; padding-right:24px; }
  .verdict{ grid-template-columns:1fr; text-align:center; }
  .factbox{ grid-template-columns:repeat(2,1fr); }
  .factbox .f:nth-child(even){ border-right:none; }
  .bar{ grid-template-columns:120px 1fr 40px; gap:12px; }
  .proscons, .relgrid, .teamgrid, .valuegrid, .statband{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery .g-lg{ grid-column:span 2; grid-row:span 1; }
  .art-head h1{ font-size:34px; }
  .page-hero h1{ font-size:38px; }
  .ctaband .inner{ padding:34px 28px; }
}

/* ---------------------------------------------------------
   PAGE — standard side (ikke Om os)
   --------------------------------------------------------- */
.page-simple-head {
    background: var(--white);
    border-bottom: 1.5px solid var(--line);
    padding: 48px 0 44px;
}
.page-simple-head h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(30px, 4vw, 46px);
    color: var(--ink);
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0 0 14px;
}
.page-dek {
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.55;
    max-width: 620px;
    margin: 0;
}

/* Review stars in header */
.rev-stars svg {
    width: 18px;
    height: 18px;
    color: var(--red);
}

/* sidebar newsletter form imitates footer form */
.aside-news .f-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.aside-news .f-form input {
    flex: 1;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    min-width: 0;
}
.aside-news .f-form input:focus {
    outline: none;
    border-color: var(--red-300);
}
.aside-news .f-form button {
    background: var(--ink);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 11px;
    padding: 0 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.aside-news .f-form button:hover {
    background: var(--red-deep);
}

/* btn-go as anchor tag */
a.btn-go {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--green);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 13px 22px;
    border-radius: 13px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    transition: background .18s, transform .12s;
}
a.btn-go:hover {
    background: var(--green-deep);
    transform: translateY(-1px);
}
a.btn-go--lg {
    padding: 15px 26px;
    font-size: 16px;
    border-radius: 13px;
}

/* aside-cta sbtn as anchor tag */
a.sbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    background: #fff;
    color: var(--red-deep);
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    position: relative;
    text-decoration: none;
}
a.sbtn svg { width: 16px; height: 16px; }
a.sbtn:hover { background: var(--red-50); }

/* relcard link */
.relcard h4 a {
    color: var(--ink);
    text-decoration: none;
}
.relcard h4 a:hover { color: var(--red-deep); }

/* artmeta avatar */
.artmeta .av img,
.artmeta-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------
   SCOREBARS — farvet bar + kategori-tekst
   --------------------------------------------------------- */
/* bar .fill farve sættes via inline style i PHP (width + background) */

/* tekst under en bar */
.bar-text {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.55;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.bar-text:last-child { border-bottom: none; }

/* ---------------------------------------------------------
   VERDICT RING — dynamisk farve via CSS-var
   --------------------------------------------------------- */
.vscore .ring {
    background: conic-gradient(
        var(--ring-color, var(--green)) calc(var(--p, 91) * 1%),
        var(--red-100) 0
    );
}

/* ---------------------------------------------------------
   REVIEW BOTTOM CTA
   --------------------------------------------------------- */
.rev-bottom-cta {
    margin-top: 54px;
    background: linear-gradient(155deg, var(--red) 0%, var(--red-deep) 100%);
    border-radius: var(--r-xl);
    padding: 28px 32px;
    box-shadow: var(--shadow-md);
}
.rbc-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.rbc-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    letter-spacing: -.02em;
}
.rbc-score {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    color: rgba(255,255,255,.9);
}
.rbc-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    color: #fff;
    line-height: 1;
}
.rbc-den { font-size: 14px; color: rgba(255,255,255,.7); }
.rbc-score .dc-stars svg { width: 16px; height: 16px; color: #FFD9E0; }
.rbc-score .dc-star--empty svg { color: rgba(255,255,255,.3); }

/* ---------------------------------------------------------
   NYHEDSBREV FORM — sidebar + single
   --------------------------------------------------------- */
.news-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.news-form input[type="email"] {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    background: var(--cream);
    transition: border-color .16s;
    box-sizing: border-box;
}
.news-form input[type="email"]:focus {
    outline: none;
    border-color: var(--red-300);
    background: #fff;
}
.news-form button {
    width: 100%;
    background: var(--ink);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    padding: 13px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    transition: background .16s;
}
.news-form button:hover { background: var(--red-deep); }
.news-disclaimer {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   RESPONSIV — MOBIL
   --------------------------------------------------------- */
@media (max-width: 1080px) {
    .layout { grid-template-columns: 1fr; gap: 40px; }
    .sidebar { position: static; order: 2; flex-direction: row; flex-wrap: wrap; }
    .sidebar > * { flex: 1; min-width: 240px; }
    .toc { display: none; }
}

@media (max-width: 760px) {
    /* Generelt */
    .crumbs, .layout { padding-left: 20px; padding-right: 20px; }
    .layout { padding-top: 24px; padding-bottom: 48px; }

    /* Review header */
    .rev-head { gap: 16px; }
    .rev-head .logo { width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0; }
    .rev-head .logo svg, .rev-head .logo img { width: 34px; height: 34px; }
    .rev-head h1 { font-size: 28px; }
    .rev-head .tag { font-size: 14px; }
    .rev-head .meta { gap: 10px; }
    .rev-head .updated { font-size: 12px; }

    /* Verdict */
    .verdict { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; gap: 20px; }
    .vscore .ring { width: 120px; height: 120px; }
    .vscore .ring .num { font-size: 36px; }
    .vbody h2 { font-size: 22px; }
    .vbody p { font-size: 15px; }
    .acts { justify-content: center; }
    .btn-go.btn-go--lg, a.btn-go.btn-go--lg { padding: 14px 22px; font-size: 15px; width: 100%; justify-content: center; box-sizing: border-box; }
    .btn-ghost { width: 100%; justify-content: center; box-sizing: border-box; }

    /* Faktaboks */
    .factbox { grid-template-columns: repeat(2, 1fr); }
    .factbox .f:nth-child(even) { border-right: none; }
    .factbox .f:nth-child(n+3) { border-top: 1px solid var(--line); }

    /* Scorebars */
    .bar { grid-template-columns: 130px 1fr 38px; gap: 10px; }
    .bar .bk { font-size: 13.5px; }

    /* Pros/cons */
    .proscons { grid-template-columns: 1fr; }

    /* FAQ */
    .faq summary { font-size: 16px; padding: 16px 18px; }

    /* Bottom CTA */
    .rev-bottom-cta { padding: 22px 20px; border-radius: var(--r-lg); }
    .rbc-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .rbc-inner .btn-go { width: 100%; justify-content: center; box-sizing: border-box; }

    /* Artikel */
    .art-head h1 { font-size: 30px; }
    .art-head .dek { font-size: 17px; }
    .art-hero image-slot, .art-hero img { height: 240px !important; }
    .relgrid { grid-template-columns: 1fr; }
    .authorbox { flex-direction: column; }

    /* Page */
    .page-simple-head h1 { font-size: 28px; }
    .page-dek { font-size: 16px; }

    /* prose */
    .prose h2 { font-size: 24px; }
    .prose h3 { font-size: 19px; }
    .prose p, .prose .lead { font-size: 16px; }

    /* sec-h */
    .sec-h { font-size: 24px; }
}

@media (max-width: 480px) {
    .rev-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .factbox { grid-template-columns: 1fr 1fr; }
    .bar { grid-template-columns: 110px 1fr 34px; gap: 8px; }
    .bar .bk { font-size: 12.5px; }
}

/* ---------------------------------------------------------
   REVIEW SCREENSHOT GALLERI
   --------------------------------------------------------- */
.rev-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 140px;
    gap: 12px;
}
.rev-gallery__item {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1.5px solid var(--line);
    margin: 0;
    position: relative;
}
.rev-gallery__item--lg {
    grid-column: span 2;
    grid-row: span 2;
}
.rev-gallery__item a {
    display: block;
    width: 100%;
    height: 100%;
}
.rev-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .22s;
}
.rev-gallery__item:hover img { transform: scale(1.04); }
.rev-gallery__item figcaption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    color: #fff;
    font-size: 12px;
    padding: 18px 10px 8px;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 760px) {
    .rev-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 120px;
    }
    .rev-gallery__item--lg { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
    .rev-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; }
}

/* ── Extra specificity: prevent .prose from affecting .pc lists ── */
.review-content .pc li,
.prose .pc li {
    position: static;
    padding-left: 0;
}
.review-content .pc li::before,
.prose .pc li::before {
    display: none !important;
    content: none !important;
}

/* ---------------------------------------------------------
   FORFATTER BOX — review + single
   --------------------------------------------------------- */
.review-authorbox {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-sm);
    margin: 36px 0 0;
}
.authorbox__avatar { flex-shrink: 0; }
.authorbox__img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--red-100);
}
.authorbox__body { display: flex; flex-direction: column; gap: 4px; }
.authorbox__eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #C73E54;
}
.authorbox__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
}
.authorbox__name a {
    color: var(--ink) !important;
    text-decoration: none !important;
}
.authorbox__name a:hover { color: #C73E54 !important; }
.authorbox__bio {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 4px 0 0;
}

@media (max-width: 560px) {
    .review-authorbox { flex-direction: column; gap: 14px; }
    .authorbox__img { width: 60px !important; height: 60px !important; }
}

/* ── dc-rev-card badges (type + aldersgruppe) ───────────── */
.dc-rev-card__meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.dc-rev-card__badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: #6B7280;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 2px 9px;
}
/* Top-kort på forsiden */
.dc-rev-card--top {
    border-color: #FAD2DB !important;
    background: linear-gradient(180deg,#FFF4F6 0%,#fff 60%) !important;
}
/* Rang-badge farver for card-ranked */
.dc-rev-card__rank {
    min-width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
}