/* =====================================================================
Nemt Årsregnskab — fælles stilark for det offentlige site.
Roligt, symmetrisk, uden ikoner og emoji. Samme farver som
værktøjerne, så alt hænger sammen.
===================================================================== */
/* =====================================================================
RESERVESKRIFTER MED SAMME MÅL SOM DE RIGTIGE
Literata og IBM Plex Mono hentes fra Google. Indtil de er der, vises
teksten i Georgia og Consolas — og når de så lander, ombryder alting
igen, fordi de to skrifter ikke er lige brede. Siden hopper under
fingeren, mens man læser.
Målt på forsiden: det kostede 0,100 i CLS efter at topbjælken var
låst. Hero-teksten flyttede sig 7 px, og prisrækken under den
flyttede sig 73.
Her fortæller vi browseren, hvor meget den skal skalere
reserveskriften, så den fylder præcis det samme. Så er ombrydningen
ens før og efter, og skiftet kan ikke ses.
ALLE FIRE TAL ER MÅLT, IKKE VALGT — med test/maal/skriftmetrik.js på
det byggede site, på en tekst fra sitet selv med æ, ø og å i. Ved 100
px:
Literata normal 4507.9 px Georgia normal 4303.7 px -> 104.74%
Literata fed 4890.9 px Georgia fed 5045.7 px -> 96.93%
Bemærk, at de to går hver sin vej: Georgia er SMALLERE end Literata i
normal vægt og BREDERE i fed. Derfor to regler og ikke én. Én fælles
værdi ville gøre hoppet mindre ét sted og større et andet.
Skiftes en skrift ud, skal skriptet køres igen. Gamle tal er værre
end ingen tal: de gør hoppet større og ser stadig rigtige ud.
===================================================================== */
@font-face {
font-family: "Literata reserve";
src: local("Georgia");
font-weight: 400;
size-adjust: 104.74%;
ascent-override: 112.66%;
descent-override: 29.60%;
line-gap-override: 0%;
}
@font-face {
font-family: "Literata reserve";
src: local("Georgia");
font-weight: 700;
size-adjust: 96.93%;
ascent-override: 121.73%;
descent-override: 31.98%;
line-gap-override: 0%;
}
/* Consolas findes på Windows, ikke på macOS. Er den der ikke, har denne
familie ingen kilde, og browseren går videre til den næste i stakken
— ui-monospace og Menlo — præcis som før. Der går ingenting tabt. */
@font-face {
font-family: "Plex reserve";
src: local("Consolas");
size-adjust: 109.13%;
ascent-override: 94.38%;
descent-override: 25.66%;
line-gap-override: 0%;
}
:root {
--primaer: #1F4E79;
--primaer-moerk: #143A5C;
--primaer-lys: #D6E4F0;
--primaer-blaa-svag: #EEF4FA;
--tekst: #111827;
--tekst-svag: #5b6675;
--kant: #d7dee7;
--kant-fin: #eef2f7;
--flade: #ffffff;
--baggrund: #f6f8fb;
--groen: #15803d;
--groen-flade: #f0fdf4;
--guld: #a16207;
/* Signalfarven. KUN frister, fejl og advarsler — aldrig knapper og
aldrig links. En farve, der ogsaa bruges til noget, man kan
klikke paa, holder op med at betyde "her skal du se efter".
7,73:1 mod --baggrund. */
--signal: #8C2F2A;
/* Skriften.
To snit og ikke flere. Foer var overskrift og broedtekst det
samme snit i to vaegte, og et site, hvor alting er sat i samme
skrift, har ingen stemme — det ligner en formular.
Literata baerer teksten. IBM Plex Mono baerer TAL og ETIKETTER:
priser, datoer, kolonneoverskrifter, versaler. Tal i mono med
tabular-nums flugter i kolonner, og det er hele pointen paa et
site, hvor tal staar under hinanden i tabeller og priskort.
Georgia og Menlo staar som reserve. De findes paa stort set alle
maskiner og er af samme slags — en serif og en mono — saa
forskellen mellem tekst og tal overlever ogsaa uden de to
hentede skrifter. */
--skrift-tekst: "Literata", "Literata reserve", Georgia, "Times New Roman", serif;
--skrift-tal: "IBM Plex Mono", "Plex reserve", ui-monospace, Menlo, "Courier New", monospace;
/* Skarpe hjoerner. Variablen bliver staaende paa 0 og ikke fjernet:
saa er der eet sted at gaa hen, hvis beslutningen laves om, i
stedet for treogfyrre. */
--radius: 0;
/* Indholdets to bredder — og kun de to. Foer skiftede spalten
mellem 1120 og 780 px fem gange ned gennem forsiden, og et
spring paa 340 px laeses som rod og ikke som rytme. Med 880
er springet 240 px, og forskellen er til at se som system.
Opstaar der behov for en tredje bredde, er det et tegn paa,
at afsnittet hoerer til i en af de to — ikke at der mangler
en variabel. test/site.test.js passer paa det. */
--spalte-bred: 1120px;
--spalte-smal: 880px;
}
* { box-sizing: border-box; }
/* hidden skal vinde over alt andet. Uden den her slaar .knap's egen
display-regel den ud, og en skjult knap bliver staaende paa siden —
fx "Tilbage" paa foerste trin i bestillingsflowet. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* Sikkerhedsnet. Ingen enkelt fejl skal kunne give hele sitet
vandret scroll — det er den slags, man ser paa en telefon og
ikke paa den skaerm, man bygger paa. Den skjuler ikke en aarsag:
test/site.test.js maaler stadig hvert element mod kanten, saa
et element, der rager ud, giver stadig en roed test. */
overflow-x: hidden;
font-family: var(--skrift-tekst);
font-size: 17px;
line-height: 1.62;
color: var(--tekst);
background: var(--baggrund);
-webkit-font-smoothing: antialiased;
}
/* =====================================================================
LANGE DANSKE ORD
"virksomhedsordningen" er tyve tegn. Ved 40 px er ordet 400 px bredt,
og på en telefon er der 324 px at give af. Ordet kan ikke ombrydes,
så overskriften stak 139 px ud, og siden kunne trækkes til siden.
Målt på /virksomhedsordningen ved 320-480 px.
Det er ikke en enkeltstående fejl. Sammensatte ord er reglen på
dansk, ikke undtagelsen — "årsregnskabsloven", "fradragsprocent",
"enkeltmandsvirksomhed" — og de bliver længere, jo mere fagligt
emnet er. Derfor står den her som en grundregel og ikke som en
rettelse af én overskrift.
hyphens: auto FØRST, så browseren deler ved en rigtig orddeling og
sætter en bindestreg. Kan den ikke, bryder overflow-wrap ordet et
vilkårligt sted — grimt, men altid pænere end en side, der kan
trækkes sideværts. er sat, så orddelingen bliver
dansk og ikke engelsk. */
h1, h2, h3, h4, .hero h1, .sidehoved h1, .opstilling-navn, .kort h3 {
hyphens: auto;
overflow-wrap: break-word;
}
.indhold { max-width: var(--spalte-bred); margin: 0 auto; padding-inline: 28px; }
.indhold-smal { max-width: var(--spalte-smal); margin: 0 auto; padding-inline: 28px; }
a { color: var(--primaer); }
/* ---------- Topbjælke ---------- */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--kant-fin);
}
.topbar-indhold {
display: flex; align-items: center; gap: 28px;
height: 68px;
}
/* Klikmaal paa 44 px i topbjaelke, undermenu og bundlinje.
Maalt paa det byggede site: bundlinjens links var 30 px, menuens 24
og maerket 30,4. Undermenuen manglede 2 px. Et link paa 24 px er til
at ramme med en mus og ikke med en tommelfinger.
Reglen gaelder KUN chrome. Links midt i en saetning bliver ikke
roert: WCAG 2.5.8 undtager udtrykkeligt maal "in a sentence or block
of text", og en min-height paa 44 px paa et inline-link spraenger
linjeafstanden i afsnittet omkring det. Det ville goere siden
daarligere for at ramme et tal. */
.maerke {
display: inline-flex; align-items: center; min-height: 44px;
font-size: 19px; font-weight: 700; letter-spacing: -.01em;
color: var(--primaer); text-decoration: none; white-space: nowrap;
}
.maerke span { font-weight: 400; color: var(--tekst-svag); }
/* Logoet. FAST HØJDE, og bredden følger med.
width og height staar ogsaa i html'en, saa browseren kender
forholdet og reserverer pladsen, foer filen er hentet — ellers
hopper menuen, naar logoet lander. Tallene i html'en er filens egne
1200×211; det er dem, forholdet regnes ud af, og de er IKKE den
stoerrelse, det vises i.
Filen er 1200 px bred og vises i cirka 170. Det er med vilje: paa en
skaerm med dobbelt oplosning er der stadig pixels nok, og et logo,
der er skarpt paa kontoret og grumset paa en ny baerbar, er det
foerste, nogen laegger maerke til. */
.maerke-logo {
display: block;
height: 30px;
width: auto;
max-width: 100%;
}
@media (max-width: 560px) {
.maerke-logo { height: 26px; }
}
/* Bundlinjens mærke. Samme højde som i toppen, men den hvide fil —
se skabelonen i byg.py. inline-flex, så linket ikke får den
ekstra linjehøjde under billedet, et inline-element giver. */
.bund-maerke {
display: inline-flex;
margin-bottom: 12px;
}
.topmenu { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.topmenu a {
display: inline-flex; align-items: center; min-height: 44px;
color: var(--tekst-svag); text-decoration: none; font-size: 15px;
}
.topmenu a:hover { color: var(--primaer); }
.topmenu a.aktiv { color: var(--primaer); font-weight: 600; }
/* Bestil-knappen ligger uden for .topmenu med vilje. Lå den indeni,
farvede reglen ovenfor dens tekst grå — og grå på den blå knap kan
dårligt læses. */
.topbar-bestil { flex: none; }
/* ---------- Knapper ---------- */
/* Knapperne.
--primaer-moerk og ikke --primaer: den moerke er den kraftigste
flade paa sitet, og en primaerknap skal vaere det tungeste element
paa siden — ikke det naestetungeste.
48 px hoej og ingen radius. inline-flex frem for inline-block, saa
min-height faktisk centrerer teksten i stedet for bare at goere
kassen hoejere. */
.knap {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px;
padding: 15px 30px;
font: inherit; font-size: 17px; font-weight: 600;
color: #fff; background: var(--primaer-moerk);
border: 1px solid var(--primaer-moerk); border-radius: 0;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
/* Knapper maa ombryde paa en smal skaerm.
nowrap er rigtig, hvor der er plads: en knap, der braekker over to
linjer midt i et afsnit, ser ud som en fejl. Men en etiket paa over
omkring 18 tegn er bredere end de 248 px, der er tilbage ved 320 px
skaerm — og saa er det ikke knappen, der braekker, det er HELE SIDEN,
der kan traekkes ud i siden.
To linjer i en knap paa en telefon er en skoenhedsfejl. Vandret scroll
paa hele siden er en brugsfejl. */
@media (max-width: 480px) {
.knap { white-space: normal; text-align: center; }
}
.knap:hover { background: var(--primaer); border-color: var(--primaer); }
.knap:active { transform: translateY(1px); }
/* Den sekundaere: ramme og ingen flade. Den skal kunne staa ved siden
af den primaere uden at konkurrere med den. */
.knap-let {
background: transparent;
color: var(--primaer-moerk);
border-color: var(--primaer-moerk);
}
.knap-let:hover { background: var(--primaer-moerk); color: #fff; }
.knap-lys { background: #fff; color: var(--primaer-moerk); border-color: #fff; }
.knap-lys:hover { background: var(--primaer-lys); border-color: var(--primaer-lys); }
.knap-kant-lys { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.knap-kant-lys:hover { background: rgba(255,255,255,.12); border-color: #fff; }
/* Den lille bruges i topbjaelken, hvor 48 px ville goere bjaelken
hoejere end indholdet kraever. 44 px er stadig over klikmaalet. */
.knap-lille { min-height: 44px; padding: 11px 20px; font-size: 15px; }
.knap-bred { display: block; width: 100%; text-align: center; }
/* ---------- Hero ---------- */
.hero {
position: relative;
color: #fff;
background: var(--primaer-moerk);
overflow: hidden;
}
/* Illustrationen er væk.
Den var en by-skyline med en stigende kurve — den mest generiske
finansgrafik der findes. Den sagde intet om årsregnskaber, og den
fyldte mere end alt indholdet tilsammen: hero'en var 754 px høj, og
teksten sad i venstre halvdel med tom plads til højre.
Div'en bliver stående i html'en, fordi den ligger i en fil, der
bygges om lige nu — den henter bare ingenting. Selve svg-filen er
slettet, så den ikke længere lægges op.
Det, der er tilbage, er en ren farveflade. Det er ikke en mangel:
uden en tegning bag sig kan overskriften, afsenderen og de tre
priser stå centreret og fylde hele bredden. */
/* ---------- Hero'ens baggrund: poster og video ----------
Poster-billedet ligger som css-baggrund og ikke som et . Så er
der ALTID noget at se: før videoen er hentet, hvis javascript ikke
kører, og når brugeren har bedt om mindre bevægelse. Ingen af de tre
tilfælde er en undtagelse — tilsammen er de de fleste besøg.
min-height frem for aspect-ratio på selve laget: hero'en er lige så
høj som teksten i den, og teksten er forskellig fra skærm til skærm.
Et fast forhold her ville enten klippe teksten af eller efterlade en
tom stribe under den. Pladsen er der i forvejen, fordi laget er
absolut placeret inde i en sektion, teksten allerede har sat
højden på — derfor kan videoen ikke skubbe layoutet, når den lander. */
.hero-baggrund {
position: absolute; inset: 0;
background-image: url("../brand/hero-poster.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--primaer-moerk);
}
/* object-fit: cover — videoen fylder fladen uden at blive trukket skæv.
Uden den strækkes 1200×600 til hero'ens højde, og dokumentet i
animationen bliver til en rombe. */
.hero-baggrund video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Sløret ligger MELLEM videoen og teksten, og det er derfor teksten kan
læses — ikke en skygge på bogstaverne. En skygge gør hvert bogstav
grumset og hjælper kun der, hvor baggrunden tilfældigvis er lys; et
lag dæmper hele fladen ens.
.88 er regnet efter på den færdige side: videoens mørke flade blandes
til rgb(20,58,90), altså slørets egen farve, så den forsvinder helt,
mens det hvide dokument i animationen løfter sig til rgb(50,83,114).
Hvid tekst har omkring 8:1 i kontrast hen over det — langt over de
4,5:1, WCAG kræver.
REGLEN HER MÅ IKKE FORSVINDE. Uden den står poster-billedet og
videoen i fuld styrke bag overskriften, og hero'en bliver ulæselig.
Det skete én gang: reglen lå midt i en blok, der blev skiftet ud
under ét, og fejlen nåede helt ud på sitet, fordi ingen test kiggede
efter den. Det gør site.test.js nu. */
.hero-slaer {
position: absolute; inset: 0;
background: var(--primaer-moerk);
opacity: .88;
}
/* ---------- Videoen kører kun på computer ----------
GRÆNSEN ER 900 px, OG DEN STÅR TO STEDER: her og i bevaegelse.js.
De SKAL være ens — ellers henter mobilen en fil, den aldrig får at
se, eller en bred skærm får en tom flade. test/site.test.js holder
de to tal op mod hinanden.
Hvorfor ikke også på telefon? Fordi videoen er 1200×600, og en hero
på en telefon er høj og smal. Der er kun to udgange, og ingen af dem
er gode:
· cover kan kun dække fladen ved at zoome omkring seks gange ind.
Så bliver animationens ord lige så store som hero'ens EGEN
typografi, og der står halve ord — "NINGER", "T FØR SKAT" — bag
overskriften. Det kan man ikke dæmpe sig ud af: et stort
bogstav bag tekst er stadig et bogstav.
· Skalerer man i stedet NED til et bånd i bunden, forsvinder
ordene, men båndet fylder 188 px af en hero på 1.222 og er
målt til at være næsten usynligt bag sløret. Vi ville betale
146 kB mobildata, afkodning og batteri for noget, ingen kan se.
Det er prøvet, og det andet var værst. Så hellere den rene blå
flade, hero'en havde i forvejen — den er ikke en mangel. Den er
grunden til, at overskriften og de tre priser kan stå centreret og
fylde hele bredden.
Under 900 px hentes derfor HVERKEN video eller stillbillede. */
@media (max-width: 899px) {
.hero-baggrund { background-image: none; }
}
/* Har brugeren bedt om mindre bevægelse, indsætter bevaegelse.js
aldrig videoen. Reglen her er reserven: skulle et element alligevel
nå ind, står det stille og usynligt frem for at spille. */
@media (prefers-reduced-motion: reduce) {
.hero-baggrund video { display: none; }
}
.hero-indhold {
position: relative;
padding: 44px 0 46px;
text-align: center;
}
/* Alt i hero'en centreres som en søjle.
Auto-margenerne skrives ind i hver enkelt regel og ikke i en fælles
".hero-indhold > *". En margin-shorthand i en senere regel nulstiller
nemlig venstre og højre igen, og så klæber søjlen til venstre kant,
mens teksten inde i den står centreret — den værste af to verdener. */
.hero h1 {
margin: 0 auto 10px;
font-size: 62px; line-height: 1.06; font-weight: 700;
letter-spacing: -.02em;
max-width: 24ch;
}
.hero-under {
margin: 0 auto 22px;
font-size: 17px; line-height: 1.55;
color: rgba(255,255,255,.88);
max-width: 68ch;
}
.hero-knapper {
display: flex; gap: 14px; flex-wrap: wrap;
justify-content: center;
margin-bottom: 24px;
}
.hero-punkter {
display: flex; gap: 34px; flex-wrap: wrap;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,.20);
}
.hero-punkt { font-size: 15px; color: rgba(255,255,255,.86); }
.hero-punkt strong { display: block; font-size: 19px; color: #fff; font-weight: 700; margin-bottom: 2px; }
/* Afsenderen.
Den var sat som en lille fed billedtekst under overskriften. Det er
for lidt: det er sitets eneste sætning, konkurrenterne ikke kan
skrive. De automatiserede løsninger har ingen navngiven revisor bag
sig, og det er dét, en kunde er utryg ved.
Den er nu sat i samme vægt som prislinjen nedenfor — 23 px mod
prisernes 32 px. Tallene er fire tegn og kan bære en større grad; det
her er en hel sætning, og den samme grad ville få den til at brække
og råbe. Optisk vejer de to lige meget. */
.hero-afsender {
margin: 0 auto 14px;
font-size: 26px; line-height: 1.35; font-weight: 600;
letter-spacing: -.005em;
color: #fff;
max-width: 52ch;
}
/* De tre priser.
De erstatter et "Fra ..."-tal, der viste den mindste ordre og ikke
den, folk kommer efter. Tre tal ved siden af hinanden svarer på
spørgsmålet med det samme — man skal ikke rulle ned for at få det. */
.hero-priser {
display: flex; flex-wrap: wrap; gap: 20px 46px;
justify-content: center;
margin: 0 auto;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.20);
max-width: 640px;
}
.hero-pris { display: flex; flex-direction: column; align-items: center; }
.hero-pris-hvem {
font-family: var(--skrift-tal);
font-size: 13px; font-weight: 500;
letter-spacing: .06em; text-transform: uppercase;
color: rgba(255,255,255,.72);
margin-bottom: 6px;
}
.hero-pris-tal { display: flex; align-items: baseline; gap: 6px; }
.hero-pris-tal b {
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
font-size: 40px; font-weight: 600; color: #fff;
letter-spacing: -.02em; line-height: 1;
}
.hero-pris-tal span { font-size: 15px; color: rgba(255,255,255,.72); }
.hero-pris-note {
margin: 12px auto 0;
font-size: 15px; color: rgba(255,255,255,.72);
}
@media (max-width: 700px) {
/* To og to frem for tre smalle kolonner. Tallene skal kunne læses
uden at brække over to linjer. */
.hero-priser { gap: 24px 32px; }
.hero-pris-tal b { font-size: 26px; }
.hero-pris-hvem { font-size: 13px; }
}
/* ---------- Afsnit ---------- */
.afsnit { padding: 76px 0; }
/* Afsnittene skifter ikke laengere mellem hvid og graa.
--baggrund ER sidens flade. Da hvert andet afsnit var hvidt, blev
siden til en stak af flader, og saa skulle ALT indeni vaere et kort
for at kunne ses paa dem — det er praecis den spiral, der skulle
brydes. Nu er der een flade, og afsnittene skilles af en regel.
--flade er tilbage til det, den var: farven paa noget, der faktisk
er et kort. Priskortene og artikelkortene, og ikke andet. */
.afsnit-lys { background: none; }
.afsnit + .afsnit, .afsnit-lys + .afsnit-lys { border-top: 1px solid var(--kant); }
.afsnit-blaa { background: var(--primaer-blaa-svag); border-top: 0; }
.afsnit-hoved { max-width: 62ch; margin: 0 0 42px; }
.afsnit-hoved.midt { margin-left: auto; margin-right: auto; text-align: center; }
/* Etiketterne — versaler over en overskrift — er ogsaa mono. De er
ikke tekst, man laeser; de er et maerkat, der siger hvor man er. */
.overtitel {
margin: 0 0 10px;
font-family: var(--skrift-tal);
font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
color: var(--primaer);
}
/* .afsnit-hoved h1 staar med, fordi seks sider bruger afsnittets
overskrift som sidens egen. Uden den regel ville de faa browserens
standard paa 2em i det oejeblik markuppen bliver rettet — reglen
skal vaere der FOER, ikke bagefter. */
h2, .afsnit-hoved h1 { margin: 0 0 14px; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.ledetekst { margin: 0; font-size: 17px; color: var(--tekst-svag); }
/* ---------- Trin ---------- */
.trin-raekke {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px;
}
/* Trinnene.
Cirklerne er vaek. En cirkel med et tal i er en knap, der ikke kan
trykkes paa — og fire af dem paa stribe er fire knapper, ingen kan
bruge. Nu baerer en kraftig regel over hvert trin rytmen, og tallet
staar under den i mono. Det er samme greb som resten af sitet:
dybde af linjer, ikke af flader. */
.trin {
position: relative;
padding-top: 16px;
border-top: 2px solid var(--primaer-moerk);
}
.trin-nr {
display: block;
margin-bottom: 10px;
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
font-size: 15px; font-weight: 600; letter-spacing: .08em;
color: var(--primaer-moerk);
}
.trin p { margin: 0; color: var(--tekst-svag); font-size: 15px; }
/* ---------- Priskort ---------- */
.pris-raekke {
display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 24px;
/* stretch og ikke start: med start bliver hvert kort kun så højt
som sit eget indhold, og så ender fire kort med fire forskellige
højder — og fire Bestil-knapper i fire forskellige højder.
Med stretch får de samme højde, og margin-top:auto på knappen
kan skubbe den ned i bunden. Uden stretch gør den intet, fordi
der ikke er nogen overskydende plads at skubbe i. */
align-items: stretch;
}
/* Fire pakker frem for tre. Med 268px som minimum brækker de til 2x2
allerede ved 1180px og efterlader et hul i højre side; 226px lader
alle fire stå på række, så længe der er plads til dem. */
/* Holdingselskabet alene staar som én linje under raekken og ikke som
et fjerde kort: 1.495 kr. til sidst broed prisstigen, og fire
sidestillede kort er ét for meget at afkode paa en forside. */
.pris-tillaegslinje {
margin: 26px 0 0;
padding: 16px 22px;
text-align: center; font-size: 17px;
background: var(--flade);
border: 1px solid var(--kant); border-radius: 0;
}
.pris-tillaegslinje strong { color: var(--primaer); }
.pris {
position: relative;
display: flex; flex-direction: column;
padding: 30px 28px 28px;
background: var(--flade);
border: 1px solid var(--kant);
border-radius: 0;
}
/* Fremhævningen tegnes med en indvendig skygge og ikke med en tykkere
kant. En 2px kant gør kortets indvendige mål 1px mindre hele vejen
rundt, og så står overskrift, pris og punktliste én pixel forskudt
i forhold til de tre andre kort. */
.pris-fremhaevet {
border-color: var(--primaer);
}
/* Mærkatet ligger UDEN for flowet. Lå det i det, ville det fremhævede
kort have et element mere end de tre andre, og alt under det ville
stå nogle pixels forskudt — overskrift, pris og punktliste. */
.pris-maerkat {
position: absolute; top: -13px; left: 22px;
padding: 4px 12px;
font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #fff; background: var(--primaer);
border-radius: 0;
}
/* Mindstehøjderne er sat i em ud fra elementets egen linjehøjde, så
de svarer til et bestemt ANTAL LINJER og ikke til et tal, der passer
ved lige netop den skriftstørrelse.
Overskriften: to linjer. "Enkeltmandsvirksomhed" brækker på et smalt
kort, "Selskab" gør ikke — uden en fast højde står de to prisers
tal så ikke på samme linje.
Beskrivelsen: tre linjer, som de længste er. Den gamle 3em svarede
til under to linjer, fordi em regnes af skriftstørrelsen og ikke af
linjeafstanden. */
.pris h3 {
margin-bottom: 4px;
font-size: 19px; line-height: 1.3;
min-height: calc(2 * 1.3em);
}
.pris-hvem {
margin: 0 0 20px;
font-size: 15px; line-height: 1.5;
color: var(--tekst-svag);
min-height: calc(3 * 1.5em);
}
.pris-tal { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.pris-tal b {
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
font-size: 40px; font-weight: 600;
letter-spacing: -.02em; line-height: 1;
}
.pris-tal span { font-size: 15px; color: var(--tekst-svag); }
.pris-note { margin: 0 0 22px; font-size: 15px; color: var(--tekst-svag); }
.pris ul { margin: 0 0 24px; padding: 0; list-style: none; }
.pris li {
position: relative;
padding: 0 0 9px 22px;
font-size: 15px;
border-bottom: 1px solid var(--kant-fin);
margin-bottom: 9px;
}
.pris li:last-child { border-bottom: 0; margin-bottom: 0; }
/* Flueben og ikke en ring. En ring er den samme figur som et tomt
afkrydsningsfelt og læses som "kan vælges til"; et flueben læses som
"med i prisen". Punkterne her er det sidste — de er inkluderet.
Tegnet af to kanter frem for et billede: så følger det tekstfarven
og bliver skarpt på alle skærme. */
.pris li::before {
content: ""; position: absolute; left: 3px; top: 5px;
width: 5px; height: 9px;
border: solid var(--primaer);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pris .knap { margin-top: auto; }
/* ---------- Tillæg ---------- */
.tillaeg {
margin-top: 30px; padding: 20px 0 0;
border-top: 2px solid var(--primaer-moerk);
}
.tillaeg h3 { margin-bottom: 14px; }
.tillaeg table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tillaeg td { padding: 9px 0; border-bottom: 1px solid var(--kant-fin); }
.tillaeg tr:last-child td { border-bottom: 0; }
.tillaeg td:last-child { font-family: var(--skrift-tal); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tillaeg .forklaring { color: var(--tekst-svag); font-size: 15px; }
/* ---------- Prisopstillingen ----------
Fire raekker, ikke fire kort. En kunde, der skal vaelge mellem fire
pakker, sammenligner TAL — og tal sammenlignes ved at staa under
hinanden i en kolonne, ikke ved siden af hinanden i hver sin ramme.
2 px --primaer-moerk over og under gruppen, 1 px --kant mellem
raekkerne. Det er sitets regelsystem, og det er samme opstilling som
under en sum i et regnskab. */
.opstilling {
border-top: 2px solid var(--primaer-moerk);
}
/* Listen faar kun en bundlinje, hvis der ikke kommer en dobbeltstreg
efter den. Ellers stod der tre streger oven i hinanden: listens egen,
og saa maerkets to. */
.opstilling:not(:has(+ .dobbeltstreg)) {
border-bottom: 2px solid var(--primaer-moerk);
}
.opstilling-raekke {
display: flex; align-items: baseline; gap: 24px;
padding: 18px 0;
color: inherit; text-decoration: none;
}
.opstilling-raekke + .opstilling-raekke { border-top: 1px solid var(--kant); }
a.opstilling-raekke:hover { color: var(--primaer-moerk); }
a.opstilling-raekke:hover .opstilling-tal { color: var(--primaer-moerk); }
.opstilling-navn {
flex: 1 1 auto;
/* Uden min-width: 0 nægter et flex-element at blive smallere end
sit længste ord. "Enkeltmandsvirksomhed" er 21 tegn, og ved
320 px skubbede den rækken — og dermed hele forsiden — 5 px ud i
siden. Med den her ombryder navnet i stedet, og talkolonnen til
højre står, hvor den skal. */
min-width: 0;
overflow-wrap: break-word;
font-size: 19px; font-weight: 600;
}
/* Praeciseringen er en del af navnet og ikke en undertekst — den
staar paa samme linje, saet i den svage farve. */
.opstilling-praecisering { font-weight: 400; color: var(--tekst-svag); }
.opstilling-under {
display: block;
margin-top: 4px;
font-size: 15px; font-weight: 400; color: var(--tekst-svag);
}
/* Beloebet. Mono og tabular-nums, saa cifrene har samme bredde og de
fire tal staar praecist under hinanden — det er hele pointen med
opstillingen. */
.opstilling-tal {
flex: 0 0 auto;
min-width: 7ch;
text-align: right;
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
font-size: 26px; font-weight: 500;
letter-spacing: -.01em;
white-space: nowrap;
}
/* "efter aftale" er ikke et tal og skal ikke se ud som et. */
.opstilling-tal-tekst {
font-size: 15px; font-weight: 400; color: var(--tekst-svag);
}
/* Fremhaevningen: flade og halvfed skrift. Ingen ramme, ingen skygge,
ingen maerkat. Maerkaten sagde "mest valgte" uden at vide det;
underteksten siger, hvad det koster ekstra, og det er et argument. */
.opstilling-fremhaevet { background: var(--primaer-blaa-svag); }
.opstilling-fremhaevet .opstilling-navn { font-weight: 700; }
.opstilling-fremhaevet .opstilling-tal { font-weight: 600; }
.opstilling-fremhaevet .opstilling-navn,
.opstilling-fremhaevet .opstilling-tal { padding-inline: 16px; }
.opstilling-fremhaevet .opstilling-under { color: var(--primaer-moerk); }
/* Tilkoebene staar i samme system under dobbeltstregen. De er ikke
klikbare — man vaelger dem i flowet, ikke her. */
.opstilling-tilkoeb { margin-top: 4px; border-top: 0; }
.opstilling-tilkoeb .opstilling-navn { font-size: 17px; font-weight: 600; }
.opstilling-tilkoeb .opstilling-tal { font-size: 19px; }
/* ---------- Dobbeltstregen ----------
Maerket: den tynde streg over den tykke, som man saetter under en sum
i et regnskab. Maalene er 2 px og 4 px med 5 px imellem ved 44 px
skrift — omregnet til em, saa den skalerer med det, den staar under.
Gulvet paa 1 px og 2 px er der, fordi 0,0455em ved 19 px giver
0,86 px. Det renderer som en graatone og ikke som en streg. */
.dobbeltstreg {
/* content-box og ikke border-box. Sitet saetter box-sizing:
border-box paa alt, og saa TRAEKKES de to stregers hoejde fra
mellemrummet — 5 px minus 2 minus 4 giver nul, og de to streger
klaeber sammen til een tyk. Her skal height BETYDE mellemrummet. */
box-sizing: content-box;
height: 0.1136em;
margin: 0;
border-top: max(1px, 0.0455em) solid var(--primaer-moerk);
border-bottom: max(2px, 0.0909em) solid var(--primaer-moerk);
}
/* Under prislisten staar den i 44 px, som logoet er tegnet til. */
.opstilling + .dobbeltstreg {
font-size: 44px; margin-top: 0;
height: 5px; border-top-width: 2px; border-bottom-width: 4px;
}
.opstilling-fod {
margin: 14px 0 0;
font-family: var(--skrift-tal);
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
color: var(--tekst-svag);
}
@media (max-width: 620px) {
.opstilling-raekke { gap: 14px; padding: 16px 0; }
.opstilling-navn { font-size: 17px; }
.opstilling-tal { font-size: 22px; min-width: 6ch; }
.opstilling-fremhaevet .opstilling-navn,
.opstilling-fremhaevet .opstilling-tal { padding-inline: 12px; }
}
/* ---------- Kort ---------- */
.kort-raekke {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.kort {
display: flex; flex-direction: column;
padding: 28px;
background: var(--flade);
border: 1px solid var(--kant);
border-radius: 0;
text-decoration: none; color: inherit;
transition: transform .18s ease, border-color .18s ease;
}
a.kort:hover {
border-color: var(--primaer);
transform: translateY(-2px);
}
.kort p { margin: 0 0 16px; color: var(--tekst-svag); font-size: 15px; }
.kort .videre { margin-top: auto; font-weight: 600; color: var(--primaer); font-size: 15px; }
.kort .videre::after { content: " \2192"; }
/* Etiketten er ikke laengere en farvet klat, men en linje under et
ord. Farvefladen var det sidste sted, en "knap-agtig" form sad. */
.kort-etiket {
align-self: flex-start; margin-bottom: 12px;
padding: 0 0 4px;
font-family: var(--skrift-tal);
font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
color: var(--primaer);
border-bottom: 1px solid var(--kant);
}
/* ---------- Tillid ---------- */
.tillid-raekke {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px;
}
/* Tilliden er fire paastande under hinanden, ikke fire kort. En
paastand kan ikke loeftes ud og sammenlignes med de andre — den
laeses. Regelen over hver af dem giver rytmen, fladen gav den ikke. */
.tillid {
padding-top: 16px;
border-top: 1px solid var(--kant);
}
.tillid h3 { margin-bottom: 6px; font-size: 17px; }
.tillid p { margin: 0; color: var(--tekst-svag); font-size: 15px; }
/* ---------- Bestillingsskema ---------- */
.skema {
padding: 34px;
background: var(--flade);
border: 1px solid var(--kant);
border-radius: 0;
}
.felt-raekke { display: flex; gap: 18px; flex-wrap: wrap; }
.felt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; flex: 1 1 240px; }
.felt label { font-size: 15px; font-weight: 600; color: var(--tekst); }
.felt .hint { font-size: 15px; color: var(--tekst-svag); font-weight: 400; }
input, select, textarea {
padding: 12px 13px;
font: inherit; font-size: 15px;
color: var(--tekst); background: var(--flade);
border: 1px solid var(--kant); border-radius: 0;
width: 100%;
}
/* =====================================================================
TASTATURFOKUS
Ét sted, for alt. Før stod der kun en ramme på formularfelterne —
knapper og links havde ingenting. Efter at skyggerne blev fjernet fra
designet var der heller ingen anden markering tilbage, så den, der
navigerer med tabulator, kunne ikke se, hvor han var. Det gælder ikke
kun folk uden mus: det gælder alle, hver gang en formular sender én
videre til næste felt.
:focus-visible og ikke :focus. Browseren afgør selv forskellen — en
ramme efter et museklik ser ud som en fejl, en ramme efter et tryk på
tabulator er den eneste information, der er.
--primaer-moerk og 2 px offset: ringen skal kunne ses på både den
lyse baggrund, den hvide flade OG oven på den mørke primærknap. Med
0 offset forsvinder den ind i knappens egen kant.
===================================================================== */
:where(a, button, summary, input, select, textarea,
[tabindex], [role="button"]):focus-visible {
outline: 2px solid var(--primaer-moerk);
outline-offset: 2px;
/* Ringen ligger uden for elementet og må ikke klippes af en
forfader med overflow — fx den menustrimmel, der kan svippes. */
position: relative;
z-index: 1;
}
/* Ringen ligger 2 px UDEN FOR elementet, altså på siden bag det. Derfor
virker den mørkeblå ring også på den mørkeblå knap — den tegnes ikke
oven på knappen, men på den lyse baggrund ved siden af.
Undtagelsen er de steder, hvor baggrunden selv er mørk. I hero'en og
i bundlinjen ville mørk på mørk forsvinde, og der vendes den om. Det
er en ring og ikke en skygge: designet har ingen skygger, og en
fokusmarkering skal være en streg, man kan se, ikke en sky. */
.hero :focus-visible,
.bundlinje :focus-visible {
outline-color: var(--flade);
}
/* Formularfelternes egen ramme beholdes — den sidder tættere og
markerer feltet selv, ikke bare dets plads. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline-offset: 1px;
border-color: transparent;
}
/* Musefokus i et felt skal stadig kunne ses. Uden den her mister man
markeringen, i det øjeblik man klikker i stedet for at tabbe. */
input:focus, select:focus, textarea:focus {
outline: 2px solid var(--primaer); outline-offset: 1px;
border-color: transparent;
}
/* Fokus flyttes med vilje hertil, når flowet skifter trin, så en
skærmlæser læser den nye overskrift op. Brugeren har ikke selv
navigeret derhen, og en ramme om en overskrift ville se ud som en
fejl. :focus-visible rammer den ikke, men :focus gør — derfor står
den her og ikke ovenfor. */
[tabindex="-1"]:focus { outline: none; }
/* =====================================================================
KLIKFLADER PÅ 44 PX
Målt i en rigtig browser på alle sider: 52 klikbare elementer var
lavere end de 44 px, en finger kræver. Ingen af dem lå i topbjælken,
undermenuen eller bundlinjen — dem havde vi allerede rettet. De lå i
brødkrummerne, nøgleordene under artiklerne og de links, der står
alene i et afsnit.
Højden er det, der tæller, ikke polstringen. Derfor min-height og
inline-flex frem for padding: padding på et inline-element ændrer
ikke linjeboksen og giver en klikflade, der ser rigtig ud i
stilarket, men måler 25 px i browseren.
UNDTAGELSEN er links inde i en sætning. Dem holder WCAG 2.5.8
udtrykkeligt uden for kravet, og med god grund: gør man dem 44 px
høje, overlapper de linjen ovenover, og så rammer man et link, når
man sigtede efter tekst. De står som de er, og de er talt op i
afrapporteringen.
===================================================================== */
.brødkrumme a,
.noegleord,
.tilbage a,
.faq-videre a,
.pris-videre a,
.laes-ogsaa a,
.artikel-kort a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Nøgleordene står side om side og skal kunne rammes hver for sig.
Uden vandret polstring støder de op ad hinanden, og så er det
tilfældigt, hvilket ord man rammer mellem to. */
.noegleord { padding: 0 2px; }
/* =====================================================================
AFKRYDSNINGSFELTER OG RADIOKNAPPER
Browserens eget felt er 13 px. Det er ikke til at ramme, og det kan
ikke gøres større uden at blive en kæmpe firkant — sætter man width
og height på et indbygget felt, strækkes hele kontrollen med.
Derfor tegnes det her selv: elementet er 44 px og usynligt, og
firkanten er et ::before på 22 px midt i. Klikfladen er hele de 44,
det man SER er 22, og de to behøver ikke være det samme.
Den negative margin tager de 10 px overskydende tilbage, så rækken
ser ud, som den gjorde — klikfladen vokser ind over den luft, der
alligevel var der.
Ingen data-URI til fluebenet. Sitets egen sikkerhedsregel er
default-src 'self', og et billede i en data-adresse ville blive
blokeret — tavst, så feltet ville se tomt ud, også når det var
sat. Fluebenet er to streger, browseren tegner selv. */
input[type="checkbox"], input[type="radio"] {
appearance: none; -webkit-appearance: none;
width: 44px; height: 44px;
min-height: 44px;
margin: -10px;
flex: none;
display: grid; place-content: center;
background: none; border: 0; padding: 0;
cursor: pointer;
}
input[type="checkbox"]::before, input[type="radio"]::before {
content: "";
width: 22px; height: 22px;
background: var(--flade);
border: 1px solid var(--kant);
}
input[type="radio"]::before { border-radius: 50%; }
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
background: var(--primaer); border-color: var(--primaer);
}
/* Fluebenet: to kanter på en firkant, drejet 45 grader. Det ligger oven
på firkanten fra ::before, derfor den absolutte placering. */
input[type="checkbox"] { position: relative; }
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 6px; height: 11px;
margin: -7px 0 0 -3px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
input[type="radio"]:checked::before {
/* Prikken i midten laves med en ramme indad frem for et ekstra
element — radioknappen har kun ::before til rådighed her. */
background: var(--flade);
border: 6px solid var(--primaer);
}
/* Deaktiverede felter skal se deaktiverede ud, ikke bare være det. */
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
cursor: default;
}
input[type="checkbox"]:disabled::before,
input[type="radio"]:disabled::before {
background: var(--baggrund); border-color: var(--kant-fin);
}
.samtykke, .valgraekke label, label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
min-height: 44px;
}
.samtykke input { margin-top: 0; }
.samtykke label { cursor: pointer; }
.skjult { position: absolute; left: -9999px; }
.samtykke { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 22px; }
.samtykke input { width: auto; margin-top: 4px; }
.samtykke label { font-size: 15px; color: var(--tekst-svag); font-weight: 400; }
/* ---------- Bundlinje ---------- */
.bundlinje {
padding: 44px 0 40px;
background: var(--primaer-moerk);
color: rgba(255,255,255,.72);
font-size: 15px;
}
.bund-raekke { display: flex; gap: 44px; flex-wrap: wrap; justify-content: space-between; }
/* Spalteoverskrifterne er H2 og ikke H4. De er sidestillede med
indholdets afsnit, ikke underafsnit af dem — som H4 gav de et
H2-til-H4-spring paa hver eneste side. */
.bundlinje h2 { margin: 0 0 10px; font-size: 15px; color: #fff; font-weight: 600; letter-spacing: 0; }
.bundlinje a {
/* flex og IKKE inline-flex. Et inline-flex-link er en inline-boks,
og saa floed alle links i en spalte sammen paa een linje i stedet
for at staa under hinanden. Klikfladen er den samme 44 px — det
var kun stablingen, der gik i stykker. */
display: flex; align-items: center; min-height: 44px;
color: rgba(255,255,255,.72); text-decoration: none;
}
.bundlinje a:hover { color: #fff; }
.bund-nederst {
margin-top: 34px; padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.14);
font-size: 15px; color: rgba(255,255,255,.55);
}
/* ---------- Artikler ---------- */
.artikel-liste { display: grid; gap: 18px; }
.artikel-kort {
display: block; padding: 24px 26px;
background: var(--flade); border: 1px solid var(--kant); border-radius: 0;
text-decoration: none; color: inherit;
transition: border-color .18s ease;
}
.artikel-kort:hover { border-color: var(--primaer); }
.artikel-kort h3 { margin: 8px 0 6px; font-size: 19px; }
.artikel-kort p { margin: 0 0 10px; color: var(--tekst-svag); font-size: 15px; }
/* Datoer og laesetider er tal. */
.artikel-meta {
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
/* Var 13 px. De 13 er kun til korte etiketter og versaloverskrifter,
og den her er hverken: "Nemt Årsregnskab · 29. august 2026 · 4 min"
er fyrre tegn, og på artiklerne står der et helt resumé i samme
felt. Det læses, altså er det brødtekst, altså 15. */
font-size: 15px; color: var(--tekst-svag);
}
.broedtekst { font-size: 17px; line-height: 1.7; }
.broedtekst h2 { margin: 36px 0 12px; font-size: 26px; }
.broedtekst h3 { margin: 28px 0 8px; font-size: 19px; }
.broedtekst p { margin: 0 0 16px; }
.broedtekst ul, .broedtekst ol { margin: 0 0 18px; padding-left: 24px; }
.broedtekst li { margin-bottom: 7px; }
.broedtekst table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 15px; }
.broedtekst th {
text-align: left; padding: 10px 12px; background: var(--primaer-blaa-svag);
border-bottom: 2px solid var(--kant); font-size: 13px; text-transform: uppercase;
letter-spacing: .04em; color: var(--tekst-svag);
}
.broedtekst td { padding: 10px 12px; border-bottom: 1px solid var(--kant-fin); vertical-align: top; }
.broedtekst blockquote {
margin: 20px 0; padding: 14px 20px;
background: var(--primaer-blaa-svag); border-left: 3px solid var(--primaer);
border-radius: 0;
}
.broedtekst blockquote p:last-child { margin-bottom: 0; }
.broedtekst code {
padding: 2px 6px; background: var(--baggrund); border: 1px solid var(--kant-fin);
border-radius: 0; font-size: 15px;
/* En lang streng uden mellemrum — en kontonummer eller en formel —
skubber ellers hele siden ud i siden. Målt ved 480 px på
splitmoms-guiden. */
overflow-wrap: anywhere;
}
/* En kodeblok er noget andet end kode inde i en sætning. Her BETYDER
linjeskiftene noget, så den må ikke ombrydes — den skal rulle inde i
sig selv. Målt: to blokke på splitmoms-guiden var 514 og 542 px brede
og skubbede hele siden ud i siden ned til 320 px.
Reglen står UDEN klasse foran med vilje. Artiklerne ligger i
.artikel-brødtekst, dokumenterne i .broedtekst.dokument, og en tredje
beholder kommer der før eller siden. Ingen
på sitet skal kunne
skubbe siden ud i siden, uanset hvad den ligger i — så er reglen
sand fremover og ikke kun i dag. */
pre {
margin: 18px 0 24px;
padding: 14px 16px;
background: var(--baggrund);
border: 1px solid var(--kant-fin);
overflow-x: auto;
}
pre code {
padding: 0; border: 0; background: none;
/* Modsat den inline: her ombrydes der ikke. */
overflow-wrap: normal;
white-space: pre;
}
/* Overskrifterne i artiklernes tabeller. De ligger på 13 px, og reglen
er, at det, der ligger dernede, skal være en kort etiket i mono.
Tabellerne kommer fra Markdown, så de kan ikke rammes i kilden. */
.broedtekst th {
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
}
/* =====================================================================
TJEKLISTER
"- [ ]" i Markdown blev til . Det er
fjernet i byg.py; her tegnes punkttegnet i stedet. En firkant, ikke
et felt — den lover ikke, at man kan klikke på noget.
===================================================================== */
.contains-task-list { list-style: none; padding-left: 0; }
.task-list-item { display: flex; align-items: flex-start; gap: 10px; }
.tjekmaerke {
flex: none;
width: 15px; height: 15px;
margin-top: 0.28em;
border: max(1px, 0.0625em) solid var(--tekst-svag);
background: var(--flade);
}
.brødkrumme { padding: 26px 0 0; font-size: 15px; color: var(--tekst-svag); }
.brødkrumme a { color: var(--primaer); text-decoration: none; }
.brødkrumme a:hover { text-decoration: underline; }
/* Skilletegnet stod i --kant på --baggrund: 1,27:1. Det er under enhver
grænse — og det er ikke pynt, det er dét, der adskiller to niveauer i
stien. --tekst-svag giver 4,8:1 og ser stadig underordnet ud. */
.brødkrumme span { margin: 0 7px; color: var(--tekst-svag); }
.sidehoved { padding: 6px 0 30px; border-bottom: 1px solid var(--kant); margin-bottom: 34px; }
.sidehoved h1 { margin: 8px 0 10px; font-size: 40px; line-height: 1.18; letter-spacing: -.02em; }
.sidehoved .resume { margin: 0 0 12px; font-size: 19px; color: var(--tekst-svag); }
/* ---------- Fordele ---------- */
.fordel-raekke { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.fordel {
display: flex; flex-direction: column;
padding: 20px 0 0;
border-top: 2px solid var(--primaer-moerk);
}
.fordel .kort-etiket { margin-bottom: 14px; }
.fordel h3 { margin-bottom: 10px; font-size: 19px; }
.fordel p { margin: 0 0 14px; color: var(--tekst-svag); font-size: 15px; }
.fordel .vilkaar { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kant-fin);
font-size: 15px; color: var(--tekst-svag); }
.kode {
display: inline-block; padding: 3px 10px; margin: 0 2px;
font-family: Consolas, monospace; font-size: 15px; font-weight: 700;
color: var(--primaer); background: var(--primaer-lys); border-radius: 0;
}
/* ---------- Afstande ----------
De her stod før som style="" direkte i markuppen. Sikkerhedsreglerne
(style-src 'self') blokerer inline styles, så de blev aldrig brugt —
afstandene manglede på siden, og der stod ingen fejl nogen steder.
Tallet i navnet er antal pixels. Det er kedeligt, men det kan ikke
misforstås, og det holder de to stilark fra at give hver sit svar. */
.luft-6 { margin-top: 6px; }
.luft-14 { margin-top: 14px; }
.luft-22 { margin-top: 22px; }
.luft-26 { margin-top: 26px; }
.luft-34 { margin-top: 34px; }
.luft-44 { margin-top: 44px; }
.luft-under-12 { margin-bottom: 12px; }
.knapper-midt { justify-content: center; }
/* Kolonnejustering i artiklernes tabeller. Markdig skriver den som
inline style; byg.py bytter den til de her. */
.til-hoejre { text-align: right; }
.til-midten { text-align: center; }
.til-venstre { text-align: left; }
.bund-tekst { margin: 0; max-width: 34ch; }
.tillaeg-ledetekst { margin: 0 0 14px; color: var(--tekst-svag); }
/* ---------- Samtykke til måling ----------
Boksen findes kun på siden, hvis der er sat måling op. Er der ikke
det, indlæses sporing.js ikke, og reglerne her rører aldrig noget. */
.samtykkeboks {
position: fixed; z-index: 80;
left: 20px; right: 20px; bottom: 20px;
max-width: 460px;
padding: 22px 24px;
background: var(--flade);
border: 1px solid var(--kant);
border-radius: 0;
}
.samtykke-tekst strong { display: block; font-size: 17px; margin-bottom: 6px; }
.samtykke-tekst p {
margin: 0; font-size: 15px; line-height: 1.55; color: var(--tekst-svag);
}
.samtykke-knapper {
display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px;
}
.samtykke-knapper .knap { padding: 10px 18px; font-size: 15px; }
.samtykke-fortryd { margin-top: 10px; }
.samtykke-link {
font: inherit; font-size: inherit;
color: inherit; background: none; border: 0; padding: 0;
text-decoration: underline; cursor: pointer;
}
.samtykke-link:hover { color: var(--primaer); }
@media (max-width: 520px) {
.samtykkeboks { left: 12px; right: 12px; bottom: 12px; padding: 18px 18px; }
.samtykke-knapper .knap { flex: 1; text-align: center; }
}
/* =====================================================================
Bestillingsflowet på /start
Ét trin ad gangen, også på en stor skærm. Et wizard-forløb, der viser
alle fem trin på én gang, er ikke et forløb — så er det en lang
formular, og så er der ingen grund til trinnene.
===================================================================== */
.flow-afsnit { padding-top: 40px; padding-bottom: 140px; }
/* Trinnene i flowet skal vaere H2 og ikke H1: siden har een overskrift,
og fem H1 paa samme side er fem sider i eet dokument. */
.flow-trin h1, .flow-trin h2 { font-size: 26px; line-height: 1.2; margin: 0 0 12px; }
.flow-trin h1:focus, .flow-trin h2:focus { outline: none; }
.flow-trin h2 { font-size: 19px; }
/* ---------- Trinindikator ---------- */
.trinbjaelke {
display: flex; gap: 6px;
list-style: none; margin: 0 0 34px; padding: 0;
}
.trinbjaelke li {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 7px;
font-size: 13px; color: var(--tekst-svag);
/* Stregen over hvert trin er selve fremdriften. */
border-top: 3px solid var(--kant);
padding-top: 10px;
}
.trinbjaelke li.klaret { border-top-color: var(--primaer); }
.trinbjaelke li.nu {
border-top-color: var(--primaer);
color: var(--primaer); font-weight: 600;
}
.trinbjaelke-nr {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
font-size: 13px; font-weight: 700;
/* Trinnummeret er et tal og skal se ud som sitets øvrige tal.
Tabulære cifre, fordi 1 og 4 ellers har hver sin bredde, og de
fem cirkler så står en anelse forskudt fra hinanden. */
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
color: var(--tekst-svag); background: var(--baggrund);
border: 1px solid var(--kant); border-radius: 0;
}
.trinbjaelke li.nu .trinbjaelke-nr,
.trinbjaelke li.klaret .trinbjaelke-nr {
color: #fff; background: var(--primaer); border-color: var(--primaer);
}
/* ---------- Trin 1: pakkekortene ---------- */
.pakkevalg {
display: grid; gap: 14px; margin-top: 22px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pakkekort {
display: flex; flex-direction: column; gap: 4px;
padding: 20px 22px; text-align: left;
font: inherit; cursor: pointer;
background: var(--flade);
border: 2px solid var(--kant); border-radius: 0;
transition: border-color .15s ease;
}
.pakkekort:hover { border-color: var(--primaer-lys); }
.pakkekort.valgt {
border-color: var(--primaer);
background: var(--primaer-blaa-svag);
}
.pakkekort-navn { font-size: 17px; font-weight: 600; color: var(--tekst); }
.pakkekort-pris {
font-size: 26px; font-weight: 700; letter-spacing: -.02em;
color: var(--primaer);
}
.pakkekort-note { font-size: 15px; color: var(--tekst-svag); }
.flow-slut { display: flex; align-items: flex-end; }
/* ---------- Trin 2: vejen udenom ---------- */
.flow-udenom { margin: 22px 0 6px; text-align: center; }
.knap-tekst {
font: inherit; font-size: 17px;
color: var(--primaer); background: none; border: 0; padding: 6px 2px;
text-decoration: underline; cursor: pointer;
}
.knap-tekst:hover { color: var(--primaer-moerk); }
/* ---------- Trin 3: fundene ---------- */
.fundtal {
display: grid; gap: 12px; margin-top: 20px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fundtal-kort {
display: flex; flex-direction: column; gap: 2px;
padding: 18px 20px;
background: var(--flade);
border: 1px solid var(--kant); border-radius: 0;
}
.fundtal-antal {
font-size: 26px; font-weight: 700; line-height: 1.1;
color: var(--primaer);
}
.fundtal-titel { font-size: 15px; font-weight: 600; }
.fundtal-under { font-size: 15px; color: var(--tekst-svag); }
/* ---------- Trin 4: tilkøb som ét valg ---------- */
.valgliste { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.valgkort {
display: flex; align-items: center; gap: 18px;
padding: 16px 20px; text-align: left;
font: inherit; cursor: pointer;
background: var(--flade);
border: 2px solid var(--kant); border-radius: 0;
transition: border-color .15s ease;
}
.valgkort:hover { border-color: var(--primaer-lys); }
.valgkort.valgt { border-color: var(--primaer); background: var(--primaer-blaa-svag); }
.valgkort-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.valgkort-tekst strong { font-size: 17px; }
.valgkort-under { font-size: 15px; color: var(--tekst-svag); }
.valgkort-pris {
flex: none;
font-size: 17px; font-weight: 700; color: var(--primaer);
font-variant-numeric: tabular-nums;
}
/* ---------- Handlingerne ----------
Fastgjort i bunden. Paa en telefon skal den store knap kunne naas med
tommelfingeren uden at rulle — trinnet er laengere end skaermen. */
.flow-bund {
position: sticky; bottom: 0; z-index: 40;
display: flex; gap: 12px; align-items: center;
margin-top: 38px; padding: 14px 0;
background: linear-gradient(to bottom, rgba(246,248,251,0), var(--baggrund) 34%);
}
.flow-bund .knap-bred { flex: 1; }
/* Deaktiveret knap skal vaere UGENNEMSIGTIG. Med opacity skinner
indholdet bagved igennem, og fordi bjaelken er fastgjort, ligger der
altid noget bagved — det ser ud som en fejl og ikke som en knap, der
venter paa et valg. */
.flow-bund .knap[disabled] {
cursor: not-allowed;
color: #fff;
/* Var #9fb3c8. Hvid tekst på den gav 2,15:1 — teksten på knappen
kunne ikke læses, og det er netop dén knap, der skal fortælle
hvorfor man ikke kan komme videre. --tekst-svag giver 5,8:1 og
er allerede i paletten, så der kommer ingen ny farve ind.
Grå og ikke en lysere udgave af den blå: en lys blå knap ligner
en knap, der virker. Grå ligner en, der venter. */
background: var(--tekst-svag); border-color: var(--tekst-svag);
}
@media (max-width: 620px) {
.flow-afsnit { padding-bottom: 120px; }
.flow-trin h1, .flow-trin h2 { font-size: 26px; }
.trinbjaelke { gap: 4px; margin-bottom: 26px; }
/* Navnene fylder for meget paa en telefon. Tallet og stregen er nok
til at vise, hvor man er. */
.trinbjaelke-navn { display: none; }
.valgkort { gap: 12px; padding: 14px 16px; }
.valgkort-pris { font-size: 15px; }
}
@media print {
.trinbjaelke, .flow-bund { display: none; }
}
/* =====================================================================
DOBBELTSTREGEN
Mærket er dobbeltstregen under en total — tynd streg over tyk. Det er
den samme streg, en revisor sætter under et facit, og derfor bruges
den ikke kun i logoet: den afslutter prislisten og står under totaler
i bestillingsflowet. Det er et system, ikke et logo.
Målene er 2 px og 4 px med 5 px imellem ved 44 px skriftstørrelse.
Omregnet til em skalerer den med teksten i stedet for at være låst:
2/44 = 0.0455em · 5/44 = 0.1136em · 4/44 = 0.0909em
GULVET på 1 px og 2 px er ikke pynt. Ved headerens 19 px ville de
rene em-værdier give 0,86 px og 1,73 px, og en streg under én pixel
renderer som en gråtone og ikke som en streg. Med max() er mærket
præcis som tegnet ved 44 px og opefter, og stadig to streger nede
ved 19.
===================================================================== */
.dobbeltstreg::after,
.dobbeltstreg-over::before,
.maerke::after {
content: "";
display: block;
height: 0.1136em;
border-top: max(1px, 0.0455em) solid currentColor;
border-bottom: max(2px, 0.0909em) solid currentColor;
}
/* Under en total: luft over stregen, ikke under. */
.dobbeltstreg::after { margin-top: 0.34em; }
/* Over en afsluttende linje. */
.dobbeltstreg-over::before { margin-bottom: 0.55em; }
/* Totalen i en tabel. Stregen kan ikke saettes paa en
, saa den
laegges paa cellerne — det giver den samme streg tvaers over
raekken, som en revisor saetter under et facit. */
.raekke-total td {
padding-bottom: 0.34em;
border-top: max(1px, 0.0455em) solid currentColor;
border-bottom: max(2px, 0.0909em) solid currentColor;
}
/* Ordbilledet er nu en billedfil, ikke sat tekst.
Derfor INGEN dobbeltstreg under mærket længere: stregen hører til
det ordbillede, der var sat i Literata, og logoet har sin egen
streg tegnet med. To streger under hinanden er ikke et brand, det
er en fejl. */
.maerke {
display: inline-flex;
line-height: 1;
/* flex: 0 0 auto er IKKE pynt.
Mærket er et flex-element i topbaren, og et flex-element må
skrumpe. Med et billede indeni, hvis bredde er udregnet af
højden og ikke sat, skrumpede det hele vejen til NUL — logoet
var hentet, stod i html'en, og var 0 px bredt. Det så ud som om
filen manglede. */
flex: 0 0 auto;
}
.maerke::after { content: none; }
/* =====================================================================
HERO'EN I TO SPALTER
Teksten til venstre, rapporten til højre og skubbet ned, så den
bryder feltets nederste kant. Asymmetrien er med vilje: en
forhåndsvisning, der ligger pænt inde i rammen, ser ud som et
billede. En, der stikker ud, ser ud som et dokument, der ligger oven
på noget.
===================================================================== */
.hero { overflow: visible; }
.hero-indhold {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
gap: 56px;
align-items: start;
text-align: left;
padding: 44px 0 64px;
}
.hero-tekst h1,
.hero-tekst .hero-afsender,
.hero-tekst .hero-under { margin-left: 0; margin-right: 0; }
.hero-priser { justify-content: flex-start; }
/* =====================================================================
FORHÅNDSVISNINGEN AF RAPPORTEN
Hvid flade med skarpe hjørner. Ikke et kort med skygge — et ark.
===================================================================== */
.hero-rapport {
margin: 0;
padding: 22px 24px 20px;
background: var(--flade);
color: var(--tekst);
/* Bryder feltets nederste kant. To ting skal til, og kun én af dem
er nok alene:
align-self: end — ellers ligger arket øverst i sin celle, og
når tekstspalten er den høje, ender det midt
inde i feltet med luft under sig.
margin-bottom — trækker det ned FORBI hero'ens bundpadding.
Overhænget er forskellen: 100 - 64 = 36 px
ude på den anden side af kanten. Ændres
hero-indholdets bundpadding, ændres
overhænget med den. */
align-self: end;
margin-bottom: -100px;
position: relative;
z-index: 2;
border-top: 2px solid var(--primaer-moerk);
}
.rapport-hoved {
font-family: var(--skrift-tal);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--tekst-svag);
padding-bottom: 14px;
}
.rapport-tal { margin: 0; border-top: 1px solid var(--kant); }
.rapport-linje {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 9px 0;
border-bottom: 1px solid var(--kant);
}
.rapport-linje dt { font-size: 15px; }
.rapport-linje dd {
margin: 0;
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
font-size: 17px;
font-weight: 700;
text-align: right;
}
/* Tallet for det, der ser forkert ud. Signalfarven hoerer netop her —
det er et fund, ikke et link og ikke en knap. */
.rapport-signal { color: var(--signal); }
.rapport-fund { padding-top: 14px; }
.rapport-fund p {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.5;
color: var(--tekst-svag);
}
.rapport-fund p:last-child { margin-bottom: 0; }
.rapport-fund b { color: var(--tekst); font-weight: 600; }
.rapport-mere {
margin: 16px 0 0;
font-family: var(--skrift-tal);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--tekst-svag);
}
@media (max-width: 980px) {
/* Under to spalter falder rapporten under teksten. Den bliver ved
med at bryde kanten — det er dér, den henter sin virkning. */
/* Overhænget er margin minus bundpadding og skal blive ved med at
være 36 px hele vejen ned. Rører man det ene tal, skal det andet
med — derfor står de sammen i hver blok. */
.hero-indhold {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
padding: 44px 0 56px;
}
.hero-rapport { margin-bottom: -92px; }
}
/* ---------- Mindre skærme ---------- */
@media (max-width: 860px) {
.hero h1 { font-size: 40px; }
.hero-under { font-size: 17px; }
/* Hero'ens polstring sættes IKKE her. Den hører sammen med
rapportens negative margin i 980-blokken ovenfor, og en regel her
ville vinde på kaskaden alene og æde overhænget. */
.hero-afsender { font-size: 19px; }
h2 { font-size: 26px; }
.afsnit { padding: 56px 0; }
.topmenu { gap: 16px; font-size: 15px; }
.topbar-indhold { height: 60px; gap: 16px; }
.maerke { font-size: 17px; }
.maerke span { display: none; }
.skema { padding: 24px 20px; }
/* Kun sidepolstringen. Med padding-shorthand her nulstilledes ogsaa
den lodrette, og da .indhold og .hero-indhold vejer lige tungt,
vandt denne blok paa raekkefoelgen alene og aad hero-rapportens
overhaeng mellem 620 og 860 px. */
.indhold, .indhold-smal { padding-inline: 18px; }
}
@media (max-width: 620px) {
/* Menuen bliver til sin egen række under mærket i stedet for at
blive skjult. Blev den skjult, kunne en besøgende fra telefonen
hverken nå Viden, Dokumenter eller Kundefordele — og de fleste,
der kommer fra en annonce, sidder på en telefon.
Rækken kan svippes til siden, hvis skærmen er for smal til alle
fem punkter. Rullebjælken skjules, så bjælken står roligt. */
/* =================================================================
TOPBJÆLKEN PÅ MOBIL — ET GITTER, IKKE EN OMBRYDNING
Før stod her flex-wrap og height:auto. Antallet af rækker afhang
derfor af, hvor bred teksten var — og teksten skifter bredde,
når Literata afløser Georgia.
Målt ved 390 px: bjælken er 177 px med reserveskriften og 123 px
med Literata. Forskellen er 7 px tekstbredde, der vipper
bestil-knappen ned på sin egen række. Hele siden hoppede 54 px
op, når skrifterne landede efter godt to sekunder — 0,197 af et
samlet CLS på 0,236. Det er ikke et måletal: det er siden, der
flytter sig under fingeren, mens man læser.
Et gitter har de rækker, der står i reglen. Ikke flere, ikke
færre, uanset hvor bred teksten er. Højden kan ikke skifte, og
så kan der ikke være et spring.
================================================================= */
.topbar-indhold {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"maerke bestil"
"menu menu";
align-items: center;
height: auto;
gap: 10px 16px;
padding-top: 11px; padding-bottom: 9px;
}
.maerke { grid-area: maerke; }
.topbar-bestil { grid-area: bestil; }
.topmenu { grid-area: menu; }
}
/* 420 px og ikke 400: mærket og knappen kræver tilsammen 357 px målt med
den BREDESTE af de to skrifter, plus 36 px sidepolstring. 393 er
grænsen, hvor de lige akkurat kan stå sammen, og 420 giver de 27 px
luft, der skal til, for at et tal målt på én maskine også holder på
en anden. Under den får knappen sin egen række — med vilje, hele
vejen ned, så rækkeantallet er givet af bredden og ikke af skriften.
Mærkets white-space: nowrap er grunden til, at der SKAL være en regel
her: uden den ville gitterets første spalte klemme mærket sammen, og
teksten ville stikke ud af skærmen i stedet for at ombryde. */
@media (max-width: 419px) {
.topbar-indhold {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"maerke"
"bestil"
"menu";
}
.topbar-bestil { justify-content: center; }
/* Rapporten på en telefon: strammere polstring, tallene en tak
mindre. Overhænget holdes på de samme 36 px — 84 minus 48. */
.hero-indhold { padding: 36px 0 48px; }
.hero-rapport { padding: 18px 18px 16px; margin-bottom: -84px; }
.rapport-linje dd { font-size: 16px; }
.maerke { margin-right: auto; }
.topbar-bestil { margin-left: 0; }
.topmenu {
width: 100%;
margin-left: 0;
/* 13px er målt, ikke valgt: med 15 stak de fem punkter 4 px ud
over en 375 px-skærm, og "Fordele" blev klippet. */
gap: 13px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.topmenu::-webkit-scrollbar { display: none; }
.topmenu a { font-size: 15px; white-space: nowrap; }
/* Undermenuen skjules efter grundreglen laengere nede — se der. */
/* Uden en kant, der falmer, ligner strimlen en menu, der slutter
dér, hvor skærmen gør — og så leder ingen efter resten. Masken
ligger på selve strimlen; der skal ingen ekstra div til, og
skabelonen er den samme på alle sider. */
.topmenu {
-webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
mask-image: linear-gradient(to right, #000 90%, transparent);
}
.hero-punkter { gap: 22px; }
}
/* ---------- Print ---------- */
/* ---------- Det ligefremme afsnit ----------
Ét stykke tekst uden pynt. Afsnittet siger noget, de fleste
konkurrenter ikke skriver — at der ikke sidder et menneske og laver
regnskabet. Det virker kun, hvis det ser ud som en almindelig
oplysning og ikke som en reklame: ingen ikoner, ingen ramme, ingen
fremhævning. Sætter man det i en kasse med et udråbstegn, læser folk
det som en undskyldning. */
.ligefrem {
margin: 0;
font-size: 17px; line-height: 1.65;
color: var(--tekst);
max-width: 58ch;
margin-left: auto; margin-right: auto;
}
@media (max-width: 560px) {
.ligefrem { font-size: 17px; }
}
/* ---------- Tekstsider (frister, for sen årsrapport) ----------
Sider, hvor svaret skal stå i de første tre sætninger. Den, der er
kommet ind fra en søgning, læser toppen og går igen — resten er for
dem, der bliver. */
.svar-foerst {
font-size: 19px; line-height: 1.6;
color: var(--tekst);
padding-left: 16px;
border-left: 3px solid var(--primaer);
}
/* Tabellen er sidens vigtigste element og skal kunne læses på en
telefon. To korte kolonner løber ikke over ved 375px, men rammen står
der alligevel: en tabel, der vokser med en kolonne, skal skubbe sig
selv til side og ikke hele siden. */
.tabel-ramme { overflow-x: auto; margin: 22px 0 26px; }
.frist-tabel {
width: 100%; border-collapse: collapse; font-size: 15px;
border-top: 2px solid var(--primaer-moerk);
border-bottom: 2px solid var(--primaer-moerk);
}
.frist-tabel th {
text-align: left; padding: 12px 16px 12px 0;
font-family: var(--skrift-tal);
border-bottom: 1px solid var(--primaer-moerk);
font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
color: var(--tekst-svag); white-space: nowrap;
}
.frist-tabel td {
padding: 11px 16px 11px 0;
border-bottom: 1px solid var(--kant);
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
}
.frist-tabel tr:last-child td { border-bottom: 0; }
/* Fristen er det, man kom efter. Datoen til venstre er bare den, man
slår op på. */
.frist-tabel td:last-child { font-weight: 600; white-space: nowrap; }
.frist-tabel tbody tr:hover td { color: var(--primaer-moerk); }
/* ---------- Sammenligningstabellen på /virksomhedsordningen ----------
Tre kolonner i en tabel, der er bygget til to. Reglen ovenfor sætter
nowrap på sidste kolonne, fordi den dér er en kort dato — her er den
en hel sætning, og nowrap skubbede tabellen ud over skærmkanten.
Prisen er til gengæld den, der ikke må brydes. */
.sammenlign td:last-child { font-weight: 400; white-space: normal; }
.sammenlign th:first-child, .sammenlign td:first-child,
.sammenlign th:nth-child(2), .sammenlign td:nth-child(2) { white-space: nowrap; }
.sammenlign td:nth-child(2) { font-weight: 600; }
/* Vores egen linje. Den skal kunne findes uden at råbe — en fremhævet
baggrund, ikke en farve der sælger. */
.sammenlign tr.os td { background: var(--primaer-blaa-svag); }
.sammenlign tr.os td:first-child { font-weight: 600; }
/* ---------- Markedsoversigten på /hvad-koster-et-aarsregnskab ----------
Fire afsnit med hver sin tabel. Overskriften over hver tabel er en
, fordi den hører til tabellen og skal læses op sammen med
den — ikke en løs
ved siden af. */
.marked-titel { margin: 40px 0 6px; font-size: 19px; }
.marked-hvem { margin: 0 0 4px; color: var(--tekst-svag); font-size: 15px; }
.tabel-overskrift {
caption-side: top;
padding: 0 0 8px;
text-align: left;
font-size: 13px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
/* 13 px er kun tilladt for en kort etiket i mono. */
font-family: var(--skrift-tal);
color: var(--primaer);
}
/* Tomme bemærkningsceller skal ikke se ud som noget, der mangler. */
.sammenlign td:empty::after { content: "—"; color: var(--kant); }
/* Datoen hører til tabellen og ikke til brødteksten. */
.tabelnote {
margin: -18px 0 26px;
font-size: 15px; color: var(--tekst-svag);
}
/* Infoboksen står ved siden af brødteksten, ikke i den: det er en
tilstødende regel, ikke næste skridt i forklaringen. */
/* Infoboksen er en tilstoedende regel, ikke naeste skridt i teksten.
Den markeres med en kraftig regel i venstre side i stedet for en
farveflade — samme greb som svar-foerst-afsnittet, saa de to
laeses som beslaegtede. */
.infoboks {
margin: 26px 0;
padding: 4px 0 4px 20px;
border-left: 2px solid var(--primaer-moerk);
}
.infoboks h3 { margin: 0 0 8px; font-size: 17px; }
.infoboks p { margin: 0; color: var(--tekst); }
.sidst-opdateret {
margin: 0;
padding-top: 20px;
border-top: 1px solid var(--kant-fin);
font-size: 15px; color: var(--tekst-svag);
}
@media (max-width: 560px) {
.svar-foerst { font-size: 17px; padding-left: 14px; }
.frist-tabel { font-size: 15px; }
.frist-tabel th, .frist-tabel td { padding: 10px 12px; }
/* Paa en telefon er der ikke plads til "Frist for indberetning" paa
een linje. Uden det her stikker kolonneoverskriften ud over
kanten, og tabellen — sidens vigtigste element — skal skubbes til
side for at kunne laeses. */
.frist-tabel th { white-space: normal; }
.infoboks { padding: 18px; }
}
/* ---------- Undermenu ----------
Regelsiderne er for smalle til hver sin plads i topbjælken, men de er
skrevet for at blive fundet — og en side, ingen linker til, rangerer
ikke. De hænger under Viden.
Ingen javascript: den foldes ud ved museover og ved tastaturfokus.
På en telefon er den skjult, fordi menuen dér i forvejen er en
rullestrimmel — vejen går gennem Viden-siden, som lister de samme
sider øverst. Derfor står de begge steder. */
.menupunkt { position: relative; display: inline-flex; align-items: center; }
.undermenu {
/* Hoejrestillet og ikke venstrestillet.
Med left: -14px voksede panelet mod hoejre fra menupunktet. "Viden"
staar yderst til hoejre i menuen, og et panel paa 230 px derfra
havde 17 px luft til skaermkanten ved 700 px bredde — det er ikke
en margin, det er et tilfaelde. Et menupunkt mere til venstre, et
laengere ord, en anden skriftstoerrelse, og siden ruller sidevaerts.
Med right: 0 vokser panelet indad fra menupunktets hoejre kant og
kan aldrig naa ud over kanten, uanset hvor menuen ender. */
position: absolute; top: 100%; right: 0;
display: flex; flex-direction: column;
min-width: 230px;
padding: 8px 0;
background: var(--flade);
border: 1px solid var(--kant);
border-radius: 0;
opacity: 0; visibility: hidden;
transform: translateY(-4px);
transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* Gruppe-overskrift inde i undermenuen. Splitmoms og Dokumenter er
vaerktoejer og ikke artikler — uden overskriften stod de i samme
liste og saa ud som endnu en guide. */
.undermenu-gruppe {
margin-top: 8px; padding: 8px 18px 4px;
border-top: 1px solid var(--kant-fin);
font-size: 13px; font-weight: 700;
letter-spacing: .07em; text-transform: uppercase;
color: var(--tekst-svag);
}
.undermenu-gruppe:first-child { margin-top: 0; border-top: 0; }
.menupunkt:hover .undermenu,
.menupunkt:focus-within .undermenu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.undermenu a {
display: flex; align-items: center; min-height: 44px;
padding: 9px 18px;
font-size: 15px;
color: var(--tekst);
white-space: nowrap;
}
.undermenu a:hover { background: var(--primaer-blaa-svag); color: var(--primaer); }
/* Paa en telefon er topmenuen en rullestrimmel, og en dropdown i en
strimmel med overflow bliver klippet. Derfor er den slaaet HELT
fra her — siderne staar i stedet oeverst paa Viden-oversigten.
Reglen skal staa EFTER .undermenu ovenfor. Stod den foer, ville
grundreglens display: flex vinde, fordi de har samme vaegt, og
dropdownen ville kun vaere usynlig og ikke fravaerende. */
@media (max-width: 620px) {
.undermenu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.undermenu { transition: none; }
}
/* ---------- Læs også ----------
Uden søskendelinks har hvert dokument og hver artikel præcis ét link
ind til sig — fra sin egen oversigt. Falder oversigten ud af en
søgning, står siden alene. */
.laes-ogsaa { padding: 8px 0 4px; }
.laes-ogsaa h2 { font-size: 19px; margin: 0 0 16px; }
.laes-ogsaa-liste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px 24px;
}
.laes-ogsaa-liste a {
padding: 12px 16px;
background: var(--flade);
border: 1px solid var(--kant);
border-radius: 0;
text-decoration: none;
font-size: 15px; font-weight: 600;
}
.laes-ogsaa-liste a:hover { border-color: var(--primaer); }
/* Regelsiderne på Viden-oversigten. De står øverst, fordi de er dem,
folk kommer efter fra en søgning på en frist. */
.regelsider { margin: 0 0 30px; }
.regelsider h3 { font-size: 17px; margin: 0 0 12px; color: var(--tekst-svag); }
/* Linket under et FAQ-svar og under et priskort. Begge er navigation,
ikke indhold — derfor mindre end teksten over dem. */
.faq-videre { margin: 12px 0 0; font-size: 15px; }
.pris-videre { margin: 0 0 18px; font-size: 15px; }
/* ---------- Bevægelse ----------
Tre ting bevæger sig på sitet, og ikke flere: sektionerne toner ind,
tallene i rapporten tæller op én gang, og nedtællingen til fristen
ændrer sig. Alt andet står stille.
Sitet sælger præcision. Uro modarbejder det. */
@media (prefers-reduced-motion: no-preference) {
/* Begge betingelser SKAL med i @supports.
Chrome og Safari har animation-timeline, men en browser med kun
halvdelen af standarden ville sætte opacity: 0 fra keyframen og
aldrig køre animationen — og så er indholdet usynligt. Testen på
animation-range fanger netop den tilstand.
Firefox har ingen af delene og springer hele blokken over. Det er
med vilje: effekten er dekoration, og en polyfill ville koste
javascript på hovedtråden for noget, ingen savner. */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
@keyframes ind {
from { opacity: 0; transform: translateY(14px); }
}
.afsnit > .indhold > *,
.afsnit > .indhold-smal > * {
/* animation-timeline skal stå EFTER genvejen. Genvejen nulstiller
alle animation-egenskaber, den ikke selv sætter — også
tidslinjen — så den omvendte rækkefølge slår effekten fra. */
animation: ind auto linear backwards;
animation-timeline: view();
animation-range: entry 10% cover 32%;
}
/* Kun opacity og transform. Aldrig width, height, top eller margin:
de kan ikke køre på kompositor-tråden, og så hakker scrollen på
netop de maskiner, hvor det betyder mest. */
}
}
/* Nedtællingen til fristen.
Tallet i mono og i --signal. Det er den ene farve, der er reserveret
til frister, fejl og advarsler — og en frist er præcis det. */
.nedtaelling {
margin: 18px auto 0;
font-size: 15px;
color: rgba(255,255,255,.72);
}
.nedtaelling-tal {
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
font-weight: 600;
color: #E8A6A2;
}
/* Uden for hero'en, hvor baggrunden er lys, bruges signalfarven selv. */
.afsnit .nedtaelling { color: var(--tekst-svag); }
.afsnit .nedtaelling-tal { color: var(--signal); }
/* Tallene i rapporten. tabular-nums er ikke pynt her: uden den skifter
cifrenes bredde undervejs i optællingen, og hele linjen sitrer. */
.rapport-tal dd {
font-family: var(--skrift-tal);
font-variant-numeric: tabular-nums;
}
/* ---------- Personsektionen ----------
Den samme sektion bruges nederst paa forsiden og paa /om-os. Gitteret
staar her og ikke i markup'en, saa de to steder ikke kan komme til at
se forskellige ud.
Grid med gap og ikke margins: margins mellem gitterceller giver en
anden afstand i kanten end i midten, og det ses paa fire kolonner. */
.person-raekke {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px 32px;
margin-top: 34px;
}
@media (max-width: 900px) {
.person-raekke { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.person-raekke { grid-template-columns: 1fr; gap: 32px; }
}
.person-navn { margin: 0 0 2px; font-size: 17px; font-weight: 600; }
.person-titel {
margin: 0 0 8px;
font-family: var(--skrift-tal);
font-size: 13px; letter-spacing: .04em;
color: var(--tekst-svag);
}
.person-linje { margin: 0; font-size: 15px; color: var(--tekst-svag); }
/* Portraettet fylder hele sin kolonne. Forholdet er 4:5, og det gaelder
ogsaa den tomme plads — ellers skal layoutet laves om den dag fotoet
kommer, og det er hele grunden til at bygge pladsen nu. */
.person .portraet,
.person .portraet-tom {
width: 100%;
max-width: none;
aspect-ratio: 4 / 5;
}
/* ---------- Portrætter ----------
Billedet står direkte på fladen. Ingen ramme, ingen radius, ingen
skygge — kun en 1 px regel under, som resten af sitet.
Sort-hvid med en let varm tone: to fotos taget i forskelligt lys
ligner ellers to forskellige sider. Filteret gør dem til det samme
billede, uanset hvor de er taget. */
.ejer-raekke {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 44px;
margin: 34px 0 0;
}
.portraet {
display: block;
width: 100%;
max-width: 260px;
aspect-ratio: 4 / 5;
object-fit: cover;
filter: grayscale(1) sepia(.08);
border-bottom: 1px solid var(--kant);
margin-bottom: 18px;
}
/* Pladsen, indtil fotoet er der. En tom flade man kan SE er tom — ikke
et personikon og ikke en silhuet. En tegning af et menneske, der ikke
findes, er en påstand; en tom plads er en oplysning. */
.portraet-tom {
display: flex; align-items: center; justify-content: center;
width: 100%; max-width: 260px;
aspect-ratio: 4 / 5;
background: var(--kant-fin);
border: 1px solid var(--kant);
margin-bottom: 18px;
}
.portraet-tom span {
font-family: var(--skrift-tal);
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
color: var(--tekst-svag);
}
.ejer-navn { margin: 0 0 2px; font-size: 19px; font-weight: 600; }
.ejer-titel {
margin: 0 0 12px;
font-family: var(--skrift-tal);
font-size: 13px; letter-spacing: .04em;
color: var(--tekst-svag);
}
.ejer-baggrund { margin: 0; color: var(--tekst-svag); }
/* ---------- Partnerkredsen ----------
Logoerne står direkte på fladen, adskilt af regler. Ingen kort og
ingen rammer: et logo i en ramme ligner en annonce, og otte annoncer
under hinanden ligner en linkfarm. */
.partner-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--kant);
border-left: 1px solid var(--kant);
margin-bottom: 22px;
}
.partner-plads {
display: flex; align-items: center; justify-content: center;
min-height: 64px;
padding: 12px 16px;
border-right: 1px solid var(--kant);
border-bottom: 1px solid var(--kant);
background: var(--kant-fin);
}
.partner-plads img {
max-width: 160px; max-height: 64px;
filter: grayscale(1); opacity: .75;
transition: filter .15s ease, opacity .15s ease;
}
.partner-plads img:hover { filter: none; opacity: 1; }
/* Tomheden som invitation frem for som mangel. */
.partner-invitation span {
font-family: var(--skrift-tal);
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
color: var(--tekst-svag);
}
@media (max-width: 620px) {
.partner-grid { grid-template-columns: repeat(2, 1fr); }
.ejer-raekke { gap: 32px; }
.portraet, .portraet-tom { max-width: 100%; }
}
/* ---------- Spørgsmål og svar ----------
Akkordeonen er browserens egen /. Der er ingen
javascript bag den: den folder ud, virker med tastatur og skærmlæser,
og browserens søgefunktion (Ctrl+F) finder tekst inde i et lukket
punkt. Alt det skulle bygges forfra i javascript.
Punkterne ligger i ét kort med streger imellem frem for otte kort med
luft. Otte skygger under hinanden bliver til et hegn, og afsnittet
larmer mere end de tre prisbokse lige ovenfor, som er det, øjet skal
lande på. */
/* Akkordeonen ER et regelsystem: 2 px over og under gruppen, 1 px
mellem raekkerne. Den hvide flade bag den gjorde den til eet objekt;
nu er den en liste paa siden. */
.faq {
border-top: 2px solid var(--primaer-moerk);
border-bottom: 2px solid var(--primaer-moerk);
}
.faq-punkt + .faq-punkt { border-top: 1px solid var(--kant); }
.faq-punkt summary {
display: flex; align-items: flex-start; gap: 16px;
padding: 20px 24px;
cursor: pointer;
font-size: 17px; font-weight: 600; line-height: 1.45;
list-style: none;
}
/* Safari og aeldre Chrome tegner deres egen trekant oveni. */
.faq-punkt summary::-webkit-details-marker { display: none; }
.faq-punkt summary:hover { color: var(--primaer); }
.faq-punkt summary:focus-visible {
outline: 2px solid var(--primaer); outline-offset: -2px;
}
/* Vinklen tegnes af to kanter frem for et billede — så følger den
tekstfarven og bliver skarp på alle skærme. */
.faq-punkt summary::after {
content: "";
flex: 0 0 auto; margin-left: auto; margin-top: 6px;
width: 8px; height: 8px;
border-right: 2px solid var(--primaer);
border-bottom: 2px solid var(--primaer);
transform: rotate(45deg);
transition: transform .18s ease;
}
.faq-punkt[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.faq-punkt[open] summary { color: var(--primaer); padding-bottom: 6px; }
.faq-svar { padding: 0 24px 22px; }
/* Svaret rykkes ind i flugt med spørgsmålet, ikke ud til kanten. */
.faq-svar p {
margin: 0;
max-width: 68ch;
color: var(--tekst-svag);
font-size: 17px;
}
@media (max-width: 560px) {
.faq-punkt summary { padding: 18px; font-size: 17px; gap: 12px; }
.faq-svar { padding: 0 18px 20px; }
}
/* Bevægelsen er pynt. Er den slået fra i systemet, skal vinklen bare
skifte med det samme. */
@media (prefers-reduced-motion: reduce) {
.faq-punkt summary::after { transition: none; }
}
@media print {
.topbar, .bundlinje, .hero-knapper, .skema { display: none; }
body { background: #fff; }
.kort, .pris { border-color: #999; break-inside: avoid; }
.frist-tabel { border-color: #999; }
.frist-tabel th { background: #eee; }
.tabel-ramme { overflow: visible; }
.infoboks { border-color: #999; background: #f4f4f4; break-inside: avoid; }
/* Et lukket udskrives tomt — otte overskrifter og ingen
svar er værre end ingenting. Der skal to regler til: browsere
skjuler indholdet på hver sin måde, og den nyere af de to
(::details-content) lader sig ikke rette med display alene. */
.faq { border-color: #999; }
.faq-punkt { break-inside: avoid; }
.faq-punkt:not([open]) > :not(summary) { display: block; }
.faq-punkt::details-content { content-visibility: visible; }
.faq-punkt summary { padding-bottom: 6px; }
.faq-punkt summary::after { display: none; }
}
/* =====================================================================
MINDRE BEVÆGELSE
Nogle mennesker får kvalme eller svimmelhed af bevægelse på en skærm.
De slår det fra i styresystemet, og så skal siden respektere det —
ikke delvist.
Der stod to blokke i forvejen, men de dækkede kun undermenuen og
pilen i FAQ'en. De øvrige ni overgange og den bløde rulning stod
tilbage. Derfor står den her til sidst og rammer ALT: en ny overgang,
nogen tilføjer om et halvt år, er dækket uden at nogen skal huske
det.
0,01 ms og ikke 0: en overgang på nul udløser aldrig sin
transitionend-hændelse, og kode, der venter på den, ville hænge. Med
0,01 ms sker den straks, og hændelsen kommer.
===================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}