/* ═══════════════════════════════════════════════════════════════ FORTA — designsystem 24-08-2026 Ét udtryk for hele web.forta.dk: forside + alle undersider. Bygger videre på prototypen fra 23-08 (samme tokens, samme komponentnavne, så forsiden bærer uændret over), udvidet med: · undersidehelte (.page-hero) med sidespecifikke varianter · split-sektioner, funktionskort, manifest, tidslinje · formularer (kontakt), sammenligningstabel, FAQ · mobilmenu (før forsvandt navigationen helt under 860px) · «under udvikling»-sprog (.blueprint) til Forta Call Lys palet defineres KOMPLET på :root; mørk redefinerer KUN tokens. Ingen farve findes kun i én tilstand. ═══════════════════════════════════════════════════════════════ */ :root{ --ink-900:#0B1B2B; /* Fortas mærkefarver — uændrede, de sidder i logoet */ --blue-900:#0F3A5A; --blue-800:#184365; --blue-700:#1B567E; --blue-500:#1E96B0; --teal-400:#2BB3B8; --teal-300:#4DC5C7; --hl-a:#156979; --hl-b:#1E7D81; /* hero-gradient, lys tilstand - maalt */ --teal-200:#8FDADC; --teal-100:#D6F1F2; /* Neutraler med kold bias mod mærkets blå */ --ground:#FAFBFC; --surface:#FFFFFF; --surface-2:#F2F6F9; --surface-3:#E7EEF3; --line:#DCE6ED; --line-soft:#EAF0F5; --text:#0B1B2B; --text-2:#3A5266; --text-3:#5A7288; --deep:#08243A; --deep-2:#0C3350; --accent:var(--teal-400); --brand:var(--blue-700); --glow:#4DDCD0; /* Semantisk — adskilt fra mærkefarven */ --ok:#146F4A; --ok-bg:#E6F5EE; --warn:#996102; --warn-bg:#FDF3E2; --crit:#C2413B; --crit-bg:#FBEAE9; --info:#15637F; --info-bg:#E4F2F8; --shadow-1:0 1px 2px rgba(11,27,43,.05), 0 1px 3px rgba(11,27,43,.04); --shadow-2:0 4px 12px rgba(11,27,43,.06), 0 2px 4px rgba(11,27,43,.04); --shadow-3:0 18px 40px -12px rgba(11,27,43,.16), 0 6px 14px rgba(11,27,43,.06); --shadow-4:0 44px 90px -24px rgba(8,36,58,.32), 0 14px 36px -12px rgba(8,36,58,.16); --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --maxw:1220px; --display:'Sora',system-ui,-apple-system,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --hl-a:var(--blue-500); --hl-b:var(--teal-400); /* moerk bestod allerede */ --ground:#071522; --surface:#0D2233; --surface-2:#122B3F; --surface-3:#19374D; --line:#1E4059; --line-soft:#163247; --text:#EAF2F8; --text-2:#A9C0D2; --text-3:#7A96AC; --deep:#050F1A; --deep-2:#08243A; --brand:#3FA5C7; --accent:#3FC8CC; --ok:#43C08A; --ok-bg:#0E2E22; --warn:#E0A33C; --warn-bg:#33260C; --crit:#E4736C; --crit-bg:#331816; --info:#4FB4D8; --info-bg:#0C2E3D; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 12px rgba(0,0,0,.4); --shadow-3:0 18px 40px -12px rgba(0,0,0,.55); --shadow-4:0 44px 90px -24px rgba(0,0,0,.7); /* 🔴 TILFOEJET 04-09-2026. style.css definerer disse fem paa :root og har NUL moerke blokke, saa de stod uaendret i moerkt tema. Overskrifter fik --forta-ink-900 (#0B1B2B) paa grunden #071522 = 1,06:1 — usynligt. forta-2026.css:105 roerer h1-h4 UDEN color og overskrev altsaa ikke. Maalt: 5 af 19 --forta-* teksttokens under 4,5:1 mod moerk grund. */ --forta-ink-900:#EAF2F8; --forta-ink-800:#D6E4EF; --forta-ink-700:#A9C0D2; --forta-ink-600:#93AABD; --forta-blue-700:#5FB8D8; } } :root[data-theme="dark"]{ --hl-a:var(--blue-500); --hl-b:var(--teal-400); /* moerk bestod allerede */ --ground:#071522; --surface:#0D2233; --surface-2:#122B3F; --surface-3:#19374D; --line:#1E4059; --line-soft:#163247; --text:#EAF2F8; --text-2:#A9C0D2; --text-3:#7A96AC; --deep:#050F1A; --deep-2:#08243A; --brand:#3FA5C7; --accent:#3FC8CC; --ok:#43C08A; --ok-bg:#0E2E22; --warn:#E0A33C; --warn-bg:#33260C; --crit:#E4736C; --crit-bg:#331816; --info:#4FB4D8; --info-bg:#0C2E3D; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 12px rgba(0,0,0,.4); --shadow-3:0 18px 40px -12px rgba(0,0,0,.55); --shadow-4:0 44px 90px -24px rgba(0,0,0,.7); /* 🔴 TILFOEJET 04-09-2026. style.css definerer disse fem paa :root og har NUL moerke blokke, saa de stod uaendret i moerkt tema. Overskrifter fik --forta-ink-900 (#0B1B2B) paa grunden #071522 = 1,06:1 — usynligt. forta-2026.css:105 roerer h1-h4 UDEN color og overskrev altsaa ikke. Maalt: 5 af 19 --forta-* teksttokens under 4,5:1 mod moerk grund. */ --forta-ink-900:#EAF2F8; --forta-ink-800:#D6E4EF; --forta-ink-700:#A9C0D2; --forta-ink-600:#93AABD; --forta-blue-700:#5FB8D8; } /* ── Grundlag ─────────────────────────────────────────── */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--ground); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:'cv11','ss01'; accent-color:var(--accent); } h1,h2,h3,h4{font-family:var(--display); font-weight:500; letter-spacing:-.025em; line-height:1.1; text-wrap:balance; margin:0} p{margin:0} a{color:inherit} img,svg{max-width:100%} ::selection{background:color-mix(in srgb,var(--teal-400) 30%,transparent)} :focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px} .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--surface); color:var(--text); padding:12px 20px; border-radius:0 0 var(--r-sm) 0; border:1px solid var(--line); font-weight:600; } .skip:focus{left:0} .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px} .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); } .eyebrow::before{content:""; width:18px; height:1.5px; background:var(--accent)} .lead{font-size:1.125rem; color:var(--text-2); max-width:62ch; line-height:1.65} .num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:'tnum'} /* ── Knapper ─────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:var(--r-sm); font-weight:600; font-size:.95rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s; font-family:var(--body); white-space:nowrap; } .btn-primary{ /* Moerk tekst paa lys teal, ikke hvid paa teal. Maalt: hvid gav 2,74:1 i gradientens lyse ende - sitets vigtigste CTA. En moerkere gradient loeste det ikke (3,79:1 selv i vaerste kandidat, fordi MIDTEN ogsaa er for lys), saa teksten er vendt i stedet. Vaerste punkt paa hele gradienten er nu 6,84:1. */ background:linear-gradient(135deg,var(--teal-400) 0%,var(--teal-300) 50%,var(--teal-200) 100%); color:var(--ink-900,#0B1B2B); box-shadow:0 4px 16px -3px rgba(43,179,184,.45); } .btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px -6px rgba(43,179,184,.55)} .btn-ghost{background:var(--surface); color:var(--text); border-color:var(--line)} .btn-ghost:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px)} .btn-light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px)} .btn-light:hover{background:rgba(255,255,255,.18); transform:translateY(-2px)} /* ── Header + navigation ─────────────────────────────── */ /* 🔴 RETTET 25-09-2026 (designloeftet). Her stod backdrop-filter:blur(14px) saturate(1.6) og saturate-leddet ALENE gjorde gengivelsen ustabil: forta-sign@1440 moerk afveg i ~32 % af gengivelserne (0/100 med blur alene, 41/100 og 37/100 med saturate alene — LEVERANCE-webglasur.md). Maetningen er flyttet UD af filterkaeden og ind i et fast farvelag: et svagt teal- skaer i selve baggrunden. Glasset er stadig glas (gennemskinneligt, sloeret); farven regnes bare ikke laengere ud af det der ligger bagved. Formen stammer fra Astras forslag (forslag/astra-designloeft.md §1). Resten af headeren staar i DESIGNLOEFT-laget sidst i filen. */ .hdr{ position:sticky; top:0; z-index:80; background: linear-gradient(110deg,color-mix(in srgb,var(--teal-400) 7%,transparent),transparent 58%), var(--ground); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hdr{ background: linear-gradient(110deg,color-mix(in srgb,var(--teal-400) 7%,transparent),transparent 58%), color-mix(in srgb,var(--ground) 86%,transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } /* Over en MOERK helt (kun /hvorfor-forta/, .page-hero.dark) blev det lyse glas graat-mudret i lyst tema — set i efter2-skuddet. Dér er glasset naesten taet, saa headeren staar som en ren lys flade. */ :root:has(.page-hero.dark) .hdr{ background: linear-gradient(110deg,color-mix(in srgb,var(--teal-400) 7%,transparent),transparent 58%), color-mix(in srgb,var(--ground) 95%,transparent); } } .hdr.scrolled{border-bottom-color:var(--line-soft); box-shadow:var(--shadow-1)} .hdr-in{display:flex; align-items:center; gap:32px; height:70px} .logo{display:flex; align-items:center; text-decoration:none} /* Det rigtige Forta-logo: forta-logo.svg paa lys bund, forta-logo-light.svg paa moerk. Valget foelger BAGGRUNDEN (her: header/footer = sidens grund). */ .logo .lg{display:block; height:34px; width:auto} .logo .lg-on-dark{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .logo .lg-on-light{display:none} :root:not([data-theme="light"]) .logo .lg-on-dark{display:block} } :root[data-theme="dark"] .logo .lg-on-light{display:none} :root[data-theme="dark"] .logo .lg-on-dark{display:block} .nav{display:flex; gap:4px; margin-left:auto} .nav a{ padding:9px 14px; border-radius:7px; font-size:.9rem; font-weight:500; color:var(--text-2); text-decoration:none; transition:background .16s,color .16s; } .nav a:hover{background:var(--surface-2); color:var(--text)} .nav a[aria-current="page"]{color:var(--brand); font-weight:600; background:color-mix(in srgb,var(--teal-400) 10%,transparent)} .hdr .btn{padding:10px 20px; font-size:.875rem} /* Mobilmenu — burgeren erstatter nav'en, den forsvinder ikke længere bare */ .nav-burger{ display:none; margin-left:auto; width:44px; height:44px; border-radius:9px; border:1px solid var(--line); background:var(--surface); cursor:pointer; align-items:center; justify-content:center; color:var(--text); } .nav-burger svg{width:20px; height:20px} .nav-burger .ic-close{display:none} .nav-burger[aria-expanded="true"] .ic-open{display:none} .nav-burger[aria-expanded="true"] .ic-close{display:block} .mnav{ display:none; position:absolute; inset:70px 0 auto 0; z-index:79; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-3); padding:10px 24px 22px; } .mnav.open{display:block; animation:mnav .22s ease} @keyframes mnav{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}} .mnav a{ display:block; padding:13px 10px; font-size:1.02rem; font-weight:600; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line-soft); } .mnav a[aria-current="page"]{color:var(--brand)} .mnav .btn{display:flex; margin-top:16px; border-bottom:none} @media (max-width:900px){ .nav, .hdr-in > .btn{display:none} .nav-burger{display:inline-flex} } /* ── Forside-hero ─────────────────────────────────────── */ .hero{position:relative; padding:56px 0 0; overflow:hidden} .hero-in{position:relative; z-index:1; text-align:center} .hero h1{ font-size:clamp(2.6rem,6.4vw,4.7rem); letter-spacing:-.042em; line-height:1.06; margin:22px auto 0; max-width:20ch; font-weight:500; } .hero h1 .hl, .hl{ /* 🔴 Hero-overskriften på ni sider var turkis tekst på turkis aurora. Målt 26-08-2026 med teksten SKJULT, så baggrunden kunne måles alene: mod de lyseste 5 % af auroraen gav den gamle gradient 2,05–3,28:1 på alle elleve sider, hvor stor tekst kræver 3,0. Efterset 1:1 — højre halvdel af linjen opløstes i baggrunden. Gradienten er mørknet ~30 %: 4,60–5,94:1 mod værste baggrund. ⚠️ Det er den LYSE ende der binder. En kandidat der kun mørknede starten (blue-700 → teal-400) gav 7,01:1 i venstre ende og stadig 3,78:1 i højre — samme fælde som knapgradienten i sin tid. ⚠️ Og rettelsen er LYS TILSTAND ALENE. I mørk tilstand bestod den gamle gradient allerede (0 fund), og en mørkere tekst dér ville gøre det modsatte af hvad den skal. */ background:linear-gradient(120deg,var(--hl-a),var(--hl-b)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero .lead{margin:24px auto 0; text-align:center; font-size:1.2rem} .hero-cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:34px} .hero-note{margin-top:16px; font-size:.83rem; color:var(--text-3)} /* ── Undersidehelt — hver side får sit eget ansigt ────── */ .page-hero{position:relative; padding:72px 0 64px; overflow:hidden} .page-hero::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:640px; z-index:0; background: radial-gradient(52% 46% at 16% 12%, rgba(43,179,184,.14), transparent 62%), radial-gradient(46% 44% at 88% 6%, rgba(30,150,176,.11), transparent 60%); pointer-events:none; } .page-hero > .wrap{position:relative; z-index:1} .page-hero h1{font-size:clamp(2.3rem,5vw,3.7rem); letter-spacing:-.038em; margin-top:20px; max-width:22ch} .page-hero .lead{margin-top:22px} .page-hero .hero-cta{justify-content:flex-start; margin-top:30px} .page-hero.mid{text-align:center} .page-hero.mid h1,.page-hero.mid .lead{margin-inline:auto} .page-hero.mid .eyebrow{justify-content:center} .page-hero.mid .hero-cta{justify-content:center} /* Produkthelt med skærmbillede under teksten */ .page-hero .stage{margin-top:52px; padding-bottom:24px} /* Mørk helt — til sider der skal åbne med vægt (Hvorfor Forta) */ .page-hero.dark{ background:linear-gradient(160deg,var(--deep) 0%,var(--deep-2) 70%,#0d4058 115%); color:#fff; padding-bottom:84px; } .page-hero.dark::before{ inset:auto -10% -50% -10%; height:600px; background:radial-gradient(50% 60% at 50% 100%, rgba(43,179,184,.18), transparent 66%); } .page-hero.dark h1{color:#fff} .page-hero.dark .lead{color:rgba(255,255,255,.74)} .page-hero.dark .eyebrow{color:var(--teal-300)} .page-hero.dark .eyebrow::before{background:var(--teal-300)} /* ── Ramme om skærmbilleder ──────────────────────────── */ .stage{position:relative; margin-top:56px; padding-bottom:90px} @media (min-width:901px){ .hero > .stage{margin-top:36px; padding-bottom:56px} } .stage::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(1180px,94vw); height:340px; z-index:0; background:radial-gradient(50% 60% at 50% 100%, rgba(27,86,126,.13), transparent 70%); pointer-events:none; } .frame{ position:relative; z-index:1; max-width:1180px; margin-inline:auto; border-radius:var(--r-xl); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-4); } .frame-bar{ display:flex; align-items:center; gap:9px; padding:12px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); } .dot{width:11px; height:11px; border-radius:50%; flex:none} .url{ flex:1; margin-left:12px; padding:6px 15px; border-radius:99px; background:var(--surface); border:1px solid var(--line); font-family:var(--mono); font-size:.76rem; color:var(--text-3); display:flex; align-items:center; gap:8px; max-width:340px; } .url .lock{width:11px; height:11px; flex:none; color:var(--ok)} .shot{display:block; width:100%; height:auto; border:0} .shot-wrap{position:relative; display:block; line-height:0; background:var(--surface-2)} /* ── Sektioner ───────────────────────────────────────── */ section{padding:96px 0} .sec-h{max-width:660px; margin-bottom:46px} .sec-h h2{font-size:clamp(1.85rem,3.6vw,2.7rem); margin:16px 0 0; letter-spacing:-.032em} .sec-h p{margin-top:16px; color:var(--text-2); font-size:1.06rem; line-height:1.65} .sec-h.mid{margin-inline:auto; text-align:center} .sec-h.mid .eyebrow{justify-content:center} .alt{background:var(--surface-2); border-block:1px solid var(--line-soft)} /* ═══════════════════════════════════════════════════════════════ FORSIDENS RYTME — 12-09-2026 MAALT paa den udrullede forside 12-09-2026 (sporet webforside, LEVERANCE-forsidens-anatomi.md): · seks af ti blokovergange var PRAECIS 192 px (96+96) — fra ÉN regel, `section{padding:96px 0}` herover · seks af ni afsnit laa mellem 878 og 1.019 px ved 1280 · seks af ni overskrifter stod i PRAECIS samme grad, 43 px · theme.jsons spacingScale blev brugt NUL gange i denne fil Det er ikke «hvert tal er sit eget» — det er det modsatte: ét tal til alt. En besoegende der ruller, moeder samme takt seks gange. 🔴 RYTMEN ER IKKE EN KRYMPNING. En rytme har BAADE taette og aabne steder, og begge dele er maalt herunder: taettere integrationer → beregner 192 → 135 px aabnere priser → kontakt 192 → 243 px Gaar man kun den ene vej, har man gjort siden mindre, ikke rytmisk. TRE VAEGTE, OG DE ER theme.jsons EGNE TRIN (increment 1.5): taet 54 px = spacingScale trin 6 (3,375 rem) mellem 81 px = trin 7 (5,0625 rem) aaben 121,5 px = trin 8 (7,59375 rem) ⚠️ SKREVET UD SOM TAL, IKKE SOM `var(--wp--preset--spacing--80)`. Et opslag i et stilark vi ikke ejer flytter hele forsidens rytme tavst den dag nogen aendrer theme.jsons increment. Tallene ER skalaens; bindingen er dokumenteret og ikke udfoert. De staar heller ikke i egne `:root`-tokens — hvorfor ikke, er MAALT og staar ved reglerne herunder. VAEGTEN FOELGER HVAD SEKTIONEN GOER — ikke hvor den staar: PRAESENTERER viser fladen frem (tur, mobil) → mellem/aaben FORKLARER korte kort + forbehold (integrationer) → taet OPREGNER katalog over fem produkter (familien) → taet HANDLER vaerktoej og afslutning (beregner, kontakt) VAELGER sidens beslutning (priser) → aaben Og den anden halvdel af begrundelsen er BAGGRUNDEN, som er maalt i denne fil: .tour og .calc er baand (surface-2 + border-block), .mob og .cta er moerke plader, mens integrationer, familien og priser staar paa den bare grund. En baands- eller pladekant ADSKILLER i forvejen; to plain sektioner i traek har intet mellem sig ud over luften. Derfor er familien → priser (175,5 px) aabnere end integrationer → beregner (135 px), selvom begge er «taet» i den ene ende. 🔴 OMFANGET ER FORSIDEN ALENE. Vaelgerne er id'er og ikke `section`, fordi `section{padding:96px 0}` baerer alle 12 sider. Maalt 12-09-2026: ingen af de syv id'er findes i site-indhold/sider-spejl.json (positiv kontrol: `book-demo` findes, og den er den ENESTE sektion-id paa en underside). ⚠️ Og derfor IKKE `main#indhold` som omfang, selvom kun forsiden har et
i den byggede flade: templates/page.html baerer OGSAA `id="indhold"`, saa paa det rigtige site ville det omfang ramme hver eneste underside. Den byggede flade og sitet er ikke enige om netop den ting. ═══════════════════════════════════════════════════════════════ */ section#tur, section#beregner {padding:81px 0} /* mellem */ section#mobil, section#priser, section#kontakt {padding:121.5px 0} /* aaben */ section#integrationer{padding:81px 0 54px} /* mellem -> taet */ section#familien {padding:54px 0} /* taet */ /* ⬛ SKREVET UD SOM TAL, IKKE SAT I `:root`-TOKENS. RETTET 12-09-2026, OG RETTELSEN ER EN MAALING. Foerste udgave lagde de tre vaegte i `:root{--ry-taet:54px; --ry-mellem:81px; --ry-aaben:121.5px}`. pixeldiff meldte da 600 aendrede pixels paa KONTAKT-siden ved 1440, 1280, 1024 og 901 i BEGGE temaer — en side ingen af rytmens vaelgere kan ramme. Bisektion, én regel ad gangen, samme maaler: :root{--ry-*} 600 px de syv padding-regler 0 px de to overskriftsregler 0 px .sec-h-margenerne 0 px … og saa videre, ud af rytmen og over i noget helt andet: :root{--zzz-proeve:1px} 600 px html{--zzz-proeve:1px} 600 px body{--zzz-proeve:1px} 600 px :root{} (tom) 0 px .findes-ikke-nogen-steder{} 0 px uden vs uden (stoejgulvet) 0 px 🔴 EN HVILKEN SOM HELST NY CUSTOM PROPERTY paa en foraelder til et NATIVT paa kontakt-siden (kasse 279,1331 439x16). VAERDIEN er ligegyldig, og NAVNET er ligegyldigt; det er NEDARVNINGEN der udloeser det. Et tomt `:root{}` gjorde intet. ⚠️ Konsekvensen for enhver senere aendring her: en ny `--token` paa :root er ikke gratis. Den koster et pixelfund paa hver side med en formular — og fundet peger paa et sted i CSS'en der ikke har noget med formularen at goere. Vi brugte en time paa at lede i rytmen. */ /* ── Overskriftsgraderne ────────────────────────────── Seks overskrifter i samme grad er en beslutning ingen har truffet; den er en bivirkning af at de alle ligger i `.sec-h`. Her faar de tre grader efter samme rolleinddeling som luften: baerende tur, mobil de to afsnit der VISER fladen mellem beregner, priser, familien uaendret 43 px let integrationer kortgitret der forklarer MAALT ved 1280 px foer: 75 · 43 · 43 · 43 · 43 · 43 · 43 · 48 · 22 Efter staar graderne 75 · 52,8 · 48 · 43,2 · 32,8 · 22. ⬛ FAMILIEN VAR FOERST «let», OG DET VAR EN UDLEDNING DER TABTE MOD EN MAALING (12-09-2026). Rollelaesningen «fem kort = et katalog» er min; maalingen siger noget andet: forsidens FOERSTE klikbare produktlink ligger i familien, 5.814 px nede = 73 % af dokumentet, og alle fem produktlinks staar dér (LEVERANCE-forsidens-anatomi §3-4). Sektionen er sidens eneste produktindgang. At saette den i sidens MINDSTE grad ville have vaeret praecis den forsigtige retning AGENTS.md advarer om: den ser ansvarlig ud, og ingen kontrol fanger den. Den beholder derfor 43 px og faar sin vaegt i luften (54 px, den taetteste paa siden) — samme uafhaengighed mellem de to haandtag som priser bruger den anden vej. 🔴 PRISER FAAR LUFT, IKKE GRAD. To vaegte paa samme sektion er ikke et hierarki, det er en understregning gentaget. At sidens beslutning kan loeftes med luft ALENE er selve pointen i at de to haandtag er uafhaengige. */ section#tur .sec-h h2, section#mobil h2{font-size:clamp(2.15rem,4.4vw,3.3rem); letter-spacing:-.036em} section#integrationer .sec-h h2{font-size:clamp(1.5rem,2.6vw,2.05rem); letter-spacing:-.026em} /* Luften UNDER overskriftsblokken er det tredje haandtag, og den virker INDE i sektionen. Et katalog skal staa taet paa sin egen overskrift; en beslutning skal ikke. */ section#integrationer .sec-h{margin-bottom:32px} section#familien .sec-h{margin-bottom:40px} section#priser .sec-h{margin-bottom:52px} /* ⚠️ familiens 40 px ER en maaling og ikke en aestetisk finpudsning. Med sec-h-standardens 46 px stod dokumentet ved 1024 px paa 9.366 mod grundlagets 9.365 — ÉN pixel over, og opgavens haarde graense er at siden ikke maa VOKSE ved nogen bredde. De 6 px betaler den. 1024 er den eneste bredde hvor tur'ens stoerre overskrift koster en ekstra linje; de fem andre bredder havde luft nok i forvejen. */ @media (max-width:860px){ /* Samme tre vaegte, ét trin ned ad SAMME skala: trin 5/6/7. 🔴 Rytmen maa ikke forsvinde paa telefonen — der er den mest maerkbar, fordi alt er stablet og luften er det eneste der skiller afsnittene. Uden dette blok ville id-vaelgerne (0,1,0,1) slaa `section{padding:70px 0}` (0,0,0,1) og give TELEFONEN skrivebordets tal. Specificitet, ikke raekkefoelge. */ section#tur, section#beregner {padding:54px 0} section#mobil, section#priser, section#kontakt {padding:81px 0} section#integrationer{padding:54px 0 36px} section#familien {padding:36px 0} } /* ── Split — tekst ved siden af skærmbillede ─────────── */ .split{display:grid; grid-template-columns:1fr 1.25fr; gap:56px; align-items:center} .split.rev{grid-template-columns:1.25fr 1fr} .split.rev .split-txt{order:2} .split.rev .split-media{order:1} .split-txt h2{font-size:clamp(1.7rem,3vw,2.35rem); margin-top:16px; letter-spacing:-.03em} .split-txt h3{font-size:clamp(1.45rem,2.5vw,1.9rem); margin-top:16px; letter-spacing:-.028em} .split-txt p{margin-top:16px; color:var(--text-2); line-height:1.65} .split-media .pane-shot{margin:0} .ticks{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:11px} .ticks li{display:flex; gap:11px; align-items:flex-start; font-size:.895rem; color:var(--text-2); line-height:1.5} .ticks svg{width:17px; height:17px; flex:none; color:var(--accent); margin-top:2px} @media (max-width:1000px){ .split,.split.rev{grid-template-columns:1fr; gap:34px} .split.rev .split-txt{order:1} .split.rev .split-media{order:2} } /* ── Faneblade (produkt-tur) ─────────────────────────── */ .tour{background:var(--surface-2); border-block:1px solid var(--line-soft)} .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px} .tab{ padding:10px 18px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-size:.875rem; font-weight:600; color:var(--text-2); cursor:pointer; font-family:var(--body); transition:all .18s; display:inline-flex; align-items:center; gap:8px; } .tab:hover{border-color:var(--brand); color:var(--brand)} .tab[aria-selected="true"]{ background:linear-gradient(135deg,var(--blue-700),var(--blue-500)); color:#fff; border-color:transparent; box-shadow:0 4px 13px -3px rgba(27,86,126,.45); } .tab svg{width:15px; height:15px} .pane{display:none} .pane.on{display:block; animation:fade .38s ease} @keyframes fade{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}} .pane-grid{display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start} .pane-shot{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-3); background:var(--surface); } .pane-side h3{font-size:1.35rem; margin-bottom:12px; letter-spacing:-.025em} .pane-side p{color:var(--text-2); font-size:.95rem; line-height:1.65} /* ── Funktionskort ───────────────────────────────────── */ .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .feat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:10px; transition:transform .2s, box-shadow .2s; } .feat:hover{transform:translateY(-3px); box-shadow:var(--shadow-3)} .feat-ic{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--blue-500) 14%,var(--surface-2)),color-mix(in srgb,var(--teal-400) 14%,var(--surface-2))); border:1px solid var(--line-soft); color:var(--brand); margin-bottom:4px; } .feat-ic svg{width:20px; height:20px} .feat h3{font-size:1.05rem; font-weight:600; letter-spacing:-.018em} .feat p{font-size:.895rem; color:var(--text-2); line-height:1.6} .feat .tag{align-self:flex-start; margin-top:auto} @media (max-width:1000px){.feat-grid{grid-template-columns:1fr 1fr}} @media (max-width:620px){.feat-grid{grid-template-columns:1fr}} /* ── Mørk sektion (mobil m.m.) ───────────────────────── */ .mob{background:var(--deep); color:#fff; position:relative; overflow:hidden} .mob::before{ content:""; position:absolute; inset:0; background:radial-gradient(46% 52% at 78% 30%, rgba(43,179,184,.2), transparent 62%); pointer-events:none; } .mob .wrap{position:relative; z-index:1} .mob-grid{display:grid; grid-template-columns:1fr 400px; gap:60px; align-items:center} .mob h2{color:#fff; font-size:clamp(1.9rem,3.6vw,2.7rem)} .mob .lead{color:rgba(255,255,255,.72)} .mob .eyebrow{color:var(--teal-300)} .mob .eyebrow::before{background:var(--teal-300)} .mob-pts{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:16px} .mob-pts li{display:flex; gap:14px; align-items:flex-start} .mob-pts .ic{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); color:var(--teal-300); } .mob-pts .ic svg{width:16px; height:16px} .mob-pts b{display:block; font-size:.95rem; font-weight:600; margin-bottom:2px} .mob-pts span{font-size:.87rem; color:rgba(255,255,255,.62); line-height:1.55} .phone{ width:325px; margin-inline:auto; border-radius:36px; padding:11px; background:linear-gradient(160deg,#243b4e,#0f2233); box-shadow:0 40px 80px -22px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.09); } .phone-in{border-radius:26px; overflow:hidden; background:var(--surface)} .phone-body{min-height:490px; background:var(--surface-2); padding:14px; display:flex; flex-direction:column; gap:11px} .phone-body:has(.shot){padding:0; gap:0; min-height:0} /* ── Integrationer ───────────────────────────────────── */ .int-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px} .int{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-1); transition:transform .2s, box-shadow .2s, border-color .2s; display:flex; flex-direction:column; gap:11px; } .int:hover{transform:translateY(-3px); box-shadow:var(--shadow-3); border-color:var(--line)} .int-top{display:flex; align-items:center; gap:12px} .int-logo{ width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line-soft); font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--brand); } .int-n{font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.015em} .int-d{font-size:.865rem; color:var(--text-2); line-height:1.55; flex:1} .int .tag{align-self:flex-start} .tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:.7rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; } .t-ok{background:var(--ok-bg); color:var(--ok)} .t-warn{background:var(--warn-bg); color:var(--warn)} .t-info{background:var(--info-bg); color:var(--info)} /* ── Manifest / principper (Hvorfor Forta) ───────────── */ .prins{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line)} .prin{ padding:44px 36px 44px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; align-items:start; } .prin:nth-child(odd){padding:44px 32px 44px 0} .prin:nth-child(even){padding:44px 0 44px 32px; border-left:1px solid var(--line)} .prin-nr{ font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--text-3); padding-top:8px; letter-spacing:.04em; } .prin-nr::after{content:""; display:block; width:30px; height:2px; background:var(--accent); margin-top:12px} .prin h3{font-size:1.35rem; letter-spacing:-.024em} .prin p{margin-top:12px; color:var(--text-2); line-height:1.65} @media (max-width:900px){ .prins{grid-template-columns:1fr} .prin,.prin:nth-child(odd),.prin:nth-child(even){padding:34px 0; border-left:none} .prin{grid-template-columns:32px minmax(0,1fr); gap:14px} } /* ── Store tal / fakta-bånd ──────────────────────────── */ .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px} .fact{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--shadow-1); } .fact-l{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3)} .fact-v{font-family:var(--display); font-size:1.25rem; font-weight:600; margin-top:8px; letter-spacing:-.02em} .fact-s{font-size:.83rem; color:var(--text-3); margin-top:4px} /* ── Tidslinje (Om Forta) ────────────────────────────── */ .tl{list-style:none; margin:0; padding:0; position:relative} .tl::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line)} .tl li{position:relative; padding:0 0 34px 40px} .tl li:last-child{padding-bottom:0} .tl li::before{ content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--surface); border:3px solid var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--teal-400) 14%,transparent); } .tl-year{font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--brand); letter-spacing:.05em} .tl h3{font-size:1.12rem; margin-top:4px; letter-spacing:-.018em} .tl p{margin-top:8px; color:var(--text-2); font-size:.93rem; line-height:1.6} /* ── Citat ───────────────────────────────────────────── */ .quote{ max-width:860px; margin-inline:auto; text-align:center; padding:0 24px; } .quote blockquote{ margin:0; font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:500; letter-spacing:-.022em; line-height:1.45; text-wrap:balance; } .quote blockquote::before{content:"«"} .quote blockquote::after{content:"»"} .quote-by{display:flex; align-items:center; gap:13px; justify-content:center; margin-top:26px} .quote-av{ width:44px; height:44px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--blue-700),var(--blue-500)); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.85rem; } .quote-n{text-align:left; font-size:.9rem} .quote-n b{display:block; font-weight:650} .quote-n span{color:var(--text-3); font-size:.82rem} /* ── Priser ──────────────────────────────────────────── */ /* align-items var «start», saa de tre prisbokse fik hver sin naturlige hoejde: 69px spredning i bunden og knapperne 68px forskudt. Kortene er allerede flex-kolonner med flex:1 paa punktlisten, saa de skal blot have lov at straekke sig - knapperne flugter derefter af sig selv. Maalt 26-08-2026. Ingen priser eller tekst roert. */ .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch} .tier{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:16px; position:relative; transition:transform .2s, box-shadow .2s; } .tier:hover{transform:translateY(-3px); box-shadow:var(--shadow-3)} .tier.pop{ border-color:color-mix(in srgb,var(--teal-400) 45%,transparent); box-shadow:var(--shadow-3); transform:scale(1.02); } .tier.pop:hover{transform:scale(1.02) translateY(-3px)} .pop-flag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--teal-400),var(--teal-200)); color:var(--ink-900,#0B1B2B); /* hvid gav 2,86:1 - maalt */ font-size:.7rem; font-weight:700; padding:5px 15px; border-radius:99px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; } .tier-n{font-family:var(--display); font-size:1.3rem; font-weight:600; letter-spacing:-.02em} .tier-d{font-size:.86rem; color:var(--text-3); line-height:1.55} .tier-p{display:flex; align-items:baseline; gap:6px; font-family:var(--mono)} .tier-p .amt{font-size:2.3rem; font-weight:600; letter-spacing:-.04em} .tier-p .per{font-size:.85rem; color:var(--text-3); font-family:var(--body)} .tier ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; flex:1} .tier li{display:flex; gap:10px; font-size:.875rem; color:var(--text-2); align-items:flex-start; line-height:1.45} .tier li svg{width:16px; height:16px; flex:none; color:var(--accent); margin-top:2px} @media (max-width:1080px){ .tiers{grid-template-columns:1fr; max-width:480px; margin-inline:auto} .tier.pop{transform:none} .tier.pop:hover{transform:translateY(-3px)} } /* ── Beregner ────────────────────────────────────────── */ .calc{background:var(--surface-2); border-block:1px solid var(--line-soft)} .calc-box{ max-width:840px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:38px; box-shadow:var(--shadow-3); } .calc-row{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:8px} .calc-lbl{font-size:.95rem; font-weight:600} .calc-val{font-family:var(--mono); font-size:2rem; font-weight:600; color:var(--brand); letter-spacing:-.03em} input[type=range]{ width:100%; height:6px; -webkit-appearance:none; appearance:none; border-radius:99px; background:linear-gradient(90deg,var(--blue-500),var(--teal-400)) no-repeat, var(--surface-3); background-size:var(--pct,30%) 100%; margin:18px 0 4px; cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--surface); border:3px solid var(--teal-400); cursor:grab; box-shadow:0 3px 10px rgba(11,27,43,.22); } input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--surface); border:3px solid var(--teal-400); cursor:grab; box-shadow:0 3px 10px rgba(11,27,43,.22); } .scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.72rem; color:var(--text-3)} .calc-out{ margin-top:30px; padding-top:28px; border-top:1px dashed var(--line); display:grid; grid-template-columns:1fr 1fr; gap:22px; } .out{padding:20px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line-soft)} .out.hi{ background:linear-gradient(135deg,rgba(30,150,176,.09),rgba(43,179,184,.05)); border-color:color-mix(in srgb,var(--teal-400) 32%, transparent); } .out-l{font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3)} .out-v{font-family:var(--mono); font-size:2.05rem; font-weight:600; margin-top:7px; letter-spacing:-.035em} .out.hi .out-v{color:var(--brand)} .out-s{font-size:.79rem; color:var(--text-3); margin-top:5px} .calc-note{margin-top:22px; font-size:.78rem; color:var(--text-3); line-height:1.55} /* ── Sammenligningstabel ─────────────────────────────── */ .tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch} .cmp-wrap{ border:1px solid var(--line); border-radius:var(--r-lg); /* 🔴 var overflow:hidden — den KLIPPEDE tabellen paa mobil i stedet for at lade den rulle. Foraelderen .tbl-scroll har overflow-x:auto, men naar barnet klipper, flyder det ikke over, og foraelderen ser intet at rulle. Tabellen har min-width:720px; en telefon er ~390px, saa Fortas egen kolonne (th.you) laa yderst til hoejre og var uden for skaermen. Maalt 25-08-2026 paa strukturen; bekraeftes visuelt. */ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; /* containing block for absolut placerede boern - ellers klipper overflow dem ikke. Maalt 26-08: 27 skjulte spans undslap. */ position:relative; box-shadow:var(--shadow-2); background:var(--surface); } .cmp{width:100%; border-collapse:collapse; font-size:.9rem; min-width:720px} .cmp thead th{ padding:16px 18px; text-align:center; font-family:var(--display); font-weight:600; font-size:.92rem; letter-spacing:-.01em; border-bottom:2px solid var(--line); background:var(--surface-2); color:var(--text-2); white-space:nowrap; } .cmp thead th:first-child{text-align:left} .cmp thead th.you{ background:linear-gradient(135deg,var(--blue-700),var(--blue-500)); color:#fff; } .cmp tbody th{ text-align:left; padding:13px 18px; font-weight:500; color:var(--text); border-bottom:1px solid var(--line-soft); font-size:.88rem; line-height:1.45; } .cmp tbody td{ text-align:center; padding:13px 14px; border-bottom:1px solid var(--line-soft); color:var(--text-3); font-size:.84rem; } .cmp tbody td.you{background:color-mix(in srgb,var(--teal-400) 7%,transparent); font-weight:600; color:var(--text-2)} .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none} .cmp tbody tr:hover th,.cmp tbody tr:hover td{background:var(--surface-2)} .cmp tbody tr:hover td.you{background:color-mix(in srgb,var(--teal-400) 12%,transparent)} .ck{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ok-bg); color:var(--ok)} .ck svg{width:13px; height:13px} .mdash{color:var(--text-3); opacity:.55} /* ── FAQ ─────────────────────────────────────────────── */ .faq{max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:10px} .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1); overflow:hidden; } .faq summary{ list-style:none; cursor:pointer; padding:18px 22px; font-weight:600; font-size:.98rem; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--display); letter-spacing:-.012em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+"; font-family:var(--mono); font-size:1.2rem; color:var(--text-3); transition:transform .2s; line-height:1; flex:none; } .faq details[open] summary::after{transform:rotate(45deg); color:var(--brand)} .faq details > div{padding:0 22px 20px; color:var(--text-2); font-size:.92rem; line-height:1.65} .faq details > div p + p{margin-top:10px} /* ── Formular (kontakt) ──────────────────────────────── */ .form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:38px; box-shadow:var(--shadow-3); max-width:840px; margin-inline:auto; } .form-card h2{font-size:1.6rem; letter-spacing:-.028em} .form-card > p{margin-top:12px; color:var(--text-2); font-size:.95rem} .forta-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; margin-top:26px} .forta-field{display:flex; flex-direction:column; gap:7px} .forta-field-full{grid-column:1/-1} .forta-field label{font-size:.85rem; font-weight:600; letter-spacing:-.005em} .forta-field label span{color:var(--text-3); font-weight:450} .forta-field input,.forta-field select,.forta-field textarea{ padding:12px 15px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface-2); color:var(--text); font-family:var(--body); font-size:1rem; transition:border-color .16s, background .16s, box-shadow .16s; width:100%; } .forta-field textarea{min-height:110px; resize:vertical} .forta-field input:hover,.forta-field select:hover,.forta-field textarea:hover{border-color:var(--text-3)} .forta-field input:focus,.forta-field select:focus,.forta-field textarea:focus{ outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3.5px color-mix(in srgb,var(--teal-400) 22%,transparent); } .forta-hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden} .forta-form-submit{margin-top:26px} .forta-form-submit button{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 32px; border-radius:var(--r-sm); font-weight:600; font-size:1rem; border:none; cursor:pointer; font-family:var(--body); color:#fff; background:linear-gradient(135deg,var(--blue-700) 0%,var(--blue-500) 55%,var(--teal-400) 100%); box-shadow:0 4px 14px -3px rgba(27,86,126,.5); transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; } .forta-form-submit button:hover{transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(27,86,126,.55)} .forta-form-note{margin-top:16px; font-size:.8rem; color:var(--text-3); line-height:1.55} .form-status{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; margin-bottom:24px; border-radius:var(--r-md); font-size:.92rem; line-height:1.55; font-weight:500; } .form-status svg{width:19px; height:19px; flex:none; margin-top:2px} .form-status.ok{background:var(--ok-bg); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 25%,transparent)} .form-status.fejl{background:var(--crit-bg); color:var(--crit); border:1px solid color-mix(in srgb,var(--crit) 25%,transparent)} @media (max-width:680px){.forta-form-grid{grid-template-columns:1fr}.form-card{padding:26px}} /* ── Kontaktkort ─────────────────────────────────────── */ .ccards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .ccard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:9px; text-decoration:none; transition:transform .2s, box-shadow .2s, border-color .2s; } a.ccard:hover{transform:translateY(-3px); box-shadow:var(--shadow-3); border-color:color-mix(in srgb,var(--teal-400) 40%,var(--line))} .ccard .feat-ic{margin-bottom:2px} .ccard h2,.ccard h3{font-size:1.25rem; line-height:1.2; letter-spacing:-.018em} .ccard p{font-size:1rem; color:var(--text-2); line-height:1.6; flex:1} .ccard .go{font-size:.9375rem; font-weight:600; color:var(--brand); display:inline-flex; align-items:center; gap:6px} .ccard .go svg{width:14px; height:14px} @media (max-width:900px){.ccards{grid-template-columns:1fr}} /* ── «Under udvikling» — Forta Call taler ærligt ─────── */ .blueprint{ position:relative; border:1.5px dashed color-mix(in srgb,var(--brand) 45%,var(--line)); border-radius:var(--r-xl); background: linear-gradient(color-mix(in srgb,var(--blue-500) 4%,var(--surface)) 0 100%); padding:34px; } .blueprint::before{ content:"UNDER UDVIKLING"; position:absolute; top:-11px; left:26px; background:var(--warn-bg); color:var(--warn); font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.14em; padding:4px 12px; border-radius:99px; border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); } .dev-banner{ display:flex; gap:14px; align-items:flex-start; max-width:860px; background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 28%,transparent); border-radius:var(--r-md); padding:18px 20px; font-size:.93rem; line-height:1.6; color:var(--text-2); } .dev-banner svg{width:20px; height:20px; flex:none; color:var(--warn); margin-top:2px} .dev-banner b{color:var(--text)} .plan-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; counter-reset:plan} .plan-list li{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line-soft); counter-increment:plan; } .plan-list li:last-child{border-bottom:none} .plan-list li::before{ content:counter(plan,decimal-leading-zero); font-family:var(--mono); font-size:.85rem; font-weight:600; color:var(--text-3); padding-top:4px; } .plan-list h3{font-size:1.1rem; letter-spacing:-.018em} .plan-list p{margin-top:7px; color:var(--text-2); font-size:.92rem; line-height:1.6} /* ── Prosa (juridiske og lange tekstsider) ───────────── */ .prose{max-width:720px; margin-inline:auto} .prose h2{font-size:1.5rem; margin:44px 0 0; letter-spacing:-.025em} .prose h3{font-size:1.15rem; margin:30px 0 0; letter-spacing:-.018em} .prose p{margin-top:14px; color:var(--text-2); line-height:1.7} .prose ul{margin:14px 0 0; padding-left:22px; color:var(--text-2); line-height:1.7} .prose li{margin-top:6px} .prose a{color:var(--brand); font-weight:500} .prose strong{color:var(--text)} /* ── CTA-bånd ────────────────────────────────────────── */ .cta{ background:linear-gradient(135deg,var(--deep) 0%,var(--deep-2) 55%,#0d4058 100%); color:#fff; text-align:center; position:relative; overflow:hidden; } .cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(48% 62% at 50% 0%, rgba(43,179,184,.22), transparent 66%); } .cta .wrap{position:relative; z-index:1} .cta h2{color:#fff; font-size:clamp(2rem,4.2vw,3rem); max-width:17ch; margin-inline:auto} .cta p{color:rgba(255,255,255,.72); margin:18px auto 0; max-width:52ch; font-size:1.06rem} .cta-btns{display:flex; gap:13px; justify-content:center; margin-top:32px; flex-wrap:wrap} .cta-note{margin-top:24px; font-size:.85rem; color:rgba(255,255,255,.5)} /* ── Footer ──────────────────────────────────────────── */ .ftr{padding:52px 0 30px; border-top:1px solid var(--line); background:var(--ground)} .ftr-in{display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap} .ftr-t{font-size:.88rem; color:var(--text-3); max-width:36ch; margin-top:14px; line-height:1.6} .ftr-cols{display:flex; gap:56px; flex-wrap:wrap} .ftr-c h2,.ftr-c h5{font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); margin:0 0 13px} .ftr-c a{display:block; font-size:.875rem; color:var(--text-2); text-decoration:none; padding:4px 0; margin-bottom:4px; transition:color .15s} .ftr-c a:hover{color:var(--brand)} .ftr-c .soon{color:var(--text-3); font-size:.72rem; font-weight:600; margin-left:6px} .ftr-btm{margin-top:38px; padding-top:22px; border-top:1px solid var(--line-soft); font-size:.79rem; color:var(--text-3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap} /* ── Reveal ──────────────────────────────────────────── */ .rv{opacity:0; transform:translateY(18px); transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); transition-delay:var(--d,0s)} .rv.in{opacity:1; transform:none} /* 🔴 vist STRAKS (over folden ved indlaesning) — ingen overgang at vente paa */ .rv.straks{transition:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1; transform:none; transition:none} .pane.on,.mnav.open{animation:none} *{scroll-behavior:auto !important} .btn,.tier,.feat,.int,.ccard{transition:none} } /* ── Responsivt ──────────────────────────────────────── */ @media (max-width:1080px){ .pane-grid{grid-template-columns:1fr} .mob-grid{grid-template-columns:1fr; gap:44px} } @media (max-width:860px){ section{padding:70px 0} .page-hero{padding:52px 0 48px} .calc-box{padding:26px} .calc-out{grid-template-columns:1fr} .blueprint{padding:24px} } @media (max-width:560px){ .hero{padding-top:52px} .frame{border-radius:var(--r-lg)} } /* ═══════════════════════════════════════════════════════════════ FX-LAGET — «wauw» med ét fokuspunkt: fladen i brug. Alt herunder er transform/opacity (GPU), alt slås fra ved prefers-reduced-motion, og intet kræver eksterne biblioteker. ═══════════════════════════════════════════════════════════════ */ /* ── Aurora — levende gradientbaggrund i helten ──────── */ .aurora{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; /* blur i vw, ikke px: pletterne er i vw, saa en fast px-sloering er proportionalt ~3,6x kraftigere paa 390px og vasker dem ud. Maalt. */ filter:blur(4vw) saturate(1.35)} .aurora i{position:absolute; border-radius:50%; opacity:.92; will-change:transform} .aurora i:nth-child(1){ width:62vw; height:62vw; left:-16%; top:-34%; background:radial-gradient(circle at 35% 35%, rgba(43,179,184,.92), rgba(43,179,184,.34) 42%, transparent 68%); } .aurora i:nth-child(2){ width:54vw; height:54vw; right:-14%; top:-22%; background:radial-gradient(circle at 60% 40%, rgba(30,150,176,.82), rgba(30,150,176,.28) 44%, transparent 66%); } .aurora i:nth-child(3){ width:44vw; height:44vw; left:30%; top:2%; background:radial-gradient(circle at 50% 50%, rgba(77,220,208,.70), rgba(77,220,208,.24) 46%, transparent 64%); } @media (prefers-reduced-motion:no-preference){ .aurora i:nth-child(1){animation:aur1 26s ease-in-out infinite alternate} .aurora i:nth-child(2){animation:aur2 22s ease-in-out infinite alternate} .aurora i:nth-child(3){animation:aur3 30s ease-in-out infinite alternate} } @keyframes aur1{from{transform:translate(0,0) scale(1)} to{transform:translate(9vw,6vh) scale(1.18)}} @keyframes aur2{from{transform:translate(0,0) scale(1.1)} to{transform:translate(-8vw,9vh) scale(.92)}} @keyframes aur3{from{transform:translate(0,0) rotate(0deg) scale(1)} to{transform:translate(6vw,-5vh) rotate(40deg) scale(1.22)}} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .aurora{opacity:.72; filter:blur(4.4vw) saturate(1.25)} } :root[data-theme="dark"] .aurora{opacity:.72; filter:blur(4.4vw) saturate(1.25)} /* ── Overskrift der ankommer ord for ord ─────────────── */ .wr{display:inline-block} /* ⬛ 11-09-2026: den ordvise ankomst er FJERNET. Hvert ord i sidens vigtigste udsagn startede usynligt, sloeret 6px og forskudt .55em, med sin egen forsinkelse. .wr{display:inline-block} staar tilbage, fordi ombrudsadfaerden ellers aendrer sig som bivirkning. */ /* ── Fladen der rejser sig — 3D-ramme styret af scroll ─ */ .tilt{ transform:perspective(1300px) rotateX(var(--tilt,0deg)) scale(var(--tsc,1)); transform-origin:50% 8%; will-change:transform; } @media (prefers-reduced-motion:no-preference){ .tilt{--tilt:12deg; --tsc:.94} } /* ── Spotlight — kortet svarer på markøren ───────────── */ @media (hover:hover) and (pointer:fine){ .int,.tier,.feat,.ccard{position:relative} .int::after,.tier::after,.feat::after,.ccard::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--teal-400) 13%,transparent), transparent 68%); opacity:0; transition:opacity .35s; } .int:hover::after,.tier:hover::after,.feat:hover::after,.ccard:hover::after{opacity:1} } /* ── Magnetisk CTA (JS sætter --magx/--magy) ─────────── */ .btn-primary{translate:var(--magx,0) var(--magy,0)} /* ── Integrations-marquee ────────────────────────────── */ /* ⬛ 11-09-2026: striben ruller ikke mere. Maske, max-content og dubletterne i templaten hoerte ALLE til loekken — de er fjernet SAMMEN. Stopper man kun animationen, staar dubletterne tilbage. */ .marquee{ overflow:visible; padding:22px 0; border-block:1px solid var(--line-soft); } .marquee-track{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 24px; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; } .mq-item{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--text-3); letter-spacing:-.01em; } /* ⬛ 11-09-2026: .dot-sep er FJERNET sammen med den rullende stribe. Maalt foer fjernelsen: 0 forekomster i temaet uden for denne regel og 0 i hele site-indhold/. En regel uden et element er ikke ufarlig — den er et loefte om at elementet findes. */ /* ── Sticky scroll-fortælling (Forta CRM) ────────────── */ .story{display:grid; grid-template-columns:minmax(300px,1fr) 1.45fr; gap:64px; align-items:start} .story-steps{display:flex; flex-direction:column} .story-step{ --step-pad:clamp(48px,8vh,88px); padding:var(--step-pad) 0; border-left:2px solid var(--line); padding-left:30px; transition:border-color .4s; position:relative; } .story-step:first-child{padding-top:32px} .story-step:last-child{padding-bottom:48px} .story-step::before{ content:""; position:absolute; left:-7px; top:calc(var(--step-pad) + 8px); width:12px; height:12px; border-radius:50%; background:var(--line); transition:background .4s, box-shadow .4s; } .story-step:first-child::before{top:40px} .story-step.on{border-left-color:var(--accent)} .story-step.on::before{background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--teal-400) 18%,transparent)} /* Dæmpningen kostede læsbarhed: 4,01:1 i lys og 3,55:1 i mørk, hvor 12px/600 kræver 4,5. Målt 26-08-2026. En mellemvej på .85 bestod lys (5,05) men IKKE mørk (4,14), så dæmpningen er fjernet helt: 7,21:1 og 5,14:1. Mærkaten er i forvejen lille og accentfarvet — den behøvede ikke også 25 % gennemsigtighed. */ .story-step .eyebrow{opacity:1} .story-step h3{font-size:1.45rem; margin-top:12px; letter-spacing:-.026em} .story-step p{margin-top:12px; color:var(--text-2); line-height:1.65} .story-step .m-shot{display:none; margin-top:20px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-2)} .story-stage{position:sticky; top:96px; height:min(calc(100vh - 150px), 780px); min-height:420px; display:flex; align-items:center} .story-frame{position:relative; width:100%; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-4); background:var(--surface-2); aspect-ratio:2880/1800} .story-shot{ position:absolute; inset:0; opacity:0; transform:scale(1.035); transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .story-shot.on{opacity:1; transform:none} .story-shot img{display:block; width:100%; height:auto} @media (prefers-reduced-motion:reduce){ .story-shot{transition:none; transform:none} } @media (max-width:1000px){ .story{grid-template-columns:1fr} .story-stage{display:none} .story-step{padding:34px 0 34px 26px} .story-step::before{top:42px} .story-step:first-child{padding-top:10px} .story-step:first-child::before{top:18px} .story-step .m-shot{display:block} } /* ── Glaskant på hero-rammen — lyset løber langs toppen ─ */ .frame.lit::before{ content:""; position:absolute; inset:0 0 auto 0; height:1.5px; z-index:5; background:linear-gradient(90deg,transparent, rgba(77,220,208,.9), transparent); background-size:220% 100%; } @media (prefers-reduced-motion:no-preference){ .frame.lit::before{animation:litrun 5.5s ease-in-out infinite} } @keyframes litrun{0%{background-position:120% 0} 55%{background-position:-20% 0} 100%{background-position:-120% 0}} /* ── Telefonens statuslinje ───────────────────────────── Erstatter browser-adresselinjen. En app har ikke en URL, og ejeren har bestemt at fladen skal vises som en app. ──────────────────────────────────────────────────────── */ .phone-status{ display:flex; align-items:center; justify-content:space-between; padding:11px 20px 7px; background:var(--surface); font-family:var(--body); font-size:.82rem; font-weight:600; color:var(--text); } .ps-tid{letter-spacing:-.01em} .ps-ikoner{display:flex; align-items:center; gap:6px; color:var(--text)} .ps-ikoner svg{display:block} /* ── Aurora paa smalle skaerme ─────────────────────────── Maalt: paa 390px var forskellen med/uden aurora kun 18-37/255. Pletterne skaleres op, saa de daekker fladen i stedet for at ligge som tre smaa slørede prikker. ──────────────────────────────────────────────────────── */ @media (max-width:700px){ .aurora{filter:blur(9vw) saturate(1.4)} .aurora i:nth-child(1){width:110vw; height:110vw; left:-30%; top:-38%} .aurora i:nth-child(2){width:95vw; height:95vw; right:-28%; top:-24%} .aurora i:nth-child(3){width:80vw; height:80vw; left:18%; top:0} } /* ── Juridiske sider (privatliv, vilkaar) ───────────────────────── Sat i designets egne tokens, saa moerkt tema foelger med uden en eneste ekstra regel. Bredden er 760px — samme maal som den oprindelige blok-side havde (contentSize:760px), saa linjelaengden ikke aendrer sig for en tekst folk faktisk skal kunne laese. ──────────────────────────────────────────────── */ .legal{padding:clamp(72px,10vw,120px) 0 clamp(64px,8vw,96px); background:var(--ground)} .wrap.narrow{max-width:760px} .legal .sec-h{max-width:none; margin-bottom:40px} .legal .sec-h h1{ font-family:var(--display); font-weight:600; line-height:1.1; font-size:clamp(2rem,4.4vw,3rem); letter-spacing:-.02em; color:var(--text); margin:.35em 0 0; text-wrap:balance; } .legal-body{font-size:1.0625rem; line-height:1.75; color:var(--text-2)} .legal-body h2{ font-family:var(--display); font-weight:600; line-height:1.25; font-size:clamp(1.15rem,2.1vw,1.4rem); letter-spacing:-.01em; color:var(--text); margin:2.4em 0 .7em; padding-top:1.6em; border-top:1px solid var(--line-soft); text-wrap:balance; } .legal-body h2:first-child{margin-top:0; padding-top:0; border-top:0} .legal-body p{margin:0 0 1.15em} .legal-body p:last-child{margin-bottom:0} .legal-body ul,.legal-body ol{margin:0 0 1.15em; padding-left:1.35em} .legal-body li{margin:.35em 0} .legal-body a{color:var(--brand); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px} .legal-body a:hover{color:var(--accent)} .legal-body strong{color:var(--text); font-weight:600} /* Den foerste linje er «Senest opdateret» — den er metadata, ikke broedtekst */ .legal-body > p:first-of-type{ font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; color:var(--text-3); margin-bottom:2.2em; } @media (max-width:700px){ .legal{padding:64px 0 56px} .legal-body{font-size:1rem} } /* ── Erstatning for wp-block-library ──────────────────────────── MAALT 25-08-2026: biblioteket er 140.761 bytes, og af dem er det HERUNDER alt sitet faktisk bruger. Talt regel for regel: .wp-block-group 3 regler (én rammer kun .wp-block-embed) .wp-block-post-content 1 .wp-block-heading 1 - kun .has-background, som bruges 0 steder .wp-block-paragraph 0 ol,ul 1 - eneste BARE elementselektor i hele filen Positiv kontrol paa udtraekket: .wp-block-image gav 58 regler. Dette er en NOEJAGTIG erstatning - hverken mere eller mindre. Der er med vilje IKKE sat en global '*{box-sizing:border-box}': temaet er skrevet uden en, og et globalt skift ville aendre elementer med baade bredde og padding. Vi genskaber det der fjernes, ikke det der burde have vaeret der. ──────────────────────────────────────────────── */ ol,ul{box-sizing:border-box} .wp-block-group{box-sizing:border-box} :where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative} .wp-block-post-content{display:flow-root} /* ── Menupunkter maa aldrig brydes ──────────────────────────── MAALT 25-08-2026 med Range.getClientRects() - ét rektangel pr. RENDERET linje. Seks af otte punkter brød om ved 1100px: «Forta CRM» blev til «Forta» / «CRM». Med syv punkter skete det foerst ved 1050px, saa den ottende gjorde et latent problem synligt. ⚠️ Foerste maaling sagde at ALLE otte brød om - ogsaa «Priser», ét ord paa 69px. Den regnede hoejde/linjehoejde, og line-height er 'normal', saa parseFloat gav NaN. Et instrument der svarer paa alt, svarer paa ingenting. ──────────────────────────────────────────────── */ .nav a, .mnav a{white-space:nowrap} /* ── Et maerkat maa aldrig skubbe siden vandret ──────────────── MAALT 25-08-2026 paa 390px: «Under udvikling — skriv hvis du vil med i tidlig beta» var 352px med white-space:nowrap og endte paa 399 i en 390px skaerm. Hele forsiden fik 9px vandret rul. Teksten er kortet ned, men det er en rettelse af ét maerkat. Reglen her er rettelsen af AARSAGEN: naar pladsen er for lille, skal maerkatet bryde om frem for at skubbe siden. Et ombrudt maerkat er grimt; en side der ruller vandret er i stykker. ──────────────────────────────────────────────── */ .tag{max-width:100%} @media (max-width:520px){ .tag{white-space:normal} } /* ── Målt-blok ─────────────────────────────────────────── Ét sted på en ellers fremadrettet side hvor tallet ER målt. Herkomstlinjen er ikke pynt: FORTA CALL bad udtrykkeligt om at tallet skal kunne forsvares hvis nogen spørger, og et tal uden hvad det er et tal OM bliver aldrig efterprøvet. ──────────────────────────────────────────────────────── */ .maalt{ margin-top:26px; padding:22px 26px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--teal-400); border-radius:var(--r-lg); box-shadow:var(--shadow-1); } .maalt-t{margin:0; font-size:1.02rem; line-height:1.62; color:var(--text)} .maalt-t strong{font-family:var(--display); font-weight:600; letter-spacing:-.01em} .maalt-k{ margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); font-family:var(--mono); font-size:.78rem; line-height:1.6; color:var(--text-3); } /* .tag i et produktkort sluttede om HELE kortet, ikke om sin tekst: .ccard er kolonne-flex, og align-items:stretch strakte mærkaten 326px ud hvor teksten fylder 30. Målt på /produkter/ - de 16 mærkater på de øvrige sider sidder i andre forældre og var rigtige, så rettelsen er skopet til kortet frem for til .tag. */ .ccard > .tag{align-self:flex-start; width:fit-content} /* .prose blev tegnet til det centrerede jura-dokument (max-width + margin auto). De fire produktsider genbrugte den under VENSTRESTILLEDE overskrifter, så teksten stod 246px inde mens overskriften stod yderst til venstre. Målt: 9 afsnit på fire sider, alle med samme forskel. Reglen rammer kun en .prose der er nabo til en ikke-centreret .sec-h. Målt på serveren FØR ændringen: side 22 (privatlivspolitik) bruger .prose nul gange, så jura-siden kan ikke rammes. */ .sec-h:not(.mid) + .prose{margin-inline:0} /* ... men tre af de ni sad efter et skærmbillede, ikke lige efter overskriften. :has() rammer hele wrap'en, så en billedtekst under et skærmbillede flugter med samme venstrekant som alt andet i afsnittet. Nabo-reglen ovenfor står som faldskærm for browsere uden :has(). */ .wrap:has(> .sec-h:not(.mid)) > .prose{margin-inline:0} /* Et LYST skærmbillede på en LYS side uden kant har ingen ydre grænse: billedet flyder ud i sektionen, og øjet kan ikke se hvor fladen slutter. .frame har kant + radius + skygge; .shot-wrap havde ingen af delene. Målt 26-08-2026: tre bare .shot-wrap på /forta-sms/ og /insight-ejendom/, alle med border-width 0 og ingen ramme-forælder. Reglen rammer KUN en .shot-wrap der ikke allerede sidder i en ramme, så et skærmbillede i .frame/.phone/.pane ikke får dobbelt kant. */ .shot-wrap:not(:where(.frame,.phone,.pane,.story-frame) *){ border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-4); } /* ── Berøringsflader på telefon ────────────────────────── Målt 26-08-2026 på 390px med has_touch. Ingen af de tolv sider ruller vandret (scrollWidth == clientWidth overalt), men tre kontroller var for små til en finger. Alt ligger i @media (pointer:coarse), så skrivebordets udseende er uændret — verificeret: skyderen måler stadig 762x6 med mus. ⚠️ Links INDE i brødtekst er med vilje ikke rørt: de kan ikke gøres 44px uden at ødelægge linjeafstanden i afsnittet. ──────────────────────────────────────────────────────── */ @media (pointer:coarse){ /* Skyderen var 288x6. Sporet er 6px og grebet 24px, men træffladen følger elementets KASSE, ikke grebet. Polstringen udvider kassen til 44px; background-clip:content-box holder gradienten i de 6px, så sporet ser præcis ud som før. */ input[type=range]{ box-sizing:content-box; padding:19px 0; height:6px; background-clip:content-box, content-box; margin:0 0 4px; } .ftr-c a{padding:11px 0; margin-bottom:8px} /* var 30px hoeje paa alle 12 sider (24e5148, 26-08). 🔴 Og AFSTANDEN var 0 px baade foer og efter — elementerne blev stoerre uden at blive adskilt, og den akse havde intet vaern. gennemgang.py har svaret «0 maal under 44 px» lige siden, og det var sandt om en anden akse end den der fejlede. Maalt 15-09. */ .logo{padding:5px 0} /* var 34px */ .tab{min-height:44px} /* var 39px — forsidens primære navigation */ } /* ── Kun for oplæsning ─────────────────────────────────── Målt 26-08-2026 på /sammenlign/: de 13 celler der betyder «Forta HAR denne funktion» var HELT TOMME for en skærmlæser — fluebenets bærer aria-hidden, og der stod ingen tekst. De 23 «har ikke»-celler bar en bar tankestreg, som oplæsere typisk springer over. På netop den side hvis eneste opgave ER sammenligningen. Nu står «Ja»/«Nej» i cellen, usynligt og oplæst. ──────────────────────────────────────────────────────── */ /* 🔴 RETTET 01:30 — jeg lavede selv fejlen 43 minutter tidligere. Den oprindelige form var position:absolute (standardmønstret for skjult-men-oplæst). Inde i .cmp-wrap, som er overflow-x:auto men position:static, er beholderen IKKE containing block for et absolut placeret barn. De 27 spans blev derfor placeret mod dokumentet, i tabellens koordinater (op til x=745), og INTET klippede dem. Målt på telefon uden nogen indblanding: scrollWidth 708 mod 390 — hele siden rullede vandret ét sekund efter indlæsning. ⚠️ overflow klipper kun de efterkommere man er containing block for. To rettelser, og den anden er den vigtige: · .cmp-wrap får position:relative → retter komponenten · .kun-oplaest tages ud af absolut placering → kan ikke undslippe NOGEN beholder, heller ikke en fremtidig. */ .kun-oplaest{ display:inline-block; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; vertical-align:baseline; } /* Tankestregen betyder «har ikke» og er derfor INDHOLD, ikke pynt. Målt: opacity:.55 gav 2,18:1 i lys og 2,54:1 i mørk tilstand. Opaciteten er fjernet; --text-3 er allerede den dæmpede farve og holder AA på egen hånd, så udtrykket er det samme. */ .mdash{color:var(--text-3); opacity:1} /* ⬛ PINNINGERNE MOD style.css ER FJERNET 15-09-2026. Her stod seks regler der pinnede .forta-site-footer og .forta-btn-secondary mod den moerke tilstand. Blokken beskrev sig selv som en pinning MOD regler i style.css — og de regler blev fjernet 12-09-2026, da style.css gik fra 1.127 til 51 linjer. Maalt 15-09: begge klasser findes NUL steder i templates, parts, sidernes indhold og temaets JavaScript, og style.css' egne regler for dem findes ikke laengere. En pinning uden det den pinner er ikke et vaern; den er et loefte om at elementet findes. Pinningen af .forta-field label staar UAENDRET herunder — den klasse ER levende, og style.css baerer stadig dens haardkodede farve. Se LEVERANCE-fjern-doed-css.md. */ /* 🔴 HAARDKODEDE LITERALER I style.css — uden om tokenmodellen, saa token-skiftet ovenfor naar dem ikke. Maalt 04-09-2026 med TO uafhaengige instrumenter (gennemgang.py og moerk_kontrast.py), som er enige om netop disse: formularens labels staar #2C4458 paa fladen #0D2233 = 1,60:1. ⚠️ En statisk soegning meldte 36 saadanne — de 35 stod paa kort med haardkodet #FFFFFF baggrund, som forbliver hvide i moerkt tema. Farven kunne laeses i filen; fladen kunne kun laeses i en browser. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .forta-field label{color:#A9C0D2} :root:not([data-theme="light"]) .forta-field label span{color:#7A96AC} } :root[data-theme="dark"] .forta-field label{color:#A9C0D2} :root[data-theme="dark"] .forta-field label span{color:#7A96AC} /* ═══════════════════════════════════════════════════════════════ DESIGNLOEFT 25-09-2026 — «mere moderne, professionelt og laekkert» Spor webdesign · gren design/webdesign · rapport LEVERANCE-webdesign.md ET LAG, IKKE EN OMSKRIVNING. Alt herunder staar sidst i kaskaden og kan laeses, maales og rulles tilbage som én blok. Den eneste aendring OVENFOR er .hdr's baggrund (saturate-rettelsen, se dens kommentar). Hvad laget goer, i den raekkefoelge det staar: ① headeren KLAEBER faktisk og ligger som glas over helten ② dybere, farvetonede skygger (samme tokens, nye vaerdier) ③ maerkatet (.eyebrow) bliver en pille med et lysende punkt ④ knapper: praecis kant, indre lyskant, 44 px overalt ⑤ kort: haarfin toppkant, rolig hover med teal-kant ⑥ fem-kort-gitre komponeres 3+2 i stedet for 3+2+hul ⑦ heltens prikgitter — fader ud mod teksten ⑧ CTA-baandet bliver et afrundet panel ⑨ tilgaengelighed: fokusring, fane- og sendeknap-kontrast, 44 px paa nav/footer, mobilmenu der kan rulle, hover uden bevaegelse ved prefers-reduced-motion 🔴 INGEN PAASTAND ER ROERT. Laget aendrer hvordan tekst SER UD, ikke hvad der staar. Ingen regel her er skrevet specifikt mod .tier, .calc eller .legal-body — priser (#45) og jura (#22) arver kun de FAELLES komponenter (header, footer, knapper, fokus). ═══════════════════════════════════════════════════════════════ */ /* ── ① Headeren klaeber — og ligger over helten ───────────────── MAALT 25-09-2026 paa den byggede flade (dev-farm, produkter@1440): efter window.scrollTo(0,2000) stod .hdr paa top -1594 og IKKE 0. .hdr er position:sticky, men dens foraelder er WordPress' template- part-indpakning
, og den er PRAECIS lige saa hoej som .hdr (71 px). En sticky boks kan ikke klaebe ud over sin containing block — headeren rullede altsaa vaek paa hver side, og JS'ens .scrolled (kant + skygge) blev aldrig set. Rettelsen er at goere INDPAKNINGEN sticky; .hdr bliver relativ, saa .mnav stadig har sin containing block. Samtidig lukkes soemmen: WordPress' blockGap (`:where(.wp-site-blocks) > *{margin-block-start:1.5rem}`) lagde et fladt 24 px baand mellem header og helt, og auroraen startede med en haard kant under det. Indpakningen faar margin-bottom:-71px, saa helten (og dens aurora) begynder bag glasset, og heltenes top- polstring faar de 71 px lagt til. Resultat: glasset har noget at vaere glas OVER, og siden bliver 24 px kortere, ikke laengere. ⚠️ Vaelgerne er skrevet saa de rammer BAADE den byggede flade (sektion direkte efter indpakningen) og sitet (
efter indpakningen): «naeste soeskende», ikke en bestemt tag. */ .wp-site-blocks > header.wp-block-template-part{ position:sticky; top:0; z-index:80; margin-bottom:-71px; } .wp-site-blocks > header.wp-block-template-part + *{margin-block-start:0} .wp-site-blocks > header.wp-block-template-part .hdr{position:relative; top:auto} .hero{padding-top:127px} .page-hero{padding-top:143px} .legal{padding-top:calc(clamp(72px,10vw,120px) + 71px)} @media (max-width:860px){ .page-hero{padding-top:123px} } @media (max-width:700px){ .legal{padding-top:135px} } @media (max-width:560px){ .hero{padding-top:123px} } /* ankre (#tur, #priser …) maa ikke lande UNDER det klaebende glas */ section[id], [id="indhold"]{scroll-margin-top:84px} /* Lyskanten langs glassets underkant (Astra §1) — en haarlinje der fader ud i begge ender, saa glasset har en praecis kant ogsaa foer der rulles. Ved .scrolled overtager den fulde kant + skygge. */ .hdr::after{ content:""; position:absolute; left:24px; right:24px; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--teal-400) 45%,transparent),transparent); pointer-events:none; transition:opacity .25s; } .hdr.scrolled{border-bottom-color:var(--line-soft); box-shadow:0 1px 0 rgba(255,255,255,.04), 0 8px 24px -12px rgba(8,36,58,.18)} .hdr.scrolled::after{opacity:0} .hdr-in{height:70px} .nav{gap:2px} .nav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:10px; letter-spacing:-.005em; } .nav a[aria-current="page"]{background:color-mix(in srgb,var(--teal-400) 12%,transparent)} .hdr .btn{min-height:44px; padding:0 20px} .mnav{max-height:calc(100dvh - 71px); overflow-y:auto; overscroll-behavior:contain; background:var(--surface); border-radius:0 0 var(--r-lg) var(--r-lg)} .mnav a{min-height:48px; display:flex; align-items:center; white-space:normal} .mnav .btn{justify-content:center} /* ── ② Skygger: farvetonede og lagdelte ───────────────────────── Samme fire tokens som foer — kun VAERDIERNE er nye, saa ingen ny custom property paa :root (se ⬛-afsnittet ved rytmen: en NY property koster 600 px paa kontaktsidens
  • — intet her skal roeres. HIERARKI: «Book en demo» er salget og beholder teal-gradienten. Log ind er for eksisterende kunder: samme glas-pille som .btn-ghost (flade, haarfin kant, indre lyskant), men uden fyld-farve.
    / I STEDET FOR