/* Space V2 · samlet stilark
   Hejst ud af de inline <style>-blokke i den gamle SPA. De var identiske paa alle 46
   sider, saa browseren henter og cacher den her én gang i stedet for pr. sidevisning.
   Runtime-specifik CSS (.sc-placeholder, x-dc, #dc-root) er droppet, den hoerte til
   template-motoren og har ingen funktion paa statiske sider. */

/* ===== cookiebanner ===== */
.smtk{position:fixed;left:16px;right:16px;bottom:16px;z-index:2147483000;display:flex;justify-content:center;pointer-events:none;font-family:var(--font-sans-body,Helvetica,Arial,sans-serif)}.smtk__kort{pointer-events:auto;width:100%;max-width:640px;background:var(--space-white,#fff);color:var(--ink-100,#16181D);border:1px solid var(--ink-10,rgba(22,24,29,.1));border-radius:16px;box-shadow:0 12px 40px rgba(22,24,29,.16);padding:22px 24px}.smtk__h{font-family:var(--font-serif-display,Georgia,serif);font-size:19px;line-height:1.3;margin:0 0 8px;font-weight:700}.smtk__p{font-size:14.5px;line-height:1.55;margin:0 0 16px;color:var(--ink-70,rgba(22,24,29,.72))}.smtk__p a{color:inherit;text-decoration:underline;text-underline-offset:2px}.smtk__knapper{display:flex;gap:10px;flex-wrap:wrap}.smtk__k{font:inherit;font-size:14.5px;font-weight:600;border-radius:12px;padding:11px 20px;cursor:pointer;border:1px solid transparent;line-height:1.2}.smtk__k--ja{background:var(--space-black,#16181D);color:#fff}.smtk__k--ja:hover{opacity:.88}.smtk__k--nej{background:transparent;color:var(--ink-100,#16181D);border-color:var(--ink-20,rgba(22,24,29,.2))}.smtk__k--nej:hover{background:var(--ink-10,rgba(22,24,29,.06))}@media(max-width:520px){.smtk__kort{padding:20px}.smtk__k{flex:1 1 100%}}

/* ===== site ===== */
html { scroll-behavior: smooth; }
    /* Fyldt highlight bag ord i overskrifter (Nikolajs feedback 2026-08-20).
       Et inline-<mark>'s baggrundsboks foelger skrifttypens metrics, IKKE line-height.
       Med den stramme display-leding (1.02-1.05) blev boksen hoejere end linjen og
       skar op i linjen ovenover, saa den ramte kommaer og underlaengder. Baggrunden
       tegnes derfor som en gradient med fast hoejde, centreret i linjen, og de ramte
       overskrifter har faaet luft nok til at fladen kan staa frit. */
    mark.hlflade { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-position: center; background-size: 100% var(--hlh, 1.22em); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    mark.hlmark { background: linear-gradient(var(--space-cream), var(--space-cream)) left center no-repeat; background-size: 0% 1.22em; color: var(--space-white); -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: hlIn 600ms 350ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    @keyframes hlIn { 0% { background-size: 0% 1.22em; color: var(--space-white); } 60% { color: var(--space-black); } 100% { background-size: 100% 1.22em; color: var(--space-black); } }
    /* SPA'en skjulte disse elementer (opacity:0) og afsloerede dem med JavaScript
   ved scroll. Det gjorde 255 elementer paa 37 sider usynlige i det oejeblik
   scriptet ikke koerte. En fade-animation er ikke den risiko vaerd paa et
   site hvor pointen er, at indholdet altid er der. Elementerne er nu bare
   synlige. */
.fadeup { opacity: 1; transform: none; transition: none; }
    .fadeup.in { opacity: 1; transform: none; }
    .bo { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 12px; font-family: var(--font-sans-body); font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--space-black); transform: translateY(105%); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
    button:hover > span > .bo, a:hover > span > .bo { transform: translateY(0); }
    /* ===================================================================
       BREAKPOINT-TRAPPEN (2026-08-28). FIRE trin, ikke flere.
       Sitet havde syv spredte graenser (1599, 1199, 1023, 900, 780, 760, 700),
       hvor fire af dem laa inden for 200 px af hinanden og alle gjorde det samme:
       lagde noget om til én kolonne. Det gjorde det umuligt at forudsige hvordan
       en side opfoerte sig paa en tablet. Trappen er nu:

         1440 px og op   full HD og bredere.
         1200 til 1439   Trustpilot-badge og telefonnummer i topbaren.
         1024 til 1199   badge og telefon ude, men RIGTIG menu bevares.
          768 til 1023   tablet: to-kolonne-sektioner falder til én, burger-menu.
         under 768       telefon: ALT falder til én kolonne.

       Reglerne er skrevet som max-width, fordi sitets grundlayout ligger i
       inline styles og dermed ER desktop. En mobile-first omskrivning kraever
       at markup'en genskrives, ikke bare CSS'en.
       Tilfoejer du en ny media query, skal den bruge ét af de fire tal. */

    /* NAVIGATION skifter for sig selv (2026-08-27).
       Desktop-navigationen fylder 1216 px, men mobilmenuen overtog foerst under
       780 px. I baandet 781 til 1215 px fandtes der derfor ingen navigation der
       passede, og siden fik vandret scroll: 397 px for meget ved 834, 207 ved
       1024, 51 ved 1180. Det ramte iPad Air, iPad i landskab og smaa laptops.
       Navigationen skifter nu ved 1023 px, mens LAYOUTET foerst falder til én
       kolonne ved 780 px. De to ting er ikke det samme og skal ikke dele graense. */
    /* Trustpilot-badgen (181 px) og telefonnummeret (122 px) er det der spraenger
       topbaren. Selve menupunkterne fylder kun 326 px, saa naar de to ryger,
       kan tablets beholde en RIGTIG menu i stedet for en burger. */
    @media (max-width: 1199px) {
      .navrev { display: none !important; }
      .navtel { display: none !important; }
    }
    @media (max-width: 1023px) {
      .navlinks { display: none !important; }
      .mmburger { display: inline-flex !important; }
      .mobilebar { display: flex !important; }
      footer { padding-bottom: 72px; }
    }

    @media (max-width: 767px) {
      [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
      [style*="grid-template-columns"] > * { min-width: 0; }
      .m2[style] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
      .mosaic[style] { grid-template-rows: repeat(3, 132px) !important; height: auto !important; }
      .mosaicwrap[style] { min-height: 0 !important; }
      [style*="white-space: nowrap"] { white-space: normal !important; }
      [style*="padding: 96px 32px"] { padding: 56px 20px !important; }
      [style*="padding: 80px 32px 80px"] { padding: 48px 20px !important; }
      [style*="padding: 28px 32px"] { padding: 20px 20px !important; }
      [style*="font-size: 96px"] { font-size: 64px !important; }
      .m2 [style*="height: 128px"] { height: 96px !important; }
      .m2 [style*="font-size: 19px"] { font-size: 16px !important; overflow-wrap: anywhere; }
      .heroui { left: 12px !important; right: 12px; width: auto !important; }
      .demogrid > div { grid-column: auto !important; }
      .herofoto { min-height: 420px !important; }
    }
    @media (prefers-reduced-motion: reduce) { mark.hlmark { animation: none; background-size: 100% 1.22em; } .fadeup { opacity: 1; transform: none; transition: none; } }
    body { margin: 0; background: var(--space-white); -webkit-font-smoothing: antialiased; }
    button, input, select, textarea { font-family: inherit; }
    @keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes oaS1 { 0%, 2% { opacity: 0; transform: translateY(8px); } 8%, 90% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
    @keyframes oaS2 { 0%, 24% { opacity: 0; transform: translateY(8px); } 31%, 90% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
    @keyframes oaS3 { 0%, 48% { opacity: 0; transform: translateY(8px); } 55%, 90% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
    @keyframes oaS4 { 0%, 70% { opacity: 0; transform: translateY(8px); } 77%, 90% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
    @keyframes oaCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
    @keyframes oaPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    image-slot { display: block; width: 100%; height: 100%; }
    .heroimg { animation: herofade 700ms ease; }
    .mockcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; animation: mockin 480ms cubic-bezier(0.22,1,0.36,1) both; }
    .mockcol > .mockcard { flex: 1; }
    .mockcol:nth-of-type(2) { animation-delay: 140ms; }
    .mockcol:nth-of-type(3) { animation-delay: 280ms; }
    .mocklabel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--space-black); }
    .mockdot { box-shadow: 0 0 0 3px rgba(22,24,29,0.05); }
    .mockdot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }
    .mockcard { box-shadow: 0 24px 48px -28px rgba(0,0,0,0.25); }
    /* "Uanset marketingkanalen" (Nikolajs valg 2026-08-20, variant A): de tre kanaler
       loeber sammen i én kalender. Den gamle udgave var en sort pille, der lignede en
       knap og gjorde ingenting, saa Nikolaj troede selv man kunne booke paa den. */
    .nbflow { display: grid; grid-template-columns: repeat(3, 1fr) 46px 1.05fr; gap: 16px; align-items: center; }
    .nbkanal { border-radius: 14px; padding: 15px 16px; text-align: center; box-shadow: inset 0 0 0 1px rgba(22,24,29,0.07); }
    .nbkanal b { display: block; font-family: var(--font-serif-display); font-weight: 800; font-size: 15px; }
    .nbkanal span { font-size: 12.5px; color: var(--ink-70); }
    .nbpil { position: relative; height: 2px; background: rgba(22,24,29,0.16); }
    .nbpil i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: var(--space-black); animation: nbLoeb 2.6s linear infinite; }
    @keyframes nbLoeb { 0% { left: 0; opacity: 0 } 14% { opacity: 1 } 86% { opacity: 1 } 100% { left: 38px; opacity: 0 } }
    .nbkal { border-radius: 16px; background: var(--space-black); color: var(--space-white); padding: 17px 19px; }
    .nbrow { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,0.08); margin-top: 7px; font-size: 12.5px; }
    .nbrow em { font-style: normal; opacity: 0.6; min-width: 40px; }
    .nbrow.ny { background: var(--space-yellow); color: var(--space-black); font-weight: 700; animation: nbNy 5s ease-in-out infinite; }
    .nbrow.ny em { opacity: 0.75; }
    @keyframes nbNy { 0%, 12% { opacity: 0; transform: translateY(7px) } 22%, 92% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-4px) } }
    .nbgroen { width: 8px; height: 8px; border-radius: 999px; background: #2eb872; position: relative; flex-shrink: 0; }
    .nbgroen::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid #2eb872; animation: oaPulse 1.8s ease-out infinite; }
    @media (max-width: 1023px) { .nbflow { grid-template-columns: 1fr 1fr; } .nbpil { display: none; } .nbkal { grid-column: 1 / -1; } }
    .mockreveal { opacity: 0; animation: herofade 450ms ease 1150ms forwards; }
    /* Soegningen skal skrive sig selv (Nikolajs valg 2026-08-20, variant A). Teksten er
       dynamisk pr. fag, saa en bredde i ch duer ikke: clip-path afsloerer i stedet
       tekst-feltet fra venstre, uanset hvor langt ordet er. */
    [data-typer] { display: inline-block; animation: mockSkriv 1500ms steps(20) 200ms both; }
    @keyframes mockSkriv { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
    .mockmaerke { display: inline-flex; align-items: center; gap: 6px; background: #2eb872; color: var(--space-white); border-radius: 999px; padding: 4px 11px; font-family: var(--font-sans-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; opacity: 0; animation: herofade 420ms ease 2100ms forwards; }
    @media (prefers-reduced-motion: reduce) { [data-typer] { animation: none; clip-path: none; } .mockmaerke { animation: none; opacity: 1; } }
    .svckort { border: none; border-radius: 18px; padding: 32px 30px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; font-family: var(--font-sans-body); transition: transform .18s cubic-bezier(0.22,1,0.36,1), box-shadow .18s ease; }
    .svckort:hover { transform: translateY(-4px); box-shadow: 0 26px 55px -30px rgba(0,0,0,0.35); }
    .svckort > b { font-family: var(--font-serif-display); font-size: 20px; font-weight: 700; color: var(--space-black); }
    .svckort > span { font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
    .svckort > i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--space-black); margin-top: 4px; }
    @media (max-width: 1023px) { .svcgrid5 { grid-template-columns: 1fr !important; } .svcgrid5 > * { grid-column: auto !important; } }
    .svcfaq details { border-top: 1px solid var(--ink-10); }
    .svcfaq details:last-child { border-bottom: 1px solid var(--ink-10); }
    .svcfaq summary { cursor: pointer; padding: 20px 4px; font-size: 17px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
    .svcfaq summary::-webkit-details-marker { display: none; }
    .svcfaq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-70); }
    .svcfaq details[open] summary::after { content: "–"; }
    a.pkmajaring { text-decoration: none; color: inherit; cursor: pointer; }
    .wbfrifelt { width: 100%; margin-top: 10px; padding: 12px 14px; border: none; box-shadow: inset 0 0 0 1px rgba(22,24,29,0.12); border-radius: 10px; font-family: var(--font-sans-body); font-size: 15px; background: var(--space-white); color: var(--space-black); }
    .wbfrifelt:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--space-black); }
    .svcfaq details > p { margin: 0; padding: 0 4px 22px; font-size: 15.5px; line-height: 1.65; color: var(--ink-70); max-width: 60ch; }
    .growbar { transform-origin: bottom; animation: growup 900ms cubic-bezier(0.22,1,0.36,1) both; }
    @keyframes growup { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes growright { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @media (prefers-reduced-motion: reduce) { .growbar { animation: none; } }
    @keyframes mockin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .mockcol, .mockreveal { animation: none; opacity: 1; } }

    /* ===================================================================
       SCROLL-UDLOEST ANIMATION i "Se det for dit fag" (2026-08-28).
       Mock-animationerne koerte paa en fast forsinkelse ved sideindlaesning.
       Sektionen ligger langt nede, saa animationen var forlaengst spillet af,
       naar man naaede derned: man saa aldrig noget. De koerer nu paa en
       view-timeline i stedet, altsaa naar sektionen scrolles ind i billedet.

       Sikkerheden er det vigtige her. Den 25. august kostede en scroll-
       animation 255 usynlige elementer paa 37 sider, fordi indholdet stod paa
       opacity 0 og ventede paa JavaScript. Denne udgave kan ikke goere det:
       1) den er ren CSS, intet JavaScript kan fejle,
       2) @supports goer at browsere uden view() slet ikke rammes,
       3) starttilstanden er opacity .4, ikke 0, saa selv en animation der
          aldrig kommer videre efterlader laesbart indhold,
       4) reduceret bevaegelse slaar den helt fra.
       Aendrer du tallene her, saa lad ALDRIG from-opacity gaa til 0. */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        section[data-screen-label="Se det for dit fag"] .mockreveal,
        section[data-screen-label="Se det for dit fag"] .mockcol,
        section[data-screen-label="Se det for dit fag"] .growbar {
          opacity: 1;
          animation: blidOp 1s linear both;
          animation-timeline: view();
          animation-range: entry 8% entry 58%;
        }
        section[data-screen-label="Se det for dit fag"] .growbar {
          animation-name: growupBlid;
        }
      }
    }
    @keyframes blidOp { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes growupBlid { from { opacity: .4; transform: scaleY(.35); } to { opacity: 1; transform: none; } }
    .heroui { animation: herofade 900ms ease; }
    @keyframes herofade { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .heroimg, .heroui { animation: none; } }
    /* HOVER-SYSTEM (2026-07-08): ens adfærd på alle baggrunde.
       1) Knapper (DS, radius-pill): løft + skygge — farven ændres ALDRIG, så knappen kan ikke "forsvinde" på mørk/lys baggrund.
       2) Klikbare kort (cases + branche-grid): løft + skygge + let billedzoom.
       3) Tekst-links (nav + footer): underline.
       4) Filter-piller: sort kant. */
    button[style*="radius-pill"] { transition: transform .12s ease, box-shadow .12s ease; }
    button[style*="radius-pill"]:hover:not(:disabled), a[style*="radius-pill"]:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0,0,0,0.45); }
    .casecard { transition: transform .15s ease, box-shadow .15s ease; }
    .casecard:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(0,0,0,0.35); }
    .casecard button img, .casecard a img { transition: transform .3s ease; }
    .casecard:hover button img, .casecard:hover a img { transform: scale(1.03); }
    button:has(> span > .bo), a:has(> span > .bo) { transition: transform .15s ease, box-shadow .15s ease; }
    button:has(> span > .bo), a:has(> span > .bo):hover, a:has(> span > .bo):hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.35); }
    .navlinks > button:hover, .navlinks > a:hover, footer button:hover, footer a:hover, .navdrop > button:hover, .navdrop > a:hover { text-decoration: underline !important; }
    .navdrop { position: relative; display: flex; align-items: center; }
    .navdropmenu { display: none; position: absolute; top: 100%; left: -18px; padding-top: 10px; z-index: 60; }
    .navdrop:hover .navdropmenu, .navdrop:focus-within .navdropmenu { display: block; }
    .navdropmenu > button, .navdropmenu > a { display: block; width: 100%; background: var(--space-white) !important; }
    .navdropmenu > button:first-child, .navdropmenu > a:first-child { border-top: 3px solid var(--space-cream) !important; }
    .navdropmenu > button:hover, .navdropmenu > a:hover { background: var(--space-cream) !important; text-decoration: none !important; }
    .navdropmenu { filter: drop-shadow(0 14px 28px rgba(0,0,0,0.18)); }
    section[data-screen-label="Cases"] button[style*="border-radius: 999px"]:hover, section[data-screen-label="Cases"] a[style*="border-radius: 999px"]:hover { border-color: var(--space-black) !important; }
    @media (prefers-reduced-motion: reduce) { button[style*="radius-pill"], .casecard, .casecard button img, .casecard a img, button:has(> span > .bo), a:has(> span > .bo) { transition: none; } button[style*="radius-pill"]:hover:not(:disabled), a[style*="radius-pill"]:hover, .casecard:hover, button:has(> span > .bo), a:has(> span > .bo):hover, a:has(> span > .bo):hover { transform: none; } .casecard:hover button img, .casecard:hover a img { transform: none; } }
    .revtrack { display: flex; gap: 20px; width: max-content; animation: revscroll 64s linear infinite; }
    .revwrap:hover .revtrack { animation-play-state: paused; }
    @keyframes revscroll { to { transform: translateX(calc(-50% - 10px)); } }
    @media (prefers-reduced-motion: reduce) { .revtrack { animation: none; } }
    /* A11y (2026-08-13): synligt tastatur-fokus på alle interaktive elementer, virker på både lyse og sorte flader */
    :focus-visible { outline: 3px solid var(--space-blue); outline-offset: 2px; box-shadow: 0 0 0 1px var(--space-black); }
    /* ============================================================
       V2-KONCEPT (2026-08-17): bloedere hjoerner paa kort, mocks,
       indrammede billeder og chips. Sektioner forbliver full-bleed.
       Attribut-selektorer rammer de inline-stylede kort-moenstre;
       inline border-radius (pills mv.) vinder stadig over disse. */
    [style*="border: 1px solid var(--ink-10)"],
    [style*="border: 1px solid var(--paper-20)"],
    [style*="border: 1px solid var(--space-black)"],
    [style*="border: 1px solid rgba(0,0,0"],
    [style*="border: 2px solid"],
    [style*="box-shadow: 0 18px"],
    [style*="box-shadow: 0 22px"],
    [style*="box-shadow: 0 24px"] { border-radius: var(--radius-card); }
    .katkort, .casecard, .mockcard, .svckort { border-radius: var(--radius-card); overflow: hidden; }
    .heroui > div { border-radius: var(--radius-card); overflow: hidden; }
    span[style*="text-transform: uppercase"][style*="background:"] { border-radius: var(--radius-chip); }
    /* V2: creme-accenter (haandvaerk) faar haarfin blaek-kant saa de staar paa hvidt */
    span[style*="background: var(--space-yellow)"] { box-shadow: inset 0 0 0 1px var(--ink-10); }
    /* V2-redesign: levende soege-mock + foto-zoom paa branchekort */
    .typeline { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: 2px solid var(--space-black); width: 0; animation: typeIn 1.8s steps(15) 700ms forwards, caretB 1s steps(1) 2.6s infinite; }
    @keyframes typeIn { to { width: 15ch; } }
    @keyframes caretB { 0%, 49% { border-color: var(--space-black); } 50%, 100% { border-color: transparent; } }
    @media (prefers-reduced-motion: reduce) { .typeline { animation: none; width: 15ch; border-right: none; } }
    .katkort img { transition: transform .4s cubic-bezier(0.22,1,0.36,1); }
    .katkort:hover img { transform: scale(1.04); }
    .katkort { transition: transform .15s ease, box-shadow .15s ease; }
    .katkort:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(0,0,0,0.25); }
    .fagpill { border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
    .fagpill:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,0.35); }
    /* V2 HERO (D1, valgt 2026-08-17): fag-strimler m. farvede navneskilte + fag-bro */
    .herostrimler { display: flex; gap: 10px; padding: 30px 40px 30px 0; min-height: clamp(430px, calc(100vh - 330px), 560px); }
    /* Hero'en har FIRE strimler paa alle bredder (Nikolajs valg 2026-09-01):
       toemrer, frisoer, advokat, restaurant. Rengoering er taget ud, og dermed
       roeg ogsaa 1439-reglen der skjulte en femte strimmel paa mindre skaerme. */
    .herostrimmel { position: relative; border-radius: 16px; overflow: hidden; flex: 1; transition: flex .45s cubic-bezier(0.22,1,0.36,1); }
    .herostrimler:hover .herostrimmel:hover { flex: 2.3; }
    .herostrimmel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .herogradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,24,29,0) 45%, rgba(22,24,29,0.8)); }
    .herostrimmelfod { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; justify-content: center; }
    .herofagnavn { display: inline-block; border-radius: 999px; padding: 6px 13px; font-family: var(--font-serif-display); font-weight: 800; font-size: 13px; letter-spacing: 0.01em; color: var(--space-black); white-space: nowrap; max-width: 100%; }
    /* overflow-x: CLIP, ikke hidden. hidden paa html draeber scroll-propagationen
       (mobil kunne ikke scrolle via window, fundet 2026-08-13).
       Flyttet fra 767 til 1023 den 2026-08-28: ved praecis 768 px var
       scrollWidth 776 mod clientWidth 768, uden at ET eneste ukklippet element
       stak ud. De otte px kommer fra roterede mock-lag der er klippet af deres
       egen sektion, men stadig taeller med i rodens scroll-omraade. Desktop
       holdes UKLIPPET med vilje, saa QA-maalingen stadig fanger rigtige fejl. */
    @media (max-width: 1023px) { html, body { overflow-x: clip; } }

    /* ===================================================================
       LAESBARHED PAA TELEFON (2026-08-28). Maalt paa alle 52 ruter i 11
       bredder: 144 stykker tekst under 12 px paa en telefon. De fleste er
       MOCKUPS (Google-annoncen, Facebook-opslaget, hjemmeside-attrappen,
       opkaldsskaermen), og de skal blive smaa: de efterligner rigtige
       brugerflader og mister deres pointe hvis proportionerne skrider.
       Loeftet gaelder derfor kun tekst der er indhold og funktion:
       vilkaarslinjen, case-kortenes bevis-labels og opkalds-CTA'en.
       De store bogstavers labels paa 11,5 px er ogsaa smaa, men det er en
       bevidst, gennemgaaende label-stil, og en telefon-undtagelse ville
       goere dem inkonsistente med resten af sitet. */
    @media (max-width: 767px) {
      .trustlinje { font-size: 12.5px !important; line-height: 1.45; }
      .casecard [style*="font-size: 11px"] { font-size: 12.5px !important; }
      .pkmajaring [style*="font-size: 11px"] { font-size: 12.5px !important; }
      /* Bevis-badges og labels (case-heroens pills, "Dokumenteret"-maerker,
         kickers) loeftes fra 11/11,5 til 12 px paa telefon. Mockup-fladerne
         undtages med :not(), praecis som i responsiv-qa.mjs: de efterligner
         rigtige brugerflader og SKAL blive smaa. */
      [style*="font-size: 11px"]:not([class*="mock"] *, .adswrap *, .demogrid *, .tskaerm *, .webframe *, .mskaerm *, .pkminipop *, [class*="seo"] *, .heroimg *),
      [style*="font-size: 11.5px"]:not([class*="mock"] *, .adswrap *, .demogrid *, .tskaerm *, .webframe *, .mskaerm *, .pkminipop *, [class*="seo"] *, .heroimg *) { font-size: 12px !important; }
      /* Anmelder-kortene fyldte praecis viewporten paa en 320 px telefon, saa
         intet antydede at baandet kan rulles. Nu staar naeste kort og kigger frem. */
      .revtrack > div { width: min(320px, 78vw) !important; }
    }

    /* Mock-stoerrelserne skal falde allerede paa TABLET. Fra 768 til 1023 staar
       telefon-mocken i en smal kolonne, og 44 px sidepolstring spraengte
       forsiden med 18 px. Typografien og strimlerne falder foerst paa telefon. */
    @media (max-width: 1023px) {
      [style*="padding: 34px 44px"] { padding: 22px 22px 18px !important; }
      [style*="width: 290px"] { width: 252px !important; }
      [style*="width: 360px"] { width: 100% !important; box-sizing: border-box; }
    }
    @media (max-width: 767px) {
      .herostrimler { flex-direction: column; min-height: 0; padding: 4px 20px 20px; } .herostrimmel { height: 86px; flex: none !important; }
      [style*="font-size: 62px"] { font-size: 46px !important; }
      [style*="font-size: 68px"] { font-size: 48px !important; }
      [style*="font-size: 76px"], [style*="font-size: 84px"], [style*="font-size: 88px"] { font-size: 54px !important; }
    }
    /* V2 PRIS (T5 "de levende doere", valgt 2026-08-18): hjemmeside-spoergsmaalet + to farvedoere
       m. mock-tittere. Tekst-spec laast via prioriterings-tabellen (ingen fart-valg, "Faa demo"-CTA) */
    .pkdoer { position: relative; border-radius: 22px; padding: 38px 40px; display: flex; flex-direction: column; gap: 13px; text-align: left; transition: transform .18s cubic-bezier(0.22,1,0.36,1), box-shadow .18s ease; }
    .pkdoer:hover { transform: translateY(-4px) rotate(-0.3deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.4); }
    .pkprisboks { background: var(--space-white); border-radius: 14px; padding: 16px 20px; box-shadow: 0 16px 34px -20px rgba(0,0,0,0.3); align-self: flex-start; }
    .pkminipop { position: absolute; top: -18px; left: 26px; background: var(--space-white); border-radius: 12px; box-shadow: 0 16px 36px -16px rgba(0,0,0,0.35); padding: 10px 14px; font-size: 11.5px; line-height: 1.35; display: flex; gap: 8px; align-items: center; z-index: 3; }
    @keyframes pkpuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
    .pkdotg { width: 8px; height: 8px; border-radius: 999px; background: #2eb872; flex-shrink: 0; animation: pkpuls 1.2s infinite; }
    .pkmajaring { display: inline-flex; align-items: center; gap: 12px; background: var(--space-pink); border-radius: 999px; padding: 8px 22px 8px 10px; }
    .pkgarantipill { display: inline-flex; align-items: center; gap: 12px; background: var(--space-cream); border-radius: 999px; padding: 10px 22px; }
    .pkg14 { flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; background: var(--space-black); color: var(--space-cream); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-size: 8px; font-weight: 700; }
    @media (max-width: 1023px) {
      .pkdoere { grid-template-columns: 1fr !important; }
      .pkdoer { padding: 30px 26px; }
    }
    /* ADS-SIDEN (12c): talebobler, tjek-chips, fag-radio-demo (ren CSS, runtimen stripper checked) */
    .adsboble { align-self: flex-start; max-width: 54ch; padding: 13px 18px; border-radius: 18px; font-size: 16px; line-height: 1.5; }
    .adstjek { background: var(--space-white); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; box-shadow: 0 6px 14px -8px rgba(0,0,0,0.12); display: block; text-align: left; }
    .adsfelt { width: 100%; border: none; border-radius: 12px; padding: 14px 16px; font-family: var(--font-sans-body); font-size: 14.5px; background: rgba(22,24,29,0.03); box-shadow: inset 0 0 0 1.5px rgba(22,24,29,0.1); }
    .adswrap input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
    .adsfagpill { display: inline-flex; border-radius: 999px; padding: 11px 22px; font-family: var(--font-sans-body); font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--space-black); box-shadow: inset 0 0 0 1px rgba(22,24,29,0.08); transition: transform .15s; }
    .adsfagpill:hover { transform: translateY(-2px); }
    #af1:checked ~ div label[for="af1"], #af2:checked ~ div label[for="af2"], #af3:checked ~ div label[for="af3"], .adswrap:not(:has(input:checked)) label[for="af1"] { box-shadow: inset 0 0 0 2px var(--space-black); }
    #sf1:checked ~ div label[for="sf1"], #sf2:checked ~ div label[for="sf2"], #sf3:checked ~ div label[for="sf3"], .adswrap:not(:has(input:checked)) label[for="sf1"] { box-shadow: inset 0 0 0 2px var(--space-black); }
    #mf1:checked ~ div label[for="mf1"], #mf2:checked ~ div label[for="mf2"], #mf3:checked ~ div label[for="mf3"], .adswrap:not(:has(input:checked)) label[for="mf1"] { box-shadow: inset 0 0 0 2px var(--space-black); }
    #wf1:checked ~ div label[for="wf1"], #wf2:checked ~ div label[for="wf2"], #wf3:checked ~ div label[for="wf3"], .adswrap:not(:has(input:checked)) label[for="wf1"] { box-shadow: inset 0 0 0 2px var(--space-black); }
    #ef1:checked ~ div label[for="ef1"], #ef2:checked ~ div label[for="ef2"], #ef3:checked ~ div label[for="ef3"], .adswrap:not(:has(input:checked)) label[for="ef1"] { box-shadow: inset 0 0 0 2px var(--space-black); }
    .afp { display: none; max-width: 780px; margin: 0 auto; }
    .afp.seobred { max-width: none; }
    #af1:checked ~ div .afp1, #af2:checked ~ div .afp2, #af3:checked ~ div .afp3, .adswrap:not(:has(input:checked)) .afp1 { display: block; animation: pageIn 250ms cubic-bezier(0.22,1,0.36,1); }
    #sf1:checked ~ div .afp1, #sf2:checked ~ div .afp2, #sf3:checked ~ div .afp3 { display: block; animation: pageIn 250ms cubic-bezier(0.22,1,0.36,1); }
    #mf1:checked ~ div .afp1, #mf2:checked ~ div .afp2, #mf3:checked ~ div .afp3 { display: block; animation: pageIn 250ms cubic-bezier(0.22,1,0.36,1); }
    #wf1:checked ~ div .afp1, #wf2:checked ~ div .afp2, #wf3:checked ~ div .afp3 { display: block; animation: pageIn 250ms cubic-bezier(0.22,1,0.36,1); }
    #ef1:checked ~ div .afp1, #ef2:checked ~ div .afp2, #ef3:checked ~ div .afp3 { display: block; animation: pageIn 250ms cubic-bezier(0.22,1,0.36,1); }
    .seosplit { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
    /* "Det her soerger vi for" over mockuppen i service-heroen (2026-08-28).
       Pilen er tegnet i CSS, ikke et billede, saa den foelger teksten og
       vender rigtigt paa alle bredder. Under 1024 px staar mockuppen under
       teksten, og saa peger pilen stadig ned paa den. */
    .svcpil { position: relative; display: inline-flex; align-items: center; gap: 8px;
      margin: 0 0 18px 6px; padding: 7px 14px 7px 12px; border-radius: 999px;
      background: var(--space-black); color: var(--space-white);
      font-family: var(--font-sans-body); font-size: 12.5px; font-weight: 600;
      letter-spacing: 0.01em; white-space: nowrap; }
    .svcpil::before { content: ""; width: 7px; height: 7px; border-radius: 999px;
      background: var(--space-white); opacity: .75; flex-shrink: 0; }
    .svcpil::after { content: ""; position: absolute; left: 26px; top: 100%;
      width: 2px; height: 16px; background: var(--space-black); border-radius: 2px; }
    @media (max-width: 767px) { .svcpil { margin-left: 0; font-size: 12px; } }

    .seosplit .seokort { height: 320px; }
    .seosplit .seopulsring { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
    .seosplit .seopin { width: 38px; margin-left: -19px; }
    .seosplit .seopin .form { width: 38px; height: 38px; }
    .seosplit .seopin .form::after { width: 11px; height: 11px; }
    .seosplit .seopinskygge { width: 34px; height: 11px; margin: -5px 0 0 -17px; }
    /* SEO fag-demoens levende 3D-kort (2026-08-18): perspektiv-plan, pin-drop m. skygge, puls paa jorden, rute der tegnes, soegning der skriver sig selv. Alt genstarter ved hvert pill-skift (display none->block) */
    .seokort { position: relative; height: 178px; background: #E8EDE5; overflow: hidden; perspective: 640px; }
    .seokort .plan { position: absolute; inset: -55% -16% -20%; transform: rotateX(52deg); transform-origin: 50% 100%; }
    .seokort .bund { position: absolute; inset: 0; animation: seoZoom 5.5s ease-out both; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.5) 0 3px, transparent 3px 42px), repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 3px, transparent 3px 54px), #E2EADB; }
    .seokort .vej { position: absolute; background: var(--space-white); border-radius: 4px; }
    .seokort .hus { position: absolute; border-radius: 4px; background: var(--space-white); box-shadow: 0 9px 0 rgba(22,24,29,0.15); }
    .seopulsring { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 999px; border: 3px solid rgba(234,67,53,0.55); background: rgba(234,67,53,0.1); animation: seoPuls 2.4s ease-out 1.1s infinite; }
    .seostartdot { position: absolute; width: 13px; height: 13px; margin: -7px; border-radius: 999px; background: var(--space-black); border: 2.5px solid var(--space-white); }
    .seorute { position: absolute; inset: 0; width: 100%; height: 100%; }
    .seorute path { fill: none; stroke: var(--space-black); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: seoRute 1.6s ease-out 0.35s forwards; }
    .seopin { position: absolute; width: 30px; margin-left: -15px; animation: seoPinDrop 0.75s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
    .seopin .form { display: block; width: 30px; height: 30px; border-radius: 999px 999px 999px 0; transform: rotate(-45deg); background: #EA4335; border: 2.5px solid var(--space-white); box-shadow: 0 8px 18px rgba(0,0,0,0.35); position: relative; }
    .seopin .form::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 999px; background: var(--space-white); transform: translate(-50%, -50%); }
    .seopinskygge { position: absolute; width: 26px; height: 9px; margin: -4px 0 0 -13px; border-radius: 999px; background: rgba(22,24,29,0.3); filter: blur(1px); animation: seoSkygge 0.75s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
    .seokonkpin { position: absolute; width: 15px; height: 15px; margin-left: -7px; border-radius: 999px 999px 999px 0; transform: rotate(-45deg); background: #9AA0A6; border: 1.5px solid var(--space-white); box-shadow: 0 4px 8px rgba(0,0,0,0.2); opacity: 0; animation: seoKonk 0.5s ease-out both; }
    .seochip { position: absolute; background: var(--space-white); border-radius: 999px; padding: 6px 13px; font-size: 11.5px; font-weight: 700; box-shadow: 0 8px 18px rgba(0,0,0,0.22); white-space: nowrap; animation: seoChip 0.45s cubic-bezier(0.22,1,0.36,1) 0.7s both; }
    .seotype { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; animation: seoType 1s steps(16, end) 0.15s both; }
    .seocaret { display: inline-block; font-weight: 300; animation: oaCaret 1s steps(1) infinite; }
    @keyframes seoZoom { from { transform: scale(1.18); } to { transform: scale(1); } }
    @keyframes seoType { from { max-width: 0; } to { max-width: 100%; } }
    @keyframes seoPinDrop { 0% { transform: translateY(-46px); opacity: 0; } 55% { transform: translateY(0); opacity: 1; } 74% { transform: translateY(-9px); } 100% { transform: translateY(0); opacity: 1; } }
    @keyframes seoSkygge { 0% { transform: scale(0.2); opacity: 0; } 55% { transform: scale(1); opacity: 1; } 74% { transform: scale(0.72); opacity: 0.55; } 100% { transform: scale(1); opacity: 1; } }
    @keyframes seoPuls { 0% { transform: scale(0.12); opacity: 0.95; } 70% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
    @keyframes seoChip { from { opacity: 0; transform: translateY(10px) scale(0.8); } to { opacity: 1; transform: none; } }
    @keyframes seoKonk { to { opacity: 0.9; } }
    @keyframes seoRute { to { stroke-dashoffset: 0; } }
    /* Meta/Web/Email fag-demoer (2026-08-18): levende produkt-illustrationer efter illustrations-reglen */
    .metakort { position: relative; background: var(--space-white); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35); transform: perspective(1100px) rotateY(-7deg) rotateX(2deg); animation: metaFloat 5s ease-in-out infinite alternate; }
    .metahjerte { position: absolute; font-size: 19px; opacity: 0; animation: metaHjerte 2.8s ease-out infinite; pointer-events: none; }
    .metanotif { background: var(--space-white); border-radius: 14px; padding: 14px 18px; display: flex; gap: 12px; align-items: center; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.3); opacity: 0; animation: metaNotif 0.55s cubic-bezier(0.22,1,0.36,1) both; text-align: left; }
    .webframe { background: var(--space-white); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35); transform: perspective(1100px) rotateY(6deg) rotateX(2deg); }
    .webblok { opacity: 0; animation: webBlok 0.5s ease-out both; }
    .webstamp { position: absolute; top: 14px; right: 14px; background: var(--space-yellow); border-radius: 999px; padding: 8px 16px; font-family: var(--font-serif-display); font-weight: 800; font-size: 14px; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.3); animation: webStamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 2.3s both; z-index: 2; }
    .webfone { width: 128px; border-radius: 20px; background: var(--space-black); padding: 7px; box-shadow: 0 26px 50px -26px rgba(0,0,0,0.5); transform: perspective(900px) rotateY(-10deg); animation: metaFloat 5s ease-in-out infinite alternate; }
    .mailvindue { background: var(--space-white); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35); transform: perspective(1100px) rotateY(6deg); text-align: left; }
    .mailskel { height: 9px; border-radius: 999px; background: rgba(22,24,29,0.08); opacity: 0; animation: webBlok 0.4s ease-out both; }
    .mailsendt { display: inline-flex; align-items: center; gap: 8px; background: var(--space-yellow); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 700; opacity: 0; animation: webStamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 2s both; }
    /* Branchesiden (2026-08-18, Nikolajs valg): hero-KPI, udfaldsraekker, afkrydsning, case-citater */
    .brkpi { position: absolute; left: -26px; bottom: 30px; background: var(--space-white); border-radius: 16px; padding: 20px 24px; box-shadow: 0 24px 48px -24px rgba(0,0,0,0.42); max-width: 270px; }
    /* Outcome-trappen: LINJER og prikker, mens pains-sektionen bruger FLADER. To sektioner maa aldrig
       rime paa hinanden, saa naar begge ligger i samme farver, skal formen skille dem ad (2026-08-18) */
    .brtrappe { position: relative; padding-left: 4px; }
    .brtrappe::before { content: ''; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: var(--ink-10); }
    .brtrin { display: flex; gap: 20px; align-items: flex-start; padding: 18px 0; position: relative; }
    .brtrin + .brtrin { border-top: 1px solid var(--ink-10); }
    .brtrindot { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); font-weight: 800; font-size: 16px; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--space-white); }
    .brkryds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1100px; }
    .brkrydsfelt { display: flex; gap: 14px; align-items: center; border-radius: 14px; padding: 18px 22px; font-size: 15.5px; line-height: 1.45; cursor: pointer; transition: transform .15s; position: relative; }
    .brkrydsfelt:hover { transform: translateY(-2px); }
    .brkrydsfelt input { position: absolute; opacity: 0; pointer-events: none; }
    .brboks { width: 24px; height: 24px; border-radius: 7px; background: var(--space-white); box-shadow: inset 0 0 0 2px rgba(22,24,29,0.18); flex-shrink: 0; position: relative; }
    .brkrydsfelt input:checked ~ .brboks { background: var(--space-black); box-shadow: none; }
    .brkrydsfelt input:checked ~ .brboks::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--space-yellow); font-size: 14px; font-weight: 700; }
    /* Om os-heroens collage (2026-08-19): roteret plade bag, navnetags der popper ind paa gruppebilledet,
       overlappende polaroid fra hverdagen og et lille sted-stempel. Farven ligger i selve heroens flade. */
    .omcollage { position: relative; padding: 26px 30px 56px 26px; }
    .omplade { position: absolute; inset: 0 8% 40px 0; background: var(--space-white); border-radius: 26px; transform: rotate(-2.2deg); }
    .omhoved { position: relative; border-radius: 20px; overflow: visible; }
    .omhoved img { width: 100%; display: block; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.45); }
    .omtag { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; background: var(--space-white); border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(0,0,0,0.35); animation: omTagPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
    .omtag i { width: 9px; height: 9px; border-radius: 999px; display: block; box-shadow: inset 0 0 0 1px rgba(22,24,29,0.12); }
    .ompolaroid { position: absolute; right: -12px; bottom: -6px; width: 190px; background: var(--space-white); border-radius: 14px; padding: 9px 9px 9px; box-shadow: 0 22px 44px -20px rgba(0,0,0,0.5); transform: rotate(3.5deg); animation: omPolaroid 0.6s cubic-bezier(0.22,1,0.36,1) 1.25s both; }
    .ompolaroid img { width: 100%; height: 118px; object-fit: cover; border-radius: 8px; display: block; }
    .omstempel { position: absolute; left: 6px; bottom: 6px; background: var(--space-black); color: var(--space-white); border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; transform: rotate(-1.5deg); }
    @keyframes omTagPop { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.8); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
    @keyframes omPolaroid { from { opacity: 0; transform: rotate(9deg) translateY(24px) scale(0.9); } to { opacity: 1; transform: rotate(3.5deg) translateY(0) scale(1); } }
    /* Kontakt loeftet (2026-08-19): creme flade + tryghedsraekke */
    .prisafsaet { display: flex; flex-direction: column; justify-content: center; border-radius: 14px; padding: 16px 22px; font-size: 12.5px; color: var(--ink-70); box-shadow: inset 0 0 0 1px rgba(22,24,29,0.06); }
    .prisafsaetfra { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 2px; }
    .prisafsaet b { font-family: var(--font-serif-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--space-black); }
    .kttryg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-self: stretch; }
    .kttryg span { background: rgba(255,255,255,0.08); border-radius: 14px; padding: 16px 18px; font-size: 12.5px; color: rgba(255,255,255,0.68); line-height: 1.45; display: block; }
    .kttryg b { display: block; font-family: var(--font-serif-display); font-weight: 800; font-size: 16px; color: var(--space-white); margin-bottom: 3px; }
    .ktsplit > div:first-child ul li { color: rgba(255,255,255,0.75) !important; }
    .ktsplit > div:first-child ul li > span { color: var(--space-yellow) !important; }
    @media (max-width: 1023px) { .ktsplit { grid-template-columns: 1fr; } .ktsplit > div { padding: 56px 24px !important; } }
    /* Brancher-oversigt loeftet til V2 (2026-08-19): farvekort m. bloede hjoerner i stedet for grid-celler */
    .brkort { border: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 36px -26px rgba(0,0,0,0.3); transition: transform .16s cubic-bezier(0.22,1,0.36,1), box-shadow .16s; }
    .brkort:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(0,0,0,0.4); }
    .brkortfoto { position: relative; display: block; height: 132px; overflow: hidden; }
    .brkortfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .brkorttekst { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
    .brkortnavn { font-family: var(--font-serif-display); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--space-black); }
    .brkortnote { font-size: 13px; color: var(--ink-70); }

    /* ===================================================================
       CONTAINER QUERIES paa de gentagne kort (2026-08-28).
       Kortene skifter bredde af to grunde: viewporten OG hvor mange kolonner
       gitteret har lige der. Maalt paa sitet: et case-kort er 320 px paa en
       360 px telefon, men kun 221 px paa en 768 px tablet, altsaa SMALLERE paa
       den stoerre skaerm. En media query kan ikke se det, fordi den kun kender
       vinduet. Kortene svarer derfor paa deres EGEN bredde herunder.
       container-type: inline-size er sikkert her, fordi alle tre er
       gitter-elementer med en bestemt bredde og ikke skalerer efter indhold. */
    .brkort   { container: brkort / inline-size; }
    .svckort  { container: svckort / inline-size; }
    .casecard { container: casecard / inline-size; }

    @container brkort (max-width: 230px) {
      .brkortfoto { height: 104px; }
      .brkorttekst { padding: 14px 16px 18px; }
      .brkortnavn { font-size: 16px; }
      .brkortnote { font-size: 12px; }
    }
    @container svckort (max-width: 260px) {
      .svckort { padding: 22px 18px; }
      .svckort > b { font-size: 17px; }
      .svckort > span { font-size: 13.5px; }
    }
    @container casecard (max-width: 260px) {
      .casecard [style*="font-size: 19px"] { font-size: 16px !important; }
    }
    /* Formular-fejl (2026-08-19): synlig, roelig, med telefonnummer som udvej */
    .formfejl { margin: 2px 0 0; background: #FDE7EC; border-radius: 12px; padding: 12px 15px; font-size: 13px; line-height: 1.5; color: #8A1F35; }

    /* Tom fejlboks var synlig som en lyserød bjælke i alle 22 demo-formularer,
       fordi den staar i markuppen fra start og foerst faar tekst ved en fejl.
       :empty loeser det uden JavaScript og uden at aendre fejltilstanden. */
    :root {
      --space-cream-soft: color-mix(in srgb, var(--space-cream) 46%, #fff);
      --space-blue-soft:  color-mix(in srgb, var(--space-blue) 44%, #fff);
    }
    .formfejl:empty { display: none; }
    /* TO BREDDER, IKKE ÉN (Nikolajs beslutning 2026-08-27).
       Alt delte samme ramme, saa naar billederne maatte fylde mere, gjorde
       teksten det ogsaa. Maalt: laengste tekstlinje var 102 tegn ved 1440 px og
       120 ved 2560. Forskningen siger 45 til 75 tegn, aldrig over 80.
       Her stopper LOEBENDE TEKST ved 68 tegn, mens gitre, billeder og mockups
       beholder hele rammen. Elementer der allerede har en egen max-width i
       inline-style roeres ikke, de er sat bevidst. */
    p:not([style*="max-width"]),
    li:not([style*="max-width"]),
    blockquote:not([style*="max-width"]) { max-width: 68ch; }


    /* Fag-panelerne ligger som boern af .demogrid, som er et gitter paa
       "280px 1fr". Uden display:contents bliver selve WRAPPEREN gitter-elementet,
       og baade knap-kolonnen og de tre kanal-kolonner mases ned i de 280 px.
       display:contents goer wrapperen usynlig for layoutet, saa panelets egne
       boern bliver gitter-elementer. [hidden] vinder paa specificitet og skjuler
       stadig de inaktive faner. */
    [data-fagpanel] { display: contents; }
    [data-fagpanel][hidden] { display: none; }


    /* WCAG 2.2 AA (2.5.8) kraever klikmaal paa mindst 24x24 px. Footer-linkene
       var 17 til 19 px hoeje, hvilket er svaert at ramme paa en telefon.
       Symmetrisk padding hoejner maalet uden at flytte teksten.
       !important er noedvendigt: generatoren skriver padding: 0px som inline
       style paa linkene, og inline slaar altid et stylesheet uden !important. */
    footer a.scp2, footer a.footerlink, footer button.footerlink { padding-block: 4px !important; }
    .navlinks > a, .navlinks > button, .navdrop > a, .navdrop > button, a.navtel { padding-block: 3px !important; }
    /* Menupunkterne braekkede over to linjer ved 1280 px ("Om" / "os", og
       caret'en under "Services"), fordi de intet nowrap havde. Fejlen var der
       ogsaa foer breakpoint-oprydningen, maalt identisk paa live-sitet. */
    .navlinks > a, .navlinks > button, .navdrop > a, .navdrop > button { white-space: nowrap; }
    .smtk__p a, p a[href^="tel:"], p a[href^="mailto:"] { padding-block: 4px; }
    .tilbagelink { padding-block: 4px !important; }
    /* Prissidens hero (fase 3, 2026-08-31): ordet "Binding." staar med en tyk
       rosa streg hen over. Stregen er ::after, saa den skalerer med teksten. */
    .prisstreg { position: relative; display: inline-block; }
    .prisstreg::after { content: ""; position: absolute; left: -3%; right: -3%; top: 50%;
      height: 0.13em; background: var(--space-pink); transform: rotate(-2.5deg) translateY(-50%);
      border-radius: 999px; }
    /* Budget-slideren er 16 px hoej som standard i Chrome. 24 px goer selve
       gribefeltet stort nok uden at aendre sporets udseende. */
    input[type="range"] { height: 24px; }
    .formfejl a { color: #8A1F35; }
    .formknap:disabled { pointer-events: none; }
    /* Juridiske sider + tak (2026-08-19) */
    .legalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; max-width: 1200px; }
    .legalblok h2 { margin: 0 0 10px; font-family: var(--font-serif-display); font-weight: 800; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
    .legalblok p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-70); max-width: 62ch; }
    .legalhjaelp { margin-top: 56px; display: flex; align-items: center; gap: 18px; background: var(--space-cream); border-radius: 18px; padding: 24px 28px; max-width: 700px; }
    .legalhjaelp img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
    .legalhjaelp b { display: block; font-family: var(--font-serif-display); font-size: 17px; }
    .legalhjaelp span { font-size: 14.5px; color: var(--ink-70); line-height: 1.55; }
    .legalhjaelp a { color: var(--space-black); font-weight: 700; }
    .takskridt { display: flex; gap: 16px; align-items: flex-start; background: var(--space-white); border-radius: 16px; padding: 20px 24px; box-shadow: 0 14px 32px -22px rgba(0,0,0,0.25); }
    .taknr { width: 32px; height: 32px; border-radius: 999px; background: var(--space-cream); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); font-weight: 800; font-size: 15px; flex-shrink: 0; }
    .takskridt b { display: block; font-family: var(--font-serif-display); font-weight: 800; font-size: 17px; margin-bottom: 3px; }
    .takskridt span { font-size: 14px; color: var(--ink-70); line-height: 1.55; }
    .footerlink { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-sans-body); font-size: 13px; color: var(--paper-70); text-decoration: underline; }
    .footerlink:hover { color: var(--space-white); }
    /* Om os: teamet i hoejsaedet (2026-08-19) */
    .omteam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .omkort { border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
    .omkort img { width: 100%; height: 340px; object-fit: cover; object-position: center 22%; display: block; }
    .omkorttekst { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 4px; }
    .omkorttekst b { font-family: var(--font-serif-display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; }
    .omrolle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-70); }
    .omkorttekst p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
    /* Om os, fase 5 (2026-08-31): Asger-pladsholder, rekrutterings-boks og
       video-ramme. Pladsholderen er tydeligt markeret som midlertidig, og
       video-rammen har et "paa vej"-maerke i stedet for en doed play-knap,
       saa intet ser klikbart ud uden at vaere det. */
    .omfotoplacer { height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: repeating-linear-gradient(-45deg, rgba(22,24,29,0.05) 0 14px, rgba(22,24,29,0.02) 14px 28px); }
    .omfotoplacer span { font-family: var(--font-serif-display); font-weight: 800; font-size: 34px; color: var(--ink-70); }
    .omfotoplacer i { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-70); background: var(--space-white); border-radius: 999px; padding: 6px 14px; }
    .omrekrut { grid-column: span 2; background: var(--space-black); color: var(--space-white); border-radius: 20px; padding: 32px 34px; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start; }
    .omrekrut p { margin: 0; font-family: var(--font-serif-display); font-weight: 800; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; max-width: 30ch; }
    .omrekrut a { margin-top: 8px; background: var(--space-cream); color: var(--space-black); border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 14.5px; text-decoration: none; }
    @media (max-width: 1023px) { .omrekrut { grid-column: auto; } }
    .omvideo { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 55px -30px rgba(0,0,0,0.4); }
    .omvideo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
    .omvideobadge { position: absolute; left: 18px; bottom: 18px; background: rgba(22,24,29,0.82); color: var(--space-white); border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 600; }
    /* Kontakt: formularen ligger som hvidt kort paa heroen, der er BLAA
       (Nikolajs valg 2026-09-01, foer sort). Skyggen er blødere end paa den
       sorte udgave, hvor den skulle vaere haard for at kunne ses. */
    .ktkort { background: var(--space-white); border-radius: 20px; padding: 36px 38px; width: 100%; box-shadow: 0 26px 50px -28px rgba(0,0,0,0.3); }
    @media (max-width: 767px) { .ktkort { padding: 26px 22px; } }
    .omkorttekst a { margin-top: 12px; align-self: flex-start; background: var(--space-white); border-radius: 999px; padding: 8px 18px; font-family: var(--font-serif-display); font-weight: 800; font-size: 17px; color: var(--space-black); text-decoration: none; }
    .ommiljo { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 16px; }
    .ommiljo img { width: 100%; height: 260px; object-fit: cover; border-radius: 16px; display: block; }
    .ompartner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .ompkort { background: var(--space-white); border-radius: 18px; padding: 0 0 22px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; overflow: hidden; }
    .ompkort img { width: 100%; height: 260px; object-fit: cover; object-position: center 18%; display: block; margin-bottom: 16px; background: var(--space-cream); }
    .ompkort b, .ompkort span:last-child { padding: 0 24px; }
    .ompkort b { font-family: var(--font-serif-display); font-weight: 800; font-size: 20px; }
    .ompkort span:last-child { font-size: 13px; color: var(--ink-70); }
    .casefilter { cursor: pointer; border: none; border-radius: 999px; padding: 10px 20px; font-family: var(--font-sans-body); font-size: 14px; font-weight: 600; transition: transform .15s; }
    .casefilter:hover { transform: translateY(-2px); }
    .brcitat { display: block; max-width: 30ch; background: var(--space-white); border-radius: 14px; padding: 14px 18px; font-size: 14.5px; line-height: 1.5; }
    .brcitat b { display: block; font-size: 12px; font-weight: 600; color: var(--ink-70); margin-top: 5px; }
    /* Web builder (2026-08-18): to linjer + tre klik = live preview af kundens egen side */
    .wbsplit { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 36px; align-items: start; }
    .wbpanel { background: var(--space-white); border-radius: 22px; padding: 32px 34px; box-shadow: 0 26px 56px -30px rgba(0,0,0,0.28); }
    .wbtrin { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; font-family: var(--font-serif-display); font-size: 17px; }
    .wbnr { width: 30px; height: 30px; border-radius: 999px; background: var(--space-black); color: var(--space-yellow); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); font-weight: 800; font-size: 14px; flex-shrink: 0; }
    .wbfelt { display: block; margin-bottom: 12px; }
    .wbfelt span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-70); margin-bottom: 6px; }
    .wbfelt input { width: 100%; box-sizing: border-box; border: none; border-radius: 12px; padding: 13px 16px; font-family: var(--font-sans-body); font-size: 15px; background: rgba(22,24,29,0.03); box-shadow: inset 0 0 0 1.5px rgba(22,24,29,0.1); outline: none; }
    .wbfelt input:focus { box-shadow: inset 0 0 0 2px var(--space-black); }
    .wbsp { margin-bottom: 16px; }
    .wbsp > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-70); margin-bottom: 8px; }
    .wbpills { display: flex; flex-wrap: wrap; gap: 8px; }
    .wbpill { border: none; border-radius: 999px; padding: 9px 17px; font-family: var(--font-sans-body); font-size: 13px; font-weight: 700; color: var(--space-black); cursor: pointer; transition: transform .15s; }
    .wbpill:hover { transform: translateY(-2px); }
    .wbfaerdig { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ink-10); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
    .wbpreview { position: relative; padding-bottom: 44px; }
    .wbfone { position: absolute; right: -10px; bottom: 0; width: 116px; border-radius: 18px; background: var(--space-black); padding: 6px; box-shadow: 0 26px 50px -22px rgba(0,0,0,0.55); animation: metaFloat 5s ease-in-out infinite alternate; }
    .wblive { display: inline-flex; align-items: center; gap: 9px; background: var(--space-white); border-radius: 999px; padding: 9px 18px; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 24px -14px rgba(0,0,0,0.3); }
    .wblivedot { width: 9px; height: 9px; border-radius: 999px; background: #21A45D; animation: wbPuls 1.3s ease-in-out infinite; }
    @keyframes wbPuls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }
    @keyframes metaFloat { from { translate: 0 0; } to { translate: 0 -9px; } }
    /* Kundens hjemmeside ruller ned, holder ved footeren og starter forfra.
       Springet tilbage sker bag et kort blink, saa det ikke rykker i oejet. */
    .tskaerm { position: relative; overflow: hidden; background: var(--space-white); animation: tBlink 13s ease-in-out infinite; }
    .trul { animation: tRul 13s ease-in-out infinite; }
    @keyframes tRul { 0%, 7% { transform: translateY(0) } 70%, 90% { transform: translateY(calc(-100% + var(--h, 300px))) } 90.01%, 100% { transform: translateY(0) } }
    @keyframes tBlink { 0%, 88.6% { opacity: 1 } 89.6%, 90.6% { opacity: 0 } 91.8%, 100% { opacity: 1 } }
    .tfone { width: 132px; border-radius: 18px; background: var(--space-black); padding: 7px; box-shadow: 0 26px 50px -24px rgba(0,0,0,0.5); flex-shrink: 0; }
    @media (max-width: 767px) { .tfone { display: none; } }
    /* Meta-hero: én telefon, tre kunder, skiftevis Facebook og Instagram. */
    .mfone { width: 302px; border-radius: 32px; background: var(--space-black); padding: 9px; box-shadow: 0 34px 64px -28px rgba(0,0,0,0.5); animation: metaFloat 5s ease-in-out infinite alternate; }
    .mskaerm { position: relative; height: 452px; border-radius: 24px; overflow: hidden; background: var(--space-white); }
    .mplatform { display: flex; align-items: center; gap: 9px; padding: 10px 13px; }
    .mslide { position: absolute; inset: 0; opacity: 0; background: var(--space-white); animation: mSkift 10.5s ease-in-out infinite; }
    .mslide:nth-child(2) { animation-delay: 3.5s; }
    .mslide:nth-child(3) { animation-delay: 7s; }
    @keyframes mSkift { 0% { opacity: 0 } 2%, 31% { opacity: 1 } 33%, 100% { opacity: 0 } }
    @media (max-width: 767px) { .mfone { width: 268px; } .mskaerm { height: 420px; } }
    @keyframes metaHjerte { 0% { opacity: 0; transform: translateY(0) scale(0.7); } 14% { opacity: 1; } 100% { opacity: 0; transform: translateY(-96px) scale(1.3) rotate(14deg); } }
    @keyframes metaNotif { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
    @keyframes webBlok { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes webStamp { from { opacity: 0; transform: scale(2.2) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(-4deg); } }
    @media (prefers-reduced-motion: reduce) {
      .omtag, .ompolaroid, .seotype, .seocaret, .seopin, .seopinskygge, .seopulsring, .seochip, .seokonkpin, .seorute path, .seokort .bund, .metakort, .metahjerte, .metanotif, .webblok, .webstamp, .webfone, .wbfone, .wblivedot, .mailskel, .mailsendt, .mfone, .trul, .tskaerm { animation: none !important; }
      .seokonkpin, .seochip, .metanotif, .webblok, .webstamp, .mailskel, .mailsendt { opacity: 1; }
      .seorute path { stroke-dashoffset: 0; }
      .seopulsring, .metahjerte { opacity: 0; }
    }
    @media (max-width: 1023px) {
      .ompolaroid { position: static; width: 100%; margin-top: 14px; transform: none; animation: none; }
      .omstempel { position: static; display: inline-flex; margin-top: 12px; transform: none; }
      .omcollage { padding: 18px 0 0; }
      .omplade { display: none; }
      .kttryg,
      .legalgrid,
      .omteam, .ommiljo, .ompartner,
      .adssplit, .adscase, .seosplit, .wbsplit, .brkryds, section[data-screen-label="Ads stemmer"] > div { grid-template-columns: 1fr !important; }
      .brkpi { position: static; margin-top: 16px; max-width: none; }
      .wbpanel { padding: 26px 22px; }
      .wbpreview { padding-bottom: 0; }
      .wbfone { display: none; }
    }
    .svcitem { transition: background .15s ease; }
    .svcitem:hover { background: rgba(22,24,29,0.045); }
    .svcitem:hover .svcpil { transform: translateX(3px); }
    .svcpil { display: inline-block; transition: transform .15s ease; }
    .navdropmenu > button:first-child, .navdropmenu > a:first-child { border-radius: 0; }
    .navdropmenu > button:last-child, .navdropmenu > a:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
    /* V2: accent-CTA paa de sorte hero-flader = rosa (style-prop paa DS-knappen
       er en no-op i runtimen, og sort knap paa sort hero forsvinder) */
    section[data-screen-label^="Forside hero"] button[style*="--btn-accent-bg"],
    section[data-screen-label="Bevis-band"] button[style*="--btn-accent-bg"] {
      background: var(--space-cream) !important;
      color: var(--space-black) !important;
      border-color: var(--space-cream) !important;
    }
    /* Mobil-nav (F2 2026-08-10): burger + fuldskærms-overlay + sticky bund-bar */
    .mmburger { display: none; background: none; border: 1px solid var(--ink-10); padding: 10px 11px; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; flex-shrink: 0; }
    .mmburger span { width: 20px; height: 2px; background: var(--space-black); display: block; }
    .mobilebar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--space-white); border-top: 1px solid var(--ink-10); }
    .mmlink { background: none; border: none; border-bottom: 1px solid var(--ink-10); padding: 16px 0; text-align: left; cursor: pointer; font-family: var(--font-serif-display); font-weight: 800; font-size: 26px; color: var(--space-black); }
    .mmsub { background: none; border: none; padding: 9px 0 9px 16px; text-align: left; cursor: pointer; font-family: var(--font-sans-body); font-size: 15px; color: var(--ink-70); }

/* FAQ som native <details>. Erstatter SPA'ens JS-accordion: alt indhold ligger
   i HTML'en, virker uden JavaScript, og browseren haandterer tilgaengeligheden. */
.faq{border-bottom:var(--hairline)}
.faq>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:20px 0;cursor:pointer;list-style:none;text-align:left;
  font-family:var(--font-sans-body);font-size:var(--text-lead);
  font-weight:var(--weight-medium);color:var(--space-black)}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::after{content:"+";font-size:22px;font-weight:300;flex-shrink:0;line-height:1}
.faq[open]>summary::after{content:"−"}
.faq>summary:focus-visible{outline:2px solid var(--space-black);outline-offset:2px}