/* ── Self-hostede fonte (variable, woff2). Erstatter Google Fonts.
   Licens: SIL Open Font License — se assets/fonts/LICENSE-*.txt ── */

/* Space Grotesk — UI og brødtekst */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-display:swap;
  font-weight:300 700;
  src:url(fonts/space-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  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:'Space Grotesk';
  font-style:normal;
  font-display:swap;
  font-weight:300 700;
  src:url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Bricolage Grotesque — display og overskrifter */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2-variations');
  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:'Bricolage Grotesque';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url(fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
:root{
  --bg:#0B0B0C; --panel:#131315; --panel2:#191A1C;
  --ink:#EDE8DD; --mut:#8C8C95; --acc:#C6FF3D; --acc-deep:#0A140A;
  --line:rgba(237,232,221,.12); --line2:rgba(237,232,221,.07);
  --max:1180px;
  /* Fælles puls for heroens bevægelser. Scroll-linjen, ordrotationen,
     typing-prikkerne og markøren er alle multipla af denne, så de
     falder på samme slag i stedet for at drive fra hinanden. */
  --beat:1200ms;
}
body{background:var(--bg);color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;line-height:1.02;letter-spacing:-.03em;font-weight:800}
::selection{background:var(--acc);color:var(--acc-deep)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.acc{color:var(--acc)}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;gap:10px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
/* .btn sætter display:inline-flex, som slår browserens egen regel for
   [hidden] ud. Uden den her blev fx "Scan igen" på /ai-tjek/ vist, selv
   når JS havde sat hidden på den. */
[hidden]{display:none!important}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:var(--acc-deep);padding:15px 26px;border-radius:100px;font-weight:600;font-size:14.5px;border:none;cursor:pointer;transition:box-shadow .35s,background .3s;will-change:transform}
.btn:hover,.btn:focus-visible{box-shadow:0 12px 44px rgba(198,255,61,.28)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--ink);box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:-999px;top:0;z-index:99;background:var(--acc);color:var(--acc-deep);padding:10px 16px;font-weight:600}
.skip:focus{left:0}

/* Custom cursor */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cursor-dot{width:6px;height:6px;background:var(--acc)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(237,232,221,.35);transition:width .25s,height .25s,border-color .25s,background .25s,opacity .3s}
.cursor-ring.big{width:62px;height:62px;border-color:var(--acc);background:rgba(198,255,61,.07)}
.cursor-orb{position:fixed;top:0;left:0;width:300px;height:300px;z-index:9998;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(198,255,61,.16),transparent 62%);opacity:0;transition:opacity .5s;will-change:transform;contain:strict}
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
body.has-cursor .cursor-dot,body.has-cursor .cursor-ring,body.has-cursor .cursor-orb{opacity:1}

/* HEADER */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(11,11,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line2)}
.nav-in{max-width:var(--max);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:"Bricolage Grotesque";font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo span{color:var(--acc)}
.nav-links{display:flex;gap:28px;font-size:14.5px;color:var(--mut)}
.nav-links a{transition:color .25s}.nav-links a:hover{color:var(--ink)}
.nav-cta{font-size:14px;padding:11px 20px}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:22px;height:2px;background:var(--ink);display:block}

