), og
saa forsvandt baade kvadrat og cirkel. Wrapperen kan de ikke
roere. Alt indeni laegges absolut, saa billedets egne
proportioner aldrig kan diktere hoejden. */
.cs-mediatext__media {
position: relative;
width: 100%;
max-width: var(--cs-mt-size);
aspect-ratio: 1;
overflow: hidden;
border-radius: 16px;
}
.cs-mediatext--circle .cs-mediatext__media { border-radius: 50%; }
.cs-mediatext__media img,
.cs-mediatext__media picture,
.cs-mediatext__media picture img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: top;
border-radius: 0 !important;
}
/* Tekst */
/* Laesebredde, maalt i tegn. ch foelger skriftstoerrelsen, saa
linjelaengden holder sig behagelig uanset hvor bredt elementet
staar. Under ca. 75 tegn er den gaengse graense. */
.cs-mediatext__body { max-width: var(--cs-mt-text, 62ch); }
.cs-mediatext--text-narrow { --cs-mt-text: 48ch; }
.cs-mediatext--text-normal { --cs-mt-text: 62ch; }
.cs-mediatext--text-wide { --cs-mt-text: 76ch; }
.cs-mediatext--text-full { --cs-mt-text: none; }
.cs-mediatext__body > p {
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 1.7;
color: #231F20;
margin: 0 0 16px;
}
.cs-mediatext__body > p:last-child { margin-bottom: 0; }
.cs-mediatext--quote .cs-mediatext__body > p { font-style: italic; }
.cs-mediatext__attrib {
font-weight: 700;
font-style: normal !important;
margin-top: 20px !important;
}
/* Ombrydning efter elementets egen bredde. 520px er der hvor et
200px billede plus tekst holder op med at fungere side om side. */
@container (max-width: 520px) {
.cs-mediatext__inner,
.cs-mediatext--right .cs-mediatext__inner,
.cs-mediatext--text-full .cs-mediatext__inner,
.cs-mediatext--text-full.cs-mediatext--right .cs-mediatext__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.cs-mediatext--right .cs-mediatext__media { order: 0; }
}
/* Sikkerhedsnet for browsere uden container queries. */
@media (max-width: 600px) {
.cs-mediatext__inner,
.cs-mediatext--right .cs-mediatext__inner,
.cs-mediatext--text-full .cs-mediatext__inner,
.cs-mediatext--text-full.cs-mediatext--right .cs-mediatext__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.cs-mediatext--right .cs-mediatext__media { order: 0; }
}
/* ═══════════════════════════════════════════════════════════════
ARTIKELSIDE — CTA-baand i fuld bredde + linkfarve paa moerk bund
═══════════════════════════════════════════════════════════════ */
/* main.css (System A) giver enhver .row paa en single-side en
POSITIV sidemargin:
.single #primary .row {
margin-left: calc(2.5% - 15px) !important;
margin-right: calc(2.5% - 15px) !important;
}
Ved 1870px viewport er det 31,75px i hver side — maalt med
getBoundingClientRect: .content-area 1870px, .row 1807px.
Det var praecis de 63px CTA-baandet manglede.
Resetten paa linje 4177 (#content .row) rammer det samme, men
har specificitet 1-2-0 mod System A's 1-2-0 og taber, fordi
begge har !important. Her hoejnes specificiteten til 1-3-0.
Scoped til .cs-artikel-side, saa andre single-templates
beholder System A's margin uaendret.
Artiklens oevrige blokke flytter sig ikke: de er begraenset til
var(--cs-site-width) med margin-inline: auto og staar centreret
i forhold til viewporten, uanset foraelderens bredde. */
body.single .cs-artikel-side #primary .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Samme regelsaet, linjen ovenfor i main.css:
.single #primary {
padding-left: calc(var(--bs-gutter-x) * .5) !important;
padding-right: calc(var(--bs-gutter-x) * .5) !important;
}
--bs-gutter-x er 1.5rem, halvdelen 12px. Maalt: .content-area
1870px med pad 12px 12px, .row 1846px. Resetten paa linje 4179
rammer #primary med 1-0-0 og taber til System A's 1-1-0. */
body.single .cs-artikel-side #primary {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Linkfarven i kontaktlinjen er hardcodet til sitets blaa. Paa
blaa og moerk bund forsvinder telefonnummeret helt. Her arver
det tekstfarven i stedet, med understregning saa det stadig
kan ses at det er et link. Alle tilstande daekkes — uden
:visited og :active skifter det farve efter et klik. */
.cs-ctaf-bg-blue .cs-ctaf-contact a,
.cs-ctaf-bg-dark .cs-ctaf-contact a,
.cs-ctaf-bg-blue .cs-ctaf-contact a:link,
.cs-ctaf-bg-dark .cs-ctaf-contact a:link,
.cs-ctaf-bg-blue .cs-ctaf-contact a:visited,
.cs-ctaf-bg-dark .cs-ctaf-contact a:visited,
.cs-ctaf-bg-blue .cs-ctaf-contact a:hover,
.cs-ctaf-bg-dark .cs-ctaf-contact a:hover,
.cs-ctaf-bg-blue .cs-ctaf-contact a:focus,
.cs-ctaf-bg-dark .cs-ctaf-contact a:focus,
.cs-ctaf-bg-blue .cs-ctaf-contact a:active,
.cs-ctaf-bg-dark .cs-ctaf-contact a:active {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Portraettet oeverst i artiklens CTA.
.cs-cta-form-left er allerede flex column med gap 16px, saa
order: -1 flytter avataren op uden at roere afstandene.
Scoped til .cs-artikel__cta: pillar-siderne bruger samme element
med navn og titel under billedet, og der giver den nuvaerende
raekkefoelge stadig mening. Kun artiklen aendres.
margin-top nulstilles fordi elementet saetter den som inline
style — der findes ingen anden vej udenom end !important. */
.cs-artikel__cta .cs-cta-avatar-row {
order: -1;
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
PUNKTOPSTILLINGER I BROEDTEKST — generelt
───────────────────────────────────────────────────────────────
Rammer KUN lister redaktoeren selv har skrevet i et tekstfelt.
:not([class]) holder elementernes egne lister udenfor — de
baerer alle en klasse (cs-proof-list, cs-tl-items,
cs-two-col-items, cs-loc-bullets), saa de er ikke i fare.
Bevidst valg: ingen ottende liste-element. En liste i broedtekst
skrives i strommen og skal redigeres i strommen. Naar den
native ol/ul altid ser rigtig ud, er der intet at vaelge og
intet at vaelge forkert.
═══════════════════════════════════════════════════════════════ */
:is(.wpb_text_column, .cs-artikel__content, .entry-content)
:is(ul, ol):not([class]) {
margin-block: 1.2em 1.5em;
padding-left: 1.7em; /* plads nok til tocifrede numre */
}
:is(.wpb_text_column, .cs-artikel__content, .entry-content)
:is(ul, ol):not([class]) > li {
margin-bottom: 0.7em; /* mere luft MELLEM punkter end inde i dem */
}
:is(.wpb_text_column, .cs-artikel__content, .entry-content)
:is(ul, ol):not([class]) > li:last-child {
margin-bottom: 0;
}
/* Tal og punkttegn i Conscensia-blaa med fed. ::marker styrer
kun markoeren, ikke teksten — den fede indledning i punktet
beholder sin egen farve. */
:is(.wpb_text_column, .cs-artikel__content, .entry-content)
:is(ul, ol):not([class]) > li::marker {
color: var(--cs-blue);
font-weight: 700;
}
/* wpautop pakker af og til punkter i . Uden det her faar hvert
punkt et helt afsnits bundmargin. */
:is(.wpb_text_column, .cs-artikel__content, .entry-content)
:is(ul, ol):not([class]) > li > p {
margin: 0 0 0.4em;
}
:is(.wpb_text_column, .cs-artikel__content, .entry-content)
:is(ul, ol):not([class]) > li > p:last-child {
margin-bottom: 0;
}
/* Indlejrede lister: taettere, saa de laeses som en underinddeling */
:is(.wpb_text_column, .cs-artikel__content, .entry-content)
:is(ul, ol):not([class]) :is(ul, ol):not([class]) {
margin-block: 0.6em 0;
}
/* ═══════════════════════════════════════════════════════════════
CASE (single-case) — header, hero og faktakort
───────────────────────────────────────────────────────────────
Egne cs-case__-klasser. System C i main.css haenger paa
.single-case .entry-header / .entry-image / .entry-content og
roeres ikke — den bliver overfloedig naar den gamle markup er ude.
═══════════════════════════════════════════════════════════════ */
/* Sidebredde paa cases. Samme princip som .cs-artikel-side paa
linje 6453: tokenet redefineres paa sidewrapperen, og alle
cs-case__-blokke arver det, fordi de bruger var(--cs-site-width)
frem for faste tal. Vil du have en anden bredde paa cases end
paa artikler, er det kun dette ene tal der skal aendres. */
/* Casesiden arver ikke artiklens tokens — de er defineret paa
.cs-artikel-side, ikke i :root. Uden dem bliver erklaeringer som
margin-block: var(--cs-block) UGYLDIGE og smidt vaek, og saa
forsvandt baade luften omkring "Flere cases" og den
margin-inline: auto der laa i samme shorthand paa overskriften.
Derfor faldt overskriften helt til venstre.
Samme vaerdier som artiklen, saa de to sidetyper deler rytme. */
.cs-case-side {
--cs-blue: #3D6EE9;
--cs-radius: var(--borderRadius, 12px);
--cs-gap: clamp(24px, 4vw, 48px);
--cs-block: clamp(48px, 8vw, 96px);
--cs-site-max: 1100px;
--cs-site-width: min(var(--cs-site-max), 90vw);
}
/* Luft omkring "Flere cases" — 80px over og under sektionen,
saa den ikke klaeber til den farvede sektion ovenfor. */
.cs-mere-cases {
padding-block: 80px;
margin-block: 0 !important;
}
.cs-mere-cases .cs-mere-nyheder__heading { padding-top: 0; }
.cs-mere-cases .cs-mere-nyheder__grid { margin-bottom: 0; }
/* System A i main.css skubber alt indhold ind fra kanten paa
ENHVER single-side, ogsaa cases:
.single #primary { padding-inline: calc(var(--bs-gutter-x) * .5) !important; }
.single #primary .row { margin-inline: calc(2.5% - 15px) !important; }
Maalt paa artikelsiden: 12px + 31,75px i hver side. Uden det her
kan et fuldbreddebaand paa en case ikke naa kanten. Specificiteten
er hoejnet til 1-3-0 mod System A's 1-2-0, og scopet til
.cs-case-side, saa andre single-templates er uberoerte. */
body.single .cs-case-side #primary {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.single .cs-case-side #primary .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.cs-case__header,
.cs-case__hero,
.cs-case__content {
max-width: var(--cs-site-width);
margin-inline: auto;
padding-inline: var(--cs-site-pad);
box-sizing: border-box;
}
/* WPBakery-indhold har allerede sin egen ramme fra
LAYOUT CONSTRAINT. Uden dette faar det 48px to gange, og
broedteksten rykker ind i forhold til hero og header.
Praecis samme regel findes paa .cs-artikel__content (linje
~6518) — den var skrevet foer, og casen skulle have haft den
fra starten. */
.cs-case__content:has(> .wpb-content-wrapper) {
max-width: none;
padding-inline: 0;
}
.cs-case__header { padding-top: 40px; }
.cs-case__kicker {
font-size: 20px;
color: var(--cs-black);
margin: 0 0 12px;
}
.cs-case__title {
font-size: clamp(32px, 4vw, 52px);
font-weight: 700;
line-height: 1.12;
margin: 0;
max-width: 20ch; /* holder overskriften i 2-3 linjer */
}
/* Hero: billedet bestemmer ikke hoejden. Fast format, beskaaret. */
.cs-case__hero {
position: relative;
margin-block: clamp(40px, 5vw, 72px);
}
.cs-case__hero-slider {
border-radius: 20px;
overflow: hidden;
}
.cs-case__hero-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 20px;
}
.cs-case__hero-media img,
.cs-case__hero-media picture,
.cs-case__hero-media picture img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
border-radius: 0 !important;
}
/* Faktakortet ligger oven paa billedet og rager lidt ud i hoejre
side. Det er derfor .cs-case__hero IKKE har overflow: hidden —
kun mediet har det, saa billedet stadig beskaeres til radius. */
/* Kortet i oeverste hoejre hjoerne. Portraetter har som regel
ansigterne i midten, og et kort lodret centreret laegger sig
hen over dem. Oeverst er der oftest luft — himmel, vaeg, loft.
Vil du have det tilbage til midten: top: 50% og
transform: translateY(-50%). */
.cs-case__facts {
position: absolute;
top: clamp(24px, 4%, 48px);
right: calc(var(--cs-site-pad) * -0.5);
width: min(340px, 32%);
background: var(--cs-white);
border-radius: 20px;
padding: 28px 30px;
box-sizing: border-box;
}
/* Logo: FAST HOEJDE, aldrig fast bredde. Kundelogoer varierer
voldsomt i format — Kamstrup er bredt og lavt, Saxo naesten
kvadratisk. Laases bredden, fylder de hoeje logoer alt. Laases
hoejden, faar de samme optiske vaegt. */
.cs-case__logo {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(35, 31, 32, 0.12);
}
.cs-case__logo-img {
display: block;
/* Fast hoejde, fri bredde — som en almindelig logobjaelke.
Hoejden er den faelles maalestok; bredden foelger logoets eget
format. Redaktoeren styrer stoerrelsen ved at beskaere filen
taet om motivet: Photoshop → Image → Trim → Transparent Pixels.
Et tidligere forsoeg gav logoet et felt paa 340×64 med
object-fit: contain. Det gjorde kun luften i filen stoerre —
motivet blev ikke mere fremtraedende, og boksen blev hoej og
tom. Fast hoejde er den rigtige model. */
height: 40px;
width: auto;
max-width: 100%;
}
/* Etiket + vaerdi. Etiketten er lille og daempet, vaerdien er
broedtekst — saa kan oejet springe til den linje det leder
efter i stedet for at laese hele boksen. */
/* Afstanden MELLEM par skal vaere stoerre end afstanden INDE i et
par. Foerste forsoeg havde gap: 16px paa hele listen, saa der var
lige langt fra etiket til vaerdi som fra vaerdi til naeste etiket
— og saa kunne oejet ikke se hvad der hoerte sammen. */
.cs-case__facts-list { margin: 0; }
.cs-case__facts-list dt {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(35, 31, 32, 0.5);
line-height: 1.3;
margin: 0 0 1px;
}
.cs-case__facts-list dd {
font-size: 17px;
line-height: 1.4;
color: var(--cs-black);
margin: 0 0 18px;
}
.cs-case__facts-list dd:last-child { margin-bottom: 0; }
.cs-case__facts-list a {
color: var(--cs-blue);
text-underline-offset: 3px;
}
/* Laesespalte — samme princip som artiklen loeser det med.
Containeren begraenses IKKE. Den er lige saa bred som header og
hero, saa alle blokke deler ramme. Laesebredden ligger paa selve
tekstelementerne.
Foerste forsoeg ramte kun direkte boern (> p). En tekst inde i en
vc_row er ikke et direkte barn, saa den blev aldrig begraenset og
fulgte i stedet raekkens egen ramme. Det gav 36px forskel mellem
en farvet sektion og broedteksten omkring — praecis den fejl
artiklen allerede havde loest ved ogsaa at ramme .wpb_text_column. */
.cs-case-side { --cs-tekst-bredde: 755px; }
.cs-case__content .wpb_text_column p,
.cs-case__content .wpb_text_column h2,
.cs-case__content .wpb_text_column h3,
.cs-case__content .wpb_text_column h4,
.cs-case__content .wpb_text_column h5,
.cs-case__content .wpb_text_column ul,
.cs-case__content .wpb_text_column ol,
.cs-case__content .wpb_text_column blockquote,
/* og i cases skrevet i ren HTML */
.cs-case__content > p,
.cs-case__content > h2,
.cs-case__content > h3,
.cs-case__content > h4,
.cs-case__content > ul,
.cs-case__content > ol,
.cs-case__content > blockquote { max-width: var(--cs-tekst-bredde); }
/* Flerkolonne-raekker undtages — deres kolonner har allerede
deres egen bredde fra offset/col-vaerdierne i indholdet. */
.cs-case__content .vc_row_inner .wpb_text_column p,
.cs-case__content .vc_row_inner .wpb_text_column h2,
.cs-case__content .vc_row_inner .wpb_text_column h3,
.cs-case__content .vc_row_inner .wpb_text_column ul { max-width: none; }
/* Smal skaerm: kortet kan ikke ligge oven paa uden at daekke
motivet. Det laegger sig under billedet i stedet. */
@media (max-width: 900px) {
.cs-case__facts {
position: static;
top: auto;
transform: none;
width: 100%;
margin-top: 20px; /* ingen overlap: teksten landede oven i billedet */
margin-inline: auto;
right: auto;
}
.cs-case__hero-media { aspect-ratio: 4 / 3; }
/* Lange sammensatte ord braekker uden bindestreg paa smal skaerm.
hyphens: auto braekker med bindestreg efter danske regler —
er allerede sat af WordPress. */
.cs-case__title {
font-size: clamp(26px, 7vw, 36px);
hyphens: auto;
overflow-wrap: break-word;
}
}