), som ellers begraenser bredden til
min(1180px,92%) centreret -- det fanger ogsaa .hero-img (absolut
positioneret, inset:0 relativt til .hero-grid) i en smal, hvidkantet
boks. Higher-specificity override (.hero-grid.wrap, 2 klasser) goer
selve containeren fuld bredde igen (billedet bliver dermed full-bleed),
mens praecis samme vandrette indryk som .wrap ellers gav genskabes som
padding, saa hero-teksten (.hero-copy, flex-child) fortsat flugter med
resten af sidens .wrap-indhold. */
.hero-grid.wrap{
width:auto;
max-width:none;
margin:0;
padding-left:calc((100% - min(1180px,92%)) / 2);
padding-right:calc((100% - min(1180px,92%)) / 2);
}
.hero-img{
position:absolute;
inset:0;
z-index:0;
border-radius:0;
box-shadow:none;
overflow:hidden;
}
.hero-img img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:35% 68%;
min-height:0;
max-width:none;
}
.hero-img::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(20,40,28,.90) 0%,rgba(20,40,28,.72) 38%,rgba(20,40,28,.32) 72%,rgba(20,40,28,.08) 100%);
}
/* --- Haekklipning (184) har nu faaet sit eget nye, allerede bredt
komponerede billede (2200x933, samme princip som de øvrige
opdaterede ydelsessider) -- den tidligere saerlige
beskaeringsposition, der var tunet til det gamle kvadratiske
billede (1024x1024), er derfor fjernet. Siden bruger nu samme
standard-position som de øvrige opdaterede sider. --- */
.hero-copy{
max-width:620px;
color:#fff;
position:relative;
z-index:1;
align-items:flex-start;
}
.hero-copy .eyebrow{
background:rgba(255,255,255,.16);
color:#EDF2EE;
}
.hero-copy h1{
color:#fff;
font-size:clamp(1.7rem,3vw,2.5rem);
line-height:1.18;
letter-spacing:-.5px;
}
.hero-copy p{
color:rgba(255,255,255,.92);
}
.hero-copy p a{
color:#fff !important;
text-decoration:underline !important;
}
.mini-usp{
background:rgba(255,255,255,.16);
color:#fff;
}
@media(max-width:820px){
.hero-grid{
min-height:480px;
padding:3rem 0;
}
}
@media(max-width:600px){
.hero-grid{
min-height:400px;
padding:2.4rem 0;
}
.hero-copy{
max-width:100%;
}
}
/* =========================================================
PRIORITET 4B – Header/navigation modernisering (desktop).
Al header-CSS ligger inline i header.php EFTER style.css i
dokumentet, saa selektorer her bruger "header.site-topbar"
(lidt hoejere specificitet) for sikkert at vinde uden at
header.php roeres. Kun >=900px (desktop/tablet) -- mobilmenuen
(.site-menu-*) er slet ikke beroert.
========================================================= */
/* --- 1. Baggrund: fra hardkodet mint (#EDF2EE) til hvid +
diskret dybde via skygge i stedet for farve --- */
header.site-topbar{
background:#fff;
border-bottom:1px solid var(--line);
box-shadow:0 2px 16px rgba(31,58,46,.06);
}
/* --- 2. Nav-links: smooth hover + diskret accent-indikator
(samme accentfarve som footerens top-linje, for
sammenhaeng mellem header og footer) --- */
header.site-topbar .site-topnav-link{
position:relative;
transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1);
}
header.site-topbar .site-topnav-link::after{
content:"";
position:absolute;
left:.8rem;
right:.8rem;
bottom:.2rem;
height:2px;
border-radius:2px;
background:var(--accent);
transform:scaleX(0);
transform-origin:center;
transition:transform .25s cubic-bezier(.4,0,.2,1);
}
header.site-topbar .site-topnav-link:hover::after{
transform:scaleX(1);
}
/* --- 3. Dropdown-paneler: samme radius/skygge-sprog som
resten af kortsystemet (Prioritet 1/1B) --- */
header.site-topbar .site-topnav-drop-panel{
border-radius:var(--radius);
box-shadow:var(--shadow-md);
}
header.site-topbar .site-topnav-drop-panel a{
transition:background-color .2s cubic-bezier(.4,0,.2,1);
border-radius:8px;
}
/* --- 4. CTA: tydeligere adskilt fra menulinksene med en
diskret lodret skillelinje, uden at aendre selve
.btn-primary-systemet --- */
header.site-topbar .site-topbar-cta{
position:relative;
margin-left:.5rem;
}
header.site-topbar .site-topbar-cta::before{
content:"";
position:absolute;
left:-1rem;
top:50%;
transform:translateY(-50%);
width:1px;
height:26px;
background:var(--line);
}
@media(prefers-reduced-motion:reduce){
header.site-topbar .site-topnav-link,
header.site-topbar .site-topnav-link::after,
header.site-topbar .site-topnav-drop-panel a{
transition:none !important;
}
}
/* =========================================================
PRIORITET 5 – Visuel signatur, ikonsystem og designlag.
Alt er CSS-only (mask-image-baserede SVG-ikoner, ingen nye
billedfiler). Ingen post_content aendret. Bygger videre paa
det eksisterende system fra Prioritet 1-4B.
========================================================= */
/* --- Genbrugelig, diskret "blad"-signatur (roteret ellipse,
organisk form) som CSS-variabel, saa den kun defineres ét
sted og bruges flere steder --- */
:root{
--leaf-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='9' ry='4.3' transform='rotate(45 12 12)'/%3E%3C/svg%3E");
--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E");
--icon-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.8 16.6a1 1 0 0 0 1.2-.3l.4-.5A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.5.4a1 1 0 0 0-.3 1.2 14 14 0 0 0 6.4 6.4z'/%3E%3C/svg%3E");
--icon-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}
/* =========================================================
OPGAVE 1 + 5 – Visuel signatur ved eyebrow/section-title
========================================================= */
.eyebrow{
display:inline-flex;
align-items:center;
gap:.4rem;
}
.eyebrow::before{
content:"";
display:inline-block;
width:11px;
height:11px;
flex:none;
background-color:currentColor;
-webkit-mask-image:var(--leaf-shape);
mask-image:var(--leaf-shape);
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
/* Stort, meget diskret baggrunds-vandmaerke i "Hvorfor os"-
sektionen (kun ét sted, stor og lav opacity -- signaturens
"store" udtryk) */
.why{
position:relative;
overflow:hidden;
}
.why::after{
content:"";
position:absolute;
width:520px;
height:520px;
right:-160px;
bottom:-160px;
background-color:var(--green);
opacity:.05;
-webkit-mask-image:var(--leaf-shape);
mask-image:var(--leaf-shape);
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
pointer-events:none;
z-index:0;
}
.why .why-grid{
position:relative;
z-index:1;
}
/* =========================================================
OPGAVE 2 – Ikonsystem (strukturelt/attribut-baseret, ingen
HTML aendret): USP'er, tjeklister og kontaktinfo
========================================================= */
/* USP-overskrifter (Om os' vaerdier, Kundetypers "hvorfor os"-
liste m.fl.) faar et diskret checkmark-ikon */
.usp h3,.usp h4{
display:flex;
align-items:center;
gap:.5rem;
}
.usp h3::before,.usp h4::before{
content:"";
display:inline-block;
width:16px;
height:16px;
flex:none;
background-color:var(--green);
-webkit-mask-image:var(--icon-check);
mask-image:var(--icon-check);
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
/* "Hvad vi hjaelper med"-tjeklister paa ydelsessiderne: den
eksisterende "–"-markoer opgraderes til samme checkmark-ikon */
.incl-list li::before{
content:"";
width:14px;
height:14px;
top:.85rem;
background-color:var(--green);
-webkit-mask-image:var(--icon-check);
mask-image:var(--icon-check);
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
/* Kontaktinfo i den afsluttende CTA: telefon/mail-ikoner,
fundet praecist via href-attributten (ingen HTML-aendring) */
.cta-contact a{
display:inline-flex;
align-items:center;
gap:.5rem;
}
.cta-contact a::before{
content:"";
display:inline-block;
width:16px;
height:16px;
flex:none;
background-color:currentColor;
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
.cta-contact a[href^="tel:"]::before{
-webkit-mask-image:var(--icon-phone);
mask-image:var(--icon-phone);
}
.cta-contact a[href^="mailto:"]::before{
-webkit-mask-image:var(--icon-mail);
mask-image:var(--icon-mail);
}
/* =========================================================
OPGAVE 4 – Processektion: diskret forbindelse mellem trin
========================================================= */
.stepc{
position:relative;
}
@media(min-width:961px){
.stepc:not(:last-child)::after{
content:"";
position:absolute;
top:2.4rem;
right:-1.05rem;
width:14px;
height:14px;
border-top:2px solid var(--green-light);
border-right:2px solid var(--green-light);
transform:translateY(-50%) rotate(45deg);
z-index:2;
}
}
/* =========================================================
Reduced motion: ingen af ovenstaaende er animerede, men
sikrer at intet nyt element introducerer bevaegelse.
========================================================= */
@media(prefers-reduced-motion:reduce){
.why::after{opacity:.05}
}
/* =========================================================
PRIORITET 7B -- Tydelig succes-/fejlboks til kontaktformularen
(afloeser Prioritet 7A's minimale tekstversion). Genbruger
eksisterende --green/--green-light/--green-dark/--radius samt
det eksisterende checkmark-ikon (--icon-check, samme teknik som
.usp h4::before/.incl-list li::before fra Prioritet 5). Kun én
ny, stærkt daempet fejl-roed farve tilfoejet.
========================================================= */
.quote-msg{display:none;margin-top:1.2rem;padding:1rem 1.2rem;border-radius:var(--radius);align-items:flex-start;gap:.7rem;font-size:.97rem;line-height:1.5}
.quote-msg.ok,.quote-msg.err{display:flex}
.quote-msg strong{display:block;margin-bottom:.15rem}
.quote-msg.ok{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green)}
.quote-msg.ok::before{content:"";display:inline-block;width:20px;height:20px;flex:none;margin-top:.15rem;background-color:var(--green);-webkit-mask-image:var(--icon-check);mask-image:var(--icon-check);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.quote-msg.err{background:#FBEAEA;color:#7A1F1A;border:1px solid #B3261E}
form.quote button[type="submit"]:disabled{opacity:.6;cursor:not-allowed}
/* =========================================================
PRIORITET 8 -- Afsluttende modernisering og konsistensrunde.
Ren udvidelse af eksisterende systemer fra Prioritet 1-7B,
ingen nye designsprog introduceret. Tre konkrete rettelser:
========================================================= */
/* --- 1. BUG: Priser-siden har ingen kontaktformular i den
afsluttende CTA (kun de andre 17 sider har det), hvilket
efterlod .cta-box's højre grid-kolonne tom på desktop
(grid-template-columns:1.1fr 1fr forventer to elementer).
:has() begraenser fixet automatisk til netop denne
situation, uanset hvilken side det maatte gaelde for --
ingen HTML aendret. --- */
.cta-box:has(> :only-child){
grid-template-columns:1fr;
max-width:640px;
margin:0 auto;
}
/* --- 2. Konsistens: udvid det eksisterende checkmark-ikon
(--icon-check, Prioritet 5) til de resterende tjeklister,
der stadig bruger den gamle "–"-markoer. Samme teknik som
.incl-list li::before, blot med top:50%/translateY til
robust centrering paa tvaers af deres forskellige
linjehoejder/padding. --- */
.card ul li::before,
.factors li::before,
.compare ul li::before,
.cred li::before,
.seg ul li::before{
content:"";
width:14px;
height:14px;
top:50%;
transform:translateY(-50%);
background-color:var(--green);
-webkit-mask-image:var(--icon-check);
mask-image:var(--icon-check);
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
/* --- 3. Konsistens: footerens tel:/mailto:-links faar samme
ikon-behandling som CTA-kontaktinfoen (Prioritet 5) --- */
footer .foot-grid a[href^="tel:"],
footer .foot-grid a[href^="mailto:"]{
display:inline-flex;
align-items:center;
gap:.5rem;
}
footer .foot-grid a[href^="tel:"]::before,
footer .foot-grid a[href^="mailto:"]::before{
content:"";
display:inline-block;
width:14px;
height:14px;
flex:none;
background-color:currentColor;
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
footer .foot-grid a[href^="tel:"]::before{
-webkit-mask-image:var(--icon-phone);
mask-image:var(--icon-phone);
}
footer .foot-grid a[href^="mailto:"]::before{
-webkit-mask-image:var(--icon-mail);
mask-image:var(--icon-mail);
}
/* =========================================================
PRIORITET 9B — FASE 1: EDITORIAL GARDEN.
Ren kompositionsmodernisering oven paa det eksisterende
design-sprog fra Prioritet 1-8 (samme farver, skygger,
radius, hover-principper, typografi). Ingen HTML/post_content
aendret i denne fase -- kun CSS-grid/komposition/beskaering
af allerede eksisterende elementer. Intet indhold opfundet.
========================================================= */
/* ---------------------------------------------------------
1. FORSIDENS HERO -- fra centreret "banner-tekst" til en
bund-forankret, editorial poster-komposition. Billedet faar
lov til at fylde mere foroven; teksten "hviler" nederst som
en plakat-billedtekst i stedet for at svaeve midt i billedet.
Kun .hero-front (Forsiden) -- roerer IKKE de oevrige 17 siders
hero (.hero-grid-systemet fra Prioritet 4A er urOERT).
--------------------------------------------------------- */
.hero.hero-front{
align-items:flex-end;
}
.hero-front::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(20,40,28,0) 0%,rgba(20,40,28,.18) 45%,rgba(20,40,28,.55) 100%);
pointer-events:none;
z-index:0;
}
.hero-front .wrap{
position:relative;
z-index:1;
}
/* --- Trust-row: fra tre boksede "badges" til en rolig,
editorial signaturlinje -- samme fakta, mindre "WordPress-
widget", mere "trykt plakat"-foelelse. --- */
.hero-front .trust-row{
border-top:1px solid rgba(255,255,255,.28);
padding-top:1.1rem;
gap:0;
}
.hero-front .trust-item{
background:none;
border:none;
border-radius:0;
padding:0 1.6rem 0 0;
margin-right:1.6rem;
border-right:1px solid rgba(255,255,255,.22);
}
.hero-front .trust-item:last-child{
border-right:none;
margin-right:0;
padding-right:0;
}
@media(max-width:600px){
.hero-front .trust-row{
flex-direction:column;
gap:.7rem;
}
.hero-front .trust-item{
border-right:none;
margin-right:0;
padding-right:0;
}
}
/* ---------------------------------------------------------
2. REFERENCEGALLERI -- fra ensartet Instagram-grid til et
portfolio med tydeligt hierarki. Foerste billede (samme
billede, samme src/alt) faar lov til at dominere som en
"feature"-flade i fuld gridbredde; resten flyder som et
understoettende galleri nedenunder. Ren CSS-grid-teknik,
ingen HTML aendret, virker automatisk paa Forsiden (4
billeder) og Referencer (8 billeder).
--------------------------------------------------------- */
.ref-grid .ref:first-child{
grid-column:1/-1;
aspect-ratio:21/9;
}
@media(max-width:600px){
.ref-grid .ref:first-child{
aspect-ratio:4/3;
}
}
/* ---------------------------------------------------------
3. BILLED/TEKST-SPLITS -- bryder det gennemgaaende 50/50-
moenster med bevidst, forskellig vaegtning pr. sektionstype
(ikke samme forhold overalt):
- .why-grid (Forside, Kundetyper, Private, Erhverv,
Boligforeninger): tekst foerst i DOM'en -> let tekst-
overvaegt (ca. 54/46).
- .intro-grid (Priser): tekst foerst, mere forklarings-
tungt indhold -> tydeligere tekst-overvaegt (ca. 57/43).
- .env-grid (Om os): billede foerst i DOM'en -> billedet
faar overvaegten i stedet (ca. 54/46 til billedsiden).
Kun grid-template-columns aendret -- align-items, gap,
billed-src/alt/width/height og mobil-fallback (1 kolonne)
er 100% urOERT.
--------------------------------------------------------- */
@media(min-width:961px){
.why-grid{
grid-template-columns:1.15fr 1fr;
}
.intro-grid{
grid-template-columns:1.3fr 1fr;
}
.env-grid{
grid-template-columns:1.15fr 1fr;
}
}
/* =========================================================
PRIORITET 9C — FASE 2: Aabner tre gennemgaaende boksede
grids, der reelt er information/tidslinjer, ikke sammen-
lignelige valg -- matcher Prioritet 9B's "Editorial Garden"-
retning (princip C: faerre "bokse for boksenes skyld").
Kortsystemet fra Prioritet 1/1B er UROERT for alle andre
klasser (.card,.xcard,.compare,.seg,.cust) -- kun .stepc,
.segc og .val konverteres fra boks til aabent element.
========================================================= */
/* ---------------------------------------------------------
1. PROCES (.stepc) -- 4 nummererede trin er en tidslinje,
ikke fire sammenlignelige produkter. Fjerner kort-rammen
(baggrund/kant/skygge), beholder den allerede godkendte
cirkel (.n) som det baerende visuelle anker, og den
eksisterende chevron-forbindelse (Prioritet 5) mellem
trinene bliver nu tydeligere uden en boks omkring den.
Bruges paa: Forside, Kundetyper, Private, Erhverv,
Boligforeninger.
--------------------------------------------------------- */
.stepc{
background:none;
border:none;
border-radius:0;
padding:0 .5rem;
}
.stepc,
.segc,
.val{
box-shadow:none;
}
.stepc:hover,
.segc:hover,
.val:hover{
transform:none;
box-shadow:none;
border-color:transparent;
}
/* ---------------------------------------------------------
2. SEGMENTER (.segc) -- fire tekst-kun kundegrupper
(Erhverv/Boligforeninger). Samme princip: en liste af
information, ikke fire konkurrerende tilbud. Genbruger
.val's allerede-godkendte overskriftsunderstregning
(samme farve/vaegt) for stadig at signalere "dette er et
selvstaendigt punkt" uden en fysisk boks.
Bruges paa: Erhverv, Boligforeninger.
--------------------------------------------------------- */
.segc{
background:none;
border:none;
border-radius:0;
padding:0;
}
.segc h3{
color:var(--green-dark);
font-size:1.1rem;
margin-bottom:.6rem;
padding-bottom:.6rem;
border-bottom:2px solid var(--green-light);
}
/* ---------------------------------------------------------
3. VAERDIER (.val) -- "Det staar vi for" paa Om os. Samme
princip: tre kerneVaerdier er et udsagn, ikke tre valg-
muligheder. Overskriftens eksisterende underline-accent
bevares som det baerende hierarki-signal.
Bruges paa: Om os.
--------------------------------------------------------- */
.val{
background:none;
border:none;
border-radius:0;
padding:0;
}
/* reduced-motion for .stepc/.segc/.val er allerede daekket af
Prioritet 1's eksisterende regel (samme selectorer indgaar
der) -- ingen ny regel noedvendig her. */
/* --- Mere luft mellem elementerne, nu hvor kort-rammen (som
tidligere gav visuel adskillelse) er fjernet. --- */
.steps{
gap:2.4rem;
}
.seg-grid:has(.segc){
gap:2.4rem 2rem;
}
.val-grid{
gap:2.6rem;
}
@media(max-width:600px){
.steps{gap:2rem}
.val-grid{gap:2rem}
}
/* =========================================================
PRIORITET 9D — FASE 3: Kerneydelser, kundetype-kort og
Ydelser-hub'ens "flere ydelser". Fortsaetter "Editorial
Garden"-retningen fra 9B/9C. Kort, der er reel navigation
mellem valg (kerneydelser, kundetyper), BEHOLDER deres
kort-ramme fra Prioritet 1/1B -- kun sekundaere/supplerende
lister (Ydelser-hub'ens ekstra ydelser) aabnes, samme
princip som Fase 2's stepc/segc/val.
========================================================= */
/* ---------------------------------------------------------
1. KERNEYDELSER PAA FORSIDEN -- diskret hierarki (bredere
foerste kort = mest efterspurgte ydelse) i stedet for fire
identiske kort. Scopet praecist til den instans, der reelt
har 4 kort (:has-taelling, IKKE #ydelser-ID'et alene, da
samme ID genbruges paa Private/Erhverv/Boligforeninger med
6 kort -- de skal IKKE ramte af denne regel). Kun aktiv paa
desktop (>=961px); mobil/tablet beholder den eksisterende,
allerede-testede 1-/2-kolonne-fallback uaendret.
--------------------------------------------------------- */
@media(min-width:961px){
#ydelser .cards:has(> .card:nth-child(4)):not(:has(> .card:nth-child(5))){
grid-template-columns:1.5fr 1fr 1fr 1fr;
}
}
#ydelser .cards:has(> .card:nth-child(4)):not(:has(> .card:nth-child(5))) > .card:first-child h3{
font-size:1.32rem;
}
/* ---------------------------------------------------------
2. KUNDETYPE-KORT (.cust) -- forbliver kort (reel navigation
mellem Private/Erhverv/Boligforeninger), men faar mere
editorial luft mellem sig og en diskret "fremad"-mikro-
interaktion paa linket, saa hele kortet foeles mere som en
bevidst, klikbar overgang og mindre som en statisk boks.
Kort-dybden fra Prioritet 1B/8 er urOERT.
--------------------------------------------------------- */
.cust-grid{
gap:2.2rem;
}
.cust a{
display:inline-block;
transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.cust a:hover{
transform:translateX(4px);
}
@media(prefers-reduced-motion:reduce){
.cust a{transition:none !important}
}
/* ---------------------------------------------------------
3. YDELSER-HUB: "FLERE YDELSER" (.xcard) -- disse 6 kort er
sekundaere/supplerende ydelser, der allerede visuelt stoettes
af de 4 tydeligt tungere kerneydelses-kort ovenover paa samme
side. Samme princip som Fase 2 (stepc/segc/val): aabnes fra
boks til letvaegts-liste, saa hierarkiet "vigtigste ydelser
foerst, flere ydelser dernaest" opstaar gennem VAEGT, ikke
farve. Overskriftens eksisterende understregning (allerede i
grundreglen) bliver nu det baerende signal i stedet for
kort-rammen.
--------------------------------------------------------- */
.xcard{
background:none;
border:none;
border-radius:0;
box-shadow:none;
padding:0;
}
.xcard:hover{
transform:none;
box-shadow:none;
border-color:transparent;
}
.extra-grid{
gap:2.4rem 2rem;
}
@media(max-width:600px){
.cust-grid{gap:1.8rem}
.extra-grid{gap:2rem}
}
/* =========================================================
PRIORITET 9E — FASE 4: Visuel finpudsning. Eneste omraade,
der havde en klar, sikker gevinst uden browserverifikation:
Kundetyper-hub'ens billedkort (.seg). Kortene forbliver
fuldt intakte som navigation (3 lige tydelige valg: Private/
Erhverv/Boligforeninger) -- kun billedbeskaering, luft og en
lille typografisk konsistens-detalje er justeret.
Øvrige gennemgaaede omraader (service-sidernes egne
kerneydelses-grids, CTA-overgange, sektionsrytme) blev
vurderet allerede tilstraekkeligt varierede/berettigede efter
Fase 1-3 og er bevidst urOERT -- se rapport.
========================================================= */
/* --- Billedforhold: fast 190px-pixelhoejde erstattet med et
fast billedforhold (4:3), saa beskaeringen forbliver
ens og bevidst uanset skaermbredde, i stedet for at
variere tilfaeldigt med kortets flydende bredde. --- */
.seg .thumb{
height:auto;
aspect-ratio:4/3;
}
/* --- Lidt mere generoes indre luft, nu hvor billedet fylder
mere bevidst. --- */
.seg .body{
padding:1.9rem 1.8rem;
}
/* --- Samme overskrifts-accent som allerede bruges paa .val/
.segc/.xcard (Fase 2/3), for visuel sammenhaeng paa
tvaers af sitets "gruppe af 3-4 valg"-komponenter. --- */
.seg h3{
padding-bottom:.5rem;
border-bottom:2px solid var(--green-light);
}
/* --- Lidt mere luft mellem de tre kort. Praecist scopet til
billedkort-varianten (:has(.seg)), saa Erhverv/Bolig-
foreningers segc-variant (som fik sin egen gap-vaerdi i
Fase 3) ikke utilsigtet overskrives. --- */
.seg-grid:has(.seg){
grid-template-columns:repeat(3,1fr);
gap:2rem;
}
@media(max-width:900px){
.seg-grid:has(.seg){grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.seg .body{padding:1.6rem}
.seg-grid:has(.seg){grid-template-columns:1fr;gap:1.6rem}
}
/* =========================================================
PRIORITET 11 -- Rettelse af hero-overgangen paa de 9
ydelsessider (.hero:has(.hero-grid), Prioritet 4A).
AARSAG: Den delte diagonale hvide "kile" (.hero::after,
Prioritet 3) er formet med sin hoejeste kant i HOEJRE side
(clip-path: 0 100%, 100% 40%, 100% 100%, 0% 100%) og nul
hoejde i venstre side. Det passer fint til den ANDEN
hero-type (ensartet moerk overlay hele vejen over).
Men servicesidernes hero-billede (.hero-img::after, ligeledes
Prioritet 4A) har en VANDRET gradient der er moerkest i
VENSTRE side og naesten gennemsigtig i HOEJRE side. Den
hoeje hvide kile ramte dermed praecis der, hvor billedet i
forvejen var lysest -- de to lysne-effekter laa oven i
hinanden og skabte den rapporterede lyse "klat" i stedet for
en bevidst, ren diagonal.
LOESNING: Kilen spejlvendes for netop denne hero-variant, saa
den er hoej i VENSTRE side (hvor billedet i forvejen er
moerkest -- her giver en diagonal afsloering mening) og nul i
HOEJRE side (hvor billedet allerede er lyst -- her skal der
ikke skaeres mere hvidt ind). Kilen goeres samtidig lidt
hoejere for en tydeligere, mere bevidst diagonal. Kun denne
ene hero-variant er beroert -- den anden hero-type (Forside,
Kundetyper, Priser, Om os, Referencer, Private/Erhverv/
Boligforeninger) bruger fortsat den oprindelige, urOERTE
Prioritet 3-kile.
========================================================= */
.hero:has(.hero-grid)::after{
content:none;
}
.hero-grid::after{
content:"";
position:absolute;
left:-2%;
right:-2%;
bottom:-1px;
height:36px;
background:#fff;
clip-path:polygon(0% 30%,100% 100%,0% 100%);
pointer-events:none;
z-index:2;
}
@media(max-width:600px){
.hero-grid::after{
height:22px;
}
}
/* =========================================================
PRIORITET 17 -- Redesign af ydelsessidernes hero-overgang
og ny kompakt kontakt-/fakta-raekke. Kun de 9 ydelsessider
(.hero-grid) er berOERT.
========================================================= */
/* ---------------------------------------------------------
1. RENSET OVERGANG -- én samlet, ren geometrisk kile i en
af designets EKSISTERENDE groenne farver (var(--green-dark),
samme toneart som heroens egen moerke overlay), i stedet for
en hvid kile eller et separat lag paa .incl. Kilen "er" nu
blot heroens egen moerke tone, der loeber ned til en ren
diagonal spids -- ingen hvid/graa zone, intet dobbelt lag.
--------------------------------------------------------- */
.hero-grid::after{
content:none;
}
@media(max-width:600px){
.hero-grid::after{
height:28px;
}
}
/* ---------------------------------------------------------
2. KOMPAKT KONTAKT-/FAKTA-RÆKKE -- aaben, tynd informations-
linje mellem hero og "Det inkluderer", i samme editorial stil
som Forsidens hero-signaturlinje (Prioritet 9B). Ingen
boksede kort, ingen skygge -- kun tekst, ikoner og delelinjer.
--------------------------------------------------------- */
.quick-facts-sec{
background:var(--green-light);
padding:1.4rem 0;
}
.quick-facts{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:0;
}
.qf-item{
display:flex;
align-items:center;
gap:.6rem;
padding:.4rem 1.6rem;
border-right:1px solid var(--line);
color:var(--text);
}
.qf-item:last-child{
border-right:none;
}
.qf-item::before{
content:"";
display:inline-block;
width:16px;
height:16px;
flex:none;
background-color:var(--green);
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
.qf-item[href^="tel:"]::before{
-webkit-mask-image:var(--icon-phone);
mask-image:var(--icon-phone);
}
.qf-item[href^="mailto:"]::before{
-webkit-mask-image:var(--icon-mail);
mask-image:var(--icon-mail);
}
.qf-item.qf-check::before{
-webkit-mask-image:var(--icon-check);
mask-image:var(--icon-check);
}
.qf-label{
font-weight:700;
font-size:.92rem;
color:var(--green-dark);
display:block;
}
.qf-value{
font-size:.82rem;
color:var(--grey);
display:block;
}
.qf-item[href]{
transition:opacity .2s cubic-bezier(.4,0,.2,1);
}
.qf-item[href]:hover{
opacity:.75;
}
@media(max-width:820px){
.qf-item{
padding:.4rem 1.1rem;
border-right:none;
width:50%;
justify-content:flex-start;
}
.quick-facts{
justify-content:flex-start;
}
}
@media(max-width:600px){
.qf-item{
width:100%;
padding:.6rem 0;
border-bottom:1px solid var(--line);
}
.qf-item:last-child{
border-bottom:none;
}
}
@media(prefers-reduced-motion:reduce){
.qf-item[href]{transition:none !important}
}
/* =========================================================
PRIORITET 24C -- Hero, header, navigation og CTA-modernisering.
Kun disse tre omraader + deres indbyrdes visuelle relation.
========================================================= */
/* --- 1. CTA-knapper: fra pille (50px) til let afrundet (9px) --- */
.btn{border-radius:9px;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s,color .2s}
/* --- 2. CTA hover: let, premium loeft -- ingen neon/scale --- */
.btn:hover{transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 12px 26px rgba(56,112,64,.4)}
@media(prefers-reduced-motion:reduce){
.btn{transition:none !important}
.btn:hover{transform:none !important}
}
/* --- 3. Kontekstuel CTA-farve: --green og --green-dark er nu samme
farve (#3C6C43, Prioritet 24B-1). Paa en FLAD moerkegroen
baggrund (cta-final-sektionen, som bruger en gradient mellem
de to -- nu visuelt en flad flade) ville en moerkegroen knap
forsvinde ind i baggrunden. Derfor: lysegroen knap + moerk
tekst her specifikt, jaevnfoer briefens kontekstuelle CTA-regel. --- */
.cta-final .btn-primary{background:var(--green-light);color:var(--green-dark);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.cta-final .btn-primary:hover{background:#fff;color:var(--green-dark)}
/* --- 4. Hero H1: mindre, roligere hierarki -- ikke en kaempe
overskrift der fylder hele heroen --- */
.hero h1{font-size:clamp(1.9rem,3.6vw,2.75rem)}
.hero-copy h1{font-size:clamp(1.6rem,2.8vw,2.15rem)}
/* --- 5. Hero on-load-animation (ren CSS, IKKE scroll-trigget --
heroen er altid synlig med det samme, saa den skal ikke
vente paa IntersectionObserver som resten af sitet).
Roligt: eyebrow -> H1 -> intro -> CTA, i rækkefølge. --- */
.hero .eyebrow,.hero-copy .eyebrow{animation:gmHeroIn .6s cubic-bezier(.4,0,.2,1) both;animation-delay:.05s}
.hero h1,.hero-copy h1{animation:gmHeroIn .7s cubic-bezier(.4,0,.2,1) both;animation-delay:.15s}
.hero p.lead,.hero-copy>p{animation:gmHeroIn .7s cubic-bezier(.4,0,.2,1) both;animation-delay:.28s}
.hero-cta{animation:gmHeroIn .7s cubic-bezier(.4,0,.2,1) both;animation-delay:.4s}
@keyframes gmHeroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
.hero .eyebrow,.hero-copy .eyebrow,.hero h1,.hero-copy h1,.hero p.lead,.hero-copy>p,.hero-cta{
animation:none !important;opacity:1 !important;transform:none !important;
}
}
/* --- 6. Dropdown: groen accent ved hover + let animation, i stedet
for neutral graa hover-baggrund --- */
.site-topnav-drop-panel a{transition:background .15s,color .15s,padding-left .15s}
.site-topnav-drop-panel a:hover{background:var(--green-light);color:var(--green-dark);padding-left:1rem}
/* --- 7. Mobil header-bjælke med logo. .site-topbar er kun synlig
>=900px (eksisterende, urOERT arkitektur), saa der har hidtil
IKKE vaeret noget logo synligt paa mobil -- kun den flydende
burgerknap. Dette er den mindst komplekse loesning: en tynd,
sticky bjaelke med det SAMME logo (samme fil som desktop, ingen
ny grafik), stort nok til at "GM Anlaegsgartner" er laesbart.
Burgerknappen flyttes til hoejre, saa logoet kan staa til
venstre paa samme maade som paa desktop. --- */
.site-mobile-topbar{display:none}
@media(max-width:899px){
.site-mobile-topbar{
display:flex;align-items:center;
position:sticky;top:0;z-index:110;
background:#fff;border-bottom:1px solid var(--line);
padding:.55rem 1rem;
}
.site-mobile-topbar-logo{display:block;line-height:0}
.site-mobile-topbar-logo img{height:56px;width:auto;display:block}
.site-menu-toggle{left:auto;right:1.2rem;}
}
@media(max-width:600px){
.site-mobile-topbar-logo img{height:48px}
.site-menu-toggle{right:.9rem;}
}
/* ======================================================================
PRIORITET 24D -- Forsidens 4 primaere ydelser: fra 4 ens kort til
1 featured (stort, billede+tekst) + 3 kompakte (tekstlister).
Scopet KUN til .ydelser-feature-grid m.fl., som er helt nye
klassenavne der ikke findes andre steder paa sitet -- paavirker
derfor ikke Haekklipning/Kundetyper/Priser/andre sider.
====================================================================== */
.ydelser-feature-grid{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:1.8rem;
margin-top:2.4rem;
align-items:stretch;
text-align:left;
}
.ydelse-featured{
position:relative;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 30px rgba(20,40,28,.16);
min-height:420px;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.ydelse-featured-img{position:absolute;inset:0;z-index:0}
.ydelse-featured-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.ydelse-featured:hover .ydelse-featured-img img{transform:scale(1.06)}
.ydelse-featured-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,28,0) 28%,rgba(20,40,28,.85) 100%)}
.ydelse-featured-body{position:relative;z-index:1;padding:2rem;color:#fff}
.ydelse-featured-body h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.6rem;color:#fff}
.ydelse-featured-body p{color:rgba(255,255,255,.92);margin-bottom:1.3rem;max-width:440px}
.ydelse-featured .btn-primary{background:var(--green-light);color:var(--green-dark)}
.ydelse-featured .btn-primary:hover{background:#fff;color:var(--green-dark)}
.ydelse-featured:hover{box-shadow:0 16px 40px rgba(20,40,28,.24)}
.ydelser-compact-list{display:flex;flex-direction:column;gap:1rem}
.ydelse-compact{
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:1.3rem 1.5rem;flex:1;
transition:box-shadow .2s,transform .2s,border-color .2s;
}
.ydelse-compact:hover{box-shadow:0 8px 22px rgba(20,40,28,.12);transform:translateY(-3px);border-color:var(--green)}
.ydelse-compact h3,.ydelse-compact h4{font-size:1.05rem;margin-bottom:.4rem;color:var(--green-dark)}
.ydelse-compact p{font-size:.92rem;color:var(--grey,#555);margin-bottom:.5rem}
.ydelse-compact a.more{color:var(--green);font-weight:700;font-size:.9rem;transition:padding-left .15s}
.ydelse-compact:hover a.more{padding-left:.25rem}
@media(max-width:900px){
.ydelser-feature-grid{grid-template-columns:1fr}
.ydelse-featured{min-height:320px}
}
@media(prefers-reduced-motion:reduce){
.ydelse-featured-img img{transition:none}
.ydelse-featured:hover .ydelse-featured-img img{transform:none}
.ydelse-compact:hover{transform:none}
}
/* ======================================================================
PRIORITET 24E-REV1 -- Korrektion af de 9 ydelsessider. Erstatter
Prioritet 24E's hero-behandling (fjernet: den gav en synlig "hård
50/50-split"-fornemmelse -- verificeret ved pixel-analyse af et
faktisk screenshot: en skarp, lodret 2px hvid linje midt i heroen,
som IKKE findes i det oprindelige raa foto og som viste sig at
stamme fra 24E's hover-zoom-transition paa hero-billedet (skaber et
nyt GPU-kompositeringslag med et synligt "tile-seam"-renderings-
problem i Chromium). Zoom-effekten er derfor fjernet helt, ikke kun
rettet. Samtidig er `.ba-teaser` ("foer/efter"-pladsholderen) fjernet
fra alle 9 sider igen -- funktionen findes fremover kun paa
Referencer (senere fase). Sektion 2/3/5 (liste-hover, proces-tidslinje,
pris/FAQ-styling) fra 24E er bevaret uaendret, da de ikke var en del
af det rapporterede problem. --- */
/* --- 1. "Det inkluderer"-listen: let hover, uaendret fra 24E. --- */
.incl-list li{transition:padding-left .15s}
.incl-list li:hover{padding-left:1.9rem}
/* --- 2. Proces-tidslinje, uaendret fra 24E. --- */
.incl-grid > div:last-child .step{position:relative}
.incl-grid > div:last-child .step:not(:last-child)::after{
content:"";
position:absolute;
left:22px;top:44px;
width:2px;
height:calc(100% - 44px + 1.4rem);
background:var(--green-light);
z-index:0;
}
.incl-grid > div:last-child .step .n{position:relative;z-index:1;box-shadow:0 0 0 4px #fff}
/* --- 3. Pris-boks (.price-note) og FAQ: scopet til de 9 ydelsessider,
uaendret fra 24E. --- */
body.page-id-184 .price-note,body.page-id-185 .price-note,body.page-id-186 .price-note,
body.page-id-187 .price-note,body.page-id-188 .price-note,body.page-id-189 .price-note,
body.page-id-190 .price-note,body.page-id-191 .price-note,body.page-id-192 .price-note{
text-align:left;
border-style:solid;border-width:1px;border-color:var(--line);
border-left:4px solid var(--green);
box-shadow:0 6px 18px rgba(20,40,28,.08);
}
body.page-id-184 summary:hover,body.page-id-185 summary:hover,body.page-id-186 summary:hover,
body.page-id-187 summary:hover,body.page-id-188 summary:hover,body.page-id-189 summary:hover,
body.page-id-190 summary:hover,body.page-id-191 summary:hover,body.page-id-192 summary:hover{
background:var(--green-light);
}
body.page-id-184 details,body.page-id-185 details,body.page-id-186 details,
body.page-id-187 details,body.page-id-188 details,body.page-id-189 details,
body.page-id-190 details,body.page-id-191 details,body.page-id-192 details{
transition:box-shadow .2s,border-color .2s;
border-radius:12px;overflow:hidden;
}
/* --- 4. NY herokomposition (REV1): ét sammenhaengende billede med et
roligt, bredt gradient-overlay baseret paa brandets moerkegroenne
(#3C6C43 = rgb(56,112,64)) i stedet for den tidligere naesten-
sorte (rgba(20,40,28,...)) overlay. Overlayet spredes over et
meget bredere omraade (0-90% i stedet for 0-72%) med flere,
taettere trin, saa der ikke opstaar en synlig "kant" mellem
moerkt og lyst -- billedet skal opleves som ÉT visuelt hele.
Tekstkolonnen er samtidig gjort tydeligt smallere (500px, ned
fra 620px), saa den aldrig fylder naer halvdelen af skaermen. --- */
.hero-img::after{
background:linear-gradient(100deg,
rgba(56,112,64,.86) 0%,
rgba(56,112,64,.76) 18%,
rgba(56,112,64,.56) 36%,
rgba(56,112,64,.32) 54%,
rgba(56,112,64,.14) 70%,
rgba(56,112,64,.03) 84%,
rgba(56,112,64,0) 94%
);
}
.hero-copy{max-width:500px}
/* --- 5. Sidevariation (kun >=821px, under det stables .incl-grid altid
til 1 kolonne i naturlig laeserraekkefolge, uanset gruppe).
Heroens tekstkolonne varierer nu kun i et smalt, bevidst
tilbageholdent spaend (460-540px af 1440px total = maks 37,5%
af skaermen), saa ingen version nogensinde ligner en 50/50-split.
GRUPPE A -- "billede i foerersaedet" (Haekklipning 184,
Plantning af haek 188): smallest tekstkolonne + hurtigere udtoning,
saa mest muligt af billedet traeder frem.
GRUPPE B -- "proces/loebende service i fokus" (Plantning og anlaeg
185, Havevedligeholdelse 187, Anlaeg af graesplaene 189,
Plaenepleje 190, Bortkoersel 192): standard heroudtoning, variation
sker i stedet i .incl-grid (proces-kolonnen vises foerst og faar
mere plads).
GRUPPE C -- "tekst/konkrete opgaver i fokus" (Lugning 186,
Ukrudtsbekaempelse 191): en anelse bredere tekstkolonne + "Det
inkluderer"-kolonnen faar mere plads i .incl-grid, naturlig
problem(hero)->loesning(liste)-raekkefoelge bevares. --- */
@media(min-width:821px){
body.page-id-184 .hero-copy,body.page-id-188 .hero-copy{max-width:460px}
body.page-id-184 .hero-img::after,body.page-id-188 .hero-img::after{
background:linear-gradient(100deg,
rgba(56,112,64,.82) 0%,
rgba(56,112,64,.68) 14%,
rgba(56,112,64,.44) 30%,
rgba(56,112,64,.2) 46%,
rgba(56,112,64,.06) 62%,
rgba(56,112,64,0) 76%
);
}
body.page-id-185 .incl-grid,body.page-id-187 .incl-grid,body.page-id-189 .incl-grid,
body.page-id-190 .incl-grid,body.page-id-192 .incl-grid{
grid-template-columns:1fr 1.2fr;
}
body.page-id-185 .incl-grid > div:first-child,body.page-id-187 .incl-grid > div:first-child,
body.page-id-189 .incl-grid > div:first-child,body.page-id-190 .incl-grid > div:first-child,
body.page-id-192 .incl-grid > div:first-child{order:2}
body.page-id-185 .incl-grid > div:last-child,body.page-id-187 .incl-grid > div:last-child,
body.page-id-189 .incl-grid > div:last-child,body.page-id-190 .incl-grid > div:last-child,
body.page-id-192 .incl-grid > div:last-child{order:1}
body.page-id-186 .incl-grid,body.page-id-191 .incl-grid{
grid-template-columns:1.2fr 1fr;
}
body.page-id-186 .hero-copy,body.page-id-191 .hero-copy{max-width:540px}
}
/* ======================================================================
PRIORITET 24F -- Modernisering af Ydelser (183), Private (194),
Erhverv (195), Boligforeninger (196). De 9 ydelsessider og Forsiden
er FROSSET og maa ikke paavirkes af noget i denne blok.
Klasser som .cards/.card/.why/.why-grid/.usp/.proces/.steps/.stepc/
.cust-grid/.areas/.faq-list/.cta-final deles bredt med Forsiden,
Kundetyper og de 9 ydelsessider -- ALT herunder er derfor eksplicit
scopet til de 4 side-ID'er (183/194/195/196). Klasserne
.ydelser-feature-grid/.ydelse-featured/.ydelser-compact-list/
.ydelse-compact er allerede defineret i Prioritet 24D (Forsiden) og
genbruges her uaendret paa Ydelser-siden, da de er unikke navne.
====================================================================== */
/* --- 1. Proces (.stepc): fra 4 ens bokse i en raekke til en aaben,
lodret tidslinje med forbindelseslinje -- samme teknik som
Prioritet 24E's .step-tidslinje paa ydelsessiderne, men tilpasset
.stepc's DOM (n/h4/p er soskende, ikke i en wrapper-div) via et
CSS Grid-trick i stedet for at aendre HTML'en. --- */
body.page-id-183 .steps,body.page-id-194 .steps,body.page-id-195 .steps,body.page-id-196 .steps{
display:block;max-width:700px;margin:2.6rem auto 0;
}
body.page-id-183 .stepc,body.page-id-194 .stepc,body.page-id-195 .stepc,body.page-id-196 .stepc{
display:grid;
grid-template-columns:44px 1fr;
column-gap:1.2rem;
text-align:left;
background:none;border:none;box-shadow:none;
padding:0 0 1.8rem 0;
border-radius:0;
position:relative;
}
body.page-id-183 .stepc .n,body.page-id-194 .stepc .n,body.page-id-195 .stepc .n,body.page-id-196 .stepc .n{
grid-column:1;grid-row:1 / 3;margin:0;position:relative;z-index:1;box-shadow:0 0 0 4px #fff;
}
body.page-id-183 .stepc h4,body.page-id-194 .stepc h4,body.page-id-195 .stepc h4,body.page-id-196 .stepc h4{grid-column:2;grid-row:1}
body.page-id-183 .stepc p,body.page-id-194 .stepc p,body.page-id-195 .stepc p,body.page-id-196 .stepc p{grid-column:2;grid-row:2;margin:0}
body.page-id-183 .stepc:not(:last-child)::after,body.page-id-194 .stepc:not(:last-child)::after,
body.page-id-195 .stepc:not(:last-child)::after,body.page-id-196 .stepc:not(:last-child)::after{
content:"";position:absolute;left:22px;top:44px;width:2px;
height:calc(100% - 44px + 1.8rem);
background:rgba(56,112,64,.35);z-index:0;
}
@media(max-width:1000px){
body.page-id-183 .steps,body.page-id-194 .steps,body.page-id-195 .steps,body.page-id-196 .steps{max-width:100%}
}
/* --- 2. Servicekort (.card) paa Private/Erhverv/Boligforeninger:
Prioritet 24F tilfoejede her en EGEN, svagere hover (-4px, ingen
groen kant-accent) end sitets etablerede standard-hover paa
.card (-6px + groen kant, sat allerede i Prioritet 1). Da .card
ogsaa er en sitewide klasse, ramte begge regler samme element,
og fordi denne regel var mere specifik, vandt den -- resultatet
var et INKONSEKVENT, svagere hover paa netop disse 3 sider.
Fundet under Prioritet 24I's animations-audit og fjernet, saa
disse sider nu bruger nøjagtig samme hover som resten af sitet. --- */
/* --- 3. Segmenter (.segc) paa Erhverv/Boligforeninger: let hover-accent,
saa segmentgridet ikke fremstaar helt statisk. --- */
body.page-id-195 .segc,body.page-id-196 .segc{transition:border-color .2s,box-shadow .2s}
body.page-id-195 .segc:hover,body.page-id-196 .segc:hover{border-color:var(--green);box-shadow:0 8px 20px rgba(20,40,28,.1)}
/* ======================================================================
PRIORITET 24I -- Animations-audit + wow-element. Kun animationer og
micro-interactions (samt Om mig-teksten, tilfoejet direkte i
post_content paa Forsiden/Om os). Ingen nye layoutsystemer, ingen
nye cards, ingen farveaendringer.
====================================================================== */
/* --- Wow-element: den EKSISTERENDE, AEGTE kundeanmeldelse fra
Gundsoemagle paa Forsiden faar en rolig, pulserende groen glow
som eneste "wow"-detalje paa siden (kun 1 review findes, saa
kun 1 element beroeres). Baseret paa boks-skygge (transform-frit,
ingen ny stacking-context/pseudo-element-risiko a la heroens
tidligere rendering-fejl i 24E). Kun brandets #3C6C43, ingen
neon, ingen rotation der kan kollidere med gm-anim's egen
transform paa samme element. --- */
body.page-id-182 .rev{
border-color:var(--green-light);
animation:gmReviewGlow 3.5s ease-in-out infinite;
}
@keyframes gmReviewGlow{
0%,100%{box-shadow:var(--shadow),0 0 0 0 rgba(56,112,64,.28)}
50%{box-shadow:var(--shadow),0 0 22px 4px rgba(56,112,64,.28)}
}
@media(prefers-reduced-motion:reduce){
body.page-id-182 .rev{animation:none}
}
/* ======================================================================
PRIORITET 24K-REV1 -- Redesign af Referencer. Erstatter Prioritet
24K's komplekse grid-template-areas-mosaik (som gav daarlig balance
og beskaar tekstlabels, fordi kortenes hoejde var laast til faste
grid-raekker paa 150px, mens billedet fyldte 100% af den hoejde og
dermed efterlod nul plads til tekst under -- overflow:hidden skar
saa teksten vaek). Denne version bruger et enkelt, forudsigeligt
grid (2-3 kolonner) hvor hvert kort er en flex-kolonne UDEN fast
hoejde: billedomraadet har fast aspect-ratio, tekstomraadet har
auto-hoejde og kan aldrig blive beskaaret. Alt scopet til
body.page-id-307. Ingen egne billeder valgt -- kun eksisterende
Unsplash-fotos genbrugt (samme foto-ID'er).
====================================================================== */
/* --- 1. Featured projekt: ét stort, roligt billede + overskrift
OVER billedet (ikke overlay), saa der aldrig er kontrast- eller
beskaeringsrisiko for teksten. --- */
body.page-id-307 .ref-featured{
max-width:900px;
margin:1.6rem auto 0;
}
body.page-id-307 .ref-featured-img{
border-radius:16px;
overflow:hidden;
aspect-ratio:16/9;
box-shadow:0 10px 28px rgba(20,40,28,.16);
}
body.page-id-307 .ref-featured-img img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.4,0,.2,1);
}
body.page-id-307 .ref-featured:hover .ref-featured-img img{transform:scale(1.03)}
@media(max-width:600px){
body.page-id-307 .ref-featured-img{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
body.page-id-307 .ref-featured-img img{transition:none}
body.page-id-307 .ref-featured:hover .ref-featured-img img{transform:none}
}
/* --- 1B. Flisebelaegning-referencen: kildebilledet er portraet
(785x1048), ikke landskab som resten af referencesystemet. En
maalrettet klasse -- kun dette ene kort, ikke det generelle
.ref-featured-img-system -- faar sin egen aspect-ratio, der
matcher billedets EGNE proportioner praecist. Med en boks, der
har samme forhold som billedet selv, viser object-fit:cover
(urOERT) hele billedet uden nogen beskaering -- paa baade
desktop og mobil, uanset skaermbredde. Hoejere specificitet
(to klasser) vinder automatisk over baade grundreglen og dens
mobil-media-query ovenfor, saa ingen af dem behoever aendres. --- */
body.page-id-307 .ref-featured-img.ref-featured-img--portrait{
aspect-ratio:785/1048;
max-width:min(520px,100%);
margin-left:auto;
margin-right:auto;
}
/* --- 2. Foer/efter: forenklet til flade, rolige farvefelter (ikke
stribemoenster), saa pladsholderen virker mere ordnet og mindre
"stoejende". Selve slider-mekanikken (JS) er uaendret, da den
allerede er testet og virker korrekt. --- */
body.page-id-307 .ba-projects{
display:flex;flex-direction:column;gap:2.6rem;
max-width:800px;margin:2rem auto 0;
}
body.page-id-307 .ba-project-title{
text-align:center;font-weight:700;color:var(--green-dark);
margin-bottom:.9rem;font-size:1.08rem;
}
body.page-id-307 .ba-slider{
position:relative;
max-width:800px;margin:0 auto;
aspect-ratio:16/10;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 28px rgba(20,40,28,.16);
cursor:ew-resize;
user-select:none;
-webkit-user-select:none;
touch-action:pan-y;
}
body.page-id-307 .ba-img{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
}
body.page-id-307 .ba-before-img{background:#EDF2EE}
body.page-id-307 .ba-after-img{background:var(--green-light);clip-path:inset(0 0 0 50%)}
body.page-id-307 .ba-label{
position:absolute;top:14px;
background:rgba(255,255,255,.88);color:var(--green-dark);
padding:.35rem .9rem;border-radius:20px;
font-size:.85rem;font-weight:600;letter-spacing:.3px;
}
body.page-id-307 .ba-label-before{left:14px}
body.page-id-307 .ba-label-after{right:14px}
body.page-id-307 .ba-handle{
position:absolute;top:0;bottom:0;left:50%;
width:3px;background:#fff;
transform:translateX(-50%);
box-shadow:0 0 6px rgba(56,112,64,.5),0 0 16px rgba(56,112,64,.35);
animation:gmHandleGlow 2.8s ease-in-out infinite;
}
body.page-id-307 .ba-handle-grip{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:42px;height:42px;border-radius:50%;
background:#fff;border:2px solid var(--green);
display:flex;align-items:center;justify-content:center;
font-size:1.05rem;color:var(--green-dark);
box-shadow:0 4px 12px rgba(20,40,28,.28);
}
@keyframes gmHandleGlow{
0%,100%{box-shadow:0 0 5px rgba(56,112,64,.4),0 0 12px rgba(56,112,64,.25)}
50%{box-shadow:0 0 9px rgba(56,112,64,.65),0 0 20px rgba(56,112,64,.4)}
}
body.page-id-307 .ba-note{
max-width:520px;margin:1.4rem auto 0;
padding:.7rem 1.4rem;background:var(--mute);
border:1px solid var(--line);border-radius:50px;
color:var(--green-dark);font-weight:600;font-size:.92rem;
text-align:center;
}
@media(max-width:600px){
body.page-id-307 .ba-slider{aspect-ratio:4/5;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
body.page-id-307 .ba-handle{animation:none}
}
/* --- 3. Flere billeder: rent billedgalleri uden kort, uden kant,
uden billedtekst - kun billederne selv i et ensartet grid. --- */
body.page-id-307 .ref-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.2rem;
margin-top:2.4rem;
}
body.page-id-307 .ref-gallery-img{
position:relative;
aspect-ratio:4/3;
border-radius:14px;
overflow:hidden;
}
body.page-id-307 .ref-gallery-img img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.4,0,.2,1);
}
body.page-id-307 .ref-gallery-img:hover img{transform:scale(1.05)}
@media(max-width:900px){
body.page-id-307 .ref-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
body.page-id-307 .ref-gallery{grid-template-columns:1fr;gap:1rem}
}
@media(prefers-reduced-motion:reduce){
body.page-id-307 .ref-gallery-img img{transition:none}
body.page-id-307 .ref-gallery-img:hover img{transform:none}
}
/* ===== PRIORITET 25O: mørkegrøn brugt strategisk — kun ét udvalgt accent-afsnit pr. side ===== */
.areas{
background:linear-gradient(160deg,var(--green-dark) 0%,var(--green) 100%);
}
.areas .eyebrow{
background:rgba(255,255,255,.14);color:#fff;
}
.areas h2.section-title{
color:#fff;
}
.areas .section-sub{
color:#EDF2EE;
}
.areas::before{background:#fff}
.areas .tag{background:#fff;color:var(--green-dark);border-color:rgba(255,255,255,.4)}
.areas .tag:hover{background:var(--green-light)}
@media(prefers-reduced-motion:reduce){
.areas{transition:none}
}
/* ===== PRIORITET 25Q: Hero med infoboks + før/efter-karrusel ===== */
body.page-id-307 .hero .wrap.hero-split{
display:flex;
align-items:center;
justify-content:flex-start;
gap:2.4rem;
flex-wrap:wrap;
}
body.page-id-307 .hero{padding:3rem 0}
body.page-id-307 .hero-copy{flex:1 1 460px}
body.page-id-307 .hero-note{
flex:0 1 320px;
display:flex;align-items:flex-start;gap:.8rem;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.28);
border-radius:16px;
padding:1.1rem 1.3rem;
color:#fff;
font-weight:600;
font-size:.92rem;
line-height:1.5;
}
body.page-id-307 .hero-note-icon{
flex:none;width:20px;height:20px;margin-top:.15rem;
background-color:#fff;
-webkit-mask-image:var(--icon-check);
mask-image:var(--icon-check);
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
@media(max-width:900px){
body.page-id-307 .hero-note{flex:1 1 100%}
}
/* --- Karrusel med flere, mindre foer/efter-projekter: moerkegroen
"showcase"-sektion, sidens ene udvalgte mørke accent --- */
body.page-id-307 .ba-more-sec{
background:linear-gradient(160deg,var(--green-dark) 0%,var(--green) 100%);
}
body.page-id-307 .ba-more-sec .eyebrow{
background:rgba(255,255,255,.14);color:#fff;
}
body.page-id-307 .ba-more-sec h2.section-title{color:#fff}
body.page-id-307 .ba-more-sec .section-sub{color:#EDF2EE}
body.page-id-307 .ba-more-sec .ba-project-title{color:#fff}
body.page-id-307 .ba-more-sec .ba-carousel-item .ba-project-title{margin-top:.9rem;margin-bottom:0}
body.page-id-307 .ba-carousel-wrap{
position:relative;
display:flex;
align-items:center;
gap:1rem;
margin-top:2.4rem;
}
body.page-id-307 .ba-carousel{
display:flex;
gap:1.4rem;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding:.3rem .1rem 1rem;
-ms-overflow-style:none;
scrollbar-width:none;
flex:1;
}
body.page-id-307 .ba-carousel::-webkit-scrollbar{display:none}
body.page-id-307 .ba-carousel-item{
flex:0 0 100%;
display:flex;
flex-direction:column;
align-items:center;
scroll-snap-align:start;
scroll-snap-stop:always;
}
body.page-id-307 .ba-carousel-item .ba-slider-sm{
width:100%;
max-width:520px;
}
body.page-id-307 .ba-slider-sm{
max-width:100%;
margin:0;
aspect-ratio:4/3;
}
body.page-id-307 .ba-slider-sm .ba-handle-grip{
width:32px;height:32px;font-size:.85rem;
}
body.page-id-307 .ba-slider-sm .ba-label{
font-size:.75rem;padding:.28rem .7rem;top:10px;
}
body.page-id-307 .ba-label-before{left:10px}
body.page-id-307 .ba-label-after{right:10px}
body.page-id-307 .ba-carousel-arrow{
flex:none;
width:44px;height:44px;border-radius:50%;
background:#fff;border:1px solid var(--line);
color:var(--green-dark);
font-size:1.5rem;line-height:1;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
box-shadow:0 4px 12px rgba(20,40,28,.14);
transition:background .2s,transform .2s;
}
body.page-id-307 .ba-carousel-arrow:hover{
background:var(--green);color:#fff;transform:scale(1.06);
}
body.page-id-307 .ba-carousel-dots{
display:flex;justify-content:center;gap:.55rem;margin-top:.6rem;
}
body.page-id-307 .ba-carousel-dot{
width:9px;height:9px;border-radius:50%;
background:rgba(255,255,255,.35);border:none;padding:0;cursor:pointer;
transition:background .2s,transform .2s;
}
body.page-id-307 .ba-carousel-dot.is-active{
background:#fff;transform:scale(1.25);
}
@media(max-width:600px){
body.page-id-307 .ba-carousel-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){
body.page-id-307 .ba-carousel{scroll-behavior:auto}
}
/* ===== PRIORITET 25R: kompakt CTA på Referencer (uden formular) ===== */
body.page-id-307 .ref-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
flex-wrap:wrap;
}
body.page-id-307 .ref-cta-copy{
display:flex;
align-items:center;
gap:1.2rem;
flex:1 1 380px;
}
body.page-id-307 .ref-cta-icon{
flex:none;
width:56px;height:56px;border-radius:50%;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.3);
position:relative;
}
body.page-id-307 .ref-cta-icon::before{
content:"";
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:24px;height:24px;
background-color:#fff;
-webkit-mask-image:var(--icon-phone);
mask-image:var(--icon-phone);
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body.page-id-307 .ref-cta-copy h2{
color:#fff;font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:.3rem;
}
body.page-id-307 .ref-cta-copy p{
color:#EDF2EE;font-size:1rem;margin:0;
}
body.page-id-307 .ref-cta-actions{
display:flex;gap:1rem;flex-wrap:wrap;flex:none;
}
@media(max-width:700px){
body.page-id-307 .ref-cta-copy{flex-direction:column;text-align:center}
body.page-id-307 .ref-cta-actions{width:100%;justify-content:center}
body.page-id-307 .ref-cta-actions .btn{flex:1 1 auto;justify-content:center}
}
/* ===== PRIORITET 25W: Forsidens "Hvorfor vælge mig" havde en tom
billedkolonne tilbage, efter billedet blev fjernet. Grid'et stod
stadig paa to kolonner, saa hoejre halvdel var et tomt felt.
Lukkes til én kolonne med samme laesebredde som resten af siden -
ingen andre sider paavirkes. ===== */
body.page-id-182 .why .why-grid{
grid-template-columns:1fr;
max-width:760px;
margin-left:auto;
margin-right:auto;
}
/* ===== PRIORITET 25X: efter fjernelse af arkivbilledet (jord/planteskovl)
stod tre grids tilbage med en tom billedkolonne. De lukkes til én
kolonne, saa der ikke er tomme felter. Kun de tre konkrete sider. ===== */
body.page-id-194 .why .why-grid,
body.page-id-195 .why .why-grid{
grid-template-columns:1fr;
max-width:760px;
margin-left:auto;
margin-right:auto;
}
/* ===== Boligforeninger: "Tryghed for bestyrelse og beboere" viste
samme billede som sidens egen hero laengere oppe -- fjernet for
at undgaa unoedvendig gentagelse paa samme side. Samme
lukke-til-én-kolonne-moenster som ovenfor. ===== */
body.page-id-196 .why .why-grid{
grid-template-columns:1fr;
max-width:760px;
margin-left:auto;
margin-right:auto;
}
body.page-id-197 .intro-grid{
grid-template-columns:1fr;
max-width:760px;
margin-left:auto;
margin-right:auto;
}
/* ===== PRIORITET 25Z: flisebilledet paa Referencer er et hoejformat-foto
(800x1067) i en 16:9-ramme. Med centreret beskaering blev selve
flisebelaegningen skaaret vaek forneden. Beskaeringspunktet flyttes
ned, saa belaegningen er tydelig. Kun dette ene billede paavirkes. ===== */
body.page-id-307 .ref-featured-img img{
object-position:50% 85%;
}
/* ===== Om os: "photo"-kolonnen i team-card er fjernet (stod med et
vildledende stockfoto af en tilfaeldig mand ved siden af Gustavs
navn) -- kortet skal nu vaere én kolonne, saa teksten fylder
pladsen korrekt i stedet for at efterlade et tomt hul. ===== */
body.page-id-198 .team-card{
grid-template-columns:1fr;
}
/* =========================================================
PRIORITET 26 -- Kundeanmeldelser-carousel paa Forsiden
(side-ID 182). Erstatter den tidligere statiske
"Kundeudtalelser"-sektion (.reviews/.rev-grid/.rev). De gamle
.reviews/.rev-grid/.rev-regler laengere oppe i denne fil er
bevidst IKKE fjernet: klasserne findes ikke laengere i noget
indhold, saa reglerne er blot ubrugte og udgoer ingen risiko
for konflikt med nedenstaaende -- alt her bruger helt nye,
unikke klassenavne (rev-showcase, rev-proof, rev-carousel*,
rev-card, rev-quote, rev-star).
PRIORITET 26-REVISION 3: kortene er nu kompakte (~340px paa
desktop) i stedet for ét stort 720px-kort, saa 3 kort kan
vises samtidig naar der kommer flere anmeldelser (2 paa
tablet, 1 paa mobil). Hvert .rev-card er igen sit eget
uafhaengige kort med egen border/skygge (i stedet for at
dele en ydre "showcase"-ramme, som kun gav mening med ét
kort). .rev-proof ("300+ havebesoeg siden 2022") er nu en
selvstaendig, kompakt pille ovenover carousellen i stedet for
at vaere fysisk sammenflettet med kortets kant, saa den ikke
gentages paa hvert af flere kort. NB: markup for .rev-proof
(uden
om labelteksten) og eyebrow-badgen (uden ikon)
er brugerens egne, bevidste forenklinger af post_content og
er IKKE aendret her -- kun CSS'en er tilpasset til at style
den faktiske, nuvaerende markup.
========================================================= */
.eyebrow-icon{display:inline-flex;align-items:center;gap:.45rem}
.eyebrow-icon svg{width:14px;height:14px;flex:none}
body.page-id-182 .rev-sec{background:var(--mute);padding:4.2rem 0}
body.page-id-182 .rev-sec .section-sub{max-width:600px;margin:.8rem auto 0;color:var(--text)}
body.page-id-182 .rev-showcase{max-width:1180px;margin:0 auto}
body.page-id-182 .rev-proof{
display:inline-flex;align-items:baseline;gap:.4rem;
background:var(--green-light);border-radius:50px;
padding:.55rem 1.3rem;margin:1.8rem auto 2rem;
color:var(--green-dark);font-size:.86rem;
}
body.page-id-182 .rev-proof strong{font-size:1.2rem;font-weight:800}
body.page-id-182 .rev-carousel-wrap{position:relative;display:flex;align-items:center;gap:.6rem}
body.page-id-182 .rev-carousel{
display:flex;gap:1.4rem;overflow-x:auto;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:.2rem .1rem .6rem;-ms-overflow-style:none;scrollbar-width:none;flex:1;
}
body.page-id-182 .rev-carousel::-webkit-scrollbar{display:none}
body.page-id-182 .rev-carousel-item{
flex:0 0 340px;max-width:340px;scroll-snap-align:start;scroll-snap-stop:always;display:flex;
}
body.page-id-182 .rev-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:1.9rem 1.7rem;
display:flex;flex-direction:column;width:100%;text-align:left;position:relative;
}
body.page-id-182 .rev-quote{display:inline-flex;width:28px;height:28px;color:var(--green-light);margin-bottom:.5rem}
body.page-id-182 .rev-quote svg{width:100%;height:100%}
body.page-id-182 .rev-stars{display:flex;gap:.2rem;margin-bottom:.9rem}
body.page-id-182 .rev-star{width:15px;height:15px;color:var(--line);display:inline-flex}
body.page-id-182 .rev-star svg{width:100%;height:100%}
body.page-id-182 .rev-star.is-filled{color:var(--star)}
body.page-id-182 .rev-text{font-style:italic;color:var(--text);font-size:1rem;line-height:1.6;margin-bottom:1.2rem;flex:1}
body.page-id-182 .rev-who strong{display:block;color:var(--green-dark);font-size:.98rem;font-weight:700}
body.page-id-182 .rev-date{font-size:.83rem;color:var(--grey)}
body.page-id-182 .rev-source{
display:inline-block;margin-top:.7rem;font-size:.76rem;font-weight:700;
color:var(--green);text-transform:uppercase;letter-spacing:.05em;
}
body.page-id-182 .rev-carousel-wrap.rev-single{justify-content:center}
body.page-id-182 .rev-carousel-wrap.rev-single .rev-carousel{flex:1;overflow:visible;justify-content:center;width:100%}
body.page-id-182 .rev-carousel-arrow{
flex:none;width:40px;height:40px;border-radius:50%;
background:#fff;border:1px solid var(--line);color:var(--green-dark);
font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;
cursor:pointer;box-shadow:0 4px 12px rgba(20,40,28,.14);
transition:background .2s,transform .2s;
}
body.page-id-182 .rev-carousel-arrow:hover{background:var(--green);color:#fff;transform:scale(1.06)}
body.page-id-182 .rev-carousel-dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.2rem}
body.page-id-182 .rev-carousel-dot{
width:9px;height:9px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;
transition:background .2s,transform .2s;
}
body.page-id-182 .rev-carousel-dot.is-active{background:var(--green);transform:scale(1.25)}
@media(max-width:960px){
body.page-id-182 .rev-carousel-item{flex:0 0 calc(50% - .7rem);max-width:none}
}
@media(max-width:640px){
body.page-id-182 .rev-card{padding:1.6rem 1.4rem}
body.page-id-182 .rev-carousel-item{flex:0 0 88%;max-width:none}
body.page-id-182 .rev-carousel-arrow{width:34px;height:34px;font-size:1.1rem}
body.page-id-182 .rev-proof{padding:.5rem 1.1rem}
}
@media(prefers-reduced-motion:reduce){
body.page-id-182 .rev-carousel{scroll-behavior:auto}
}
/* =========================================================
PRIORITET 27 -- Retter et latent, allerede eksisterende
layout-hul i ".why-img" paa Kundetyper-siden (side-ID 193):
figure-elementet, som Gutenberg indsaetter mellem .why-img
og ![]()
, havde ingen defineret hoejde noget steds i denne
fil, saa img'ets height:100% kunne ikke resolve korrekt, og
billedet fyldte kun sin egen naturlige billedhoejde i stedet
for hele boksen -- med en blank hvid rest nedenunder. Kun
.why-img bruges udelukkende paa denne ene side, saa
rettelsen paavirker ingen andre sider.
========================================================= */
.why-img figure{height:100%}
.why-img .wp-block-image img{height:100%}
/* =========================================================
FASE 1A - PRIVAT BLOG-/GUIDESYSTEM (2026-09-12)
Nye, unikke klassenavne (.blog-...) - IKKE .cards/.card, som
allerede har flere indbyrdes modstridende definitioner andre
steder i denne fil (se rapport). Bruger samme farve-/afstands-
tokens (CSS-variabler) som resten af sitet, saa udseendet
matcher 100% uden at genbruge et risikabelt klassenavn.
Paavirker ingen eksisterende side, da disse klasser ikke findes
nogen andre steder i markup'et endnu.
========================================================= */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:2.4rem}
@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.blog-card-link{display:block;color:inherit;text-decoration:none}
.blog-card-thumb{height:190px;overflow:hidden;background:var(--mute)}
.blog-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.blog-card:hover .blog-card-thumb img{transform:scale(1.06)}
.blog-card-body{padding:1.5rem}
.blog-card-cat{display:inline-block;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700;color:var(--green);margin-bottom:.5rem}
.blog-card-body h3{font-size:1.15rem;color:var(--green-dark);font-weight:800;line-height:1.3;margin-bottom:.5rem}
.blog-card-body p{color:var(--grey);font-size:.94rem;line-height:1.55;margin-bottom:.8rem}
.blog-card-date{color:var(--grey);font-size:.82rem}
.blog-article-header{max-width:760px;margin:3rem auto 0;text-align:center}
.blog-article-header h1{font-size:clamp(2rem,4.5vw,2.8rem);color:var(--green-dark);font-weight:800;line-height:1.18;margin:.9rem 0 1rem}
.blog-article-meta{color:var(--grey);font-size:.92rem}
.blog-article-thumb{max-width:900px;margin:2.2rem auto 0}
.blog-article-thumb img{width:100%;height:auto;border-radius:var(--radius);display:block}
.blog-article-body{max-width:720px;margin:2.2rem auto 0;padding-bottom:1rem;color:var(--text);font-size:1.05rem;line-height:1.75}
.blog-article-body h2{font-size:1.5rem;color:var(--green-dark);font-weight:800;margin:2.2rem 0 1rem}
.blog-article-body h3{font-size:1.2rem;color:var(--green-dark);font-weight:700;margin:1.6rem 0 .8rem}
.blog-article-body p{margin-bottom:1.2rem}
.blog-article-body ul,.blog-article-body ol{margin:0 0 1.2rem 1.4rem}
.blog-article-body li{margin-bottom:.5rem}
.blog-article-body a{color:var(--green);font-weight:600}
.blog-article-body a:hover{text-decoration:underline}
.blog-article-body img{max-width:100%;height:auto;border-radius:var(--radius)}
.blog-article-cta-wrap{max-width:720px;margin:0 auto 3.5rem}
.blog-cta{background:var(--mute);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.blog-cta p{margin:0;color:var(--text);font-weight:600}
.pagination,.navigation.pagination{margin-top:2.6rem;display:flex;justify-content:center;gap:.8rem}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .8rem;border-radius:9px;border:1px solid var(--line);color:var(--green-dark);font-weight:600;text-decoration:none}
.pagination .page-numbers.current{background:var(--green);color:#fff;border-color:var(--green)}
.pagination .page-numbers:hover{border-color:var(--green)}
@media(max-width:600px){
.blog-article-header{margin-top:2rem}
.blog-cta{flex-direction:column;align-items:flex-start}
}
/* ===== Compliance-opgave 2026-09-12: obligatorisk info-bekraeftelse
i tilbudsformularen (IKKE et samtykke-felt, se privatlivspolitik-
analysen). Unikke klassenavne - undgaar de eksisterende, flere
gange definerede "form.quote input"-regler laengere oppe i filen,
som ellers ville give en fuldbredde-boks i stedet for et afkrydsningsfelt. ===== */
form.quote .quote-consent{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:1.1rem;font-size:.85rem;font-weight:400;color:var(--text);line-height:1.45}
form.quote .quote-consent input[type="checkbox"]{width:auto;margin:.2rem 0 0;padding:0;flex:none;accent-color:var(--green)}
form.quote .quote-consent a{color:var(--green-dark);text-decoration:underline}
form.quote .quote-consent-text{flex:1 1 auto;min-width:0}
/* ===== Ydelsesvaelger (multi-select) i tilbudsformularen. Unikke
klassenavne - samme princip som .quote-consent ovenfor: undgaar de
mange eksisterende "form.quote input"/"form.quote label"-regler
laengere oppe i filen. ===== */
form.quote fieldset.quote-services{border:0;margin:0 0 1rem;padding:0;min-width:0}
form.quote fieldset.quote-services legend{display:block;width:100%;padding:0;margin-top:0;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.3rem}
form.quote .services-select{position:relative;margin:0;background:transparent;border:0;border-radius:0;overflow:visible}
form.quote .services-select summary::after{content:none}
form.quote .services-select summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--mute);color:var(--text);font-size:1rem;font-weight:400;line-height:normal;font-family:inherit;cursor:pointer;box-sizing:border-box}
form.quote .services-select summary::-webkit-details-marker{display:none}
form.quote .services-select summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
form.quote .services-select-chevron{width:9px;height:9px;flex:none;border-right:2px solid var(--green-dark);border-bottom:2px solid var(--green-dark);transform:rotate(45deg);transition:transform .15s ease;margin-top:-4px}
form.quote .services-select[open] .services-select-chevron{transform:rotate(-135deg);margin-top:2px}
form.quote .services-select-panel{position:absolute;z-index:20;top:calc(100% + .4rem);left:0;right:0;max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem;box-sizing:border-box}
form.quote .service-option{display:flex;align-items:center;gap:.6rem;padding:.6rem .6rem;margin:0;border-radius:8px;font-size:.92rem;font-weight:400;color:var(--text);cursor:pointer}
form.quote .service-option:hover{background:var(--mute)}
form.quote .service-option input[type="checkbox"]{width:auto;margin:0;padding:0;flex:none;accent-color:var(--green)}
form.quote .service-option input[type="checkbox"]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
form.quote fieldset.quote-services.invalid .services-select summary{border-color:#B3261E}
@media(max-width:480px){
form.quote .services-select-panel{max-height:220px}
}
/* ===== Tabel i blogartikler (Fase 1B, Artikel 7). Fundet ved test:
en almindelig uden styling er bredere end mobile viewports
og giver horisontal overflow. Tabellen goeres til sit eget
scrollbare omraade paa smalle skaerme, i stedet for at presse hele
sideslayoutet ud i bredden. Kun anvendt i selve artikelteksten. ===== */
.blog-article-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
.blog-article-body table th,.blog-article-body table td{padding:.6rem .8rem;border:1px solid var(--line);text-align:left;white-space:normal}
.blog-article-body table thead th{background:var(--mute);color:var(--text);font-weight:600}