/* ——— Kapitel-rail (rød tråd i venstre side) ——— */
.railnav{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:15px;opacity:0;pointer-events:none;transition:opacity .6s}
.railnav.on{opacity:1;pointer-events:auto}
.railnav a{display:flex;align-items:center;gap:11px;color:var(--mut);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-family:"Bricolage Grotesque";font-weight:600}
.railnav .dot{width:7px;height:7px;border-radius:50%;background:rgba(237,232,221,.22);transition:.35s cubic-bezier(.2,.8,.2,1);flex:none}
.railnav .lbl{opacity:0;transform:translateX(-8px);transition:.35s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.railnav a:hover .dot{background:rgba(237,232,221,.6)}
.railnav a:hover .lbl{opacity:.75;transform:none}
.railnav a.active .dot{background:var(--acc);box-shadow:0 0 12px rgba(198,255,61,.7);transform:scale(1.35)}
.railnav a.active .lbl{opacity:1;transform:none;color:var(--ink)}
@media(max-width:1340px){.railnav{display:none}}

/* ——— Scroll-invitation ——— */
/* Kant-fade: indhold toner ud mod skærmens kanter, så næste kapitel ikke kan skimtes */
.edgefade{position:fixed;left:0;right:0;z-index:20;pointer-events:none}
.edgefade.top{top:0;height:12vh;background:linear-gradient(180deg,var(--bg) 22%,rgba(11,11,12,0))}
.edgefade.bot{bottom:0;height:19vh;background:linear-gradient(0deg,var(--bg) 26%,rgba(11,11,12,0))}
@media(max-width:900px){.edgefade.top{height:9vh}.edgefade.bot{height:14vh}}

.scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--mut);font-size:10px;letter-spacing:.26em;text-transform:uppercase;z-index:25;transition:opacity .6s;pointer-events:none}
.scrollcue .track{width:1px;height:48px;background:rgba(237,232,221,.13);position:relative;overflow:hidden}
.scrollcue .track i{position:absolute;top:0;left:0;width:1px;height:48px;background:linear-gradient(180deg,transparent,var(--acc));animation:cue calc(var(--beat)*2) cubic-bezier(.45,0,.25,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.scrollcue.hide{opacity:0}

/* HERO — fylder præcis første skærmbillede */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:104px 0 118px;overflow:hidden}
.hero>.wrap{width:100%}
/* Lave skærme: hold hero inden for første skærmbillede */
@media(min-width:901px) and (max-height:820px){
  .hero{padding:88px 0 96px}
  .hero h1{font-size:clamp(32px,3.9vw,50px)}
  .hero .sub{margin-top:20px;font-size:16.5px}
  .hero .cta{margin-top:26px}
  .hero .trust{margin-top:22px}
  .aicard-body{padding:16px}
  .msg{margin-bottom:14px}
}
.hero-glow{position:absolute;top:-8%;right:-6%;width:62vw;max-width:800px;height:62vw;max-height:800px;background:radial-gradient(circle at 50% 45%,rgba(198,255,61,.17),transparent 62%);pointer-events:none;z-index:0;will-change:transform}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,4.8vw,62px);margin:22px 0 0}
.rot{display:inline-block;overflow:hidden;vertical-align:bottom;height:1.18em;white-space:nowrap}
.rot .rw{display:block;color:var(--acc);line-height:1.18em}
.hero .sub{margin-top:26px;max-width:45ch;font-size:18px;color:#C3BEB2}
.hero .cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .cta-note{margin-top:14px;font-size:13px;color:var(--mut)}
/* Vilkaarene paa en enkelt linje med tynde skillestreger. Hverken
   loese stumper der braekker ujaevnt eller et helt gitter — tre
   selvforklarende punkter, der fylder en linje. */
.hero .trust{margin-top:26px;display:flex;align-items:center;
  list-style:none;padding:0;color:#B7B2A7;font-size:13px}
.hero .trust li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.hero .trust li+li,.hero .trust span+span{margin-left:18px;padding-left:18px;border-left:1px solid var(--line2)}
.hero .trust b{color:var(--ink);font-weight:600}
.hero .trust a{display:flex;align-items:center;gap:7px;color:inherit;
  text-decoration:none;transition:color .3s}
.hero .trust a:hover{color:var(--ink)}
.hero .trust a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
.hero .trust .gmark{width:15px;height:15px;flex:none;display:block}
/* Mobil-hero-elementer — skjult på desktop, vises i @media(max-width:768px) */
.sub-m{display:none}
.cta-mobile{display:none}

/* AI answer card */
.aicard{background:linear-gradient(180deg,#161618,#0F0F11);border:1px solid var(--line);border-radius:20px;box-shadow:0 34px 90px rgba(0,0,0,.55);overflow:hidden}
.aicard-top{display:flex;align-items:center;gap:9px;color:var(--mut);font-size:12px;padding:15px 20px;border-bottom:1px solid var(--line2);background:rgba(255,255,255,.015)}
.aicard-top .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.aicard-top .model{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mut)}
.aicard-body{padding:20px}
.msg{display:flex;gap:12px;margin-bottom:18px}
.msg .av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600}
.msg.user .av{background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
.msg.ai .av{background:var(--acc);color:var(--acc-deep);font-family:"Bricolage Grotesque";font-weight:800;font-size:15px}
.msg .bubble{font-size:14.5px;padding-top:3px}
.msg.user .bubble{color:#C3BEB2}
.msg.ai .bubble{color:var(--ink)}
.msg.ai .bubble b{color:var(--acc);font-weight:600}
.ai-list{list-style:none;margin:12px 0 4px}
.ai-list li{display:flex;gap:9px;padding:4px 0;font-size:14px;color:#CFCABF}
.ai-list li:before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--acc);margin-top:8px}
.src{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:11.5px;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:5px 11px}
.src b{color:var(--ink);font-weight:500}
.typing{display:inline-flex;gap:4px;padding:6px 0}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:tp var(--beat) infinite}
.typing span:nth-child(2){animation-delay:calc(var(--beat)/8)}.typing span:nth-child(3){animation-delay:calc(var(--beat)/4)}
@keyframes tp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cursor-blink{display:inline-block;width:7px;height:15px;background:var(--acc);margin-left:2px;vertical-align:-2px;animation:blink var(--beat) steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.aicard-foot{font-size:11px;color:var(--mut);padding:12px 20px;border-top:1px solid var(--line2);display:flex;align-items:center;gap:7px}

/* SECTIONS — rytme, adskillelse og fokus */
.sec{position:relative;padding:132px 0;transition:opacity .7s ease}
.sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1080px,84%);height:1px;background:linear-gradient(90deg,transparent,rgba(237,232,221,.13),transparent)}
.sec.dim{opacity:.22}
/* Sektionshoveder staar centreret. Foer klaebede de til venstre kant med
   en tom hoejrehalvdel ved siden af; nu baerer de midten af kolonnen. */
.sec-head{max-width:680px;margin:0 auto 56px;text-align:center}
.sec-head .sec-lead,.sec-head p{margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(32px,4.6vw,52px);margin:16px 0 0}
.sec-head p{margin-top:18px;color:#B7B2A7;font-size:17px}
.reveal{opacity:0;transform:translate3d(0,30px,0);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translate3d(0,0,0)}

/* YDELSER */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
/* Ulige antal kort: det sidste fylder begge spalter, saa der ikke staar
   et enligt kort med en tom halvdel ved siden af. */
.services>.svc:last-child:nth-child(odd){grid-column:1/-1}
.svc{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;transition:border-color .35s,transform .35s,background .35s}
.svc:hover{border-color:rgba(198,255,61,.38);transform:translateY(-4px);background:#151517}
.svc .num{font-family:"Bricolage Grotesque";font-weight:700;color:var(--acc);font-size:14px}
.svc h3{font-size:24px;margin:14px 0 10px;letter-spacing:-.02em}
.svc p{color:#B7B2A7;font-size:15px}
.svc .tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.svc .tags span{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:5px 12px}

/* CASE */
.case{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:44px}
.case .k{font-size:13px;color:var(--acc);letter-spacing:.05em}
.case h3{font-size:34px;margin:12px 0 16px}
.case p{color:#B7B2A7;font-size:16px}
.case .feats{margin:22px 0;display:flex;flex-direction:column;gap:12px}
.case .feats div{display:flex;gap:12px;align-items:center;font-size:15px}
.case .feats .ic{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(198,255,61,.1);display:grid;place-items:center;color:var(--acc)}
.case-visual{aspect-ratio:4/3;border-radius:16px;background:radial-gradient(120% 120% at 20% 10%,#1c1d20,#0d0d0f);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:34px;gap:14px}
.mini-calc{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px}
.mini-calc .row{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);padding:6px 0}
.mini-calc .row b{color:var(--ink);font-weight:500}
.mini-bar{height:8px;border-radius:100px;background:var(--panel2);overflow:hidden;margin-top:6px}
.mini-bar i{display:block;height:100%;width:68%;background:var(--acc);border-radius:100px}
.mini-out{font-family:"Bricolage Grotesque";font-weight:800;font-size:26px;color:var(--acc);margin-top:6px}

/* PROCES */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{border-top:2px solid var(--line);padding-top:22px}
.step .n{font-family:"Bricolage Grotesque";font-weight:800;font-size:44px;color:var(--acc);letter-spacing:-.04em}
.step h3{font-size:20px;margin:8px 0 10px}
.step p{color:#B7B2A7;font-size:14.5px}
.step .time{margin-top:14px;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:5px 12px;display:inline-block}

/* OM */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.about-photo{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:linear-gradient(160deg,#1a1b1e,#0e0e10)}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-photo .fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--mut)}
.about-photo .fallback .init{font-family:"Bricolage Grotesque";font-weight:800;font-size:60px;color:var(--acc)}
.about-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(0deg,rgba(8,8,10,.85),transparent);font-size:13px;color:#C9C4B9}
.about-txt h2{font-size:clamp(30px,4.4vw,46px)}
.about-txt p{color:#B7B2A7;font-size:16.5px;margin-top:18px}
.about-txt .hl{color:var(--ink)}
.about-chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.about-chips span{font-size:12.5px;color:#C9C4B9;border:1px solid var(--line);border-radius:100px;padding:6px 13px}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:0;color:var(--ink);text-align:left;padding:24px 44px 24px 0;font-size:18px;font-family:"Bricolage Grotesque";font-weight:600;letter-spacing:-.01em;cursor:pointer;position:relative}
.qa button:after{content:"+";position:absolute;right:4px;top:22px;font-size:26px;color:var(--acc);font-family:"Space Grotesk";transition:transform .3s}
.qa.open button:after{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .4s ease;color:#B7B2A7;font-size:15.5px}
.qa .a p{padding-bottom:24px}

/* KONTAKT */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.contact h2{font-size:clamp(32px,4.6vw,52px)}
.contact .lead{color:#B7B2A7;margin-top:18px;font-size:17px}
.contact .direct{margin-top:28px;font-size:15px}
.contact .direct a{color:var(--acc);border-bottom:1px solid var(--line)}
form{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:34px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--mut);margin-bottom:7px}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:13px 15px;color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .25s}
.field input:focus,.field textarea:focus{border-color:var(--acc);outline:none}
.field textarea{resize:vertical;min-height:110px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mut);margin:6px 0 20px}
.consent input{flex:none;margin-top:3px;accent-color:var(--acc)}
.consent span{flex:1;line-height:1.5}
form .btn{width:100%;justify-content:center}
.form-note{font-size:12px;color:var(--mut);text-align:center;margin-top:14px}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand .logo{font-size:24px}
.foot-brand p{color:var(--mut);font-size:14px;margin-top:14px;max-width:34ch}
.foot-col h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.foot-col a{display:block;color:#C9C4B9;font-size:14.5px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--acc)}
.foot-bot{max-width:var(--max);margin:44px auto 0;padding:22px 28px 0;border-top:1px solid var(--line2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--mut);font-size:13px}
.foot-bot a{color:var(--mut);border-bottom:1px solid var(--line2);transition:color .2s}
.foot-bot a:hover{color:var(--ink)}

/* Lovtekst / prosasider */
.legal{max-width:760px;margin:0 auto;padding:150px 28px 90px}
.legal h1{font-size:clamp(34px,5vw,50px)}
.legal .updated{color:var(--mut);font-size:14px;margin:12px 0 36px}
.legal h2{font-size:22px;margin:38px 0 12px}
.legal p{color:#B7B2A7;font-size:16px;margin-bottom:14px}
.legal ul{color:#B7B2A7;font-size:16px;margin:0 0 16px 22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--acc);border-bottom:1px solid var(--line)}
.legal strong{color:var(--ink);font-weight:500}

/* Blog-oversigt */
.blogwrap{max-width:900px;margin:0 auto;padding:140px 28px 40px}
.blog-hero{max-width:680px;margin-bottom:48px}
.blog-hero h1{font-size:clamp(38px,6vw,64px);line-height:1.02}
.blog-hero p{color:#B7B2A7;font-size:18px;margin-top:18px}
.bloglist{display:grid;gap:18px;padding-bottom:90px}
.postcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;transition:border-color .3s,transform .3s,background .3s}
.postcard:hover{border-color:rgba(198,255,61,.38);transform:translateY(-3px);background:#151517}
.postcard .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.postcard h2{font-size:clamp(23px,3vw,30px);margin:12px 0 10px;letter-spacing:-.02em}
.postcard p{color:#B7B2A7;font-size:15.5px}
.postcard .more{display:inline-block;margin-top:16px;color:var(--ink);font-size:14px;border-bottom:1px solid var(--acc);padding-bottom:2px}
.postcard .rt{color:var(--mut);font-size:13px;margin-left:10px}

/* Artikel */
.post{max-width:740px;margin:0 auto;padding:130px 28px 70px}
.post .breadcrumb{font-size:13px;color:var(--mut);margin-bottom:22px}
.post .breadcrumb a{color:var(--mut);border-bottom:1px solid var(--line2)}
.post .breadcrumb a:hover{color:var(--ink)}
.post .kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.post h1{font-size:clamp(32px,5vw,52px);line-height:1.05;margin:14px 0 12px;letter-spacing:-.03em}
.post .meta{color:var(--mut);font-size:14px;margin-bottom:26px}
.post .lead{font-size:20px;color:#CFCABF;line-height:1.6;margin:0 0 10px}
.post h2{font-size:clamp(24px,3.2vw,30px);margin:46px 0 14px;letter-spacing:-.02em}
.post h3{font-size:20px;margin:30px 0 10px}
.post p{color:#C3BEB2;font-size:17px;line-height:1.78;margin-bottom:18px}
.post ul,.post ol{color:#C3BEB2;font-size:17px;line-height:1.7;margin:0 0 20px 24px}
.post li{margin-bottom:10px}
.post li::marker{color:var(--acc)}
.post a{color:var(--acc);border-bottom:1px solid var(--line)}
.post strong{color:var(--ink);font-weight:600}
.post .callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:22px 24px;margin:28px 0}
.post .callout .callout-t{font-family:"Bricolage Grotesque";font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.post .callout p:last-child{margin-bottom:0}
.post blockquote{border-left:3px solid var(--line);padding-left:22px;margin:26px 0;color:#DAD5CA;font-size:19px;font-style:italic}
.post figure{margin:26px 0}
.post .sources{margin-top:48px;border-top:1px solid var(--line);padding-top:26px}
.post .sources h2{font-size:13px;font-weight:700;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:14px;font-family:"Bricolage Grotesque"}
.post .sources ol{font-size:13.5px;color:var(--mut);margin-left:20px}
.post .sources a{color:var(--mut);word-break:break-word}
.post-cta{margin-top:48px;background:linear-gradient(180deg,var(--panel),#0E0E10);border:1px solid var(--line);border-radius:20px;padding:34px;text-align:center}
.post-cta h3{font-size:24px;margin-bottom:10px}
.post-cta p{color:#B7B2A7;font-size:15.5px;margin-bottom:22px}

/* ——— Kapitel-system (rød tråd) ——— */
.chapter{display:inline-flex;align-items:center;gap:13px;font-family:"Bricolage Grotesque";font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.chapter b{color:var(--acc);font-weight:800;font-size:12.5px}
.chapter .rail{width:40px;height:1px;background:linear-gradient(90deg,var(--acc),transparent);opacity:.6}
.sec-head p strong,.about-txt p strong{color:var(--ink);font-weight:600}
/* Ogsaa de loese brodtekstblokke uden for et sektionshoved skal staa
   midt i spalten. Langhaand, saa en inline margin-top overlever. */
.sec-lead{max-width:660px;color:#B7B2A7;font-size:17px;margin-top:18px;margin-left:auto;margin-right:auto}
.sec-lead strong{color:var(--ink);font-weight:600}

/* Problem-sektion */
.shift{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.shift-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px}
.shift-card .t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.shift-card h3{font-size:21px;margin-bottom:10px;letter-spacing:-.02em}
.shift-card p{color:#B7B2A7;font-size:15px}
.shift-card.now{border-color:rgba(198,255,61,.32)}
.shift-card.now .t{color:var(--acc)}

/* ——— Case: browser-ramme + virkende beregner ——— */
.casegrid{display:grid;grid-template-columns:1fr 1.12fr;gap:44px;align-items:start}
.browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0E0E10;box-shadow:0 28px 70px rgba(0,0,0,.45)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#151517;border-bottom:1px solid var(--line2)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#2b2c30;display:block;flex:none}
.browser-bar .url{margin-left:8px;font-size:11.5px;color:var(--mut);background:var(--bg);border:1px solid var(--line2);border-radius:100px;padding:4px 12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-body{padding:24px}
.calcdemo .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--mut);margin-bottom:7px}
.calcdemo .row b{color:var(--ink);font-weight:600;font-size:15px}
.calcdemo input[type=range]{width:100%;accent-color:var(--acc);margin-bottom:20px;cursor:pointer}
.calcdemo .result{border-top:1px solid var(--line2);margin-top:6px;padding-top:18px;display:flex;justify-content:space-between;align-items:flex-end}
.calcdemo .result span{font-size:13px;color:var(--mut)}
.calcdemo .result .big{font-family:"Bricolage Grotesque";font-weight:800;font-size:32px;color:var(--acc);letter-spacing:-.02em;line-height:1}
.demo-note{margin-top:14px;font-size:12px;color:var(--mut);display:flex;align-items:center;gap:7px}
.case-points{display:flex;flex-direction:column;gap:18px;margin:26px 0}
.case-point{display:flex;gap:14px}
.case-point .ic{flex:none;width:36px;height:36px;border-radius:10px;background:rgba(198,255,61,.1);display:grid;place-items:center;color:var(--acc)}
.case-point b{display:block;color:var(--ink);font-size:15.5px;font-weight:600;margin-bottom:3px}
.case-point p{color:#B7B2A7;font-size:14.5px;margin:0}
.case-meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.case-meta span{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:5px 12px}
/* Indgang fra forsidens case-katalog til den fulde case-side */
.kat-more{display:inline-block;margin-top:4px;font-size:13.5px;color:var(--acc);border-bottom:1px solid rgba(198,255,61,.3);padding-bottom:2px;transition:border-color .25s}
.kat-more:hover,.kat-more:focus-visible{border-color:var(--acc)}

/* ——— Kvitteringsside (fuld skærm, ingen scroll) ——— */
html.noscroll,body.noscroll{height:100%;overflow:hidden}
.thanks{height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.thanks-card{max-width:540px;width:100%}
.thanks-logo{font-family:"Bricolage Grotesque";font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:30px;display:inline-block}
.thanks-logo span{color:var(--acc)}
.thanks-mark{width:60px;height:60px;border-radius:50%;background:rgba(198,255,61,.12);border:1px solid rgba(198,255,61,.4);display:grid;place-items:center;margin:0 auto 22px;color:var(--acc)}
.thanks h1{font-size:clamp(28px,4.6vw,42px);margin-bottom:14px}
.thanks p{color:#B7B2A7;font-size:16px;margin-bottom:12px}
.thanks .next{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:24px 0;text-align:left}
.thanks .next h2{font-family:"Bricolage Grotesque";font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:11px}
.thanks .next ol{margin-left:18px;color:#B7B2A7;font-size:14.5px;line-height:1.5}
.thanks .next li{margin-bottom:7px}
.thanks .next li::marker{color:var(--acc)}
.thanks .actions{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-height:700px){
  .thanks-logo{margin-bottom:18px}
  .thanks-mark{width:48px;height:48px;margin-bottom:16px}
  .thanks h1{font-size:26px;margin-bottom:10px}
  .thanks p{font-size:14.5px;margin-bottom:8px}
  .thanks .next{padding:16px 18px;margin:18px 0}
  .thanks .next ol{font-size:13.5px}
  .thanks .actions{margin-top:18px}
}

/* ——— Case: rigtigt skærmbillede ——— */
.shot{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0E0E10;box-shadow:0 28px 70px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.shot:hover{transform:translateY(-4px);border-color:rgba(198,255,61,.35)}
.shot-img{position:relative;aspect-ratio:1600/888;background:#101012;overflow:hidden}
.shot-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.shot-fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mut);text-align:center;padding:24px}
.shot-fallback .nm{font-family:"Bricolage Grotesque";font-weight:800;font-size:26px;color:var(--ink)}
.shot-visit{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-top:1px solid var(--line2);font-size:13px;color:var(--mut)}
.shot-visit b{color:var(--acc);font-weight:500}

@media(max-width:900px){
  .shift,.casegrid{grid-template-columns:1fr}
}

@media(max-width:900px){
  .hero-grid,.case,.about,.contact,.config-grid{grid-template-columns:1fr}
  .hero{padding:120px 0 70px}
  .hero .aicard{order:-1}
  .services,.steps,.foot-grid{grid-template-columns:1fr}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .summary{position:static}
  .about-txt{order:-1}
  .about-photo{max-width:340px}
}
@media(max-width:520px){
  .wrap,.nav-in{padding-left:20px;padding-right:20px}
  .sec{padding:72px 0}
  .config,.case,form{padding:26px}
  .row2{grid-template-columns:1fr}
}

.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:none;flex-direction:column;justify-content:center;padding:72px 28px 28px;gap:0;overflow:hidden}
.mobile-menu.open{display:flex}
/* Punkterne maales i skaermhoejde, saa hele menuen altid kan staa paa én
   skaerm uden at der skal scrolles i den — ogsaa paa en lille telefon. */
.mobile-menu a{font-family:"Bricolage Grotesque";font-weight:700;
  font-size:clamp(17px,3.9vh,28px);line-height:1.15;
  padding:clamp(8px,1.45vh,15px) 0;border-bottom:1px solid var(--line2)}
.mobile-menu a:last-child{border-bottom:0}
/* Siden bag menuen maa ikke kunne scrolles, mens den er aabne. */
html:has(.mobile-menu.open),body:has(.mobile-menu.open){overflow:hidden;touch-action:none}
.mobile-menu .close{position:absolute;top:22px;right:24px;background:none;border:0;color:var(--ink);font-size:34px;cursor:pointer}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .sec.dim{opacity:1!important;filter:none!important}
  .cursor-blink,.typing,.scrollcue{display:none}
  .cursor-dot,.cursor-ring{display:none}
}

/* ——— Grafik-kvalitetstrin: reduceret ——— */
/* Aktiveres af assets/perf.js via html[data-tier="reduced"] på svage enheder,
   ved vedvarende lav FPS, ved Save-Data eller prefers-reduced-motion.
   Layoutet er uændret — kun de dyreste render-lag trappes ned.
   Stærke enheder (data-tier="high" eller intet attribut) er fuldstændig urørt. */
html[data-tier="reduced"] header.nav.scrolled{
  -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,11,12,.97)
}
html[data-tier="reduced"] .mobile-menu{
  -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,11,12,.99)
}
html[data-tier="reduced"] .cursor-orb{display:none}
html[data-tier="reduced"] .hero-glow{will-change:auto}
html[data-tier="reduced"] .aicard{box-shadow:0 16px 40px rgba(0,0,0,.5)}
html[data-tier="reduced"] .shot,
html[data-tier="reduced"] .browser{box-shadow:0 14px 34px rgba(0,0,0,.4)}

/* ——— Mobil-hero (≤768px): rolig, type-drevet, én fuld skærm ——— */
/* Separat behandling — desktop-heroen røres ikke. Placeret efter 900px-blokken,
   så den vinder for hero på telefoner. Alt bevæger sig på timer, ikke på scroll. */
@media(max-width:768px){
  .hero{min-height:100svh;padding:76px 0 0;display:flex;align-items:center;overflow:hidden}
  .hero>.wrap{width:100%}
  /* Forsidens hero (.hero-grid) — scopet, så byhero'erne (.hero-solo) er urørte */
  .hero-grid{display:block}                 /* enkelt kolonne, ingen grid */
  .hero-grid .aicard{display:none}          /* type-drevet — intet AI-kort på mobil */
  /* Argumenterne skal staa foer knappen, ikke efter den. */
  .hero-grid>div:first-child{display:flex;flex-direction:column}
  .hero-grid>div:first-child>div:first-child{order:1}
  .hero-grid h1{order:2}
  .hero-grid .sub-m{order:3}
  .hero-grid .trust{order:4}
  .hero-grid .cta{order:5}
  .hero-grid .cta-note{order:6}
  .hero-grid .trust{position:relative;margin:26px 0 0;padding-top:20px;border-top:0;
    flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;line-height:1.25}
  /* Kort regel frem for en streg paa tvaers af hele skaermen. */
  .hero-grid .trust::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;
    background:linear-gradient(90deg,var(--acc),transparent);opacity:.75}
  .hero-grid .trust li+li,.hero-grid .trust span+span{margin-left:0;padding-left:0;border-left:0}
  .hero-grid .cta-note{margin-top:12px;font-size:12.5px}
  .hero-grid .sub{display:none}             /* skjul den lange desktop-sub */
  .hero-grid .sub-m{display:block;margin-top:16px;max-width:32ch;font-size:16.5px;color:#C3BEB2;line-height:1.5}
  .hero-grid .eyebrow{font-size:11px}
  .hero-grid h1{font-size:clamp(37px,10.5vw,54px);margin-top:18px}
  .hero-grid .rot{display:block;height:auto;min-height:1.14em;white-space:normal}
  .hero-grid .rot .rw{white-space:normal;line-height:1.14em}
  .hero-grid .cta{margin-top:30px;flex-direction:column;align-items:stretch;gap:12px}
  .hero-grid .cta .btn{justify-content:center}
  .cta-desktop{display:none}
  .cta-mobile{display:inline-flex}
  /* Scroll-pilen er absolut placeret i bunden af heroen og laa oven paa
     cta-noten paa en telefon. Paa beroering ved alle, at der kan scrolles. */
  .scrollcue{display:none}
  .hero-grid .cta .btn{padding:14px 22px}

  /* Signatur-glimt: selvkørende blød timer-puls (ikke scroll, ikke cursor) */
  .hero-glow{
    top:-14%;right:-22%;width:88vw;height:88vw;
    animation:glowdrift 9s ease-in-out infinite;
  }
}
@keyframes glowdrift{
  0%,100%{opacity:.7;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:1;transform:translate3d(-3%,2%,0) scale(1.07)}
}
/* Reduced motion: frys glimtet til en flot, statisk udgave */
@media(prefers-reduced-motion:reduce){
  .hero-glow{animation:none!important}
}

/* ——— Bysider: centreret, type-drevet hero (samme designsprog) ——— */
.hero-solo{position:relative;z-index:2;text-align:center;max-width:780px;margin:0 auto}
.hero-solo .eyebrow{justify-content:center}
.hero-solo h1{font-size:clamp(38px,6vw,62px);margin:20px 0 0}
.hero-solo .sub{margin:22px auto 0;max-width:54ch;font-size:18px;color:#C3BEB2}
.hero-solo .cta{margin-top:32px;justify-content:center}
.hero-solo .trust{margin-top:26px;justify-content:center}

/* Krydslinks mellem byer */
.citylinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.citylinks a{font-size:14px;color:#C9C4B9;border:1px solid var(--line);border-radius:100px;padding:8px 16px;transition:border-color .25s,color .25s}
.citylinks a:hover,.citylinks a:focus-visible{border-color:var(--acc);color:var(--acc)}

/* Footer: by-band (lokal intern linkning) */
.foot-cities{max-width:var(--max);margin:34px auto 0;padding:26px 28px 0;border-top:1px solid var(--line2);text-align:center}
.foot-cities h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.foot-cities-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px}
.foot-cities-list a{color:#C9C4B9;font-size:14px;transition:color .2s}
.foot-cities-list a:hover{color:var(--acc)}

/* Tre ydelser side om side på bysider */
.services.cols-3{grid-template-columns:repeat(3,1fr)}
.services.cols-3>.svc:last-child:nth-child(odd){grid-column:auto}
@media(max-width:900px){ .services.cols-3{grid-template-columns:1fr} }

@media(max-width:768px){
  .hero-solo h1{font-size:clamp(34px,9vw,48px)}
  .hero-solo .cta{flex-direction:column;align-items:stretch}
  .hero-solo .cta .btn{justify-content:center}
  .hero-solo .trust{display:none}
  /* Om-foto: markant mindre på mobil, uden billedtekst-overlay */
  .about-photo{max-width:170px}
  .about-photo figcaption{display:none}
}

/* ——— Indgang til AI-tjekket fra heroen ——— */
.hero-pill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:#C9C4B9;border:1px solid var(--line);background:rgba(198,255,61,.05);border-radius:100px;padding:7px 15px 7px 12px;margin-bottom:18px;transition:border-color .3s,background .3s,transform .3s}
.hero-pill:hover,.hero-pill:focus-visible{border-color:rgba(198,255,61,.5);background:rgba(198,255,61,.1);transform:translateY(-1px)}
.hero-pill .pdot{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);flex:none}
.hero-pill b{color:var(--acc);font-weight:600}
.hero-pill svg{opacity:.7;transition:transform .3s}
.hero-pill:hover svg{transform:translateX(3px)}
/* Mobil har allerede knappen "Tjek din side gratis" — pillen ville være dobbelt op
   og stjæle plads i den bevidst rolige mobil-hero. */
@media(max-width:768px){.hero-pill{display:none}}


/* Menupunkt til AI-tjekket — samme vægt som de øvrige, med et lille lys */
.nav-tjek{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.nav-tjek i{width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);flex:none}


/* ── Vilkårsstribe under hero ─────────────────────────────── */
/* Lange adresser i broedtekst skal kunne brydes, ellers skubber de
   hele siden ud i bredden paa en telefon. */
.post code{overflow-wrap:anywhere;word-break:break-word}

/* ── Cases: katalog ───────────────────────────
   Tre linjer med et lille billede af hver side. Paa mus foelger et kort
   markoeren med informationen; paa beroering folder raekken sig ud i
   stedet, saa teksten staar der uden en markoer. Teksten ligger i
   koden hele tiden, saa den kan laeses og citeres. */
.kat-rows{border-top:1px solid var(--line2);margin:0;padding:0;list-style:none}
.kat-row{border-bottom:1px solid var(--line2)}
.kat-row>a{display:flex;align-items:center;gap:20px;padding:20px 4px;
  text-decoration:none;color:inherit;
  transition:padding-left .35s cubic-bezier(.2,.8,.2,1),background .35s}
.kat-row>a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.kat-row .thumb{flex:none;width:76px;height:48px;border-radius:7px;overflow:hidden;
  border:1px solid var(--line);background:#0E0E10;
  transition:border-color .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.kat-row .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.kat-row .txt{min-width:0;flex:1}
.kat-row .nm{font-family:"Bricolage Grotesque";font-weight:800;letter-spacing:-.035em;
  font-size:clamp(24px,3.3vw,38px);line-height:1.05;color:#9B968B;
  transition:color .35s;display:block}
.kat-row .kind{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);display:block;margin-top:5px;transition:color .35s}
.kat-row .go{flex:none;color:var(--mut);font-size:13px;opacity:0;
  transform:translateX(-6px);transition:opacity .35s,transform .35s,color .35s}
.kat-row.on>a{padding-left:16px;background:rgba(237,232,221,.022)}
.kat-row.on .nm{color:var(--ink)}
.kat-row.on .kind{color:var(--acc)}
.kat-row.on .thumb{border-color:rgba(198,255,61,.45);transform:scale(1.04)}
.kat-row.on .go{opacity:1;transform:none;color:var(--acc)}

.kat-card{position:fixed;top:0;left:0;width:330px;z-index:40;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate3d(0,0,0) scale(.97);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1);
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.kat-card.show{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1)}
.kat-card .pic{aspect-ratio:1600/888;background:#101012}
.kat-card .pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.kat-card .in{padding:15px 16px 17px}
.kat-card p{margin:0;font-size:13.5px;line-height:1.55;color:#B7B2A7}

/* De to kundeudtalelser staar under indekset, saa de er synlige
   uden at man skal hen over en raekke. */
.kat-proof{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
@media(max-width:760px){.kat-proof{grid-template-columns:1fr;gap:12px;margin-top:26px}}
.voice{margin:0;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.voice-av{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(198,255,61,.1);border:1px solid rgba(198,255,61,.4);color:var(--acc);font:700 13px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.02em}
.voice-body{min-width:0}
.voice blockquote{margin:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:500;font-size:16.5px;line-height:1.4;color:var(--ink)}
.voice blockquote:before{content:"\201C"}
.voice blockquote:after{content:"\201D"}
.voice figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin-top:9px;font-size:12.5px}
.voice .who{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600}
.voice-ok{color:var(--acc);flex:none}
.voice .role{color:var(--mut)}
.voice-link{color:var(--acc);border-bottom:1px solid rgba(198,255,61,.3)}
.voice-link:hover,.voice-link:focus-visible{border-color:var(--acc)}

.kat-fold{display:none}
.kat-fold .panel{padding:0 4px 22px;display:flex;flex-direction:column;gap:14px}
.kat-fold .panel .pic{aspect-ratio:1600/888;background:#101012;
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.kat-fold .panel .pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.kat-fold .panel p{margin:0;font-size:14.5px;color:#B7B2A7;line-height:1.55}
.kat-fold .case-meta{margin:0}
.kat-fold .case-proof{margin:0}

@media(hover:none),(pointer:coarse){
  .kat-card{display:none}
  .kat-fold{display:block}
  .kat-row .go{opacity:1;transform:none}
}
html[data-tier="reduced"] .kat-card{display:none}
@media(max-width:560px){
  .kat-row>a{gap:14px;padding:16px 2px}
  .kat-row .thumb{width:58px;height:38px}
}

/* Ydelsesvalg i kontaktformularen. Afloeser konfigurator-sektionen,
   der gentog ydelserne og aabnede en konkurrerende vej til tilbud. */
.ydelsesvalg{border:0;padding:0;margin:0}
.ydelsesvalg legend{padding:0;margin-bottom:10px;font-size:13.5px;color:var(--ink)}
.ydelsesvalg .valgfri{color:var(--mut)}
.ydelsesvalg .valg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ydelsesvalg .valg label{display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  font-size:13.5px;color:#B7B2A7;transition:border-color .25s,color .25s,background .25s}
.ydelsesvalg .valg label:hover{border-color:rgba(237,232,221,.26);color:var(--ink)}
.ydelsesvalg .valg input{accent-color:var(--acc);width:15px;height:15px;flex:none;margin:0}
.ydelsesvalg .valg input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ydelsesvalg .valg label:has(input:checked){border-color:rgba(198,255,61,.45);
  color:var(--ink);background:rgba(198,255,61,.05)}
@media(max-width:560px){.ydelsesvalg .valg{grid-template-columns:1fr}}

/* CVR-linje i kontakt */
.direct.biz{margin-top:8px;font-size:13.5px;color:var(--mut)}


/* ── Priser ───────────────────────────────────────────────── */
/* To pakker, to kolonner. Gitteret stod paa tre og efterlod en tom
   tredjedel til hoejre, saa blokken haengte i venstre side. */
.pris{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch;
  max-width:840px;margin:0 auto}
.pris-card{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:30px 26px 26px;min-width:0}
.pris-card.fremhaevet{background:var(--panel2);border-color:rgba(198,255,61,.38);
  box-shadow:0 26px 64px rgba(0,0,0,.5)}
.pris-badge{position:absolute;top:-11px;left:26px;background:var(--acc);color:var(--acc-deep);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px}
.pris-top{min-height:96px}
.pris-card h3{font-family:"Bricolage Grotesque";font-weight:700;font-size:22px;
  letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.pris-who{color:var(--mut);font-size:14px;line-height:1.5;margin:0}
.pris-tal{display:flex;align-items:baseline;gap:7px;margin:6px 0 22px;
  padding-bottom:22px;border-bottom:1px solid var(--line2)}
.pris-tal b{font-family:"Bricolage Grotesque";font-weight:800;font-size:40px;letter-spacing:-.035em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.pris-tal span{color:var(--mut);font-size:15px}
.pris-tal .fra{font-size:14px;align-self:center}
.pris-card.fremhaevet .pris-tal b{color:var(--acc)}
.pris-liste{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.pris-liste li{position:relative;padding-left:24px;color:#B7B2A7;font-size:14.5px;line-height:1.5}
.pris-liste li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.pris-card .pris-cta{width:100%;justify-content:center;text-align:center}
.pris-note{margin:34px auto 0;max-width:62ch;color:var(--mut);font-size:14px;line-height:1.65;display:flex;flex-direction:column;gap:12px}
.pris-note p{margin:0}
.pris-note strong{color:var(--ink);font-weight:600}
.pris-note a{color:var(--acc)}
@media(max-width:900px){
  .pris-top{min-height:0}
  .pris-card{padding:28px 22px 24px}
}

/* Pakkerne staar side om side hele vejen ned. De bliver smalle paa en
   telefon, men to kolonner er det eneste, der lader laeseren sammenligne
   uden at scrolle frem og tilbage. Alt indeni skaleres med. */
@media(max-width:720px){
  .pris{grid-template-columns:repeat(2,1fr);gap:10px;max-width:none}
  .pris-card{padding:22px 13px 16px;border-radius:14px}
  .pris-badge{top:-9px;left:10px;right:10px;font-size:8.5px;letter-spacing:.05em;
    padding:3px 7px;text-align:center}
  .pris-card h3{font-size:15px;margin-bottom:5px}
  .pris-who{font-size:11.5px;line-height:1.4}
  .pris-tal{flex-wrap:wrap;gap:3px;margin:6px 0 14px;padding-bottom:14px}
  .pris-tal b{font-size:25px}
  .pris-tal span,.pris-tal .fra{font-size:11px}
  .pris-liste{gap:8px;margin-bottom:16px}
  .pris-liste li{font-size:11.5px;line-height:1.4;padding-left:16px}
  .pris-liste li::before{width:9px;height:5px;border-left-width:1.5px;border-bottom-width:1.5px}
  .pris-card .pris-cta{font-size:12px;padding:11px 6px}
}
@media(max-width:380px){
  .pris{gap:8px}
  .pris-card{padding:20px 10px 14px}
  .pris-badge{font-size:8px;padding:3px 5px;left:7px;right:7px}
  .pris-card h3{font-size:13.5px}
  .pris-tal b{font-size:22px}
  .pris-liste li{font-size:11px;padding-left:15px}
  .pris-card .pris-cta{font-size:11.5px}
}


/* Footeren skal ligge over .edgefade.bot, som ellers laegger en fast
   gradient hen over de nederste 19vh - det gjorde CVR-linjen usynlig
   paa forsiden, hvor edgefade findes. */
footer{position:relative;z-index:26;background:var(--bg)}


/* ── Datagrafik i blogindlæg ──────────────────────────────── */
.post .graf{margin:36px 0 32px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 22px 18px}
.post .graf svg{width:100%;height:auto;display:block;overflow:visible}
.post .graf .graf-h{color:var(--ink);font-family:"Bricolage Grotesque";font-weight:700;font-size:16px;line-height:1.35;margin:0 0 5px;letter-spacing:-.01em}
.post .graf .graf-sub{color:var(--mut);font-size:13.5px;line-height:1.5;margin:0 0 20px}
.post .graf figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--line2);color:var(--mut);font-size:12.5px;line-height:1.6}
.post .graf rect.bar{transition:opacity .2s}
.post .graf g.b:hover rect.bar{opacity:.8;cursor:default}
@media(max-width:560px){.post .graf{padding:20px 16px 14px}.post .graf .graf-sub{margin-bottom:14px}}


/* Blogindlæg farver alle links acidgrønne. Det ramte ogsaa .btn, saa
   knapteksten blev acidgroen paa acidgroen baggrund og forsvandt. */
.post .btn{color:var(--acc-deep);border-bottom:none}
.post .btn-ghost{color:var(--ink)}
.post .mobile-menu a{color:var(--ink);border-bottom:none}
.post-cta .btn{color:var(--acc-deep)}


/* ── Byfoto-bånd ──────────────────────────────────────────── */
.byband{position:relative;margin:0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byband img{display:block;width:100%;height:clamp(150px,26vw,300px);object-fit:cover;object-position:center 42%}
.byband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,.42),rgba(11,11,12,0) 38%,rgba(11,11,12,0) 58%,rgba(11,11,12,.72))}
.byband figcaption{position:absolute;right:14px;bottom:10px;z-index:2;color:var(--mut);font-size:11px;opacity:.75}
@media(max-width:560px){.byband figcaption{font-size:10px;right:10px}}


/* ── AI-kortet i heroen: entitetskort, indledning og afrunding ──────
   Svaret er bygget som et rigtigt AI-svar frem for en faktaopremsning.
   Navnet står i sit eget kort, så det fremhæves roligt i stedet for med
   grøn fed midt i en sætning. Kroppen har fast minimumshøjde, så kortet
   ikke hopper, når der skiftes mellem tre svar af forskellig længde.   */
.aicard-body{min-height:404px;transition:opacity .38s ease}
.aicard-body.swap{opacity:0}
.msg.user .av svg{width:15px;height:15px}
.msg.ai .bubble .ai-p{font-size:14px;line-height:1.6;color:#CFCABF;margin:0}
.msg.ai .bubble .ai-outro{margin-top:13px}
.ai-entity{display:flex;align-items:center;gap:11px;margin:14px 0 2px;padding:10px 13px;
  border:1px solid rgba(198,255,61,.22);border-radius:12px;background:rgba(198,255,61,.05)}
.ai-mark{flex:none;width:26px;height:26px;border-radius:7px;background:var(--acc);color:var(--acc-deep);
  display:grid;place-items:center;font-family:"Bricolage Grotesque";font-weight:800;font-size:15px;line-height:1}
.ai-ent{display:flex;flex-direction:column;gap:1px;min-width:0}
.msg.ai .bubble .ai-ent b{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ai-ent small{font-size:11.5px;color:var(--mut)}
@media(max-height:820px) and (min-width:901px){.aicard-body{min-height:0}}

/* ── Bevis i case-kortene: kundecitat og hårde tal ──────────────────
   Citatet er en rigtig udtalelse fra en rigtig kunde. Tallene kommer fra
   Search Console. Intet af det må erstattes med noget opdigtet.        */
.case-proof{margin:24px 0 0;border-left:2px solid var(--acc);padding:3px 0 3px 18px}
.case-proof blockquote{font-family:"Bricolage Grotesque";font-weight:500;font-size:17.5px;
  line-height:1.45;letter-spacing:-.015em;color:var(--ink)}
.case-proof blockquote:before{content:"\201C"}
.case-proof blockquote:after{content:"\201D"}
.case-proof figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:11px;font-size:12.5px}
.case-proof .who{color:var(--ink);font-weight:600}
.case-proof .role{color:var(--mut)}
.case-stats{display:flex;gap:34px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line2)}
.case-stats div{display:flex;flex-direction:column;gap:5px}
.case-stats b{font-family:"Bricolage Grotesque";font-weight:700;font-size:27px;line-height:1;
  letter-spacing:-.025em;color:var(--acc)}
.case-stats span{font-size:12.5px;line-height:1.4;color:var(--mut);max-width:160px}
@media(max-width:560px){.case-stats{gap:24px}.case-proof blockquote{font-size:16px}}

/* ── Samarbejdspartnere ────────────────────────────────────────────
   Slankt bånd. Holder 1–3 partnere uden at se tyndt ud ved kun én.    */
.partners{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(237,232,221,.012)}
.partners-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:40px;align-items:center;padding:40px 0}
.partners-lead p{color:var(--mut);font-size:14.5px;line-height:1.6;margin-top:10px;max-width:34ch}
.partner-list{display:flex;flex-wrap:wrap;gap:16px}
.partner{display:flex;align-items:center;gap:15px;flex:1 1 280px;min-width:0;padding:17px 19px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
a.partner:hover{border-color:rgba(198,255,61,.35);transform:translateY(-3px)}
.partner-mark{flex:none;width:42px;height:42px;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;
  font-family:"Bricolage Grotesque";font-weight:800;font-size:16px;color:var(--ink)}
.partner-mark img{width:100%;height:100%;object-fit:contain;padding:5px}
.partner-txt{min-width:0}
.partner-txt b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.partner-txt span{display:block;font-size:13px;color:var(--mut);line-height:1.5;margin-top:2px}
@media(max-width:900px){.partners-in{grid-template-columns:1fr;gap:26px;padding:34px 0}
  .partners-lead p{max-width:none}}


/* ── By-sider: lokal case og kortpakke-fakta ───────────────────────── */
.lokalcase{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}
.lokalcase p{color:#B7B2A7;font-size:15.5px;line-height:1.62;margin:0 0 12px}
.lokalcase .shot{margin:0}
.lokalcase h3{font-family:"Bricolage Grotesque";font-weight:700;font-size:clamp(23px,2.3vw,29px);
  letter-spacing:-.025em;margin:0 0 14px;color:var(--ink)}
.lokalcase + .lokalcase{margin-top:76px;padding-top:72px;border-top:1px solid var(--line2)}
.kortfakta{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.kortfakta div{padding:22px 22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.kortfakta b{display:block;font-family:"Bricolage Grotesque";font-weight:800;font-size:13px;
  letter-spacing:.14em;color:var(--acc);margin-bottom:11px}
.kortfakta span{display:block;font-size:14.5px;line-height:1.6;color:#B7B2A7}
@media(max-width:900px){
  .lokalcase{grid-template-columns:1fr;gap:28px}
  .lokalcase + .lokalcase{margin-top:48px;padding-top:44px}
  .kortfakta{grid-template-columns:1fr;gap:16px}
}


/* ── Om mig: lille byline frem for plakatportraet ───────────────────
   Fotoet fyldte foer en hel gridkolonne (~445x590 px). Nu er det en
   lille rund avatar ved siden af navnet, og teksten baerer sektionen. */
.about{display:block}
.about-byline{display:flex;align-items:center;gap:15px;margin:0 auto 30px;max-width:70ch}
.about-photo{flex:none;width:80px;height:80px;aspect-ratio:auto;margin:0;
  border-radius:50%;overflow:hidden;border:1px solid var(--line);background:var(--panel2)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.about-photo .fallback .init{font-size:26px}
.about-who b{display:block;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.about-who span{display:block;font-size:13.5px;color:var(--mut);margin-top:2px}
.about-txt{max-width:70ch;margin:0 auto}
@media(max-width:768px){.about-photo{width:66px;height:66px}}


/* ── Prislisten gik fra tre pakker til to ──────────────────────────── */
.pris{grid-template-columns:repeat(2,1fr);max-width:880px}
/* To kolonner hele vejen ned — se 720px-blokken, hvor indholdet skaleres. */

/* Stille link inde i en etiket-linje — maa ikke tage opmaerksomhed fra overskriften */
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(237,232,221,.22);
  transition:color .2s ease,border-color .2s ease}
.eyebrow a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.eyebrow a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

/* Diskret henvisningslinje under en slutsektion.
   p.sekundaer frem for .sekundaer, saa den vinder over sidernes egne
   note-regler — ellers lyser linket groent og stjaeler opmaerksomhed. */
p.sekundaer{color:var(--mut);font-size:.83rem;margin-top:14px;
  max-width:50ch;margin-left:auto;margin-right:auto;line-height:1.65}
p.sekundaer a{color:var(--mut);text-decoration:none;
  border-bottom:1px solid rgba(237,232,221,.2)}
p.sekundaer a:hover{color:var(--ink);border-bottom-color:var(--acc)}

/* ===========================================================
   Blogindhold, okt. 2026: datatabel, klikberegner og noter.
   Tabellen genbruger Kontrolpanelets moenster (.kp-table): paa
   smal skaerm bliver hver raekke et kort, og td::before henter
   kolonnenavnet fra data-l. Derfor ingen vandret scroll paa
   telefon, uden at tabellen holder op med at vaere en tabel.
   =========================================================== */
.post .dtab-w{overflow-x:auto;border:1px solid var(--line);border-radius:13px;margin:28px 0}
.post .dtab{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px;margin:0}
.post .dtab caption{caption-side:top;text-align:left;padding:16px 18px 2px;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:15px;
  color:var(--ink);letter-spacing:-.01em}
.post .dtab th,.post .dtab td{padding:11px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line2);line-height:1.45}
.post .dtab thead th{font-size:12.5px;font-weight:600;color:var(--mut);
  background:var(--panel);border-bottom:1px solid var(--line);white-space:nowrap}
.post .dtab tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
.post .dtab td{color:#B7B2A7;font-variant-numeric:tabular-nums}
.post .dtab td.v{color:var(--ink);font-weight:500}
.post .dtab td.a{color:var(--acc);font-weight:600}
.post .dtab tbody tr:last-child td,.post .dtab tbody tr:last-child th{border-bottom:0}
.post .dtab tbody tr.sum th,.post .dtab tbody tr.sum td{background:rgba(198,255,61,.045)}
@media(max-width:700px){
  .post .dtab-w{overflow:visible;border:0;border-radius:0}
  .post .dtab{min-width:0;display:block;font-size:14px}
  .post .dtab caption{padding:0 0 12px}
  .post .dtab thead{display:none}
  .post .dtab tbody{display:grid;gap:12px}
  .post .dtab tr{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:13px;padding:6px 15px}
  .post .dtab tbody th{display:block;width:auto;padding:11px 0 6px;border:0;
    font-size:12.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;
    white-space:normal}
  /* attr() laeser elementets eget attribut, ikke tabellens, saa ordet
     staar her i stedet: .dtab.plads giver »Plads 1« paa smal skaerm. */
  .post .dtab.plads tbody th::before{content:"Plads "}
  .post .dtab td{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
    text-align:right;border-bottom:1px solid var(--line2)}
  .post .dtab td::before{content:attr(data-l);color:var(--mut);text-align:left;
    flex:0 0 auto;max-width:52%;font-weight:400}
  .post .dtab td:last-child{border-bottom:0;padding-bottom:12px}
  .post .dtab tbody tr.sum th,.post .dtab tbody tr.sum td{background:transparent}
}

/* Tre noegletal side om side. Bruges hvor en graf er for meget. */
.post .talrk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0}
@media(max-width:620px){.post .talrk{grid-template-columns:minmax(0,1fr)}}
.post .talrk div{background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:20px 18px}
.post .talrk b{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:clamp(1.9rem,3.2vw,2.4rem);line-height:1;letter-spacing:-.035em;
  font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.post .talrk span{display:block;margin-top:9px;font-size:13.5px;color:var(--mut);line-height:1.5}

/* Lille kildenote under graf, tabel eller beregner. */
.post .nb{font-size:12.5px;color:var(--mut);line-height:1.65;margin:-8px 0 26px}
.post .nb a{color:var(--mut)}

/* ---------- Klikberegneren ---------- */
.post .ber{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 22px;margin:34px 0}
.post .ber h2{margin:0 0 6px;font-size:clamp(21px,2.6vw,25px)}
.post .ber>p{font-size:15px;color:#B7B2A7;margin-bottom:20px}
.post .ber-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0}
@media(max-width:560px){.post .ber-form{grid-template-columns:minmax(0,1fr)}}
.post .ber-f.bred{grid-column:1/-1}
.post .ber-f label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:6px;
  line-height:1.4}
.post .ber-f input,.post .ber-f select{width:100%;background:var(--bg);
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink);
  font-family:inherit;font-size:15px;transition:border-color .25s;
  -webkit-appearance:none;appearance:none}
.post .ber-f select{background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),
  linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.post .ber-f input:focus,.post .ber-f select:focus{border-color:var(--acc);outline:none}
.post .ber-f input:focus-visible,.post .ber-f select:focus-visible{outline:2px solid var(--acc);
  outline-offset:2px}
.post .ber-ud{display:block;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.post .ber-tal{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;letter-spacing:-.04em;color:var(--acc);
  font-variant-numeric:tabular-nums}
.post .ber-tal small{display:block;font-family:inherit;font-size:13.5px;font-weight:400;
  letter-spacing:0;color:var(--mut);margin-top:10px;line-height:1.55}
.post .ber-ud p{font-size:15px;color:#C3BEB2;margin:16px 0 0;line-height:1.7}
.post .ber-ud p:last-child{margin-bottom:0}
.post .ber>.nb{margin:18px 0 0}
.post .ber-ud strong{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   MOBIL-RYTME — samlet her, så den er ét sted at justere
   ───────────────────────────────────────────────────────────────────
   Desktop har luft mellem sektionerne og en tydelig forskel på
   overskrift, brødtekst og kort. På en telefon var alt presset ud til
   begge kanter i samme bredde, og så forsvinder forskellen. Blokken
   her giver kanten lidt mere plads, sektionerne mere luft imellem sig,
   og kortene lidt mindre indvendig polstring, så de ikke fylder hele
   skærmen. Ingen af delene ændrer desktop.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:560px){
  /* Kanten: 22 px i stedet for 20. Lidt, men det er den, øjet læser. */
  .wrap,.nav-in{padding-left:22px;padding-right:22px}

  /* Luft mellem sektionerne frem for inde i dem */
  .sec{padding:86px 0}
  .sec-head{margin-bottom:38px}
  .sec-head h2{font-size:clamp(28px,8vw,36px)}
  .sec-head p,.sec-lead{font-size:15.5px;line-height:1.6}

  /* Kort: mindre polstring, så de ikke er skærmen med en ramme om */
  .svc,.postcard{padding:24px 22px}
  .services,.steps{gap:14px}
  .svc h3{font-size:19px}
  .svc p{font-size:15px;line-height:1.6}
  .svc .tags{gap:6px}
  .svc .tags span{font-size:11.5px;padding:4px 10px}

  /* Brødtekst uden for kort: en anelse mindre, så overskrifterne vinder */
  .about-txt p{font-size:15.5px;line-height:1.68}
  .about-txt p+p{margin-top:14px}
}

/* ——— Blogoversigten på telefon ———
   Hvert kort havde tre-fire linjers optakt, og syv kort i træk blev en
   mur. Optakten er klippet til to linjer med fade, så titlerne bærer
   listen, og læsetiden står på egen linje frem for at hænge skævt
   under overskriften. */
@media(max-width:560px){
  .blogwrap{padding:104px 22px 30px}
  .blog-hero{margin-bottom:34px}
  .blog-hero h1{font-size:clamp(32px,9vw,42px)}
  .blog-hero p{font-size:16px;margin-top:14px}
  .bloglist{gap:14px;padding-bottom:64px}
  .postcard h2{font-size:21px;margin:10px 0 8px;line-height:1.14}
  .postcard p{font-size:14.5px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .postcard .rt{display:block;margin:7px 0 0;font-size:12px;white-space:nowrap}
  .postcard .more{margin-top:13px;font-size:13.5px}
  .postcard .tag{font-size:11px}
}

.config-note{margin:44px auto 0;max-width:640px;text-align:center;color:rgba(237,232,221,.66);font-size:15.5px;line-height:1.65}
.config-note a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

/* ——— Mobil-landing: centreret og med luft (okt. 2026) ———
   Hele første skærm centreres om én akse. Mere afstand mellem blokkene, så
   intet ligner, at det er presset sammen. Desktop er urørt. */
@media(max-width:768px){
  .hero{padding:96px 0 56px}
  .hero-grid>div:first-child{align-items:center;text-align:center}
  .hero-grid h1{margin-top:0;text-wrap:balance;font-size:clamp(34px,10.2vw,54px);line-height:1.05}
  .hero-grid .sub-m{margin:24px auto 0;max-width:30ch;font-size:17px;line-height:1.55}
  .hero-grid .cta{margin-top:40px;width:100%;max-width:340px;gap:14px;align-self:center}
  .hero-grid .cta .btn{padding:16px 22px}
  .hero-grid .cta-note{margin-top:16px;text-align:center}
  .hero-grid .trust{margin:44px 0 0;padding-top:26px;align-items:center;gap:10px;font-size:13px;line-height:1.3;text-align:center}
  .hero-grid .trust::before{left:50%;margin-left:-17px}
  .hero-grid .trust li{justify-content:center}
  .hero-grid .trust a{justify-content:center}
}
@media(max-width:360px){
  .hero-grid h1{font-size:34px}
}