/* Theme Name: 360 Bygningsdrift Theme URI: https://bygningsdrift.dk/ Description: Child theme til Hello Elementor. Designet "Drift": egne PHP-skabeloner, mørkt forankret layout, ydelser som tabel. Elementor bruges kun til tilbudsformularen. Author: - Template: hello-elementor Version: 3.0.0 Text Domain: bygningsdrift */ /* ═══════════════════════════════════════════════════════════════ DESIGNSYSTEM "DRIFT" — 30-08-2026 Erstatter den forrige forside/servicedesign fuldstaendigt. De tre ting bureauet reagerede paa var ikke farverne: 1. HERO'EN. Hver eneste side aabnede med et stockfoto i fuld bredde, en moerkegroen gradient ovenpaa og centreret hvid tekst. Moenstret er fra 2012 og daterer et website mere end noget andet enkeltvalg. Nu: ren moerk flade, typografien staar for sig, og fotoet er et selvstaendigt felt med sin egen billedtekst. 2. FOTOKORTENE. 23 ydelser vist som fotokort kraever 23 gode fotos. Vi har otte brugbare. Resten var stock der ikke passede til emnet. Nu baerer TABELLEN informationen — navn, omfang, typisk aftale — og fotos bruges kun de steder, hvor der findes et rigtigt et. 3. INGEN STRUKTUR. Alt var centrerede kasser i ét baand, med bloede hjoerner og bloede skygger overalt. Nu: ét gitter, hårde kanter (3 px), hårfine linjer, og monolabels der siger hvad man ser paa. Specets rammer er uroerte: samme groenne udgangspunkt, sand som lys flade, orange KUN til CTA og markoerer, mindst 80 px sektionsafstand. ═══════════════════════════════════════════════════════════════ */ :root{ /* Moerke flader. Specets #2C5F2D er en MIDTgroen — den blev grumset som stor flade. Den lever videre som accentfarve; fladerne er dybere og koeligere, saa hvid tekst faar luft. */ --nat:#0F1E16; --nat-2:#16291E; --nat-3:#1D3527; --nat-4:#0B1710; /* Lyse flader. To toner, der skifter fast. Den gamle side havde fire i vilkaarlig raekkefoelge, og hvid stoedte op mod hvid. */ --lys:#F3F2ED; --varm:#EFE8DB; /* sommerhus: varmere, jf. specets audience cue */ --kold:#EBEDE8; /* ejendomsservice: samme lyshed, koeligere */ --paper:#FFFFFF; /* Den ANDEN lyse flade skifter med grenen. Specet: "Give the Sommerhus section a warmer accent than Ejendomsservice — same palette, different weighting. Visitors should feel which side of the business they're on without reading the nav." Én variabel goer det paa hele sitet. */ --flade-2:var(--varm); --ink:#141A16; --ink-soft:#57615A; /* 5.7:1 paa --lys */ --line:#DAD8D0; --line-stark:#C4C1B7; --line-lys:rgba(255,255,255,.15); --green:#2C5F2D; /* specets primaerfarve — accent, ikke flade */ /* Sommerhusgrenens accent. #B4552A gav kun 4.03:1 paa den varme flade og faldt for AA paa monolabels (11 px). #A54D24 giver 4.67:1. */ --terra:#A54D24; --orange:#E07A2F; /* specet: KUN CTA */ --orange-lys:#EC9152; --paa-orange:#171713; /* moerk tekst paa orange: 6.1:1. Hvid gav 3.0:1. */ --display:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace; --wrap:1300px; --gutter:clamp(20px,4vw,44px); --sek:clamp(72px,8.5vw,124px); --r:3px; --header-h:82px; /* holdes i sync af bd.js */ --gren:var(--green); /* overskrives pr. gren paa og pr. sektion */ } /* Grenens accentfarve OG dens anden flade. Saettes ét sted; alt der bruger --gren og --flade-2 foelger med. */ .gren-b2b{--gren:var(--green);--flade-2:var(--kold)} .gren-b2c{--gren:var(--terra);--flade-2:var(--varm)} /* ── Reset ───────────────────────────────────────────────────── Hello Elementors egen reset er slaaet fra i functions.php, fordi den ogsaa stylede .site-header/.site-main, som vi ikke bruger. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--lys); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* INGEN overflow-x:hidden paa . Den stod her som sikkerhedsnet mod de kant-til-kant-paneler, men den SKJULER vandret overloeb i stedet for at fjerne det: indholdet bliver klippet af, og document.scrollWidth bliver ved med at vaere lig med viewporten — saa a11y-kontrollen, der maaler praecis det, melder "ingen overloeb" paa en side der er klippet. Fejlen skal kunne ses. */ img,svg,video{max-width:100%;display:block} img{height:auto} a{color:inherit} p,figure,blockquote{margin:0} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,h5,h6{font-family:var(--display);margin:0;font-weight:600;text-wrap:balance} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} /* Fokusringen er IKKE orange. Orange mod den lyse flade giver 2.68:1 og falder for WCAG 1.4.11 (3:1 for fokusindikatorer) — en fejl man ikke opdager ved at kigge, kun ved at maale. Ringen tager i stedet fladens modsaetning: moerk paa lyst, hvid paa moerkt. */ :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px} .top :focus-visible,.stribe :focus-visible,.afsnit :focus-visible, .hero :focus-visible,.shoved :focus-visible,.sektion-nat :focus-visible, .cta :focus-visible,.bund :focus-visible,.mobilmenu :focus-visible, .skinnekort :focus-visible,.panel-b2b:focus-visible{outline-color:#fff} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} /* Ankerspring maa ikke lande under den klaebende header. */ [id]{scroll-margin-top:calc(var(--header-h) + 24px)} /* ── Skjult, men laesbart for skaermlaesere ────────────────────── */ .skjult{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .spring{position:absolute;left:-9999px} .spring:focus{ left:12px;top:12px;z-index:300;position:fixed; background:var(--nat);color:#fff;padding:12px 18px;border-radius:var(--r); } /* ═══ TYPOGRAFI ════════════════════════════════════════════════ */ h1{ font-size:clamp(2.15rem,4.4vw,3.95rem); line-height:1.03;letter-spacing:-.035em;font-weight:600; } /* Stedangivelsen er en del af H1 (soegeordet skal blive staaende), men den skal ikke veje lige saa meget som ydelsen. */ h1 em{font-style:normal;font-weight:400;color:var(--ink-soft);display:block} h2{font-size:clamp(1.8rem,3.1vw,2.75rem);line-height:1.07;letter-spacing:-.032em} h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.022em} .lead{ font-size:clamp(1.03rem,1.2vw,1.17rem);line-height:1.6; color:var(--ink-soft);max-width:48ch;margin-top:24px; } .lys{color:rgba(255,255,255,.78)} .mono-lbl{ display:block;font-family:var(--mono); font-size:.71rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--gren); } /* Paa moerk bund: .55 er nedre graense for 4.5:1 ved denne stoerrelse. */ .mono-lbl.lys{color:rgba(255,255,255,.62)} /* ── Manglende indhold ───────────────────────────────────────── Skal kunne ses paa afstand af baade os og bureauet — men ikke ligne en systemfejl for kunden. Hårfin orange streg, ingen kasse. */ .mangler{ color:#8A5A12; /* 5.3:1 paa --lys */ border-left:2px solid var(--orange); padding:6px 0 6px 16px; margin:1em 0; font-size:.95rem; max-width:62ch; } .sektion-nat .mangler,.cta .mangler{color:#F0C48A;border-left-color:var(--orange)} .bd-placeholder{ background:#FFE9B8;color:#6E4100; font-family:var(--mono);font-size:.9em; padding:0 .3em;border-bottom:2px dotted var(--orange); } /* ── Knapfladen ──────────────────────────────────────────────── Den primaere knap var en orange plade med naesten sort tekst. To ting var galt: en maettet orange i det format konkurrerer med overskriften i stedet for at pege paa den, og moerk tekst paa orange laeser som en advarselsetiket, ikke som en invitation. Nu tager knappen fladens MODSAETNING — creme paa moerk bund, naesten sort paa lys. Kontrasten bliver hoejere end orangen nogensinde gav (14:1 mod 6:1), og orangen bliver frigjort til det den er god til: smaa markoerer. Variablerne arves, saa en knap i en moerk sektion selv finder ud af hvad den skal vaere. */ :root{ --knap-flade:#12241B; --knap-tekst:#F6F4EE; --knap-hover:#1F3D2A; } .stribe,.top,.mobilmenu,.hero,.shoved,.sektion-nat,.cta,.bund, .panel-b2b,.skinnekort,.kontaktkort,.cta-form{ --knap-flade:#F4F1E8; --knap-tekst:#12211A; --knap-hover:#FFFFFF; } /* ── Berøringsmål ────────────────────────────────────────────── WCAG 2.5.8 (AA) kraever 24x24 px. Links midt i en saetning er formelt undtaget, men telefonnummer og e-mail er sitets to vigtigste handlinger — de maa ikke vaere de sværeste at ramme. Maalt: e-mailen i CTA-blokken var 160x19. */ .cta-linjer a,.kontakt-linjer a,.sek-note a, .prosa a[href^="tel:"],.prosa a[href^="mailto:"], .bd-tel{display:inline-block;padding-block:4px;min-height:24px} /* ═══ KNAPPER ══════════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--body);font-weight:600;font-size:.94rem; text-decoration:none;padding:12px 20px;min-height:46px; border:1px solid transparent;border-radius:var(--r); transition:background-color .16s ease,color .16s ease,border-color .16s ease; } .btn-lg{padding:16px 28px;min-height:54px;font-size:1rem} .btn-fuld{width:100%} .btn-pri{background:var(--knap-flade);color:var(--knap-tekst)} .btn-pri:hover,.btn-pri:focus-visible{background:var(--knap-hover);color:var(--knap-tekst)} .btn-linje{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.04)} .btn-linje:hover,.btn-linje:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff} .link-pil{ display:inline-flex;align-items:center;gap:9px; font-weight:600;font-size:.95rem;text-decoration:none;color:var(--gren); padding-block:6px;border-bottom:1px solid currentColor; } .link-pil b{font-weight:400;display:inline-block;transition:transform .18s ease} .link-pil:hover b{transform:translateX(4px)} .lys .link-pil,.sektion-nat .link-pil{color:var(--orange)} /* ═══ DRIFTSBJÆLKE ═════════════════════════════════════════════ Aabningstid og daekningsomraade staar over headeren, ikke i sidefoden. Det er de to ting en ny besoegende tjekker foerst paa et lokalt servicefirma — og det giver siden sin "drift"-tone. */ .stribe{ background:var(--nat-3);color:rgba(255,255,255,.74); font-family:var(--mono);font-size:.72rem;letter-spacing:.04em; } .stribe-in{display:flex;justify-content:space-between;gap:16px;min-height:34px;align-items:center} .stribe span{display:flex;align-items:center;gap:8px} .prik{ width:6px;height:6px;border-radius:50%;flex:0 0 auto; background:#8CD09A;box-shadow:0 0 0 3px rgba(140,208,154,.18); } .prik-lukket{background:#9AA39D;box-shadow:none} /* ═══ HEADER ═══════════════════════════════════════════════════ */ .top{ position:sticky;top:0;z-index:100; background:var(--nat);color:#fff; } /* IKKE min-height:var(--header-h). Variablen saettes af bd.js ud fra headerens MAALTE hoejde — bruger man den ogsaa til at bestemme hoejden, opstaar der en loekke: hver maaling goer headeren et par pixel hoejere. Tallet her er sandheden; variablen er kun til dem der skal ligge under. */ .top-in{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);min-height:82px} /* Logoet er et bredt ordmaerke (ca. 2.9:1). Ved 32 px hoejde var det kun 93 px bredt og forsvandt ved siden af menuen. */ .mark{display:flex;align-items:center;flex:0 0 auto} .mark img{height:44px;width:auto} .mark-tekst{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em} .nav{flex:1} .nav > ul{display:flex;gap:clamp(14px,1.8vw,28px)} /* position:static — panelet nedenfor skal forankres til HEADEREN, ikke til det enkelte menupunkt. Ellers svaever det centreret under ordet og flugter ikke med noget andet paa siden. */ .nav > ul > li{position:static} .nav > ul > li > a{ display:flex;align-items:center;gap:7px; text-decoration:none;font-size:.93rem;font-weight:500; color:rgba(255,255,255,.84); padding-block:30px; border-bottom:2px solid transparent; } .nav > ul > li > a:hover, .nav > ul > li > a[aria-current]{color:#fff;border-bottom-color:var(--orange)} .nav .kaft{width:10px;height:6px;flex:0 0 auto;transition:transform .18s ease} .nav .har-under:hover .kaft,.nav .har-under:focus-within .kaft{transform:rotate(180deg)} /* Megamenu. Vises paa hover OG paa focus-within, saa den ogsaa kan naas med tastatur uden et script. */ /* Megamenuen ligger kant til kant under headeren og laegger sit indhold paa SAMME gitter som resten af siden — samme venstrekant som logoet og som hver eneste sektion nedenunder. */ .under{ position:absolute;top:100%;left:0;right:0; background:var(--nat-2); border-top:1px solid var(--line-lys); border-bottom:1px solid var(--line-lys); box-shadow:0 24px 60px -20px rgba(0,0,0,.55); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s ease,transform .16s ease,visibility .16s; } .har-under:hover .under,.har-under:focus-within .under{opacity:1;visibility:visible;transform:none} .under-in{ display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.68fr); gap:clamp(32px,5vw,72px);padding-block:30px 34px; } .under-intro .mono-lbl{color:var(--orange);margin-bottom:12px} .under-titel{ font-family:var(--display);font-weight:600;font-size:1.1rem; line-height:1.3;letter-spacing:-.02em;color:#fff;margin-bottom:14px; } .under-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 24px;align-content:start} .gren-b2c .under-liste{grid-template-columns:repeat(4,1fr)} .under-liste a{ display:block;text-decoration:none;font-size:.92rem; color:rgba(255,255,255,.78);padding:7px 10px;margin-left:-10px; border-radius:var(--r); } .under-liste a:hover{color:#fff;background:rgba(255,255,255,.07)} .top-cta{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex:0 0 auto} .tel{ font-family:var(--display);font-weight:600;font-size:1.03rem; letter-spacing:-.02em;text-decoration:none;white-space:nowrap; } .tel:hover{color:var(--orange-lys)} .burger{ display:none;width:46px;height:46px;flex:0 0 auto; border:1px solid rgba(255,255,255,.28);background:transparent; border-radius:var(--r);align-items:center;justify-content:center; } .burger-streger{display:flex;flex-direction:column;gap:5px} .burger-streger span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded="true"] .burger-streger span:first-child{transform:translateY(3.25px) rotate(45deg)} .burger[aria-expanded="true"] .burger-streger span:last-child{transform:translateY(-3.25px) rotate(-45deg)} /* ── Mobilmenu ────────────────────────────────────────────────── */ .mobilmenu{ background:var(--nat-2);border-top:1px solid var(--line-lys); max-height:calc(100dvh - var(--header-h));overflow-y:auto; padding-block:22px 28px; } .mm-gruppe + .mm-gruppe{margin-top:22px;border-top:1px solid var(--line-lys);padding-top:22px} .mm-hoved{ display:flex;align-items:center;justify-content:space-between;gap:12px; font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.024em; color:#fff;text-decoration:none;padding-block:8px; } .mm-hoved b{color:var(--gren);font-weight:400} .mm-gruppe.gren-b2b .mm-hoved b{color:var(--orange)} .mm-gruppe.gren-b2c .mm-hoved b{color:var(--orange-lys)} .mm-gruppe ul{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:6px} .mm-gruppe ul a{ display:block;text-decoration:none;color:rgba(255,255,255,.76); font-size:.94rem;padding:9px 0;min-height:24px; } .mm-enkelt{grid-template-columns:1fr} .mm-enkelt a{font-size:1.02rem;font-weight:500;color:#fff} .mm-tlf{ display:flex;flex-direction:column;gap:4px;text-decoration:none; margin-top:24px;padding:16px 18px; background:var(--orange);color:var(--paa-orange);border-radius:var(--r); } .mm-tlf .mono-lbl{color:rgba(23,23,19,.7)} .mm-tlf b{font-family:var(--display);font-size:1.4rem;letter-spacing:-.03em} /* ═══ HERO (forside) og SIDEHOVED (alle andre) ═════════════════ */ .hero,.shoved{background:var(--nat);color:#fff} /* Bunden var 0. Paa forsiden sluttede hero'en derfor PRAECIS hvor knapperne slutter, og publikumsgaflen begyndte med det samme — knapperne saa ud som om de sad fast paa kanten. */ .hero{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(56px,6.5vw,92px)} .shoved{padding-top:clamp(26px,3vw,40px);padding-bottom:clamp(18px,2.5vw,30px)} /* Uden databaand skal sidehovedet selv baere luften nedenunder. Baandet gav margin-top 40–68 px + 28 px padding; falder det vaek uden erstatning, staar knapperne klods op ad naeste sektion. */ .shoved--uden-data{padding-bottom:clamp(58px,6.5vw,96px)} .hero .mono-lbl,.shoved .mono-lbl{color:var(--orange);margin-bottom:22px} .hero h1 em,.shoved h1 em{color:rgba(255,255,255,.62)} .hero .lead,.shoved .lead{color:rgba(255,255,255,.78)} .krumme{ display:flex;gap:9px;align-items:center;flex-wrap:wrap; font-family:var(--mono);font-size:.72rem;letter-spacing:.04em; color:rgba(255,255,255,.62);margin-bottom:clamp(24px,3vw,40px); } .krumme a{text-decoration:none;color:rgba(255,255,255,.7);padding-block:5px} .krumme a:hover{color:#fff} .krumme .separator{color:rgba(255,255,255,.35)} .krumme span[aria-current]{color:rgba(255,255,255,.9)} /* Rank Math pakker sin broedkrumme i

*/ .krumme p{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0} .hero-net,.shoved-net{ display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(32px,4.5vw,72px);align-items:center; } /* Stockfotoerne er skudt i forskelligt lys og med forskellig maetning. En let daempning binder dem til den daempede palet i stedet for at lade et knaldblaat himmelparti tage opmaerksomheden fra overskriften. */ .hero-foto img,.shoved-foto img{filter:saturate(.86) contrast(1.03) brightness(.97)} /* Sider UDEN foto. De findes, fordi vi hellere vil have ingen billeder end forkerte — otte af de treogtyve ydelser har intet brugbart motiv. Aabningen skal derfor kunne staa selv: overskriften faar mere plads og et hak mere i stoerrelse, og manchetten laegger sig ved siden af i stedet for under. Det ser bevidst ud, fordi det ER bevidst. */ .shoved-net--bred{ grid-template-columns:minmax(0,1fr); padding-bottom:clamp(8px,1.5vw,20px); } .shoved-net--bred h1{font-size:clamp(2.3rem,4.8vw,3.9rem);max-width:16ch} .shoved-net--bred .lead{margin-top:24px;max-width:48ch} .shoved-net--bred .knapper{margin-top:30px} .knapper{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .hero-foto,.shoved-foto{ position:relative;border-radius:var(--r);overflow:hidden; background:#1B3226;margin:0; } .hero-foto{aspect-ratio:3/2} .shoved-foto{aspect-ratio:5/4} .hero-foto img,.shoved-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)} .hero-foto figcaption,.shoved-foto figcaption{ position:absolute;left:14px;bottom:14px; background:rgba(15,30,22,.82); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:7px 12px;border-radius:var(--r); } .hero-foto figcaption .mono-lbl,.shoved-foto figcaption .mono-lbl{color:rgba(255,255,255,.88);margin:0} /* ── Databånd ────────────────────────────────────────────────── */ .data{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-lys); margin-top:clamp(40px,4.5vw,68px); } .data li{padding:22px 24px 28px 0} .data li + li{border-left:1px solid var(--line-lys);padding-left:24px} .data .mono-lbl{color:rgba(255,255,255,.62);margin-bottom:11px} .data b{ font-family:var(--display);font-weight:500;font-size:1.03rem; letter-spacing:-.02em;line-height:1.3;color:#fff;display:block; } .mangler-inline{color:var(--orange-lys)!important} /* Databåndet paa forsiden staar paa lys bund UNDER gaflen, saa fladen ikke bliver ét langt moerkt stykke fra header til ydelsestabel. */ .baand{background:var(--paper);border-bottom:1px solid var(--line)} .data--lys{border-top:0;margin-top:0} .data--lys li{padding-block:24px 26px} .data--lys li + li{border-left-color:var(--line)} .data--lys .mono-lbl{color:var(--ink-soft)} .data--lys b{color:var(--ink)} /* ═══ PUBLIKUMSGAFFEL ══════════════════════════════════════════ To hele paneler, kant til kant. Ét moerkt, ét varmt: samme palet, forskellig vaegtning — specets "audience cue". */ .gaffel{display:grid;grid-template-columns:1fr 1fr} .panel{ position:relative;display:block;text-decoration:none; overflow:hidden;isolation:isolate;min-height:min(460px,60vh); } .panel-foto{position:absolute;inset:0;z-index:-2} .panel-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)} .panel:hover .panel-foto img{transform:scale(1.04)} /* Gradient og foto tegnes som to lag paa hver sit element, men fotoet ligger UNDER — ikke ved siden af — saa der ikke kan opstaa en kant mellem dem naar panelet skalerer. */ .panel::before{content:"";position:absolute;inset:0;z-index:-1} /* B2B: fotoet skal kunne SES. En 90-97 % scrim gjorde det til en plet under teksten. Nu er den tung forneden, hvor teksten staar, og let foroven, hvor billedet er. B2C: intet foto. Et lyst kort kraever 93-96 % daekning for at holde teksten laesbar, og ved den daekning er et foto ikke et foto laengere. De to paneler laeses nu som et bevidst par: ét fotografisk, ét fladt. */ .panel-b2b::before{ background:linear-gradient(175deg, rgba(15,30,22,.52) 0%, rgba(15,30,22,.86) 46%, rgba(15,30,22,.96) 100%); } .panel-b2c{background:var(--varm)} .panel-b2c .panel-foto{display:none} .panel-krop{ display:flex;flex-direction:column;justify-content:center; padding:clamp(32px,4vw,58px) var(--gutter); max-width:calc(var(--wrap) / 2);height:100%; } .panel-b2b .panel-krop{margin-left:auto} .panel-b2c .panel-krop{margin-right:auto} .panel-titel{ display:block;font-family:var(--display);font-weight:600; font-size:clamp(1.65rem,2.5vw,2.3rem);letter-spacing:-.032em;line-height:1.05; margin:13px 0; } .panel-tekst{display:block;font-size:1rem;line-height:1.6;max-width:40ch} .panel-liste{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 28px} .panel-liste i{ font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em; border:1px solid;border-radius:999px;padding:5px 11px; } .panel-gaa{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem} .panel-gaa b{font-weight:400;transition:transform .2s ease} .panel:hover .panel-gaa b{transform:translateX(5px)} .panel-b2b{color:#fff} .panel-b2b .mono-lbl{color:var(--orange)} .panel-b2b .panel-tekst{color:rgba(255,255,255,.78)} .panel-b2b .panel-liste i{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.82)} .panel-b2c{color:var(--ink)} .panel-b2c .mono-lbl{color:var(--terra)} .panel-b2c .panel-tekst{color:var(--ink-soft)} .panel-b2c .panel-liste i{border-color:var(--line-stark);color:var(--ink-soft)} .panel-b2c .panel-gaa{color:var(--terra)} /* ═══ SEKTIONER ════════════════════════════════════════════════ */ .sektion{padding-block:var(--sek)} .sektion-lys{background:var(--lys)} .sektion-varm{background:var(--flade-2)} .sektion-nat{background:var(--nat);color:#fff} .sektion-nat h2,.sektion-nat h3{color:#fff} .sektion--top0{padding-top:0} .sektion--bund0{padding-bottom:0} /* align-items:end saa rigtigt ud paa en skitse, hvor de to spalter var lige hoeje. I virkeligheden er broedteksten fire linjer og overskriften to, saa overskriften blev skubbet ned og efterlod 90-180 px tomt over sig — hver eneste sektion, hele vejen ned ad siden. Nu starter begge spalter foroven, og broedteksten faar en optisk indrykning svarende til monolabelen, saa dens foerste linje moeder overskriftens. */ .sek-hoved{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,72px);align-items:start; margin-bottom:clamp(36px,4vw,58px); } .sek-hoved-b{padding-top:clamp(0px,3vw,36px)} .sek-hoved--start{margin-bottom:0} .sek-hoved--start .sek-hoved-b{padding-top:0} .sek-hoved .mono-lbl{margin-bottom:15px} .sek-hoved-b > p{color:var(--ink-soft);max-width:56ch} .sek-hoved-b .link-pil{margin-top:18px} .sektion-nat .sek-hoved-b > p{color:rgba(255,255,255,.78)} .sek-note{margin-top:20px;font-size:.95rem;color:var(--ink-soft);max-width:34ch} .sek-note a{color:var(--gren);font-weight:600;white-space:nowrap} .tabel-titel{ font-size:1.15rem;letter-spacing:-.02em;color:var(--gren); margin:44px 0 4px; } .tabel-titel:first-of-type{margin-top:0} /* ═══ YDELSESTABEL ═════════════════════════════════════════════ Baerer selv informationen, saa den ikke er afhaengig af 23 fotos vi ikke har — og den ser rigtig ud baade med 3 og 14 raekker. */ .tabel{border-top:1px solid var(--line-stark)} .tabel-hoved,.raek{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) 152px 26px; gap:20px;align-items:center; } .tabel--uden-interval .tabel-hoved, .tabel--uden-interval .raek{grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) 26px} .tabel--uden-kort.tabel--uden-interval .tabel-hoved, .tabel--uden-kort.tabel--uden-interval .raek{grid-template-columns:minmax(0,1fr) 26px} .tabel-hoved{padding:11px 0;border-bottom:1px solid var(--line)} .tabel-hoved .mono-lbl{color:var(--ink-soft);font-size:.66rem} .raek{ padding:19px 0;border-bottom:1px solid var(--line);text-decoration:none; transition:background-color .16s ease,padding .22s cubic-bezier(.2,.7,.3,1); } .raek:hover,.raek:focus-visible{background:rgba(0,0,0,.03);padding-inline:12px} .rt{ font-family:var(--display);font-size:1.13rem;font-weight:600; letter-spacing:-.024em;line-height:1.25; display:flex;align-items:center;gap:10px;flex-wrap:wrap; transition:color .16s ease; } .rb{color:var(--ink-soft);font-size:.95rem} .rm{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);letter-spacing:.03em} .raek > b{font-weight:400;color:var(--gren);opacity:.4;justify-self:end;transition:opacity .16s ease,transform .16s ease} .raek:hover > b{opacity:1;transform:translateX(3px)} .raek:hover .rt{color:var(--gren)} .badge{ font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em; text-transform:uppercase;color:var(--gren);white-space:nowrap; border:1px solid currentColor;border-radius:2px;padding:2px 7px; } .tabel-mere{margin-top:22px} /* ═══ AFSNITSNAVIGATION ════════════════════════════════════════ Tilsyn er 950 ord og har tolv H2'er. Uden en oversigt skal man rulle for at finde ud af, om det man leder efter overhovedet staar der. Bjaelken klaeber lige under headeren. */ .afsnit{ position:sticky;top:var(--header-h);z-index:60; background:var(--nat-3);border-bottom:1px solid rgba(255,255,255,.1); } .afsnit-in{display:flex;align-items:center;gap:22px;min-height:52px} .afsnit .mono-lbl{color:rgba(255,255,255,.62);flex:0 0 auto} .afsnit ul{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;padding-right:var(--gutter)} .afsnit ul::-webkit-scrollbar{display:none} .afsnit a{ display:block;white-space:nowrap;text-decoration:none;font-size:.88rem; color:rgba(255,255,255,.76);padding-block:8px;border-bottom:2px solid transparent; } .afsnit a:hover,.afsnit a.aktiv{color:#fff;border-bottom-color:var(--orange)} /* ═══ BRØDTEKST + SKINNE ═══════════════════════════════════════ Linjelaengden saettes af GITTERET, ikke af en max-width. Med max-width alene stod de sidste ~380 px af baandet tomme, og siden saa ud som om noget var faldet ud af layoutet. */ .tekst-net{ display:grid;grid-template-columns:minmax(0,1fr) 330px; gap:clamp(36px,5vw,80px);align-items:start; } .tekst-net--smal{grid-template-columns:minmax(0,1fr)} .tekst-net--smal .prosa{max-width:68ch} .prosa > *{margin-block:0 1.1em} .prosa > *:last-child{margin-bottom:0} .prosa p{max-width:66ch;line-height:1.7} .prosa h2{ font-size:clamp(1.5rem,2.1vw,1.95rem);letter-spacing:-.03em;line-height:1.15; margin:2.2em 0 .65em; } .prosa > h2:first-child{margin-top:0} .prosa h3{ font-size:1.16rem;font-weight:600;letter-spacing:-.015em; margin:1.7em 0 .4em;color:var(--ink); } .prosa ul,.prosa ol{max-width:64ch;margin-bottom:1.5em} .prosa ul li,.prosa ol li{ position:relative;padding:9px 0 9px 28px; border-bottom:1px solid var(--line);color:var(--ink-soft); } .prosa ul li::before{ content:"";position:absolute;left:2px;top:17px; width:8px;height:8px;background:var(--gren); } .prosa ol{counter-reset:bd} .prosa ol li{counter-increment:bd;padding-left:34px} .prosa ol li::before{ content:counter(bd,decimal-leading-zero); position:absolute;left:0;top:9px; font-family:var(--mono);font-size:.75rem;color:var(--gren); } .prosa a{color:var(--gren);font-weight:500;text-underline-offset:3px} .prosa a:hover{color:var(--ink)} .prosa strong{font-weight:600;color:var(--ink)} .prosa img{border-radius:var(--r);margin-block:1.6em} .prosa blockquote,.prosa .bd-intro{ font-family:var(--display);font-weight:600; font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.03em;line-height:1.22; color:var(--ink);max-width:26ch; margin:1.8em 0;padding:18px 0 18px 22px;border-left:3px solid var(--gren); } .prosa blockquote p{max-width:none;font-size:inherit;line-height:inherit} /* ═══ FIGURER I BRØDTEKSTEN ════════════════════════════ Bureauet bad om flere billeder inde i teksten. En figur her er derfor IKKE et frit svaevende billede: den har en monoetiket og en billedtekst under en hårlinje — samme greb som fotofeltet i sidehovedet og før/efter-feltet. Uden det ville billederne se ud som om de var lagt ind af en anden end den, der har lavet resten af siden. Reglerne står EFTER .prosa img: de to selektorer vejer lige meget, og kilderækkefølgen afgør. Flyttes blokken op, får figurerne .prosa img's margin tilbage og står 1.6em for lavt. */ .prosa-figur{margin:2.4em 0 2.6em;max-width:none} .prosa > .prosa-figur:first-child{margin-top:0} .pf-ramme{ display:block;overflow:hidden;border-radius:var(--r); background:var(--nat-4);aspect-ratio:16/9; } .prosa-figur img{ display:block;width:100%;height:100%;object-fit:cover; margin:0;border-radius:0; filter:saturate(.9) contrast(1.02); } .prosa-figur figcaption{ display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 18px; margin-top:12px;padding-top:11px;border-top:1px solid var(--line); } .prosa-figur figcaption .mono-lbl{flex:0 0 auto;color:var(--gren);margin:0} .pf-tekst{ flex:1 1 240px;min-width:0; font-size:.9rem;line-height:1.55;color:var(--ink-soft); } /* ── Fotobånd ──────────────────────────────────────── To motiver i ULIGE bredde, men SAMME højde. Ens bredde gav to lige store felter uden retning, og forskellig højde stillede billedteksterne i to niveauer. Derfor sættes højden — ikke sideforholdet. */ .fotobaand .fb-net{ display:grid;grid-template-columns:1.55fr 1fr; gap:clamp(18px,2.4vw,32px);align-items:start; } .fotobaand .fb-net--en{grid-template-columns:minmax(0,1fr)} .fotobaand .prosa-figur{margin:0} .fotobaand .pf-ramme{aspect-ratio:auto;height:clamp(240px,29vw,400px)} .fotobaand .fb-net--en .pf-ramme{height:clamp(260px,34vw,460px)} /* På mørk flade skifter hårlinjen og teksten — ellers forsvinder både linjen og billedteksten ned i baggrunden. */ .sektion-nat .prosa-figur figcaption{border-top-color:var(--line-lys)} .sektion-nat .prosa-figur figcaption .mono-lbl{color:var(--orange-lys)} .sektion-nat .pf-tekst{color:rgba(255,255,255,.74)} /* ── Skinne ──────────────────────────────────────────────────── */ .skinne{position:sticky;top:calc(var(--header-h) + 72px);display:grid;gap:16px} .skinnekort{background:var(--nat);color:#fff;border-radius:var(--r);padding:28px 26px} /* KUN kortets egen overskrift-etiket. Uden > rammer reglen ogsaa .sk-note nederst i kortet og enhver etiket i en raekke inde i kortet — og en etiket med margin-bottom bliver IKKE centreret af align-items:center: flexbox centrerer MARGINBOKSEN, saa teksten lander halvdelen af marginen for hoejt. */ .skinnekort > .mono-lbl:first-child{color:var(--orange);margin-bottom:14px} .sk-top{font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.026em;margin-bottom:10px} .sk-tekst{font-size:.93rem;line-height:1.6;color:rgba(255,255,255,.76);margin-bottom:22px} .sk-tlf{ display:block;font-family:var(--display);font-weight:600;font-size:1.72rem; letter-spacing:-.035em;color:#fff;text-decoration:none;margin-bottom:18px; } .sk-tlf:hover{color:var(--orange-lys)} .sk-note{margin-top:14px;text-align:center;color:rgba(255,255,255,.62)!important} .skinne-tilbage{ display:block;text-decoration:none; border:1px solid var(--line-stark);border-radius:var(--r);padding:18px 20px; transition:border-color .16s ease,background-color .16s ease; } .skinne-tilbage b{display:block;margin-top:6px;font-family:var(--display);font-size:1.02rem;letter-spacing:-.02em} .skinne-tilbage:hover{border-color:var(--gren);background:rgba(0,0,0,.02)} .skinne-foto{border-radius:var(--r);overflow:hidden;position:relative} .skinne-foto img{width:100%;height:auto;filter:saturate(.95)} .skinne-foto figcaption{ position:absolute;left:0;right:0;bottom:0; background:rgba(15,30,22,.82);padding:8px 12px; } .skinne-foto figcaption .mono-lbl{color:rgba(255,255,255,.88)} /* Der hvor et billede burde have vaeret. Ikke en tegnet pladsholder — en note der siger hvad der mangler, i sidens eget sprog. */ .skinne-hul{ border:1px dashed var(--line-stark); border-radius:var(--r); padding:20px 18px; } .skinne-hul .mono-lbl{color:var(--orange);margin-bottom:10px} .skinne-hul p{font-size:.9rem;line-height:1.6;color:var(--ink-soft)} .skinne-hul em{font-style:normal;color:var(--ink)} /* ═══ FØR / EFTER ══════════════════════════════════════════════ */ .fe{margin:0} /* 16/9, ikke 2/1: kildebillederne er 3:2, og et fladere udsnit klippede toppen og bunden af motivet vaek — mest synligt paa pladsholderne, hvor teksten sad midt i. */ .fe-flade{ position:relative;overflow:hidden;border-radius:var(--r); aspect-ratio:16/9;background:#D8D5CC;touch-action:none;user-select:none; } .fe-billede{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Klip, ikke bredde: saa beholder billedet sin egen skala, og de to halvdele flugter pixel for pixel uanset hvor haandtaget staar. */ .fe-klip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--k)) 0 0)} .fe-haandtag{position:absolute;top:0;bottom:0;left:var(--k);width:2px;background:#fff;pointer-events:none} .fe-haandtag i{ position:absolute;top:50%;left:50%;translate:-50% -50%; width:44px;height:44px;background:#fff;border-radius:2px; box-shadow:0 4px 18px rgba(0,0,0,.28); } .fe-haandtag i::before,.fe-haandtag i::after{ content:"";position:absolute;top:50%;translate:0 -50%;border:5px solid transparent; } .fe-haandtag i::before{left:10px;border-right-color:var(--nat)} .fe-haandtag i::after{right:10px;border-left-color:var(--nat)} /* Rækkeviddefeltet ligger usynligt hen over hele fladen: musen traekker i det, tastaturet piletaster i det, og skaermlaeseren laeser det som en skyder. Ét element, tre betjeningsmaader. */ .fe-input{ position:absolute;inset:0;width:100%;height:100%; margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent; } .fe-input:focus-visible{opacity:0;outline:none} .fe-flade:focus-within{outline:2px solid var(--orange);outline-offset:3px} .fe-lbl{ position:absolute;bottom:16px;font-family:var(--mono); font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:#fff;background:rgba(15,30,22,.78);padding:6px 11px;border-radius:2px; pointer-events:none; } .fe-lbl-v{left:16px} .fe-lbl-h{right:16px} .fe figcaption{margin-top:14px;font-size:.9rem;color:var(--ink-soft)} /* ═══ GRUNDE / PROCES ══════════════════════════════════════════ */ .grunde{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-lys)} .sektion-lys .grunde,.sektion-varm .grunde{border-top-color:var(--line-stark)} .grunde li{padding:32px 32px 0 0} .grunde li + li{border-left:1px solid var(--line-lys);padding-left:32px} .sektion-lys .grunde li + li,.sektion-varm .grunde li + li{border-left-color:var(--line)} .grunde .mono-lbl{margin-bottom:20px} .grunde h3{margin-bottom:12px} .grunde p{color:rgba(255,255,255,.76);font-size:.97rem;max-width:38ch} .sektion-lys .grunde p,.sektion-varm .grunde p{color:var(--ink-soft)} /* ═══ FAQ ══════════════════════════════════════════════════════ */ .faq{border-top:1px solid var(--line-stark)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;display:flex;gap:18px;align-items:flex-start; padding:20px 0;font-family:var(--display);font-size:1.08rem;font-weight:600; letter-spacing:-.02em;line-height:1.3; } .faq summary::-webkit-details-marker{display:none} .faq summary span{flex:1} .faq summary::after{ content:"+";flex:0 0 auto;font-family:var(--mono);font-size:1.15rem; line-height:1;color:var(--gren);margin-top:3px; } .faq details[open] summary::after{content:"–"} .faq .svar{padding:0 0 22px;max-width:62ch} .faq .svar p{color:var(--ink-soft)} .faq .svar p + p{margin-top:.8em} /* ═══ PILLAR-LINKS ═════════════════════════════════════════════ */ .pillar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .pillar a{ display:inline-block;text-decoration:none;font-size:.92rem;font-weight:500; border:1px solid var(--line-stark);border-radius:var(--r);padding:10px 16px; transition:background-color .16s ease,color .16s ease,border-color .16s ease; } .pillar a:hover{background:var(--gren);border-color:var(--gren);color:#fff} /* ═══ CTA / TILBUD ═════════════════════════════════════════════ */ .cta{background:var(--nat-2);color:#fff;padding-block:var(--sek)} .cta h2{color:#fff;margin:15px 0 18px} .cta-net{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,76px);align-items:center} .cta-tlf{ display:block;font-family:var(--display);font-weight:600; font-size:clamp(1.9rem,2.8vw,2.5rem);letter-spacing:-.035em; color:#fff;text-decoration:none;margin:26px 0 4px;line-height:1; } .cta-tlf:hover{color:var(--orange-lys)} .cta-linjer{margin-top:22px;border-top:1px solid var(--line-lys)} .cta-linjer li{ display:flex;justify-content:space-between;gap:16px;align-items:center; min-height:44px;padding:8px 0;border-bottom:1px solid var(--line-lys); } .cta-linjer .mono-lbl{color:rgba(255,255,255,.62)} .cta-linjer b{font-weight:500;font-size:.94rem;text-align:right} .cta-linjer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)} .cta-form{background:var(--nat);border:1px solid var(--line-lys);border-radius:var(--r);padding:clamp(22px,3vw,32px)} /* ── Elementor-formularen ────────────────────────────────────── */ /* Elementors eget stylesheet vinder paa flere af de her, saa reglerne staar med containeren foran. Det er ogsaa derfor formularen er det eneste Elementor-element tilbage: én widget, ét sted at style. */ .cta-form .elementor-form .elementor-field-group{margin-bottom:16px;padding:0} .cta-form .elementor-form .elementor-field-label{ display:block;margin-bottom:7px; font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.72); } /* !important er ikke doven her, men noedvendigt: Elementor skriver en REGEL PR. ELEMENT — .elementor-353 .elementor-element-c8afe6d .elementor-field-group .elementor-field{background:#fff} — med hoejere specificitet end nogen fornuftig selektor i et tema. Alternativet var at laegge farverne ind i selve formular-dokumentet, men saa ville paletten findes to steder, og den ene ville blive glemt. */ .cta-form .elementor-form .elementor-field-textual, .cta-form .elementor-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper):not([type="checkbox"]):not([type="radio"]), .cta-form .elementor-form .elementor-select-wrapper select{ width:100%;font-family:var(--body);font-size:.98rem; color:#fff!important; background-color:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.24)!important; border-radius:var(--r);padding:13px 15px;min-height:48px;line-height:1.4; transition:border-color .16s ease,background-color .16s ease; } /* SELECT: Elementor pakker den i

. Wrapperen baerer BAADE .elementor-field og sin egen klasse, saa feltstilen ovenfor ramte den OGSAA — og resultatet var en kasse inde i en kasse. Wrapperen skal vaere gennemsigtig; det er selve