/* ============================================================ CENTRERET PREMIUM-LAYOUT - FORSLAG, ikke udgivet. Session 6, 17-10-2026 paa Stefans ordre: «I dag er det venstreorienteret. Mine andre premium-sites er centreret med flow og dynamik ned gennem siden - det vil jeg ogsaa have her. Headerens flugtning skal stadig holde.» DET HER ER ET OVERLAY, IKKE EN AENDRING AF BYGGEREN. Arket laegges oven paa `byg_enkel.py`s eget stilark paa preview-adressen. Der er ikke roert en linje i `scripts/byg_enkel.py` - den fil er i aktivt arbejde hos en anden session, og et forslag maa ikke staa i vejen for deres arbejde. Siger Stefan ja, foldes reglerne herunder ind i byggeren af den der ejer den paa det tidspunkt. HVAD DER FAKTISK ER VENSTREORIENTERET, MAALT FOERST (1440 px): main 1180 px bred, venstre 130, hoejre 1310 .vtekst 1180 px bred, venstre 130, hoejre 1310 <- flugter ALLEREDE .soejle.ind 620 px bred, venstre 146 <- her er fejlen .gitter 1148 px bred, venstre 146 Soejlen er altsaa IKKE problemet: sitet er allerede en centreret 1180-beholder, og headeren flugter med den paa pixelen. Det der laeser som venstreorienteret er at SEKTIONERNES overskrifter ligger i en smal 620 px-blok klistret til venstrekanten, mens gitteret under dem spaender hele 1148. Oejet ser en lodret venstrekant og ingen midterakse. DERFOR CENTRERER DETTE ARK OVERSKRIFTSBLOKKEN - ikke beholderen, som allerede er centreret, og ikke brudteksten, som skal blive ved sin laesekant. ============================================================ */ /* ------------------------------------------------------------ 1. MIDTERAKSEN. `.soejle` er LAESESPEJLET (62ch) - den bliver, for en linjelaengde paa 1148 px er ulaeselig. Det eneste der aendres er at den centreres i sin beholder i stedet for at haenge i venstrekanten. ------------------------------------------------------------ */ .flow .soejle.ind{margin-inline:auto} /* OVERSKRIFTER OG KORTE NOTER centreres. BRODTEKST GOER IKKE - en centreret brodtekst har en flosset venstrekant, og oejet mister startpunktet paa hver linje. Det er den fejl der goer et centreret layout billigt, og de premium-sites der goer det rigtigt (creatorsuites, boligprisgab) centrerer netop kun titler og CTA. Reglen er derfor navngiven pr. element og ikke et bredt `text-align:center` paa beholderen. */ .flow .sektionsmaerke, .flow .tilsalgnote, .flow .solgtnote, .sidetitel{text-align:center} /* `.indledning` STOD HER OG ER TAGET UD IGEN - maalt paa skaermbillede af trae.html. Den er ikke en underrubrik men et helt brodtekst-afsnit paa otte linjer, og centreret fik den en flosset VENSTREkant, saa oejet mistede startpunktet paa hver linje. Det er praecis den fejl der goer et centreret layout billigt - og den er lettere at begaa end at opdage, for i CSS'en ligner `.indledning` en titel. Reglen er derfor navngiven pr. element, og et nyt element skal MAALES ind, ikke gaettes ind. */ /* UNDERSIDERNE HAR EN ANDEN STRUKTUR END FORSIDEN, og det er grunden til at der staar to regler og ikke een. Forsiden er `main > .flow > section.katsektion > .soejle.ind`; Traeet, Levering og Haandvaerket er `main > .soejle > article.fort`. Foerste udgave af dette ark ramte kun forsiden - maalt paa skaermbillede af trae.html, hvor titlen blev centreret (den er `.sidetitel`) mens brodteksten blev haengende i venstrekanten med en tom hoejre halvdel. Det var ikke et halvt resultat, det var et FORKERT et: en centreret overskrift over en venstrestillet spalte ser ud som en fejl, ikke som et valg. LAESEKANTEN BLIVER. Teksten er fortsat venstrestillet inde i spalten - det er kun SPALTEN der flytter mod midten. */ main > .soejle{margin-inline:auto} /* HAARSTREGERNE SKAL FOELGE MED MOD MIDTEN. `.sektionsmaerke::before` og notenes `::after` er 40-54 px brede streger. Flytter teksten til midten mens stregen bliver i venstre kant, laeser den som en fejl, ikke som et valg. Bredden roeres ikke. DE TO STREGER KRAEVER HVER SIN REGEL, og det er maalt, ikke gaettet: * Notenes `::after` staar i flow. `margin-left/right:auto` centrerer den (maalt: 283 px i hver side i en 620 px foraelder). * Overskriftens `::before` er `position:absolute; top:0; left:0` - sat af byggerens `main h2::before`, IKKE af `.sektionsmaerke::before`, saa den ses foerst naar man slaar den beregnede stil op i stedet for at laese selektoren. Paa en absolut placeret kasse resolverer `auto`-margener til **0**, med mindre BAADE `left` og `right` er sat. Derfor virkede min foerste udgave paa noten og ikke paa overskriften - 283 px mod 0 px fra samme deklaration. Jeg proevede ogsaa `!important`: stadig 0 px. Det var beviset for at det ikke var en kaskade-sag, for en vinder-deklaration der intet flytter er en BRUGT-vaerdi-sag. En regel der kun virker paa halvdelen af sine selektorer er vaerre end ingen regel, for den ser ud til at virke. Derfor er de delt. */ /* NOTENS HAARSTREG HAR INGEN REGEL MERE, OG DET ER MAALT. Her stod `.flow .solgtnote::after, .flow .tilsalgnote::after{margin- left:auto;margin-right:auto}`, og den VIRKEDE: 283 px i hver side, maalt i dag. Senere samme dag gav den `auto/auto`, fordi noten havde faaet klassen `efterkort` - den staar nu EFTER kortene - og byggeren saetter selv `.tilsalgnote.efterkort::after{display:none}` i den position. Maalt paa begge sprogforsider: 1 note, altid `efterkort`, haarstregen altid `display:none`. Reglen var altsaa blevet UVIRKSOM uden at nogen af os havde aendret den - praecis det tilfaelde testfilens hoved beskriver. En uvirksom regel er ikke gratis: den ser ud som daekning. Derfor er den fjernet, og i stedet FALDER `tests/test_preview_centreret.js` den dag en note-haarstreg igen rendres - saa et menneske kan laegge centreringen tilbage i stedet for at opdage en venstrestillet streg paa den udgivne side. */ .flow .sektionsmaerke::before{left:0;right:0;margin-left:auto;margin-right:auto} /* ET GITTER MED FAERRE KORT END SPOR centreres. «Til salg» har i dag EET bord og tre spor, saa kortet haenger i venstrekanten under en centreret overskrift - samme skaevhed som haarstregerne, bare stoerre. `repeat(3,1fr)` kan ikke centreres med `justify-content`, fordi `1fr` aeder al plads; derfor skifter gitteret til EET spor i kortets egen bredde naar det er alene, og centreres som blok. Bredden er den BEREGNEDE kolonnebredde ved tre spor, saa kortet ikke pludselig bliver stort - den er afledt af gitterets eget gab og ikke et nyt tal. `:has()` goer reglen betinget af INDHOLDET, saa den slukker af sig selv den dag der kommer bord nummer to. */ .flow .gitter.enkel:has(> .kort:only-child){ grid-template-columns:calc((100% - 2 * var(--gitter-gab-vandret)) / 3); justify-content:center} /* ... MEN DEN SKAL TRAPPE NED SOM GITTERET SELV. Maalt 17-10 paa preview ved 375 px: kolonnesporet stod stadig paa 83,16 px, saa det enlige kort var 83 px bredt og billedet 83x62 - fordi regelen ovenfor hverken har media query eller konkurrent, og `:has()` + `.flow` slaar byggerens egen nedtrapning. Byggeren skriver selv hvorfor det er alvorligt: «STEFAN VISER SIDEN PAA EN IPHONE - gitteret SKAL falde til faerre kolonner paa smal skaerm». Brudpunkterne herunder er BYGGERENS egne (860/560 i `byg_enkel.py`), ikke nye tal, og divisoren foelger det antal spor byggeren har ved netop den bredde: to spor deler EET gab, eet spor deler ingen. Under 560 px er centreringen i oevrigt uden virkning - kortet fylder hele sporet. */ @media (max-width:860px){ .flow .gitter.enkel:has(> .kort:only-child){ grid-template-columns:calc((100% - var(--gitter-gab-vandret)) / 2)} } @media (max-width:560px){ .flow .gitter.enkel:has(> .kort:only-child){ grid-template-columns:1fr} } /* ------------------------------------------------------------ 2. RYTME NED GENNEM SIDEN. Skiftende sektionsafstand i stedet for samme afstand hele vejen - det er det greb de tre referencesites bruger til at skabe «flow» uden at skifte baggrundsfarve. Store sektioner faar luft, smaa faar mindre. ------------------------------------------------------------ */ .flow section.katsektion{padding-block:clamp(48px,6vw,96px) 0} /* STRAMMET 17-10-2026 PAA STEFANS ORDRE: «Afstanden mellem den tekst og Solgte borde er alt for stor - skaer whitespace ned. Reference for passende afstand er den mellem de nederste billeder under Solgte borde, kontaktteksten og footeren - den er god, roer den ikke.» Maalt paa fladen foer: note -> «Solgte borde» = 269 px, mens referencen han udpegede er 58 px (sidste kort -> note) og 84 px (note -> footer). De 89,6 px toppadding her var den stoerste enkeltpost. De to referencer nedenfor roeres IKKE - kun denne ene overgang. */ .flow section.katsektion + section.katsektion{padding-block:0 0} /* Og maerkets egen toppeluft i samme overgang: `.sektionsmaerke` baerer clamp(54px,7vw,92px) = 89,6 px ved 1280, OVEN I sektionens padding. Den gaelder kun den ANDEN sektion, saa forsidens foerste sektion og alle andre sider beholder sitets rytme uroert. */ .flow section.katsektion + section.katsektion .sektionsmaerke{margin-top:clamp(8px,1vw,14px)} /* Overskriftsblokken faar luft NEDAD, saa titlen ikke klistrer til gitteret. Tallet er afledt af sektionens egen rytme, ikke et nyt tal. */ .flow .soejle.ind{margin-bottom:clamp(20px,2.4vw,36px)} /* ------------------------------------------------------------ 3. DYNAMIK: SEKTIONEN AFSLOERES NAAR DEN KOMMER I SYNE. EEN klasse, lagt paa af en IntersectionObserver - samme billige greb som boligprisgab/hvorfor-v4. Ingen bibliotek, ingen animation pr. element. FAIL-OPEN, OG DET ER VIGTIGT: udgangspunktet er SYNLIGT. Klassen `.afsloer` saettes paa af scriptet, og foerst DA bliver elementet gennemsigtigt og venter paa sin tur. Uden JavaScript - eller hvis observeren fejler - staar siden derfor fuldt laesbar, i stedet for at vaere en tom hvid flade med indhold der aldrig bliver vist. Det modsatte (skjul i CSS, vis med JS) er den fejl der goer en side blank for en laeser med JS slaaet fra. ------------------------------------------------------------ */ /* Kalmly-tempo (18-10): 720 ms, 14 px, easeOutCubic. Forsinkelsen (--tur) baeres af SELVE transition-listen, saa hover-egenskaber paa samme element (translate/box-shadow) aldrig arver afsloeringens ventetid. */ .afsloer{opacity:0;transform:translateY(14px); transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),transform .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms)} .afsloer.set{opacity:1;transform:none} /* KORTENE KOMMER IND EFTER HINANDEN, ikke paa een gang. Forsinkelsen staar som en variabel scriptet saetter pr. kort ((i%3)*90 ms, som Kalmly), saa der ikke skal skrives en regel pr. plads. */ /* RESPEKTER BRUGERENS EGET VALG. `prefers-reduced-motion` er ikke en finesse - det er en tilgaengelighedsindstilling, og en bevaegelse der ignorerer den kan give kvalme hos den der har slaaet den til. Indholdet bliver, bevaegelsen gaar. */ @media (prefers-reduced-motion: reduce){ .afsloer,.afsloer.set,.gitter .kort.afsloer{ opacity:1;transform:none;transition:none;transition-delay:0ms} } /* ------------------------------------------------------------ 4. HEADERENS FLUGTNING - Stefans eksplicitte forbehold: «Headerens flugtning skal stadig holde i det nye layout.» Der staar ingen regel her, og det er med vilje: headeren og `main` deler allerede `--beholder` (begge maalt til 1180 px, venstre 130, hoejre 1310), og en ny bredde her ville skabe to sandheder om samme soejle - praecis den fejl boligprisgab har, hvor headeren er 1200 og heroen 940. Flugtningen maales i stedet EFTER hver bygning af `tests/test_preview_centreret.js`, som kraever 0,0 px afvigelse mellem `.vtekst` og `main` paa baade 390, 768 og 1440 px. ------------------------------------------------------------ */ /* 8. DE BREDE BILLEDBAAND SKAL BLEDE SYMMETRISK, IKKE MOD HOEJRE. `.billedbaand` er med vilje BREDERE end tekstsoejlen - byggerens egen regel er `width:min(1100px, calc(92vw - 2*var(--gyde)))`, altsaa «naesten hele vinduet». Paa det venstrestillede live-site starter soejlen i 130 px, saa baandet naaede 1230 af 1440 og passede. Centreringen flytter soejlen til 410, og saa naaede baandet 1510 - **70 px uden for vinduet, altsaa vandret rulning paa hele siden.** Maalt, ikke gaettet: fuldside-skuddet af undersiden blev 1510 px bredt paa et 1440 px vindue, mens live blev 1440. 20 elementer laa uden for kanten, og `ul.billedbaand` var det foerste. `margin-inline:auto` kan IKKE loese det: et barn der er bredere end sin foraelder har ingen fri plads at fordele. OG MARGIN KAN SLET IKKE BRUGES HER. Foerste forsoeg var `margin-left:50%` + `translateX(-50%)`. Transformen slog igennem, marginen gjorde ikke - maalt: `margin-left` beregnet til 0 px, og baandet landede paa -140 px, altsaa 140 px af det foerste billede uden for skaermen til venstre. Grunden er en kaskade jeg ville have tabt i tavshed: byggeren saetter `.fort .billedbaand{margin:clamp(26px,3.5vw,40px) 0 0}`, specificitet (0,2,0), mod min `main .billedbaand` (0,1,1). Det er PRAECIS samme asymmetri som haarstregen i afsnit 7: een deklaration i min regel vandt, den anden tabte, og resultatet lignede en halv virkning. Derfor bruges `position:relative` + `left:50%` i stedet - to egenskaber byggeren IKKE saetter paa baandet, saa rettelsen staar ikke i et specificitets-kaploeb jeg kan tabe ved naeste aendring af deres fil. `left:50%` maales mod foraelderens bredde (620 px) og giver +310; transformen traekker 550 tilbage. Baandet beholder sin bredde og sit udtryk, og det bleder nu lige meget til begge sider. Dette er den eneste regel i filen der blev fundet af et SKUD og ikke af en maaling jeg havde skrevet: testen maalte flugtning og centrering, men spurgte ikke om siden kunne rulles vandret. Det tjek findes nu. */ /* 8b. RETTET 18-10 (Stefan: «yderste billede til venstre er ikke centreret»). `transform:translateX(-50%)` herover TABTE til indgangs-animationen: `main article.fort .afsloer > *` (0,2,2) saetter transform:translateY(14px) og `.afsloer.set > *` transform:none. `left:50%` overlevede alene, saa baandet startede midt paa siden: maalt foer paa trae.html 1366 px ul 683..1603 (237 px uden for vinduet, scrollWidth 1603), 390 px ul 195..522. Centreringen ligger nu i den SELVSTAENDIGE egenskab `translate`, som animationens `transform` laegger sig oven i i stedet for at erstatte. */ main .billedbaand{position:relative;left:50%;translate:-50% 0} /* ============================================================ 9. TRAADEN - DET FLOW DER LEDER LAESEREN NED (Stefan 17-10) ============================================================ Stefan sagde ja til centreringen og bad om «laekkert flow, noget dynamisk der leder laeseren ned gennem sitet - linjer eller noget i den stil, tematisk inden for de farver sitet allerede bruger». FARVERNE ER SITETS EGNE, OG DE ER MAALT I BROWSEREN - ikke grebet ud af filen. `--linje` (#e0dbd2) i hvile, `--trae` naar laeseren har passeret. **Hex'en skal man ikke greppe sig til:** et grep paa det foerste `:root` gav mig #b8410d, mens browseren resolverer `--trae` til **#402018** paa den serverede side - der er altsaa en senere definition der vinder. Browserens vaerdi er den rigtige, og den er PRAECIS den byggerens egen haarstreg bruger (`main h2::before`, maalt rgb(64,32,24) ved opacity .55). Flowet tilfoejer derfor ingen ny farve - det forlaenger en streg der allerede var der. Ogsaa easing og varighed er sitets egne tokens (`--e-ud`, `--t-langsom`). DEN BAERER EN BETYDNING, IKKE BARE EN BEVAEGELSE: stregen er fuldt optegnet dér hvor laeseren er naaet til. Det er ikke pynt der flytter sig, men en laeseposition - og derfor er det ogsaa i orden at den staar stille naar brugeren har slaaet bevaegelse fra. INGEN VANDRET RULNING: hver streg er 1 px bred og ligger inden for sin egen overskrift, saa den kan ikke udvide dokumentet - maalt paa tre bredder i tests/test_preview_centreret.js. */ /* FOERSTE UDGAVE VAR EN GENNEMGAAENDE LODRET TRAAD I VINDUETS MIDTE, OG DEN VAR FORKERT. Den virkede efter alle maal - 1 px, centreret i 720, ingen vandret rulning, udfyldning der fulgte laesepositionen - og saa jeg saa paa skaermbilledet: den loeb lige IGENNEM broedteksten. Tekstsoejlen er 620 px bred og centreret om 720, saa en streg i vinduets midte rammer midt i saetningerne. Ingen maaling fangede det, fordi ingen af dem spurgte «ligger stregen oven i noget?». DEN RIGTIGE PLADS ER LUFTEN MELLEM AFSNITTENE. Byggeren tegner i forvejen en 40 px vandret haarstreg over hver `main h2`. Flowet er derfor bygget som en LODRET FORLAENGELSE af netop den streg, opad ind i afstanden foer overskriften - aldrig hen over tekst, fordi der pr. konstruktion er tom plads dér. Den arver haarstregens x-position, saa den staar centreret paa forsiden (hvor overskrifterne er centreret) og i venstre kant paa undersiderne (hvor de ikke er). Eet udtryk, to layouts, ingen kollision. FARVERNE ER SITETS EGNE: `--linje` i hvile, `--trae` naar laeseren har passeret. Samme accent som haarstregen selv. */ /* FJERNET 17-10-2026 (Stefan via relay 20.25Z): «De lodrette streger staar der stadig ... Fjern dem alle.» Forlaengelsen over hver `main h2` er taget ud; den vandrette 40 px haarstreg fra byggeren er urort. Det gamle streg-instrument saa den ikke, fordi det kun ledte efter pseudo-elementer der var hoejst 4 px HOeJE (vandrette) - denne er 1 px BRED og 26-52 px hoej. */ main h2::after{content:none} /* FIND VEJ OG KONTAKT FULGTE IKKE DET CENTREREDE LAYOUT (Stefans punkt 8: «Overskriften er centreret mens teksten er venstrestillet - foelg det centrerede layout fra resten af sitet»). Maalt 17-10-2026 ved 1280 px: broedteksten stod i x=80 (findvej) og x=127 (kontakt) og var 868 px bred, mens den paa /levering.html og /om.html staar i x=330 og er 620 px bred. Aarsagen er strukturel: de to sider er `main > .flow > .fladeb > .fladeindhold > .soejle.ind`, som hverken `main > .soejle` eller forsidens `main > .flow > section.katsektion > .soejle.ind` rammer. Selektoren er maalt til kun at findes paa netop de to sider (1 forekomst hver, 0 paa index, levering og trae). LAESEKANTEN BLIVER: teksten er stadig venstrestillet inde i spalten - det er kun spalten der flytter. RETTET I SAMME GREB: foerste forsoeg satte HELE spalten til `--laese` (620 px), og saa krympede rute-widgetens adressefelt fra 454 til 109 px (DA) og 76 px (EN) - maalt. De fire kontroller stod stadig paa een linje, men feltet var ubrugeligt. Derfor to bredder: broedteksten faar laesekanten, og widgetens kasse faar sin egen bredde - begge centreret. */ main > .flow > .fladeb > .fladeindhold > .soejle.ind{ max-width:900px;margin-inline:auto} main > .flow > .fladeb > .fladeindhold > .soejle.ind > p{ max-width:var(--laese);margin-inline:auto} /* WIDGETENS AFSNIT CENTRERES OGSAA, men i SIN egen bredde. Maalt: kassen er i forvejen `min(980px,100%)`, mens spalten er 1120 px - uden denne regel stod kassen i venstrekanten under en centreret overskrift og en centreret broedtekst. Bredden roeres IKKE: krympede vi den til laesekanten, faldt adressefeltet fra 469 til 109 px (DA) og 76 px (EN) - maalt foer rettelsen - og Stefans punkt 4 om fire kontroller paa EEN brugbar linje ville vaere brudt. */ section.ruteafsnit{max-width:980px;margin-inline:auto} /* OVERGANGS-GRADIENTEN MAA IKKE MALE HEN OVER OVERSKRIFTEN. `.fladeb::before` er en 80 px gradient paa `top:-80px`, der blender baandet op i sidebaggrunden. Da luften under overskriftsbaandet blev strammet (Stefans punkt 9), rykkede baandet 68 px op, og gradienten laa derefter fra y=448 til y=528 OVEN PAA en overskrift der staar 436-500: maalt paa skaermbillede, hvor «Find vej» var vaek paa naer en 12 px stump i toppen. `elementFromPoint` sagde H1 - et pseudo-element kan ikke rammes af hit-test, saa KUN billedet fangede det. Gradienten faar her praecis den plads der er mellem overskrift og baand, saa blendingen bevares. */ main > .flow > .fladeb::before{top:-28px;height:28px} /* RUTE-WIDGETTEN I ALMINDELIG SKRIFT (Stefan via relay 20.25Z, punkt 3: «VERSALER med spaerret skrift, DIN ADRESSE og BEREGN - almindelig skrift som resten af sitet»). `rute.css` er S2's byte-identiske kopi og roeres ikke; den saetter `text-transform:uppercase` + .06-.16em spaerring paa `label`, `button` og `.br-knap`. `main`-praefikset giver hoejere specificitet end baade rute.css og punkt 10's spaerring laengere oppe. */ main .bordmand-rute label, main .bordmand-rute button, main .bordmand-rute .br-knap{ text-transform:none;letter-spacing:normal;font-size:.9rem} /* RUTEKNAPPERNE PAA MOBIL (tavlepost 61910, «etiketter paa mobil-widgeten»). Maalt foer paa 390 px: gruppen er 265 px bred, og «Rute i bil» (97 px) og «Offentlig transport» (158 px) braekkede begge over to linjer, fordi rute.css saetter `white-space:normal` under 430 px. Under samme graense stables knapperne i fuld bredde, een linje hver. Desktop uroert. */ @container (max-width:429px){ main .bordmand-rute .br-gruppe-rute{flex-direction:column;align-items:stretch;gap:10px} main .bordmand-rute .br-gruppe-rute .br-knap{white-space:nowrap;width:100%;align-self:stretch} } /* FIND VEJ, ANDEN GANG (Stefan via relay 20.25Z): «broedteksten er venstrestillet under centreret overskrift, og paa mobil er overskriften klippet forneden». Maalt foer: `.findvejintro` 868 px bred i x=206 og text-align:start; widgetens tekstlinjer ligeledes start. Punkt 8's rettelse flyttede kun spalten - det var ikke nok. Nu centreres selve teksten i laesebredden. Formularen (etiket, felt, knapper) bliver venstrestillet; det er en formular, ikke broedtekst. Klipningen: paa 390 px stod H1 i y=290-330 og `.fladeb::before`- gradienten (top:-28px) malede hen over nederste del af bogstaverne - set paa skaermbillede. H1 loeftes over gradienten. */ main .findvejintro{max-width:var(--laese);margin-inline:auto;text-align:center} main .bordmand-rute .br-intro, main .bordmand-rute .rutenote, main .bordmand-rute .br-info, main .bordmand-rute .br-adresse{text-align:center;margin-inline:auto} /* 21:0xZ: aftalenoten under widgetten og widgetens svarlinje stod stadig text-align:start (maalt x=150) - centreres som resten af broedteksten. */ main .ruteafsnit .aftalenote{max-width:var(--laese);margin-inline:auto;text-align:center} main .bordmand-rute .br-svar{text-align:center} main h1{position:relative;z-index:2} /* PUNKT 2 (Stefan 17-10 18:5xZ): «De horisontale streger - fjern dem, han har bedt om det». Maalt foer paa forsiden, 1280 og 390: 40 px streg over hver sektionsoverskrift (`h2.sektionsmaerke::before`), 54 px streg over til salg- og solgt-noten (`.efterkort::before`) og en ramme over og under SOLGT-maerket (`.solgtflag span` border-top/-bottom). De to foerste ud. SOLGT-stregerne BLIVER (Stefan 17-10 19:xxZ: «SKAL vaere der, har hele tiden skullet vaere der») - roer ikke `.solgtflag span`. Understregningen af links i broedtekst bliver - den viser at det er et link. */ main h2::before, main .sektionsmaerke::before, main .tilsalgnote.efterkort::before, main .solgtnote.efterkort::before{content:none} /* Punkt 2, anden runde: de rene vandrette streger paa undersiderne - noegletal-baandet paa trae.html (over og under) og linjerne mellem faktaraekkerne paa hver bordside. Rammer (billeder, kontaktformular, Find vej-boksen) har streg paa alle fire sider og er ikke vandrette streger. */ main ul.noegletal{border-top:0;border-bottom:0} main ul.fakta li{border-bottom:0} /* PUNKT 4 (Stefan 17-10 18:5xZ): «Billederne af bordene til salg er ikke centreret». Maalt foer, forsiden 1280: billedet stod midt (L=R=466 px), men maal-linjen og prisen stod venstrestillet under det i x=466 - kortet saa skaevt ud. Kortets indhold centreres; et enkelt kort i gitteret centreres ogsaa paa bredder hvor gitteret har flere spalter. */ main .gitter.enkel{justify-content:center} main article.kort, main article.kort .dim, main article.kort .prislinje{text-align:center} /* HEADEREN PAA SAMME LODRETTE AKSE SOM SIDEN (Stefan 17-10 18:5xZ, punkt 3: «headeren mangler lodret flugtning»). Maalt foer: sitenavn, undertekst og menu stod venstrestillet ved x=80 (1280) / x=35 (390), mens alt i `main` er centreret om x=640 / x=195. Byggerens regler er `.vhead-a .vtekst ...`; `.vhead.vhead-a` giver en klasse mere, saa vi vinder uden !important. DA|EN-vaelgeren oeverst til hoejre roeres ikke. */ .vhead.vhead-a .vtekst{text-align:center} .vhead.vhead-a .vtekst .sidemenu nav{justify-content:center} /* FOOTEREN CENTRERET (Stefan 17-10 19:xxZ: «informationen ser ikke centreret ud»). Maalt foer: `.vfoot-regel` text-align start, teksten begyndte ved x=80 (1280) mens alt andet staar paa midteraksen x=640. */ .vfoot.vfoot-a .vfoot-tekst, .vfoot.vfoot-a .vfoot-regel{text-align:center} /* AFSTANDEN FRA HEADER TIL FOERSTE OVERSKRIFT ER EEN REGEL (Stefan 17-10). Den baeres af `main`s padding-top alene (46 px @1280, 30 px @390). Paa Traeet ligger H1 inde i `article.fort`, hvis margin-top (24 / 7,8 px) lagde sig oven i - 70 px mod 46 paa de andre sider. Derfor nulstilles foerste barn i spalten og dets foerste barn, saa intet element kan bidrage til afstanden. */ main > .soejle > :first-child, main > .soejle > :first-child > :first-child{margin-top:0} /* ============================================================ KALMLY-FLOW (Stefan 18-10-2026: «kopier kalmly.cc's layout-flow til alle seks sider»). Erstatter sponsortrack-lagene (Levering V4, Haandvaerket V1, Traeet V1, Kontakt V1, Find vej V1) og «Traeet som laeseforloeb», som Stefan afviste som tilfaeldige. Kilde: kalmly.cc - KUN flowet er kopieret: baand i fuld bredde med skiftende flade, py-16 sm:py-20 (64/80 px), smaa baand py-14 sm:py-16 (56/64 px), centreret spalte, en lille versal-overlinje med spaerring over hver overskrift, ens kort (rounded-3xl = 24 px, kant, p-6 sm:p-7, blod skygge, loeft ved hover, 3 spalter med gap-5 sm:gap-6), luft og indgang ved rulning, og et afslutningsbaand med sloerede farveklatter. Farver og skrift er bordmandens egne: papir, linned/sand-toner fra honning-skalaen og Cormorant Garamond + Inter. FULD BREDDE UDEN OMBYGNING: `border-image: ... fill 0//0 100vmax` maler flade ud til begge sider af et element i den smalle spalte. Det er ink-overflow, ikke scroll-overflow - ingen vandret rulning, og intet klippes (i modsaetning til box-shadow + clip-path). Baand moedes kant mod kant: margin 0, luften baeres af padding. ============================================================ */ :root{ --kf-papir:#fbf9f5; --kf-linned:#f4ebdf; --kf-sand:#f0e5d7; --kf-creme:#f2e6d9; --kf-honning:#ead9c6; --kf-dyb:#d9bc9c; --kf-blaek:#402018; --kf-daempet:#6b4a3a; --kf-kant:rgba(64,32,24,.10); /* Skygge-tokens efter Kalmlys soft/card/lift/glow, i traeets brune. */ --kf-skygge-blod:0 2px 20px -8px rgba(64,32,24,.16); --kf-skygge:0 1px 2px rgba(64,32,24,.04),0 10px 34px -14px rgba(64,32,24,.18); --kf-skygge-loeft:0 18px 48px -16px rgba(64,32,24,.28); --kf-skygge-glod:0 8px 38px -8px rgba(176,110,52,.34); --kf-ind:cubic-bezier(.22,.61,.36,1); --kf-farve:cubic-bezier(.4,0,.2,1); --kf-y:clamp(64px,8vw,80px); --kf-y-lille:clamp(56px,6vw,64px); --kf-r:24px; --kf-gab:clamp(20px,2vw,24px); --kf-ud:cubic-bezier(.16,1,.3,1); } main{padding-top:0;padding-bottom:0} .kf-baand, main .flow > section.katsektion, main > .soejle > .ojenbryn, main > .soejle > article.fort > .ftsoejle:not(:has(> section)), main > .soejle > article.fort > ul.noegletal, main > .soejle > article.fort > .ftsoejle > section, html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > *, main > .soejle.sidetop, main .flow > .fladeb{ --baand:var(--kf-linned); border-image:linear-gradient(var(--baand) 0 0) fill 0//0 100vmax; } /* -- Overlinjen (kalmly: font-mono text-xs tracking-[0.2em] uppercase mb-4) -- */ main .ojenbryn{display:flex;align-items:center;justify-content:center;gap:10px; margin:0;padding:0 0 16px .2em;max-width:none;font-family:var(--sans);font-size:12px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--trae-lys,#6b3a28);text-align:center} /* Optisk centrering (Stefan 18-10): `main p` har max-width:var(--laese), som gjorde forsidens overlinje 496 px bred og venstrestillet (63 px skaev). max-width:none foelger beholderen; padding-left .2em opvejer den sidste bogstavs letter-spacing, saa ruder + tekst staar paa midten. */ main .ojenbryn::before{content:"";width:6px;height:6px;flex:none;transform:rotate(45deg); background:var(--kf-dyb)} /* -- FORSIDEN: Til salg (linned) -> Solgte borde (sand) -> afslutning -- */ main .flow > section.katsektion{margin:0;padding:var(--kf-y) 0} main .flow > section.katsektion + section.katsektion{--baand:var(--kf-sand);padding-block:var(--kf-y)} main .flow > section.katsektion .sektionsmaerke{margin-top:0} main .gitter.enkel{column-gap:var(--kf-gab);row-gap:var(--kf-gab)} main .gitter.enkel > article.kort:not(.er-solgt){background:#fff;border:1px solid var(--kf-kant); border-radius:var(--kf-r);padding:12px 12px 22px;box-shadow:var(--kf-skygge-blod); transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),transform .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),translate .25s ease,box-shadow .25s ease,border-color .25s ease} main .gitter.enkel > article.kort .ramme{border-radius:16px;overflow:hidden} main .gitter.enkel > article.kort.er-solgt .ramme{border-radius:var(--kf-r);box-shadow:var(--kf-skygge-blod); transition:box-shadow .25s ease} main .gitter.enkel > article.kort.er-solgt{transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),transform .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),translate .25s ease} @media (hover:hover){ main .gitter.enkel > article.kort:hover{translate:0 -3px} main .gitter.enkel > article.kort:not(.er-solgt):hover{border-color:var(--kf-dyb)} main .gitter.enkel > article.kort:not(.er-solgt):hover, main .gitter.enkel > article.kort.er-solgt:hover .ramme{box-shadow:var(--kf-skygge)} } main .efterkort{max-width:42rem;margin-left:auto;margin-right:auto;font-size:1.06rem;line-height:1.7} /* -- TOPBAANDET paa undersiderne: overlinje + titel (+ indledning, noegletal) -- */ main > .soejle > .ojenbryn, main > .soejle > article.fort > .ftsoejle:not(:has(> section)), main > .soejle > article.fort > ul.noegletal, main > .soejle.sidetop{--baand:var(--kf-creme)} main > .soejle:not(.sidetop) > .ojenbryn{padding-top:var(--kf-y)} main > .soejle > article.fort{margin-top:0} main > .soejle > article.fort > .ftsoejle:not(:has(> section)){margin:0;padding-bottom:var(--kf-y)} main > .soejle > article.fort:has(> ul.noegletal) > .ftsoejle:not(:has(> section)){padding-bottom:28px} main > .soejle > article.fort h1.sidetitel, main > .soejle.sidetop h1.sidetitel{margin-top:0} main > .soejle > article.fort p.indledning{max-width:42rem;margin-left:auto;margin-right:auto; font-size:clamp(1.06rem,1.4vw,1.18rem);line-height:1.7} main > .soejle.sidetop{padding:var(--kf-y) 0 var(--kf-y-lille);margin:0 auto;text-align:center} main > .soejle > .ojenbryn{max-width:none;margin-left:0;margin-right:0} main > .soejle.sidetop h1.sidetitel{text-align:center;margin-bottom:0} /* Noegletal: tre ens kort (rounded-3xl) i topbaandet. */ main article.fort > ul.noegletal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--kf-gab);margin:0;padding:0 0 var(--kf-y);list-style:none} main article.fort > ul.noegletal li, main article.fort > ul.noegletal li+li{margin:0;padding:12px 12px clamp(22px,2.2vw,26px);text-align:center; display:flex;flex-direction:column;gap:7px; overflow-wrap:normal;hyphens:manual;transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),transform .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),translate .25s ease,box-shadow .25s ease,border-color .25s ease} main article.fort > ul.noegletal .tal{font-family:var(--serif);font-size:clamp(22px,2.2vw,27px); line-height:1.15;color:var(--kf-blaek)} /* Hvert noegletal faar sit eget foto oeverst (Stefan 18-10): egne billeder, ingen kaelder i baggrunden. Filerne kopieres af byg_enkel (_NOEGLETAL_BILLEDER). */ main article.fort > ul.noegletal li::before{content:"";display:block;aspect-ratio:16/10;margin:0 0 14px; border-radius:16px;background:var(--kf-sand) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(64,32,24,.06)} main article.fort > ul.noegletal li:nth-child(1)::before{background-image:url("fortaelling/egen-flammet-knast.jpg");background-image:image-set(url("fortaelling/egen-flammet-knast.webp") type("image/webp"),url("fortaelling/egen-flammet-knast.jpg") type("image/jpeg"));background-position:50% 35%;background-size:175% auto} /* filen har hvide kanter indbagt; zoom skaerer dem vaek */ main article.fort > ul.noegletal li:nth-child(2)::before{background-image:url("fortaelling/sissoo-helt-trae.jpg");background-image:image-set(url("fortaelling/sissoo-helt-trae.webp") type("image/webp"),url("fortaelling/sissoo-helt-trae.jpg") type("image/jpeg"));background-position:30% 50%} main article.fort > ul.noegletal li:nth-child(3)::before{background-image:url("fortaelling/egen-kerneved-splint.jpg");background-image:image-set(url("fortaelling/egen-kerneved-splint.webp") type("image/webp"),url("fortaelling/egen-kerneved-splint.jpg") type("image/jpeg"))} main article.fort > ul.noegletal .tal,main article.fort > ul.noegletal .note{padding-inline:10px} @media (max-width:639px){main article.fort > ul.noegletal{grid-template-columns:1fr} main article.fort > ul.noegletal li::before{aspect-ratio:2/1}} /* -- FORTAELLE-AFSNITTENE (Traeet, Levering): eet baand pr. afsnit, papir og linned skiftes. Nummeret over overskriften ER overlinjen. -- */ main article.fort{counter-reset:fortafsnit} main article.fort > .ftsoejle:has(> section){margin:0} main article.fort > .ftsoejle > section{counter-increment:fortafsnit;position:relative; margin:0;padding:var(--kf-y) 0;--baand:var(--kf-papir);background:none;box-shadow:none;border-radius:0} main article.fort > .ftsoejle > section:nth-of-type(even){--baand:var(--kf-linned)} main article.fort > .ftsoejle > section > h2{font-family:var(--serif);font-size:clamp(30px,3.4vw,38px); font-weight:500;line-height:1.15;letter-spacing:-.005em;margin:0 0 22px;color:var(--kf-blaek);text-align:center} main article.fort > .ftsoejle > section > h2::before{content:counter(fortafsnit,decimal); display:block;position:static;width:auto;height:auto;background:none;margin:0 0 16px; font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--trae-lys,#6b3a28)} /* Kilder som fodnote (Stefan 18-10): lille, daempet, taet. */ main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child{font-size:13px;line-height:1.55; padding:30px 0 34px;color:var(--kf-daempet)} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child > h2::before{content:none} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child > h2{font-family:var(--sans); font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px;color:var(--kf-daempet)} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child :is(p,li){font-size:inherit;line-height:inherit;margin-block:0 4px} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child ul.punkter li{padding-left:14px} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child ul.punkter li::before{width:3px;height:3px;top:.7em;left:2px;background:var(--kf-dyb)} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child a{color:inherit;text-decoration-color:rgba(64,32,24,.3);text-underline-offset:3px} main article.fort > .ftsoejle > section > p{line-height:1.75} /* Billeder: eet format pr. raekke, skygge i stedet for kant. */ main article.fort .billedbaand img, main article.fort .ftfigur img{height:auto;aspect-ratio:3/2;object-fit:cover;border:0; border-radius:var(--r-foto,12px);box-shadow:var(--kf-skygge)} main article.fort .ftfigur{max-width:none;margin-top:clamp(22px,3vw,32px)} main article.fort .billedbaand:has(> li:nth-child(2):last-child){width:min(920px,calc(92vw - 2*var(--gyde)))} @media (min-width:700px){ main article.fort .billedbaand li:first-child:nth-last-child(2), main article.fort .billedbaand li:first-child:nth-last-child(2) ~ li{ flex-basis:calc((100% - var(--baand-gap))/2);max-width:calc((100% - var(--baand-gap))/2)} } /* Hardhed som soejler (klassen saettes af centreret.js; uden JS en liste). */ main article.fort ul.janka{display:grid;gap:8px;max-width:none;margin-top:20px} /* Janka som tynde skinner i paletten (Stefan 18-10): spor i blaek 9 %, fyld i --kf-dyb, sheesham (top) i traeets egen farve. */ main article.fort ul.punkter.janka li{margin:0;padding:8px 0 16px;border-radius:0; background:linear-gradient(var(--kf-dyb),var(--kf-dyb)) no-repeat 0 100%/calc(var(--v,1)*100%) 5px, linear-gradient(rgba(64,32,24,.09),rgba(64,32,24,.09)) no-repeat 0 100%/100% 5px; font-variant-numeric:tabular-nums;color:var(--kf-daempet)} main article.fort ul.janka li::before{content:none} main article.fort ul.janka li.top{background-image:linear-gradient(var(--trae-lys),var(--trae-lys)), linear-gradient(rgba(64,32,24,.09),rgba(64,32,24,.09));color:var(--kf-blaek);font-weight:600} main article.fort ul.punkter li::before{width:6px;height:6px;border-radius:50%;top:.62em;left:4px;background:var(--trae-lys)} main article.fort ul.punkter li{padding-left:22px} /* -- HAANDVAERKET (om.html, flad tekstside): creme topbaand, arbejdslisten som seks kort i linned, tilskaering i sand. -- */ html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > *{margin:0;padding-bottom:1.05em;display:flow-root;--baand:var(--kf-creme)} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > .ojenbryn{padding-bottom:16px;display:flex} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > h1{padding-bottom:28px} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > p:has(+ p + ul):not(h2 ~ *){padding-bottom:var(--kf-y)} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > :is(p:has(+ ul),ul):not(h2 ~ *){--baand:var(--kf-linned)} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > p:has(+ ul):not(h2 ~ *){padding-top:var(--kf-y);padding-bottom:28px;text-align:center} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *){ --kf-bred:min(64rem,calc(100vw - 32px));width:var(--kf-bred);max-width:none;margin-inline:calc((100% - var(--kf-bred))/2); display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kf-gab); list-style:none;padding:4px 0 var(--kf-y);counter-reset:arbejde} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li{counter-increment:arbejde; margin:0;padding:clamp(28px,2.8vw,34px) clamp(22px,2.2vw,28px);font-family:var(--serif);font-size:clamp(20px,1.9vw,23px);line-height:1.3; color:var(--kf-blaek);text-align:center;transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),transform .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),translate .25s ease,box-shadow .25s ease,border-color .25s ease} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li::first-letter{text-transform:uppercase} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li::before{ content:counter(arbejde,decimal);display:block;position:static;width:auto;height:auto; background:none;border-radius:0;margin:0 0 14px;font-family:var(--sans);font-size:12px;font-weight:600; letter-spacing:.2em;color:var(--trae-lys,#6b3a28)} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > :is(h2,h2 ~ *){--baand:var(--kf-sand)} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > h2{padding-top:var(--kf-y);padding-bottom:20px; font-family:var(--serif);font-size:clamp(30px,3.4vw,38px);font-weight:500;line-height:1.15;text-align:center} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > :last-child{padding-bottom:var(--kf-y)} @media (max-width:639px){ html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *){grid-template-columns:1fr} } @media (hover:hover){ main article.fort > ul.noegletal li:hover, html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li:hover{translate:0 -3px;box-shadow:var(--kf-skygge-loeft);border-color:var(--kf-dyb)} } /* -- KONTAKT og FIND VEJ: creme topbaand, indholdet i linned, formularen som eet kort. -- */ main .flow > .fladeb{padding-top:var(--kf-y);padding-bottom:var(--kf-y);background:none} main .flow > .fladeb::before{content:none} main section.kontakt.bred{padding:clamp(20px,2.2vw,28px)} /* KOMPAKT KONTAKT (stefan-feedback-6 pkt 10): hele formularen inkl. knappen skal ses uden at scrolle ved 1366x768 og 1440x900. KUN layout - navne, id, action og validering er uroerte. Felterne staar side om side, beskeden er lavere, og noten deler raekke med knappen. Banneret er lavere paa netop denne side, fordi formularen er sidens indhold. */ html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv label{margin-top:10px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv .rk3 label{margin-top:0} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv input:not([type="hidden"]){padding-top:11px;padding-bottom:11px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv textarea{height:84px;min-height:84px;padding-top:11px;padding-bottom:11px} @media (min-width:861px){ html:has(link[rel="canonical"][href$="/kontakt.html"]) .vhead-a img{height:clamp(220px,17vw,260px)} html:has(link[rel="canonical"][href$="/kontakt.html"]) main > .sidetop{padding-top:clamp(28px,2.6vw,40px);padding-bottom:clamp(18px,1.8vw,26px)} html:has(link[rel="canonical"][href$="/kontakt.html"]) main .flow > .fladeb{padding-top:0} /* Krav 22 (18-10): Find vej faar samme stramme top som Kontakt - 225 px fra h1 til foerste tekst var for meget. */ html:has(link[rel="canonical"][href$="/findvej.html"]) main > .sidetop{padding-top:clamp(28px,2.6vw,40px);padding-bottom:clamp(18px,1.8vw,26px)} html:has(link[rel="canonical"][href$="/findvej.html"]) main .flow > .fladeb{padding-top:0} html:has(link[rel="canonical"][href$="/kontakt.html"]) main .flow .soejle.ind{max-width:none;width:min(64rem,calc(100vw - 32px))} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > .rk3, html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > label:not(.lokke), html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > .svar{grid-column:1 / -1} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > .under{grid-column:1;margin:14px 0 0} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > button{grid-column:2;margin-top:14px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > .lokke{position:absolute;margin:0} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > .svar:empty{margin:0} } /* MARKANT MINDRE KONTAKT (Stefan 18-10, over 10 gange): et smallere kort, lavere felter, mindre luft. Formularen + knappen skal ses uden at rulle ved 1366x768. Beskeden hoejst 4 linjer. Betalingslinjen er fjernet fra siden - den hoerer til under Levering. */ html:has(link[rel="canonical"][href$="/kontakt.html"]) main section.kontakt.bred{padding:18px 22px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv label{margin-top:8px;font-size:14px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv input:not([type="hidden"]){padding-top:7px;padding-bottom:7px;margin-top:4px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv textarea{height:76px;min-height:76px;max-height:104px;padding-top:7px;padding-bottom:7px;margin-top:4px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > .under{font-size:14px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > button{padding:10px 22px} @media (min-width:861px){ html:has(link[rel="canonical"][href$="/kontakt.html"]) main .flow .soejle.ind{width:min(46rem,calc(100vw - 32px))} html:has(link[rel="canonical"][href$="/kontakt.html"]) main > .sidetop{padding-top:22px;padding-bottom:14px} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > .under{margin:10px 0 0} html:has(link[rel="canonical"][href$="/kontakt.html"]) .hv > button{margin-top:10px} } /* == EET KORT FOR HELE SITET (Stefan 18-10): stille haandvaerk, ikke SaaS. Varmt papir, fin kant, bloed skygge og en tynd indre ramme som et trykt kort. Bruges af noegletal (Traeet), arbejdslisten (Haandvaerket), Leverings tre veje og kontaktformularen - ret det HER, ikke pr. side. == */ main article.fort > ul.noegletal li, html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li, html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section, main section.kontakt.bred{ background:linear-gradient(180deg,#fffdf9 0%,var(--kf-papir) 100%); border:1px solid rgba(64,32,24,.12);border-radius:var(--kf-r); outline:1px solid rgba(64,32,24,.06);outline-offset:-7px; box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--kf-skygge-blod)} /* Kortets ene accent: en kort linje i --kf-dyb under nummeret. */ html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li::after{ content:"";display:block;width:28px;height:1px;margin:16px auto 0;background:var(--kf-dyb)} /* -- LEVERING: tre veje side om side, ikke pakker (Stefan 18-10). «Bordet skilles ad» staar inde i kort 03 som tillaeg (S12 L2, `_levering_skilles_ind_i_kort3`). -- */ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle:has(> section){ --kf-bred:min(70rem,calc(100vw - 32px));width:var(--kf-bred);max-width:none; margin-inline:calc((100% - var(--kf-bred))/2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--kf-gab);align-items:stretch;padding:var(--kf-y) 0;--baand:var(--kf-linned); border-image:linear-gradient(var(--baand) 0 0) fill 0//0 100vmax} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section{ border-image:none;padding:clamp(28px,2.6vw,34px) clamp(22px,2.2vw,28px);text-align:left} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section > h2{ font-size:clamp(25px,2.4vw,29px);text-align:left;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid rgba(64,32,24,.12)} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section > h2::before{margin-bottom:12px} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section > :is(p,ul){max-width:none;font-size:15.5px;line-height:1.65} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section ul.punkter{margin-top:12px} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort .rygrad{display:none} /* Drikkepenge (Stefan 29-10): egen sektion under de tre veje, centreret som topbaandet. */ main > .soejle > article.fort > .ftsoejle.drikkepenge{padding-top:var(--kf-y);text-align:center} main article.fort > .ftsoejle.drikkepenge > p{max-width:42rem;margin-inline:auto} @media (max-width:860px){ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle:has(> section){grid-template-columns:1fr; --kf-bred:min(36rem,calc(100vw - 32px))} } /* -- INDGANGEN: et baand toner aldrig selv ind (saa ville fladen blinke); det er indholdet I baandet der stiger op. -- */ main article.fort .afsloer{opacity:1;transform:none} main article.fort .afsloer > *{opacity:0;transform:translateY(14px); transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms),transform .72s cubic-bezier(.22,.61,.36,1) var(--tur,0ms)} main article.fort .afsloer > :nth-child(2){--tur:.12s} main article.fort .afsloer > :nth-child(n+3){--tur:.24s} main article.fort .afsloer.set > *{opacity:1;transform:none} main article.fort > ul.noegletal.afsloer > li:nth-child(2){--tur:.1s} main article.fort > ul.noegletal.afsloer > li:nth-child(3){--tur:.2s} main article.fort section.afsloer ul.janka li{background-size:0 5px,100% 5px;transition:background-size 1s var(--kf-ud) .2s} main article.fort section.afsloer ul.janka li:nth-child(2){transition-delay:.3s} main article.fort section.afsloer ul.janka li:nth-child(3){transition-delay:.4s} main article.fort section.afsloer ul.janka li:nth-child(4){transition-delay:.5s} main article.fort section.afsloer.set ul.janka li{background-size:calc(var(--v,1)*100%) 5px,100% 5px} /* -- AFSLUTNINGSBAANDET (kalmly: relative overflow-hidden py-20 sm:py-32, sloerede klatter, max-w-2xl, serif text-4xl sm:text-5xl). -- */ main > section.afslutning{position:relative;overflow:hidden;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);box-sizing:border-box; padding:clamp(80px,11vw,128px) 24px;background:var(--kf-honning);text-align:center} main > section.afslutning::before, main > section.afslutning::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none} main > section.afslutning::before{top:-140px;left:50%;width:min(680px,140vw);height:420px; margin-left:calc(min(680px,140vw)/-2);background:#f8efe4;filter:blur(120px);opacity:.95} main > section.afslutning::after{bottom:-120px;right:8%;width:min(520px,110vw);height:300px; background:var(--kf-dyb);filter:blur(110px);opacity:.6} main > section.afslutning .afslutning-indhold{max-width:42rem;margin:0 auto} main > section.afslutning h2{font-family:var(--serif);font-size:clamp(36px,5vw,50px);font-weight:500; line-height:1.1;letter-spacing:-.01em;margin:0 0 28px;color:var(--kf-blaek);text-align:center} main > section.afslutning p{margin:0 auto;font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.7; color:var(--kf-daempet);text-align:center} main > section.afslutning p.afslutning-handling{display:flex;flex-wrap:wrap;align-items:center; justify-content:center;gap:14px 28px;margin-top:38px} main > section.afslutning a.knap-primaer{display:inline-block;padding:15px 30px;border-radius:999px; /* Farven fra «Send besked» (Stefan 29-10-2026: lysere, samme paa alle knapper) */ background:#7a4a2c;color:#f2e6d9;font-family:var(--sans);font-size:15px;font-weight:500; letter-spacing:.02em;text-decoration:none;box-shadow:0 10px 24px -12px rgba(64,32,24,.55); transition:translate .2s ease,background-color .2s ease,box-shadow .2s ease} main > section.afslutning a.knap-primaer:hover{translate:0 -1.5px;background:#643a22; box-shadow:var(--kf-skygge-loeft)} main > section.afslutning a.knap-primaer:focus-visible, main > section.afslutning a.link-sekundaer:focus-visible{outline:2px solid var(--kf-blaek);outline-offset:4px} main > section.afslutning a.link-sekundaer{font-family:var(--sans);font-size:15px;color:var(--kf-blaek); text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} @media (prefers-reduced-motion:reduce){ main article.fort .afsloer > *{opacity:1!important;transform:none!important;transition:none!important} main article.fort ul.janka li{background-size:calc(var(--v,1)*100%) 5px,100% 5px!important;transition:none!important} main .gitter.enkel > article.kort,main > section.afslutning a.knap-primaer{transition:none!important} } @media print{ main article.fort .afsloer,main article.fort .afsloer *{opacity:1!important;transform:none!important} main > section.afslutning::before,main > section.afslutning::after{display:none} } /* Afslutningsbaandet moeder foden kant mod kant (foden har ellers 102 px top). */ main:has(> section.afslutning) + .vfoot{margin-top:0} /* ============================================================ KALMLY-EFFEKTER (Stefan 18-10-2026): Kalmlys bevaegelser i bordmandens traefarver. Alt herunder er enten (a) lagt paa af centreret.js (`.kf-*`-klasser og glod-laget), saa siden uden JS staar som foer, eller (b) rene hover-/farveovergange. prefers-reduced-motion slukker ALT i bunden af blokken - ogsaa hover-loeft og blød rulning. ------------------------------------------------------------ */ /* -- Glod-laget i toppen: to aandende klatter + fem stoevkorn i lyset. Indsat af JS mellem banner-billedet og teksten (z-index 1, under scrim'en i ::after), aria-hidden. -- */ .vhead-a .kf-glod{position:absolute;inset:0;z-index:1;pointer-events:none} .vhead-a .kf-klat{position:absolute;display:block;border-radius:50%; mix-blend-mode:screen;opacity:.85; animation:kf-aande 7s ease-in-out infinite} .vhead-a .kf-klat-a{left:6%;top:-38%;width:min(560px,52vw);height:120%; background:radial-gradient(closest-side,rgba(240,196,140,.42),rgba(240,196,140,0)); filter:blur(40px)} .vhead-a .kf-klat-b{right:4%;bottom:-46%;width:min(460px,44vw);height:110%; background:radial-gradient(closest-side,rgba(214,150,92,.38),rgba(214,150,92,0)); filter:blur(36px);animation-delay:2.5s} .vhead-a .kf-stoev{position:absolute;display:block;width:3px;height:3px;border-radius:50%; left:var(--x);top:var(--y);background:#f8ead6; box-shadow:0 0 6px 1px rgba(248,226,196,.55);opacity:var(--b); animation:kf-glimt 5s ease-in-out infinite;animation-delay:var(--d)} @keyframes kf-aande{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}} @keyframes kf-glimt{0%,100%{opacity:var(--b)}50%{opacity:calc(var(--b)*.4)}} /* -- Parallax: lagene flyttes af JS (translate3d, max 30 px). Banneret skaleres lidt op fra bunden, saa en flytning nedad aldrig aabner en stribe over billedet. Selve toppens hoejde roeres ikke. -- */ /* Krav 33 (18-10): virker fra foerste tegning (scripting:enabled), ikke foerst naar centreret.js har sat kf-intro/kf-parallax - ellers hopper toppen paa forsiden. */ @media (scripting:enabled){ html .vhead-a > img{scale:1.1;transform-origin:50% 100%;will-change:transform} html .vhead-a .kf-glod, html .vhead-a .vtekst{will-change:transform} /* -- Indlaesning: navn, undertitel og menu toner op 0/120/240 ms. -- */ @keyframes kf-op{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} html .vhead-a .vtekst > .sitenavn, html .vhead-a .vtekst > .under, html .vhead-a .vtekst > .sidemenu, html .vhead-a .vhead-sprog{animation:kf-op .72s var(--kf-ind) both} html .vhead-a .vtekst > .under{animation-delay:.12s} html .vhead-a .vtekst > .sidemenu{animation-delay:.24s} html .vhead-a .vhead-sprog{animation-delay:.24s} } /* -- Knap-loeft (Kalmly .btn-lift: -1.5 px, 0,2 s). -- */ main .bordsoejle a.knap, main form.hv button{transition:translate .2s ease,background-color .2s ease,box-shadow .2s ease,filter .2s ease} @media (hover:hover){ main .bordsoejle a.knap:hover, main form.hv button:not([disabled]):hover{translate:0 -1.5px;box-shadow:var(--kf-skygge-glod)} main .bordsoejle a.knap:hover{transform:none} } /* -- Farveovergange paa links (150 ms, Kalmlys transition-colors). -- */ .vhead-a nav a, .vhead-a .sitenavn a, main .tilbage a, main a.link-sekundaer, main .afslutning a, .vfoot a{transition:color .15s var(--kf-farve),border-color .15s var(--kf-farve), text-decoration-color .15s var(--kf-farve),opacity .15s var(--kf-farve)} main a.link-sekundaer:hover{text-decoration-color:var(--kf-dyb)} main .tilbage a:hover{color:var(--trae-lys,#6b3a28)} /* -- Rulning: html staar paa auto som hos Kalmly (S12 TILLAEG 2, 18-10: smooth paa html animerede ogsaa programmatisk rulning). Bloed rulning kun ved klik paa et ankerlink - det goer centreret.js. Toppen er ikke fastlaast, saa lidt luft over sektionen er nok. -- */ html{scroll-behavior:auto} main section[id],main [id].ruteafsnit,main #skriv{scroll-margin-top:16px} /* -- prefers-reduced-motion: INTET bevaeger sig. Strengere end Kalmly: ogsaa hover-loeft, farveovergange og bloed rulning er vaek. -- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .vhead-a .kf-glod{display:none} .vhead-a .kf-klat,.vhead-a .kf-stoev{animation:none} .vhead-a > img,.vhead-a .vtekst{transform:none!important;scale:none!important} html .vhead-a .vtekst > *,html .vhead-a .vhead-sprog{animation:none!important;opacity:1;transform:none} .afsloer,.afsloer.set{opacity:1!important;transform:none!important;transition:none!important} main .gitter.enkel > article.kort,main .gitter.enkel > article.kort .ramme, main article.fort > ul.noegletal li, html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li, main > section.afslutning a.knap-primaer,main .bordsoejle a.knap,main form.hv button, .vhead-a nav a,.vhead-a .sitenavn a,main .tilbage a,main a.link-sekundaer,main .afslutning a{ transition:none!important;translate:none!important} } /* Reserve the route widget height until rute.js fills it (stops the jump on Find vej) */ #bordmand-rute:empty{min-height:776px} @media (max-width:1100px){#bordmand-rute:empty{min-height:766px}} @media (max-width:480px){#bordmand-rute:empty{min-height:1000px}} @media (max-width:420px){#bordmand-rute:empty{min-height:1038px}} /* ============================================================ KALMLY-EFFEKTER, ANDEN PORTION (18-10-2026). Opgoerelsen staar i docs/kalmly-bevaegelser-18-10.md. Samme kontrakt som foerste portion: alt der toner noget ind, saettes af centreret.js (kf-*-klasser), saa siden uden JS staar fuldt synlig; resten er hover-/fokusovergange. Intet flytter layout: kun opacity, transform/translate og box-shadow. ============================================================ */ @keyframes kf-ind{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes kf-billede{from{opacity:.35}to{opacity:1}} /* -- Galleriskift (Kalmly animate-fade-in ved trinskift): det store foto toner roligt frem, naar en miniature vaelges. Klassen saettes af JS. */ .helt img.kf-skift{animation:kf-billede .45s var(--kf-ind,ease-out) both} /* -- Svarbeskeden under formularen (Kalmly .chat-message, 0,3 s). -- */ main form.hv .svar.kf-ny{animation:kf-ind .3s ease-out both} /* -- Fokus i felterne (Kalmly input:focus-ring + transition-shadow). -- */ main form.hv input:not([type=hidden]),main form.hv textarea,main form.hv select{ transition:border-color .2s ease,box-shadow .2s ease} main form.hv input:not([type=hidden]):focus,main form.hv textarea:focus,main form.hv select:focus{ box-shadow:0 0 0 2px rgba(107,58,40,.22)} @media (hover:hover){ /* -- Kortets prislinje faar traeets dybe farve ved hover (group-hover). */ main .gitter.enkel > article.kort .prislinje{transition:color .25s ease} main .gitter.enkel > article.kort:hover .prislinje{color:var(--trae-lys,#6b3a28)} /* -- Kort-loeft paa galleriets miniaturer (Kalmly .card-lift, -2 px). */ .galleri button{transition:translate .25s ease,box-shadow .25s ease} .galleri button:hover{translate:0 -2px;box-shadow:var(--kf-skygge,0 10px 34px -14px rgba(64,32,24,.18))} } @media (prefers-reduced-motion:reduce){ .helt img.kf-skift,main form.hv .svar.kf-ny{animation:none} main form.hv input,main form.hv textarea,main form.hv select, main .gitter.enkel > article.kort .prislinje,.galleri button{transition:none!important;translate:none!important} } /* -- SOLGT-BAANDET under Til salg (widget-screening 18-10, punkt 1 A+C) -- Smaa fotos af solgte borde i een vandret raekke der scroller sidelaens; hvert foto linker til bordets side. Ingen tidspaastand (se byg_enkel.py). */ main .solgtbaand{margin-top:clamp(28px,3.5vw,48px);text-align:center} main .solgtbaand .baandmaerke{margin:0 auto 10px;max-width:none;font-family:var(--sans);font-size:12px; font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--trae-lys,#6b3a28)} main .baandraekke{display:flex;gap:10px;margin:0;padding:4px 2px 10px;list-style:none;overflow-x:auto; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin} main .baandraekke li{flex:0 0 132px;margin:0;padding:0;scroll-snap-align:start} main .baandraekke a{display:block;border-radius:10px;overflow:hidden;box-shadow:var(--kf-skygge-blod); outline-offset:3px} main .baandraekke img{display:block;width:132px;height:99px;object-fit:cover} main .baandraekke a:focus-visible{outline:2px solid var(--kf-blaek)} main .baandsaetning{margin:8px auto 0;max-width:42rem;font-size:1rem;line-height:1.6;color:#402018} main .baandsaetning a{color:inherit;text-underline-offset:3px} main .baandsaetning .baandalle{white-space:nowrap;margin-left:.3em} @media (hover:hover){main .baandraekke a:hover{box-shadow:var(--kf-skygge)}} /* -- LYSBOKS paa bordsidens billeder (widget-screening 18-10, punkt 2) -- Halvgennemsigtig sort flade, billedet i fuld stoerrelse, #402018 paa luk-knappen. Ingen animationer. Opbygges af premium.js (lysboks()). */ .helt img.lb-kan{cursor:zoom-in} .helt img.lb-kan:focus-visible{outline:2px solid var(--kf-blaek);outline-offset:4px} html.lb-aaben,html.lb-aaben body{overflow:hidden} .lysboks{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.86);padding:56px 16px} .lysboks[hidden]{display:none} .lysboks .lb-billede{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; border-radius:6px;background:#111} .lysboks button{position:absolute;display:flex;align-items:center;justify-content:center; width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer; font:400 32px/1 var(--sans,system-ui),sans-serif;color:#fff;background:rgba(255,255,255,.14)} .lysboks button[hidden]{display:none} .lysboks .lb-luk{top:12px;right:12px;background:#402018;color:#fff} .lysboks .lb-forr{left:12px;top:50%;margin-top:-24px} .lysboks .lb-naeste{right:12px;top:50%;margin-top:-24px} .lysboks button:hover{background:rgba(255,255,255,.26)} .lysboks .lb-luk:hover{background:#5a2e22} .lysboks button:focus-visible{outline:2px solid #fff;outline-offset:3px} .lysboks .lb-taeller{position:absolute;bottom:14px;left:0;right:0;margin:0;max-width:none;text-align:center; font:500 14px/1 var(--sans,system-ui),sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.85)} @media (max-width:600px){.lysboks{padding:64px 0}.lysboks .lb-billede{border-radius:0} .lysboks .lb-forr,.lysboks .lb-naeste{top:auto;bottom:6px;margin-top:0} .lysboks .lb-taeller{bottom:22px}} .lysboks .lb-vandmaerke{left:auto;max-width:none;font-size:clamp(13px,1.5vw,19px)} /* PILE PAA HOVEDBILLEDET (Stefan 29-10-2026). Bygges af premium.js (hovedpile()) kun naar bordet har flere fotos. Moerk trae-flade og guldtegn - samme par som kontaktknappen (--tk-ramme-moerk/--paa-banner). */ main .helt .hp-pil{position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center; width:52px;height:52px;margin-top:-26px;padding:0 0 4px;border:1.5px solid var(--paa-banner,#e3b778);border-radius:50%; cursor:pointer;font:400 38px/1 var(--sans,system-ui),sans-serif;color:var(--paa-banner,#e3b778); background:var(--tk-ramme-moerk,#7a4a2c);opacity:.92;box-shadow:0 4px 16px rgba(64,32,24,.35); transition:background .2s,opacity .2s,transform .2s} main .helt .hp-forr{left:14px} main .helt .hp-naeste{right:14px} main .helt .hp-pil:hover{background:#6a3f25;opacity:1;transform:scale(1.06)} main .helt .hp-pil:focus-visible{outline:2px solid var(--paa-banner,#e3b778);outline-offset:3px} @media (max-width:600px){main .helt .hp-pil{width:42px;height:42px;margin-top:-21px;font-size:32px} main .helt .hp-forr{left:8px}main .helt .hp-naeste{right:8px}} /* FAQ («Det spørger folk tit om») - native
, widget 4, 18-10-2026. Tynd streg og serif-spørgsmål; ingen ikoner i bokse, intet plus-tegn. */ .faq{max-width:var(--laese,40rem);margin:clamp(40px,5vw,64px) 0 0} .kontakt.bred + .faq{margin-left:auto;margin-right:auto} .faq h2{margin-bottom:12px} .faqpunkt{border-top:1px solid var(--kf-kant)} .faqpunkt:last-child{border-bottom:1px solid var(--kf-kant)} .faqpunkt summary{cursor:pointer;list-style:none;padding:14px 28px 14px 0;position:relative; font-family:var(--serif);font-size:1.08em;color:var(--kf-blaek)} .faqpunkt summary::-webkit-details-marker{display:none} .faqpunkt summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px; border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:translateY(-70%) rotate(45deg);transition:transform .2s} .faqpunkt[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faqpunkt summary:focus-visible{outline:2px solid var(--kf-blaek);outline-offset:2px} .faqpunkt p{margin:0 0 16px;color:var(--kf-daempet)} @media (prefers-reduced-motion:reduce){.faqpunkt summary::after{transition:none}} /* ============================================================ FLOW-AUDITTEN 18-10 (Kalmly-niveau): punkt 4, 5, 6, 8, 9, 10. Kun sitets egne toner; ingen nye farver. ============================================================ */ :root{--kf-orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M4 6h44M72 6h44' stroke='%236b4a3a' stroke-opacity='.42'/%3E%3Cpath d='M60 1.5l4.5 4.5-4.5 4.5-4.5-4.5z' fill='%23b08463'/%3E%3C/svg%3E")} /* 5. Baandene skifter tydeligt: linned -> papir -> honning (afslutning). */ main .flow > section.katsektion + section.katsektion{--baand:var(--kf-papir)} /* 9. Heltens kant: det foerste baand starter med et blidt skaer af traeets moerke og toner ind i sin egen flade over 96 px - ingen haard kant. */ main .flow > section.katsektion:first-child, main > .soejle.sidetop:first-child{ border-image:linear-gradient(to bottom,color-mix(in srgb,var(--kf-blaek) 20%,var(--baand)) 0, color-mix(in srgb,var(--kf-blaek) 6%,var(--baand)) 34px,var(--baand) 96px) fill 0//0 100vmax} /* 6. Ornament (streg - rude - streg) paa hver sektionsgraense. */ main .flow > section.katsektion + section.katsektion{position:relative} main .flow > section.katsektion + section.katsektion::before, main > section.afslutning .afslutning-indhold::before, .kf-orn{content:"";display:block;width:120px;height:12px;background:var(--kf-orn) center/contain no-repeat} main .flow > section.katsektion + section.katsektion::before{position:absolute;top:0;left:50%; translate:-50% -50%;pointer-events:none} main > section.afslutning .afslutning-indhold::before{margin:0 auto 30px} /* 8. Alle primaere knapper: loeft 1,5 px OG moerkere ved hover. */ @media (hover:hover){ main .bordsoejle a.knap:hover, main form.hv button:not([disabled]):hover{filter:brightness(.88)} } /* 4. Den frostede menubjaelke (bygges af centreret.js). Skjult = uden for toppen + visibility, ALDRIG opacity 0: S12s opacity-taelling (4ac2374) talte den skjulte bjaelke som et uafsloeret element. */ .kf-bjaelke{position:fixed;top:0;left:0;right:0;z-index:50; background:rgba(251,249,245,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); border-bottom:1px solid var(--kf-kant);box-shadow:0 8px 24px -18px rgba(64,32,24,.35); translate:0 -100%;visibility:hidden; transition:translate .35s var(--kf-ind),visibility 0s linear .35s} .kf-bjaelke.vis{translate:0 0;visibility:visible;transition-delay:0s} .kf-bjaelke-indre{max-width:70rem;margin:0 auto;padding:0 16px;height:56px;box-sizing:border-box; display:flex;align-items:center;justify-content:space-between;gap:24px} .kf-bjaelke-navn{font-family:var(--serif);font-size:22px;color:var(--kf-blaek);text-decoration:none;white-space:nowrap} .kf-bjaelke nav{margin:0;padding:0;align-items:center;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;min-width:0;flex-wrap:nowrap;height:100%} .kf-bjaelke nav::-webkit-scrollbar{display:none} .kf-bjaelke nav a{font-family:var(--sans);font-size:14px;color:var(--kf-daempet);text-decoration:none; padding:6px 0;transition:color .15s ease} .kf-bjaelke nav a,.kf-bjaelke nav a:hover{border:0;line-height:1.2;opacity:1;flex:0 0 auto;padding:0;margin:0} .kf-bjaelke nav a:hover,.kf-bjaelke nav a[aria-current]{color:var(--kf-blaek)} .kf-bjaelke a:focus-visible{outline:2px solid var(--kf-blaek);outline-offset:3px;border-radius:2px} html.kf-har-bjaelke [id]{scroll-margin-top:72px} @media (max-width:640px){ .kf-bjaelke-navn{display:none} .kf-bjaelke-indre{justify-content:flex-start;height:50px} .kf-bjaelke nav{gap:18px;flex:1 1 auto} } /* 10. Levering: rammen over de tre veje (Kalmlys etiket + titel + ornament). */ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > .vejhoved{ grid-column:1/-1;order:0;display:flex;flex-direction:column;align-items:center;text-align:center; gap:14px;margin:0 auto 10px;max-width:40rem} main article.fort .vejhoved .ojenbryn{margin:0} main article.fort .vejhoved h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,42px);font-weight:500; line-height:1.15;margin:0;color:var(--kf-blaek);text-align:center} main article.fort .vejhoved h2::before,main article.fort .vejhoved h2::after{content:none} @media (prefers-reduced-motion: reduce){ .kf-bjaelke,.kf-bjaelke.vis{transition:none;translate:none} } /* ====================================================================== 11. FLOW V2 (Kalmly side for side, 18-10-2026). Gab-listen staar paa http://100.100.152.7/rapporter/bordmand-flow-v2/. Alt her er ren CSS og synligt uden JS; bevaegelse kun paa klasser JS'en saetter (`.afsloer`, `.set`) og aldrig under prefers-reduced-motion. INGEN transform paa .billedbaand (e3fd665 centrerer den med `translate`). ====================================================================== */ :root{ --kf-blush:#f1dfd0; --kf-y:clamp(76px,9.5vw,136px); --kf-y-lille:clamp(60px,7vw,96px); --kf-laes-v2:clamp(17px,1.3vw,18.5px); } /* -- Typeskalaen (gab 3): broedtekst ~18,5 px / 1,7, balancerede linjer -- */ body{font-size:var(--kf-laes-v2);line-height:1.7} main h1,main h2,main h3,.vhead-a .vtekst .under{text-wrap:balance} main p,main li,main figcaption{text-wrap:pretty} main h1.sidetitel,main h1.bordtitel{font-family:var(--serif);font-weight:400; font-size:clamp(46px,6.4vw,84px);line-height:1.02;letter-spacing:-.012em;color:var(--kf-blaek)} main > .soejle > article.fort p.indledning, main > .soejle.sidetop > p:not(.ojenbryn){font-size:clamp(19px,1.75vw,23px);line-height:1.6; color:var(--kf-daempet);max-width:40rem;margin-left:auto;margin-right:auto;text-align:center} main .sektionsmaerke{font-size:clamp(38px,4.6vw,58px);font-weight:400;letter-spacing:-.008em} main article.fort > .ftsoejle > section > h2, main article.fort .vejhoved h2{font-size:clamp(32px,3.9vw,48px);font-weight:400} main .ojenbryn{font-size:12.5px;letter-spacing:.24em} /* -- Farverytmen (gab 2): tre toner som Kalmlys linen/sand/blush -- */ main article.fort > .ftsoejle > section:nth-of-type(3n){--baand:var(--kf-blush)} main .flow > section.katsektion + section.katsektion{--baand:var(--kf-blush)} main > .soejle.bordsoejle{--baand:var(--kf-linned); border-image:linear-gradient(var(--baand) 0 0) fill 0//0 100vmax; padding-top:var(--kf-y-lille);padding-bottom:var(--kf-y)} /* -- Forsidens foerste skaerm (gab 1): hele skaermen er scenen -- */ html:has(main .flow > section.katsektion) .vhead-a img{ height:clamp(460px,84vh,880px);height:clamp(460px,84svh,880px)} html:has(main .flow > section.katsektion) .vhead-a .vtekst{top:0;display:flex; flex-direction:column;justify-content:center;align-items:center;text-align:center; padding-top:64px;padding-bottom:clamp(40px,7vh,88px)} html:has(main .flow > section.katsektion) .vhead-a .vtekst .sitenavn{ font-size:clamp(58px,10.5vw,148px);line-height:.98;letter-spacing:-.005em;margin:0} html:has(main .flow > section.katsektion) .vhead-a .vtekst .under{ font-size:clamp(17px,1.7vw,23px);line-height:1.45;margin-top:clamp(14px,1.8vw,24px); max-width:34ch;letter-spacing:.01em;opacity:.95} html:has(main .flow > section.katsektion) .vhead-a .vtekst .sidemenu{margin-top:clamp(26px,3.4vw,44px)} html:has(main .flow > section.katsektion) .vhead-a::after{ background:radial-gradient(120% 90% at 50% 52%,rgba(20,12,8,.18) 0%,rgba(20,12,8,.46) 62%,rgba(20,12,8,.7) 100%)} /* Kalmly-flow (18-10): heltebilledet toner ud i siden i stedet for at slutte med en haard kant. Kun billedet og scrimmen maskes - tekst, menu og rullepil roeres ikke (pilen sidder 20 px, menuen 74 px over kanten). */ @media (min-width:861px){ /* Toner mod baandets egen topfarve (maalt 18-10), ikke mod sidens hvide bund. */ .vhead-a{background-color:#f2e6d9} html:has(main .flow > section.katsektion) .vhead-a{background-color:rgb(210,197,185)} .vhead-a > img,.vhead-a::after{-webkit-mask-image:linear-gradient(#000 calc(100% - 96px),transparent);mask-image:linear-gradient(#000 calc(100% - 96px),transparent)} } /* Rullepilen (lagt paa af JS - pynt, intet indhold) */ .kf-ned{position:absolute;left:50%;bottom:clamp(14px,2.6vh,28px);z-index:3;translate:-50% 0; display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--paa-banner,#f6efe6); font:600 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;text-decoration:none;opacity:.85} .kf-ned i{display:block;width:1px;height:38px;background:linear-gradient(currentColor,transparent); transform-origin:top;animation:kf-ned 2.4s var(--kf-ind) infinite} @keyframes kf-ned{0%{transform:scaleY(0);opacity:0}30%{opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}} /* -- Undersidernes top: titlen faar luft som Kalmlys sidetop -- */ main > .soejle > .ojenbryn{padding-top:var(--kf-y)} /* Een overskrift pr. sektion (LAAST REGEL, Stefan 21-10-2026): uden overlinjen baerer titlen selv topluften i undersidernes creme topbaand. */ main > .soejle:not(.sidetop) > h1.sidetitel:first-child, main > .soejle > article.fort:first-child > .rygrad + .ftsoejle:not(:has(> section)){padding-top:var(--kf-y)} /* -- Korn og atmosfaere (gab 8): SVG-stoej, soft-light, som Kalmlys grain -- */ body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.42; mix-blend-mode:soft-light;background-size:220px 220px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} @media print{body::after{content:none}} /* -- Billeder (gab 4): lettere SOLGT-sloer, fortaellingsbilleder ud af soejlen -- */ main .gitter.enkel > article.kort.er-solgt .solgtflag{ background:linear-gradient(to top,rgba(28,17,11,.58) 0%,rgba(28,17,11,.22) 42%,rgba(28,17,11,0) 78%)} main article.fort .ftfigur{width:min(1000px,calc(100vw - 2*var(--gyde)));position:relative;left:50%;translate:-50% 0} main article.fort .billedbaand:has(> li:nth-child(2):last-child){width:min(1040px,calc(100vw - 2*var(--gyde)))} main article.fort .billedbaand img,main article.fort .ftfigur img{border-radius:var(--kf-r); box-shadow:0 2px 6px rgba(64,32,24,.06),0 28px 60px -30px rgba(64,32,24,.42)} main article.fort figcaption{font-size:14px;color:var(--kf-daempet);text-align:center;margin-top:12px} main .bordsoejle .helt img{border-radius:var(--kf-r);box-shadow:0 2px 6px rgba(64,32,24,.06),0 32px 70px -34px rgba(64,32,24,.45)} /* -- Billed-afsloering: rammen aabner sig og fotoet glider paa plads. Kun naar JS har sat `.afsloer` (uden JS: intet skjult). -- */ main .gitter.enkel > article.kort.afsloer .ramme img{scale:1.08;transition:scale 1.6s var(--kf-ud) var(--tur,0ms),transform var(--t-foto,.6s) ease} main .gitter.enkel > article.kort.afsloer.set .ramme img{scale:1} main article.fort section.afsloer figure img{clip-path:inset(7% 5% round var(--kf-r)); transition:clip-path 1.3s var(--kf-ud) .12s} main article.fort section.afsloer.set figure img{clip-path:inset(0 0 round var(--kf-r))} /* -- Bord-siden (gab 9): centreret titel, foto i ramme, fakta som kort -- */ main .bordsoejle{max-width:min(1040px,92vw)} main .bordsoejle .tilbage{text-align:center;margin:0 0 18px} main .bordsoejle h1.bordtitel{text-align:center;margin:0 0 clamp(28px,4vw,48px)} main .bordsoejle .galleri{max-width:880px;margin-left:auto;margin-right:auto} main .bordsoejle .galleri button img{border-radius:12px} main .bordsoejle ul.fakta{max-width:34rem;margin:clamp(44px,5vw,72px) auto 0;padding:10px 30px; background:#fffdf9;border:1px solid var(--kf-kant);border-radius:var(--kf-r);box-shadow:var(--kf-skygge)} main .bordsoejle ul.fakta li:last-child{border-bottom:0} main .bordsoejle .handling{text-align:center;margin-top:clamp(28px,3.4vw,40px)} /* -- Mobil (gab 5 + 6) -- */ @media (max-width:639px){ /* Solgte borde: to i bredden i stedet for en endeloes mur */ main .flow > section.katsektion + section.katsektion .gitter.enkel{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:22px} main .flow > section.katsektion + section.katsektion .gitter.enkel > article.kort{font-size:14px;line-height:1.45} main .flow > section.katsektion + section.katsektion .gitter.enkel > article.kort h3{font-size:18px} main .flow > section.katsektion + section.katsektion .solgtflag span{font-size:11px} html:has(main .flow > section.katsektion) .vhead-a img{height:clamp(520px,86svh,760px)} /* Bjaelken: brand + rullende menu med blød kant */ .kf-bjaelke-navn{display:block;font-size:18px;flex:none} .kf-bjaelke-indre{gap:16px} .kf-bjaelke nav{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);padding:0 22px 0 10px} } .kf-bjaelke nav a[aria-current],.kf-bjaelke nav a.nu{color:var(--kf-blaek); box-shadow:inset 0 -1px 0 currentColor} @media (prefers-reduced-motion: reduce){ .kf-ned i{animation:none} main .gitter.enkel > article.kort.afsloer .ramme img{scale:1;transition:none} main article.fort section.afsloer figure img{clip-path:none;transition:none} } /* ====================================================================== 12. FLOW V3 (Kalmly side for side, 18-10-2026, DA desktop 1366 px). Rapport: http://100.100.152.7/rapporter/bordmand-flow-v3/ (a) Fortaelle-afsnittene: taettere rytme (130 -> ~90 px pr. side af et skift), bloede toneovergange i stedet for haarde kanter, og nummeret som en lille knude med en traad ned fra forrige afsnit - traaden ligger i luften OVER overskriften, aldrig gennem teksten. (b) Laesetekst i afsnittene 16 -> ~18 px / 1,75 (Kalmly ~18/1,7). (c) Undersidernes banner 390 -> ~310 px, teksten centreret lodret. (d) Fotos: blid zoom ved hover (kun selve img; INGEN transform paa .billedbaand). Alt slaas fra under prefers-reduced-motion. ====================================================================== */ :root{--fort-y:clamp(60px,6.6vw,96px);--fort-blend:clamp(110px,12vw,170px)} /* (a) rytme + toneovergang. --forrige saettes af JS (FLOW V3 i centreret.js) til forrige baands tone; uden JS er overgangen blot ensfarvet som foer. */ html:not(:has(link[rel="canonical"][href$="/levering.html"])) main article.fort > .ftsoejle > section{ padding-block:var(--fort-y); border-image:linear-gradient(var(--forrige,var(--baand)) 0,var(--baand) var(--fort-blend)) fill 0//0 100vmax} /* Knuden: nummeret i en lille cirkel; traaden kommer ned fra baandets top */ html:not(:has(link[rel="canonical"][href$="/levering.html"])) main article.fort > .ftsoejle > section > h2::before{ display:grid;place-items:center;width:46px;height:46px;margin:0 auto 18px;padding-left:.2em;box-sizing:border-box; border:1px solid var(--kf-dyb);border-radius:50%;background:#fffdf9;letter-spacing:.14em;font-size:12px; box-shadow:var(--kf-skygge-blod)} html:not(:has(link[rel="canonical"][href$="/levering.html"])) main article.fort > .ftsoejle > section:has(> h2)::before{ content:"";position:absolute;left:50%;top:0;width:1px;height:calc(var(--fort-y) - 6px);translate:-.5px 0; background:linear-gradient(rgba(176,120,80,0),rgba(176,120,80,.55));pointer-events:none} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child::before{content:none} /* (b) laesetekst */ main article.fort > .ftsoejle > section > p, main article.fort > .ftsoejle > section ul.punkter li{font-size:clamp(17px,1.32vw,18.5px);line-height:1.75} main article.fort > .ftsoejle > section > h2 + p{margin-top:0} main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child :is(p,li){font-size:13px;line-height:1.55} /* (c) undersidernes banner */ html:not(:has(main .flow > section.katsektion)) .vhead-a img{height:clamp(280px,40vh,320px)} html:not(:has(main .flow > section.katsektion)) .vhead-a .vtekst{top:0;bottom:0;display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center;padding-top:0;padding-bottom:0} /* (d) fotos: fortaellingsbilledet loefter sig, kortets foto zoomer blidt inde i sin ramme (rammen klipper allerede). */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ main article.fort .ftfigur img{transition:translate .6s var(--kf-ud),box-shadow .6s var(--kf-ud),clip-path 1.3s var(--kf-ud) .12s} main article.fort .ftfigur:hover img{translate:0 -4px; box-shadow:0 4px 10px rgba(64,32,24,.07),0 38px 70px -30px rgba(64,32,24,.5)} main .gitter.enkel > article.kort:not(.afsloer) .ramme img{transition:scale 1.1s var(--kf-ud)} main .gitter.enkel > article.kort.set:hover .ramme img, main .gitter.enkel > article.kort:not(.afsloer):hover .ramme img{scale:1.04} } /* ---------------------------------------------------------------------- 12b. FLOW V3 runde A (S12s fundliste GATE-S12-BORDMAND-FLOW-V2-ae89f12, DA desktop 1366). Kun CSS/JS; struktur kommer i runde B (byg_enkel.py). ---------------------------------------------------------------------- */ /* T3: ~120 px mellem afsnittene paa trae/om (var 90+92+90 = 272 px). Margenen paa 92 px kom fra en aeldre afsnitsregel og laa oven i paddingen. */ :root{--fort-y:clamp(52px,4.6vw,66px)} html:not(:has(link[rel="canonical"][href$="/levering.html"])) main article.fort > .ftsoejle > section{margin-block:0} /* F6: ens sektionsluft paa forsiden (var ~290 px mellem Til salg og Solgte borde og ~330 px foer Kom forbi). */ main .flow > section.katsektion{padding-block:clamp(56px,5.2vw,76px)} main .flow > section.katsektion:last-child .soejle:last-child{margin-bottom:0} section.afslutning{padding-top:clamp(84px,7.4vw,104px)} /* L1: Tre veje hjem som bento - kort 01 (med punktlisten) staar hoejt til venstre, 02 og 03 stables til hoejre, saa ingen kort er to tredjedele tomt. */ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle:has(> section){ --kf-bred:min(62rem,calc(100vw - 32px));grid-template-columns:repeat(2,minmax(0,1fr))} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > .vejhoved{grid-row:1} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:nth-of-type(1){grid-column:1;grid-row:2/span 2} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:nth-of-type(2){grid-column:2;grid-row:2} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:nth-of-type(3){grid-column:2;grid-row:3} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section ul.punkter{ display:grid;gap:6px;margin-top:18px;padding:16px 0 0;border-top:1px dashed rgba(64,32,24,.16)} @media (hover:hover) and (prefers-reduced-motion:no-preference){ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section{ transition:translate .5s var(--kf-ud),box-shadow .5s var(--kf-ud)} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:hover{ translate:0 -3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 8px rgba(64,32,24,.06),0 30px 56px -30px rgba(64,32,24,.42)} } /* L3: FAQ med overlinje, centreret titel og plus-ikoner (Kalmly). */ main section.faq > h2::before{content:none;display:block;margin:0 auto 14px;width:auto;height:auto;max-width:none;background:none;border:0;position:static;opacity:1; font-family:var(--sans,Inter,sans-serif);font-size:12.5px;font-weight:600;letter-spacing:3px; text-transform:uppercase;color:rgb(107,58,40);line-height:1.4} main section.faq > h2{margin-bottom:clamp(22px,2.4vw,32px)} .faqpunkt summary::after,.faqpunkt summary::before{content:"";position:absolute;right:4px;top:50%; width:13px;height:1px;border:0;background:currentColor;transform:none;translate:0 -50%; transition:rotate .35s var(--kf-ud),opacity .35s var(--kf-ud)} .faqpunkt summary::before{rotate:90deg} .faqpunkt[open] summary::after{transform:none} .faqpunkt[open] summary::before{rotate:0deg;opacity:0} @media (prefers-reduced-motion:reduce){.faqpunkt summary::before,.faqpunkt summary::after{transition:none}} /* L4: luft mellem FAQ og afslutningsbaandet (var 0-30 px). */ main section.faq{margin-bottom:clamp(72px,7.4vw,104px)} /* K1: kontaktkortet staar inde i ferskenbaandet, ~56 px under titlen. */ html:has(main section.kontakt.bred) main .flow > .fladeb:first-child{padding-top:clamp(40px,4.2vw,58px)} /* F4: maerket paa solgte borde baerer trae og maal (JS laeser billedets alt; SOLGT-stregerne paa `.solgtflag span` er uroerte). */ main .solgtflag:has(.flagmaal){flex-wrap:wrap;align-content:flex-end;row-gap:0} main .solgtflag .flagmaal{display:block;flex:0 0 100%;text-align:center;margin-top:8px;font-size:12px;letter-spacing:.06em; color:rgba(255,250,244,.9);text-shadow:0 1px 6px rgba(0,0,0,.35)} /* inc1s laesetekst-regel naaede levering-kortenes punktliste: tilbage til kortets 15,5 px */ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section ul.punkter li{font-size:15.5px;line-height:1.6} /* Flow v2, runde 2 (maalt live 18-10): tilbage-link og knap stod i venstre side, galleriet var forskudt, faktarkkerne flugtede ikke. */ main .bordsoejle p.tilbage{display:table;margin:0 auto 18px} main .bordsoejle .galleri{justify-content:center} main .bordsoejle p.handling{max-width:none;margin-left:auto;margin-right:auto} main .bordsoejle p.handling a.knap{border-radius:999px;padding-left:34px;padding-right:34px} main .bordsoejle ul.fakta li{align-items:baseline;padding:14px 0} /* Centrering 2 (18-10, maalt live 1366 px). (a) Bord-galleriet: byggerens `repeat(auto-fill,minmax(130px,1fr))` lavede 6 spor til 5 miniaturer; det tomme 6. spor skubbede raekken 74,5 px til venstre (l=243 r=392). auto-fit folder tomme spor sammen, saa justify-content:center virker. (b) trae.html: .ftsoejle (620 px) laa venstrestillet i article.fort (682 px), saa titlen stod 31 px til venstre for overlinjen (centreret over 682 px) - og .billedbaand (8b, left:50% af sin sektion) arvede de 31 px. */ main .bordsoejle .galleri{grid-template-columns:repeat(auto-fit,minmax(130px,140px))} html:has(link[rel="canonical"][href$="/trae.html"]) main > .soejle > article.fort > .ftsoejle{margin-left:auto;margin-right:auto} /* ============================================================ 8c CENTRERING-SWEEP (18-10, maalt live 1366 px, DA, alle sider). Hver regel herunder rettede et maalt udslag paa blaekkets midte mod vinduets midte; ret dem ikke uden at maale igen. ============================================================ */ /* (a) Topbaandets .ftsoejle (620 px) stod venstrestillet i article.fort (682 px) paa ALLE undersider, ikke kun Traeet: «Levering» -31 px. Klassen er doblet med vilje: l. ~541 `:not(:has(> section)){margin:0}` er (0,3,3) og slog den enkle form (0,3,2) - maalt live, stadig -31. */ main > .soejle > article.fort > .ftsoejle.ftsoejle{margin-left:auto;margin-right:auto} /* (b) Afsnits-overskrifter med max-width (fx «Kilder» 434 px) laa i venstre side af soejlen: -93 px. */ main article.fort > .ftsoejle > section > h2, main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child > h2{margin-left:auto;margin-right:auto} /* (c) FAQ-overskriften «Det spørger folk tit om» stod text-align:start: -143 px paa Levering og Kontakt. Spoergsmaalene selv forbliver venstre. */ main section.faq > h2{text-align:center;margin-left:auto;margin-right:auto} /* r181633-c3 BLAA RAMME: ingen browser-blaa nogen steder (DA+EN). Bordkort og andre links uden egen fokusregel fik browserens standard-blaa fokusring; lav specificitet (:where) saa de eksisterende fokusregler stadig vinder. */ :root{accent-color:#6b4a3a;-webkit-tap-highlight-color:rgba(107,74,58,.18)} :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--kf-blaek);outline-offset:3px} ::selection{background:rgba(107,74,58,.24);color:inherit} /* ============================================================ K2 KONTAKTKORT (S12 runde B, 18-10). Formularen beholder sin MARKANT MINDRE bredde (46rem, Stefan 18-10); kortet staar ved siden af i stedet for at goere formularen bredere. Samme data som footeren, ren tekst. ============================================================ */ .kontakt-par + .faq{margin-left:auto;margin-right:auto} .kontaktkort{margin-top:var(--kf-gab);padding:22px 24px;border-radius:var(--kf-r); background:linear-gradient(160deg,var(--kf-sand) 0%,var(--kf-linned) 100%); border:1px solid rgba(64,32,24,.10);color:var(--kf-blaek)} .kontaktkort .kk-titel{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(64,32,24,.14); font-family:var(--serif);font-size:1.25rem;line-height:1.25;max-width:none} .kontaktkort dl{margin:0;display:grid;gap:12px} .kontaktkort dl > div{display:grid;gap:2px} .kontaktkort dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--kf-daempet)} .kontaktkort dd{margin:0;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere} .kontaktkort .kk-aftale{display:block;font-size:14px;color:var(--kf-daempet);font-style:italic} .kontaktkort .kk-cvr{margin:16px 0 0;font-size:13px;color:var(--kf-daempet);max-width:none} @media (min-width:861px){ html:has(link[rel="canonical"][href$="/kontakt.html"]) main .flow .soejle.ind{width:min(64rem,calc(100vw - 32px))} .kontakt-par{display:grid;grid-template-columns:minmax(0,46rem) minmax(15rem,1fr);gap:var(--kf-gab);align-items:stretch} .kontakt-par > .kontaktkort{margin-top:0;display:flex;flex-direction:column} .kontakt-par > .kontaktkort .kk-cvr{margin-top:auto;padding-top:14px} } /* ============================================================ L2 «BORDET SKILLES AD» INDE I KORT 03 (S12 runde B, 18-10). Ikke en fjerde vej, men en egenskab ved bordet: et stille tillaeg nederst i kortet, adskilt af samme stiplede linje som punktlisten i kort 01. ============================================================ */ main article.fort .vej-tillaeg{margin-top:20px;padding-top:18px;border-top:1px dashed rgba(64,32,24,.16)} main article.fort .vej-tillaeg > h3{margin:0 0 8px;font-family:var(--serif);font-weight:500; font-size:clamp(19px,1.7vw,21px);line-height:1.25;color:var(--kf-blaek);text-align:left} main article.fort .vej-tillaeg > p{margin:0;max-width:none;font-size:15px;line-height:1.65;color:var(--kf-daempet)} /* ============================================================ F1 «SE BORDENE»-PILLEN I FORSIDENS HERO (S12 runde B, 18-10). Een tydelig indgang over folden, som Kalmlys pille: papir paa traeet, blaek-tekst, roligt hover-loeft. Kun forsiden (byg_enkel saetter den). ============================================================ */ .vhead-a .vtekst .heroknap{margin:clamp(14px,1.6vw,20px) 0 0;max-width:none} .vhead-a .vtekst .heroknap a{display:inline-flex;align-items:center;gap:.45em; padding:11px 22px;border-radius:999px;background:var(--kf-papir);color:var(--kf-blaek); font-size:15px;font-weight:500;letter-spacing:.02em;text-decoration:none;border:0; box-shadow:0 6px 22px rgba(20,10,6,.28);transition:transform .25s var(--kf-ud,ease),box-shadow .25s,background-color .25s} .vhead-a .vtekst .heroknap a:hover, .vhead-a .vtekst .heroknap a:focus-visible{background:var(--kf-linned);color:var(--kf-blaek); transform:translateY(-2px);box-shadow:0 10px 28px rgba(20,10,6,.34);text-decoration:none} .vhead-a .vtekst .heroknap a:focus-visible{outline:2px solid var(--kf-papir);outline-offset:3px} @media (prefers-reduced-motion:reduce){.vhead-a .vtekst .heroknap a{transition:none} .vhead-a .vtekst .heroknap a:hover,.vhead-a .vtekst .heroknap a:focus-visible{transform:none}} /* ============================================================ F2 «TIL SALG» I TO SPALTER (S12 runde B, 18-10). Paa desktop staar bordet/bordene til venstre og noten + solgt-baandet til hoejre, saa sektionen laeses som Kalmlys produktkort: billede og fortaelling side om side i stedet for een smal stabel. Kun naar der er 1-2 borde til salg; ved 3+ (eller 0) beholdes den centrerede stabel. Ren CSS, ingen markup. ============================================================ */ @media (min-width:861px){ main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))){ display:grid;grid-template-columns:minmax(0,25rem) minmax(0,31rem);justify-content:center; column-gap:clamp(44px,5.5vw,84px);align-items:center} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) > .soejle.ind:first-child{ grid-column:1/-1;width:auto} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) > .gitter.enkel{ grid-column:1;grid-row:2/span 2;grid-template-columns:minmax(0,1fr);width:auto;max-width:none;margin:0;align-self:center} main .flow > section#til-salg:has(> .gitter > .kort:nth-child(2)):not(:has(> .gitter > .kort:nth-child(3))) > .gitter.enkel{ grid-template-columns:repeat(2,minmax(0,1fr))} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) > .soejle.ind:not(:first-child){ grid-column:2;width:auto;max-width:none;margin:0;text-align:left} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) > .soejle.ind:nth-of-type(2){ grid-row:2;align-self:end} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) > .soejle.ind.solgtbaand{ grid-row:3;align-self:start;margin-top:clamp(22px,2.4vw,32px)} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) .tilsalgnote{ margin:0;max-width:none;text-align:left} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) .tilsalgnote::before{ margin-left:0;margin-right:0} main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) .solgtbaand .baandmaerke, main .flow > section#til-salg:has(> .gitter > .kort):not(:has(> .gitter > .kort:nth-child(3))) .baandsaetning{ margin-left:0;text-align:left} } /* ============================================================ F3 SOLGTE BORDE: KURATERET UDVALG, ni borde, intet antal (S12 18-10; Stefan 21-10). centreret.js saetter `.kf-kurateret` og `.kf-ekstra`; uden JS vises alt. ============================================================ */ main section#solgte.kf-kurateret .gitter > article.kort.kf-ekstra{display:none} main .kf-sealle{margin:clamp(30px,3.4vw,44px) auto 0;max-width:none;text-align:center} main .kf-sealle::before,main .kf-sealle::after{content:none} main .kf-sealle button{font:inherit;font-size:15px;font-weight:500;letter-spacing:.02em;cursor:pointer; padding:11px 24px;border-radius:999px;border:1px solid rgba(64,32,24,.28);background:transparent; color:var(--kf-blaek);transition:background-color .25s,border-color .25s,color .25s} main .kf-sealle button:hover{background:var(--kf-blaek);border-color:var(--kf-blaek);color:var(--kf-papir)} main .kf-sealle button:focus-visible{outline:2px solid var(--kf-blaek);outline-offset:3px} @media (prefers-reduced-motion:reduce){main .kf-sealle button{transition:none}} /* ============================================================ F5 EEN SKILLELINJE OVER HELE SITET (S12 runde B, 18-10). Sitets eneste skillelinje er ornamentet --kf-orn (streg - rude - streg) paa sektionsgraenserne og i afslutningen. Stefan fjernede de bare vandrette streger 17-10 (PUNKT 2 ovenfor), men to slap igennem paa leveringssiden (stiplede linjer i kortene), og om-sidens kort bar en 28px-streg som accent. De stiplede bliver luft; om-stregen bliver ornamentets egen rude, saa der kun findes een form for skel. ============================================================ */ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section ul.punkter, main article.fort .vej-tillaeg{border-top:0} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section ul.punkter{padding-top:6px} main article.fort .vej-tillaeg{padding-top:8px} html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li::after{ width:6px;height:6px;margin:18px auto 0;transform:rotate(45deg);background:var(--kf-dyb);opacity:.7} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section > h2{border-bottom:0;padding-bottom:0} .kontaktkort .kk-titel{border-bottom:0;padding-bottom:0} /* BOER 1 (S12, 18-10): kort 01 stod halvtomt, fordi det spaendte over to raekker mod 02 + 03 med tillaegget. Nu staar 01 og 02 stablet til venstre og det lange kort 03 alene til hoejre, saa spalterne er naesten lige hoeje. Under 860 px: een spalte i kildens raekkefoelge. */ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:nth-of-type(1){grid-column:1;grid-row:2} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:nth-of-type(2){grid-column:1;grid-row:3} html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:nth-of-type(3){grid-column:2;grid-row:2/span 2} @media (min-width:861px){ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle:has(> section){grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)} } @media (max-width:860px){ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section:nth-of-type(n){grid-column:1;grid-row:auto} } /* BOER 2 (S12, 18-10): «Tidligere solgt» blev klippet ved hoejre kant, det fjerde foto halvt synligt ved 1366. Paa desktop er raekken nu et roligt gitter af hele fotos (4 pr. raekke, flydende bredde) der passer i spalten; under 861 px beholdes den vandrette rulle-strimmel. */ @media (min-width:861px){ main .solgtbaand .baandraekke{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; overflow:visible;padding:4px 0 10px;scroll-snap-type:none} main .solgtbaand .baandraekke li{flex:none;min-width:0} main .solgtbaand .baandraekke li:nth-child(n+9){display:none} main .solgtbaand .baandraekke img{width:100%;height:auto;aspect-ratio:4/3} } /* ============================================================ T1/T2/T5 TRAEET I TRE KAPITLER (S12 runde B, 18-10). centreret.js saetter `.kf-kapitler`, `.kf-kap1-3`, `.kf-kapfort` og indsaetter `.kf-kaphoved` (Del n af 3 + eet citat). Uden JS: ti baand som foer. ============================================================ */ body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > .kf-kap1{--baand:var(--kf-papir)} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > .kf-kap2{--baand:var(--kf-linned)} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > .kf-kap3{--baand:var(--kf-blush)} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > .kf-kaphoved{position:relative;margin:0; padding:clamp(64px,6.4vw,92px) 0 clamp(8px,1vw,14px);text-align:center; border-image:linear-gradient(var(--forrige,var(--baand)) 0,var(--baand) var(--fort-blend,0px)) fill 0//0 100vmax} body main article.fort.kf-kapitler.kf-kapitler .kf-kapmaerke{display:flex;align-items:center;justify-content:center;gap:12px; margin:0 auto 22px;max-width:none;padding-left:.24em;font-family:var(--sans);font-size:12.5px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--trae-lys,#6b3a28)} body main article.fort.kf-kapitler.kf-kapitler .kf-kapmaerke::before, body main article.fort.kf-kapitler.kf-kapitler .kf-kapmaerke::after{content:"";width:34px;height:1px;background:currentColor;opacity:.45} body main article.fort.kf-kapitler.kf-kapitler .kf-kapcitat{margin:0 auto;padding:0;max-width:36rem;border:0;background:none} body main article.fort.kf-kapitler.kf-kapitler .kf-kapcitat p{margin:0 auto;max-width:none;font-family:var(--serif);font-style:italic; font-weight:400;font-size:clamp(28px,3.3vw,44px);line-height:1.2;letter-spacing:-.01em;color:var(--kf-blaek); text-wrap:balance;text-align:center} body main article.fort.kf-kapitler.kf-kapitler .kf-kapcitat::after{content:"";display:block;width:120px;height:12px; margin:clamp(26px,2.8vw,34px) auto 0;background:var(--kf-orn) center/contain no-repeat} /* Trin paa tidslinjen: nummeret bliver en pille «TRIN 01», og traaden loeber ubrudt gennem kapitlet. */ body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(:last-child) > h2::before{ content:"Trin " counter(fortafsnit,decimal);display:flex;width:max-content;height:30px; align-items:center;margin:0 auto 18px;padding:0 14px 0 calc(14px + .14em); border-radius:999px;text-transform:uppercase;font-size:11.5px} html[lang^="en"] body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(:last-child) > h2::before{ content:"Step " counter(fortafsnit,decimal)} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section.kf-kapfort{padding-top:clamp(28px,2.6vw,38px)} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(:last-child)::before{ content:"";position:absolute;left:50%;top:0;width:1px;height:calc(var(--fort-y) - 4px);translate:-.5px 0; background:rgba(176,120,80,.45);pointer-events:none} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section.kf-kapfort::before{height:clamp(24px,2.2vw,34px)} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(:last-child):has(+ section.kf-kapfort)::after{ content:"";position:absolute;left:50%;bottom:0;width:1px;height:clamp(22px,2vw,30px);translate:-.5px 0; background:rgba(176,120,80,.45);pointer-events:none} body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(:last-child){padding-bottom:clamp(40px,3.6vw,52px)} /* T5: teksten der flyttede fra indledningen; sortsnoten er en lille note. */ body main article.fort.kf-kapitler.kf-kapitler .kf-sortnote{font-size:15px;line-height:1.65;color:var(--kf-daempet)} /* C1 levering: kolonneforhold saa kort 03 slutter med sit indhold (DA+EN maalt 1366: rest -2/-3 px) */ @media (min-width:1200px){ html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle:has(> section){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} } /* C2 Haandvaerket (om.html): let kapitelbehandling (Del n af 2, ordret citat, Trin-piller paa arbejdslisten). Hovederne indsaettes af JS. */ html.kf-omkap:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > p:has(+ .kf-omhoved){padding-bottom:var(--kf-y)} html.kf-omkap:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > .kf-omhoved{display:flow-root;margin:0;text-align:center; padding:var(--kf-y) 0 clamp(26px,2.6vw,36px)} html.kf-omkap:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > .kf-omdel1{--baand:var(--kf-linned)} html.kf-omkap:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > .kf-omdel2{--baand:var(--kf-sand);padding-bottom:0} html.kf-omkap:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > .kf-omdel1 + p{padding-top:0} html.kf-omkap:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > .kf-omdel2 + h2{padding-top:clamp(18px,1.8vw,24px)} html.kf-omkap .kf-omhoved .kf-kapmaerke{display:flex;align-items:center;justify-content:center;gap:12px; margin:0 auto 22px;max-width:none;padding:0 0 0 .24em;font-family:var(--sans);font-size:12.5px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--trae-lys,#6b3a28)} html.kf-omkap .kf-omhoved .kf-kapmaerke::before, html.kf-omkap .kf-omhoved .kf-kapmaerke::after{content:"";width:34px;height:1px;background:currentColor;opacity:.45} html.kf-omkap .kf-omhoved .kf-kapcitat{margin:0 auto;padding:0;max-width:36rem;border:0;background:none} html.kf-omkap .kf-omhoved .kf-kapcitat p{margin:0 auto;padding:0;max-width:none;font-family:var(--serif);font-style:italic; font-weight:400;font-size:clamp(28px,3.3vw,44px);line-height:1.2;letter-spacing:-.01em;color:var(--kf-blaek); text-wrap:balance;text-align:center} html.kf-omkap .kf-omhoved .kf-kapcitat::after{content:"";display:block;width:120px;height:12px; margin:clamp(26px,2.8vw,34px) auto 0;background:var(--kf-orn) center/contain no-repeat} html.kf-omkap:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li::before{ content:"Trin " counter(arbejde,decimal);display:flex;width:max-content;height:28px;align-items:center; margin:0 auto 16px;padding:0 13px 0 calc(13px + .14em);border:1px solid rgba(176,120,80,.4);border-radius:999px; background:rgba(255,255,255,.55);font-size:11px;text-transform:uppercase} html.kf-omkap[lang^="en"]:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul:not(h2 ~ *) > li::before{ content:"Step " counter(arbejde,decimal)} /* C3 traeet: fortaellingens fotos som brede baand (kun sidens egne fotos), luft som hos Kalmly. Ingen transform; bredde + den eksisterende centrering. */ @media (min-width:900px){ html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort .ftfigur{width:min(1320px,calc(100vw - 2*var(--gyde)));margin-block:clamp(56px,6.5vw,96px)} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort .ftfigur img{aspect-ratio:21/9;object-position:50% 50%} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort .billedbaand:has(> li:nth-child(2):last-child){width:min(1320px,calc(100vw - 2*var(--gyde)));margin-block:clamp(56px,6.5vw,96px) 0} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort .ftfigur figcaption{margin:16px auto 0;text-align:center} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort .ftfigur figcaption > *{margin-inline:auto;text-align:center} } /* C4 forside under folden: de solgte borde som en redaktionel mosaik i stedet for et 3x3-gitter. To smaa + stort, en raekke smaa, stort + to smaa (vekslende rytme). Visuel orden = DOM-orden. Kun layout. */ @media (min-width:1000px){ main section#solgte.kf-kurateret > .gitter.enkel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(22px,2.2vw,30px);grid-auto-flow:row dense;margin-top:clamp(32px,3.4vw,48px)} main section#solgte.kf-kurateret > .gitter.enkel > article.kort{grid-column:span 2;margin:0} main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):is(:nth-child(1),:nth-child(2)){grid-column:1 / span 2} main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(3){grid-column:3 / span 4;grid-row:1 / span 2} main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(7){grid-column:1 / span 4;grid-row:span 2} main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):is(:nth-child(8),:nth-child(9)){grid-column:5 / span 2} main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):is(:nth-child(3),:nth-child(7)) :is(a,.ramme){display:block;width:100%;height:100%;box-sizing:border-box;min-width:0} main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):is(:nth-child(3),:nth-child(7)) img{display:block;width:100%;max-width:100%;min-width:0;height:100%;aspect-ratio:auto;object-fit:cover} main section#solgte.kf-kurateret{padding-block:clamp(72px,8vw,120px)} } /* C5 bordsiden: produktkort i to kolonner paa bred desktop (Kalmly-hierarki). Billede og galleri til venstre; tilbage, titel, fakta og den ene knap til hoejre. Kun layout, ingen ny tekst. Gaelder kun naar den kendte struktur findes (fail-open). */ @media (min-width:1100px){ main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta){max-width:min(1240px,calc(100vw - 2*var(--gyde,48px))); display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);column-gap:clamp(48px,5vw,84px); grid-template-rows:auto auto auto auto 1fr;align-items:start} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > *{grid-column:2;min-width:0} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .helt{grid-column:1;grid-row:1 / span 5;margin:0} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .galleri{grid-column:1;grid-row:6;max-width:none;width:100%; margin:clamp(14px,1.4vw,20px) 0 0;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:stretch} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > p.tilbage{grid-row:1;display:block;margin:clamp(6px,1vw,14px) 0 clamp(22px,2.4vw,32px);text-align:left} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > h1.bordtitel{grid-row:2;margin:0;text-align:left; font-size:clamp(44px,4.2vw,62px);text-wrap:balance} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > ul.fakta{grid-row:3;max-width:none;width:100%;box-sizing:border-box; margin:clamp(26px,2.8vw,38px) 0 0;padding:6px 26px} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > p.handling{grid-row:4;margin:clamp(22px,2.4vw,30px) 0 0;text-align:left} main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > p.handling a.knap{display:flex;justify-content:center;width:100%;box-sizing:border-box} } /* r181642-c3 RAMMEFARVE (Stefan 18-10): fokusrammen paa bordkort o.l. var meget moerkebrun (#402018/#6b4a3a). Een lysere varm tone overalt hvor rammen kan optraede: sitets accent #b08463 (samme teak som ornamentet). Lyse rammer paa moerk bund (lysboks, hero-knap) beholder deres egen farve. */ :root{--kf-ramme:#b08463;accent-color:var(--kf-ramme);-webkit-tap-highlight-color:rgba(176,132,99,.22)} ::selection{background:rgba(176,132,99,.28)} :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible, main > section.afslutning a.knap-primaer:focus-visible,main > section.afslutning a.link-sekundaer:focus-visible,main .baandraekke a:focus-visible, .helt img.lb-kan:focus-visible,.faqpunkt summary:focus-visible,.kf-bjaelke a:focus-visible, main .kf-sealle button:focus-visible,main .gitter.enkel > article.kort a:focus-visible{outline-color:var(--kf-ramme)} /* ==== RUNDE D1 (18-10 nat): afsloering kun ved rulning, ogsaa for de sene emner ==== `.kf-sen` saettes KUN af centreret.js paa elementer der laa under folden ved indlaesning. Uden JS findes klassen ikke; under reduceret bevaegelse saettes den ikke, og reglen nedenfor goer dem synlige for en sikkerheds skyld. */ .kf-sen{opacity:0;transform:translateY(16px); transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--tur,0s),transform .8s cubic-bezier(.22,.61,.36,1) var(--tur,0s)} .kf-sen.set{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .kf-sen,.kf-sen.set{opacity:1!important;transform:none!important;transition:none!important} } /* ==== /RUNDE D1 ==== */ /* ==== RUNDE D3 (18-10 nat): Levering - tre veje som tre ens, premium soejler (krav 7) ==== Desktop fra 1100 px: tre lige brede, lige hoeje kort i een raekke (bentoen L1/C1 havde 01+02 til venstre og 03 alene til hoejre). Nummeret er 1, 2, 3 i en rund, praeget plade; kortet har lag-skygge, varm toning og en tynd traefarvet kant foroven. Kortene glider op een ad gangen (0/140/280 ms) naar de rulles ind - kun naar scriptet har sat `.afsloer`, saa uden JS og under reduceret bevaegelse staar de bare der. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle:has(> section){ --kf-bred:min(74rem,calc(100vw - 64px));grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(22px,2.2vw,32px);row-gap:0;align-items:stretch} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > .vejhoved{ grid-column:1/-1;grid-row:1;margin-bottom:clamp(40px,3.6vw,56px)} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n){ grid-column:auto;grid-row:2;margin:0;position:relative;overflow:hidden;isolation:isolate; display:flex;flex-direction:column; padding:clamp(34px,3vw,42px) clamp(26px,2.3vw,32px) clamp(30px,2.6vw,36px); background: radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 60%), linear-gradient(180deg,#fffdf9 0%,#fbf6ef 62%,#f5ece1 100%); border:1px solid rgba(64,32,24,.11);border-radius:18px;outline:0; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(64,32,24,.04), 0 1px 2px rgba(64,32,24,.06), 0 10px 22px -12px rgba(64,32,24,.18), 0 34px 60px -34px rgba(64,32,24,.34)} /* tynd traefarvet kant foroven - toner ud mod hoejre */ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n)::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:-1; background:linear-gradient(90deg,#8a5a3c 0%,#b08463 38%,rgba(176,132,99,0) 100%);opacity:.85} /* stort, svagt nummer nederst til hoejre: dybde og vaegt i det korteste kort */ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n)::after{ content:counter(fortafsnit);position:absolute;right:clamp(14px,1.4vw,22px);bottom:-.3em;z-index:-1;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1; font-family:var(--serif);font-weight:400;font-size:clamp(130px,11vw,160px);line-height:1; color:transparent;-webkit-text-stroke:1px rgba(138,90,60,.11); background:linear-gradient(180deg,rgba(176,132,99,.10),rgba(176,132,99,0) 80%); -webkit-background-clip:text;background-clip:text;pointer-events:none} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > h2{ font-size:clamp(25px,2.2vw,29px);margin:0 0 16px;padding:0 0 16px; border-bottom:1px solid rgba(64,32,24,.1)} /* nummerpladen: 1 / 2 / 3, ikke 01 */ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > h2::before{ content:counter(fortafsnit,decimal);display:grid;place-items:center;position:static; width:44px;height:44px;margin:0 0 20px;padding:0;border-radius:50%; font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:0;line-height:1;opacity:1; font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1; text-transform:none;color:#4a2a1d; background:radial-gradient(circle at 35% 30%,#fffaf3 0%,#f1e3d3 70%,#e8d5c0 100%); border:1px solid rgba(138,90,60,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(138,90,60,.12),0 4px 10px -4px rgba(64,32,24,.25)} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > :is(p,ul){ font-size:15.5px;line-height:1.7} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section .vej-tillaeg{ margin-top:22px;padding:18px 0 0;border-top:1px dashed rgba(64,32,24,.16)} /* indglidning: hele kortet, ikke dets boern, med ro i rytmen */ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section.afsloer{ opacity:0;transform:translateY(34px) scale(.985); transition:opacity .9s cubic-bezier(.22,.61,.36,1) var(--kf-d3,0s),transform 1s cubic-bezier(.22,.61,.36,1) var(--kf-d3,0s), translate .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1)} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section.afsloer > *{ opacity:1;transform:none;transition:none} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(2){--kf-d3:.14s} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(3){--kf-d3:.28s} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section.afsloer.set{ opacity:1;transform:none} } @media (min-width:1100px) and (hover:hover) and (prefers-reduced-motion:no-preference){ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n):hover{ translate:0 -4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(64,32,24,.06), 0 16px 30px -14px rgba(64,32,24,.22),0 44px 70px -36px rgba(64,32,24,.42)} } @media (min-width:1100px) and (prefers-reduced-motion:reduce){ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section.afsloer{ opacity:1!important;transform:none!important;transition:none!important} } /* ==== /RUNDE D3 ==== */ /* ==== RUNDE D3b (18-10 nat): Levering - det store svage tal maa aldrig roere teksten ==== Kort 3 er det laengste, og dets "3" laa oven paa de sidste linjer. Kortene faar en fast fod forneden, og tallet bor i den fod: lidt mindre og lagt ned mod kanten. Gaelder alle tre kort. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n){ padding-bottom:clamp(104px,8vw,116px)} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n)::after{ font-size:clamp(112px,8.6vw,128px);bottom:-.34em;right:clamp(16px,1.5vw,22px)} } /* ==== /RUNDE D3b ==== */ /* ==== RUNDE D4 (18-10 nat): Flow mellem sektionerne - en traad foerer laeseren videre ==== Hver sektionsgraense faar en tynd lodret traad gennem ornamentet, saa oejet foeres fra afsnit til afsnit i stedet for at standse ved en haard kant. Forside: til-salg -> solgte -> afslutning. Levering: overskrift -> tre veje -> spoergsmaal -> afslutning. Kun pseudo-elementer; intet tekstindhold. */ @media (min-width:1100px){ /* Forside: traaden krydser graensen mellem de to baand. */ main .flow > section.katsektion + section.katsektion::before{ height:128px; background: var(--kf-orn) center/120px 12px no-repeat, linear-gradient(to bottom,rgba(138,90,60,0),rgba(138,90,60,.36)) 50% 0/1px 52px no-repeat, linear-gradient(to bottom,rgba(138,90,60,.36),rgba(138,90,60,0)) 50% 100%/1px 52px no-repeat} /* Forside: blid overgang i stedet for en skarp farvekant. */ main .flow > section.katsektion + section.katsektion{ border-image:linear-gradient(to bottom,var(--kf-linned) 0,var(--baand) 150px) fill 0//0 100vmax} /* Alle sider: afslutningens ornament faar en traad der stiger op mod sektionen over. */ main > section.afslutning .afslutning-indhold::before{ height:96px;margin:-84px auto 30px; background: var(--kf-orn) center bottom/120px 12px no-repeat, linear-gradient(to bottom,rgba(138,90,60,0),rgba(138,90,60,.34)) 50% 0/1px 80px no-repeat} /* Levering: traad og ornament der binder overskriften til de tre veje. */ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle:has(> section){ position:relative} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle:has(> section)::before{ content:"";position:absolute;top:0;left:50%;translate:-50% -50%;width:120px;height:128px;pointer-events:none; background: var(--kf-orn) center/120px 12px no-repeat, linear-gradient(to bottom,rgba(138,90,60,0),rgba(138,90,60,.36)) 50% 0/1px 52px no-repeat, linear-gradient(to bottom,rgba(138,90,60,.36),rgba(138,90,60,0)) 50% 100%/1px 52px no-repeat} /* Levering: fra de tre veje ned til spoergsmaalene. */ html:has(link[rel="canonical"][href$="/levering.html"]) body main section.faq::before{ content:"";display:block;width:120px;height:120px;margin:-56px auto 22px;pointer-events:none; background: var(--kf-orn) center bottom/120px 12px no-repeat, linear-gradient(to bottom,rgba(138,90,60,0),rgba(138,90,60,.34)) 50% 0/1px 104px no-repeat} } /* ==== /RUNDE D4 ==== */ /* ==== RUNDE D2 (18-10 nat): Kortenes hover-loeft - tydeligere, som paa Kalmly ==== Maalt live: 3 px loeft og en svag skygge, 0,25 s lineaer. Nu 6 px med en dybere, varm skygge og en blid udglidning. Kun med fin markoer og uden reduceret bevaegelse. */ @media (min-width:1100px) and (hover:hover) and (prefers-reduced-motion:no-preference){ html body main .gitter.enkel > article.kort.kort{ transition-property:opacity,transform,translate,box-shadow,border-color; transition-duration:.72s,.72s,.45s,.45s,.3s;transition-timing-function:cubic-bezier(.22,.61,.36,1)} main .gitter.enkel > article.kort:hover{translate:0 -6px} main .gitter.enkel > article.kort:not(.er-solgt):hover, main .gitter.enkel > article.kort.er-solgt:hover .ramme{ box-shadow:0 1px 2px rgba(64,32,24,.05),0 22px 44px -20px rgba(64,32,24,.34)} } /* ==== /RUNDE D2 ==== */ /* ==== RUNDE E1 (18-10 nat): Levering - lavere kort uden doedt rum ==== Maalt live 1366: tre kort a 375 x 860 px; kort 2 var mest tomt, og 116 px fod holdt det store tal. Nu: lidt bredere raekke (kort ca. 400 px), taettere punktliste og tillaeg, en lav fod med det samme ornament som overskriften, og tallet stille oppe til hoejre ud for nummerpladen, hvor det aldrig kan naa teksten. Kortene er stadig lige hoeje. Kun layout; ingen tekst. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle:has(> section){ --kf-bred:min(78rem,calc(100vw - 96px));column-gap:clamp(20px,1.8vw,26px)} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n){ padding:clamp(28px,2.4vw,34px) clamp(26px,2.2vw,30px) 66px; background: var(--kf-orn) 50% calc(100% - 28px)/96px 10px no-repeat, radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 60%), linear-gradient(180deg,#fffdf9 0%,#fbf6ef 62%,#f5ece1 100%)} /* stille tal oppe til hoejre, i nummerpladens raekke */ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(n)::after{ top:clamp(16px,1.4vw,20px);bottom:auto;right:clamp(20px,1.8vw,26px); font-size:68px;line-height:1;height:68px;overflow:hidden; -webkit-text-stroke:1px rgba(138,90,60,.16); background:linear-gradient(180deg,rgba(176,132,99,.12),rgba(176,132,99,0) 85%); -webkit-background-clip:text;background-clip:text} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > h2::before{margin-bottom:16px} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > h2{margin-bottom:14px;padding-bottom:14px} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > :is(p,ul){line-height:1.62} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section ul.punkter{margin:14px 0 0;padding-top:0} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section ul.punkter li{margin:0 0 6px;line-height:1.5} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section .vej-tillaeg{margin-top:18px;padding-top:16px} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section .vej-tillaeg h3{margin:0 0 6px} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section .vej-tillaeg p{line-height:1.58;margin:0} } /* ==== /RUNDE E1 ==== */ /* ==== RUNDE E2 (18-10 nat): Forside - et bredt billedbaand mellem til-salg og solgte ==== Kalmly holder et roligt billede mellem sektionerne; forsiden gik fra tekst og kort direkte til naeste overskrift. Baandet genbruger sidens eget banner (palisander-aaring, samme fil som i toppen og foden), beskaaret anderledes og tonet ud i kanterne, saa det laeses som en pause og ikke som en ny hero. Rent dekorativt pseudo-element: ingen tekst, intet nyt billede, ingen animation. */ @media (min-width:1100px){ main .flow > section#til-salg::after{ content:"";display:block;grid-column:1/-1;justify-self:center; width:min(86rem,calc(100vw - 64px));height:clamp(220px,19vw,280px); margin:clamp(56px,4.6vw,72px) 0 0;border-radius:20px;pointer-events:none; background: radial-gradient(120% 140% at 50% 50%,rgba(40,20,12,0) 55%,rgba(40,20,12,.32) 100%), linear-gradient(90deg,rgba(243,234,223,.22),rgba(243,234,223,0) 18%,rgba(243,234,223,0) 82%,rgba(243,234,223,.22)), url("banner/B-26-1600x400.jpg") 50% 64%/cover no-repeat; box-shadow:0 1px 2px rgba(64,32,24,.08),0 26px 50px -30px rgba(64,32,24,.45),inset 0 0 0 1px rgba(64,32,24,.08)} } /* ==== /RUNDE E2 ==== */ /* ==== RUNDE E3 (18-10 nat): Traeet - kortere side alene ved layout ==== Maalt live 1366: 10.785 px, al broedtekst i een 620 px soejle. Nu: kapitlernes afsnit staar i en bredere ramme (maks. 1120 px) og broedteksten loeber i to spalter (ca. 530 px, en god linjelaengde), overskrift, billeder og billedpar spaender over begge. Billederne foelger rammens bredde, og den lodrette rytme (kapitelhoveder, afsnitsfod, billedluft) strammes. Ingen tekst er fjernet eller omskrevet; DOM-raekkefoelgen er uaendret. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/trae.html"]) main > .soejle > article.fort > .ftsoejle:has(> section){ --e3-bred:min(70rem,calc(100vw - 2*var(--gyde,32px))); width:var(--e3-bred);max-width:none;margin-inline:calc((100% - var(--e3-bred))/2)} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section{ column-count:2;column-gap:clamp(44px,4vw,60px);column-fill:balance} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > :is(h2,figure,.ftfigur,ul.billedbaand){ column-span:all} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > :is(p,ul.punkter){ max-width:none} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > p:first-of-type{margin-top:0} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > ul.punkter{break-inside:avoid} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > ul.punkter > li{break-inside:avoid} /* billeder: rammens bredde, mindre luft */ html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort .ftfigur{ width:100%;left:auto;translate:none;margin-block:clamp(32px,3vw,44px) 0} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort .billedbaand:has(> li:nth-child(2):last-child){ width:100%;left:auto;translate:none;margin-block:clamp(32px,3vw,44px) 0} /* lodret rytme */ html:has(link[rel="canonical"][href$="/trae.html"]) body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > .kf-kaphoved{ padding-top:clamp(48px,4.2vw,60px)} html:has(link[rel="canonical"][href$="/trae.html"]) body main article.fort.kf-kapitler.kf-kapitler .kf-kapcitat::after{ margin-top:clamp(20px,1.8vw,26px)} html:has(link[rel="canonical"][href$="/trae.html"]) body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(:last-child){ padding-bottom:clamp(32px,2.8vw,40px)} } /* ==== /RUNDE E3 ==== */ /* ==== RUNDE F1 (18-10 nat): Traeet - spaltefejl fra E3 ==== Maalt 1366 efter E3: sortsnoten under «Fra trae til bord» braekkede 2+1 linjer over spalterne; kildelisten stod 14 linjer i venstre spalte med hoejre tom; traaden mellem afsnittene startede lige under teksten og laeste som en fortsaettelse af spaltemellemrummet. Nu: noten holdes samlet i spalte 1, kilderne deles mellem punkter, og traaden er en kort stub lige over Trin-pillen, fri af spalterne. Ingen tekst aendret. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > p.kf-sortnote{break-inside:avoid} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section:not(:has(> p)) > ul.punkter{break-inside:auto;margin-top:0;padding-top:0} html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > :is(p,ul.punkter){orphans:2;widows:2} html:has(link[rel="canonical"][href$="/trae.html"]) body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(:last-child):not(.kf-kaphoved + section)::before{ top:6px;height:22px} html:has(link[rel="canonical"][href$="/trae.html"]) body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section:not(.kf-kaphoved + section):not(:has(> p)):has(> ul.punkter)::before{ top:34px;height:22px} } /* ==== /RUNDE F1 ==== */ /* ==== RUNDE F2 (18-10 nat): forsidens billedbaand uden opskalering ==== Kandidater paa sitet (maalt med PIL i /var/www/bordmand-enkel): ingen bred skarp kilde over 1800 px. banner/B-26-1600x400 (1600x400) og fortaelling/egen-kerneved-moerk (1800x1350) er samme bloede traeflade; 20261017-ren-sofabord-638 (4160x3120) er et fritlagt produktfoto, ikke en flade. Derfor: baandet kappes til 1100 px (kilden vises ved 0,69x paa 1x-skaerm og naer 1:1 paa 1,5x) og beskaeres mindre (4,2:1 mod 4:1). */ @media (min-width:1100px){ main .flow > section#til-salg::after{width:min(1100px,calc(100vw - 64px));height:clamp(220px,19vw,260px); background-size:auto,auto,cover;border-radius:18px} } /* ==== /RUNDE F2 ==== */ /* ==== RUNDE F3 (18-10 nat): Levering - kortene ens fyldt ==== Kalmly-sammenligning: kalmlys kort er ens hoeje OG ens fyldte. Her var de ens hoeje (722 px ved 1366) men kort 2 «Du henter selv» brugte kun 259 px af dem og kort 1 520 - et halvtomt kort er det mest synlige hul paa de tre sider. Hoejden saettes af kort 3 (tekst + «Bordet skilles ad»). Spalterne vaegtes nu efter indhold (1.1 : .62 : 1.28), saa kort 3 bliver lavere og kort 2 smallere; raekken og raekkefoelgen 1-2-3 er uaendret. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle:has(> section){ grid-template-columns:minmax(0,1.1fr) minmax(0,.62fr) minmax(0,1.28fr)} } /* ==== /RUNDE F3 ==== */ /* ==== RUNDE G1 (18-10 nat): solgte-mosaikken - visuel orden = DOM-orden ==== S12 BOER 1: med `dense` og kort 3 stort til hoejre laa kortene visuelt [0,2,1,3,...], mens Tab foelger DOM. Nu eksplicit placering, ingen dense: raekke 1 tre smaa (1,2,3); blok 2 smaa-stort-smaa med kort 5 stort til hoejre (4 og 6 til venstre); blok 3 som foer, kort 7 stort til venstre med 8 og 9 til hoejre. Stadig 5 raekker x 6 spalter, 30 celler, ingen huller. De store pladser bruger nu de to kort med store kildefiler (3264 og 1448 px) i stedet for et 300 px-billede strakt til 755 px. Kun foldet tilstand (.kf-kurateret), kun >=1100; udfoldet er et almindeligt 3-spaltet gitter. */ @media (min-width:1100px){ html body main section#solgte.kf-kurateret > .gitter.enkel{grid-auto-flow:row} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(-n+9){grid-row:auto;grid-column:span 2} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(4){grid-column:1 / span 2;grid-row:2} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(5){grid-column:3 / span 4;grid-row:2 / span 2} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(6){grid-column:1 / span 2;grid-row:3} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(7){grid-column:1 / span 4;grid-row:4 / span 2} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(8){grid-column:5 / span 2;grid-row:4} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(9){grid-column:5 / span 2;grid-row:5} /* kort 3 er nu lille: tilbage til smaa korts billedform */ html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(3) > a{display:flex;height:auto} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(3) .ramme{height:auto} /* kort 5 er nu stort: fyld pladsen som kort 7 */ html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(5) :is(a,.ramme){display:block;width:100%;height:100%;box-sizing:border-box;min-width:0} html body main section#solgte.kf-kurateret > .gitter.enkel > article.kort:not(.kf-ekstra):nth-child(5) img{display:block;width:100%;max-width:100%;min-width:0;height:100%;aspect-ratio:auto;object-fit:cover} } /* ==== /RUNDE G1 ==== */ /* ==== RUNDE H0 (18-10 nat): Traeet - soemstubben i eet stykke ==== Maalt 1366: ved de seks kapitel-soemme slutter forrige afsnits ::after ved bund 0, mens kf-kapfort-afsnittets ::before (F1) startede ved top 6px. Stubben blev tegnet i to stykker med 6px hul. Nu starter ::before ved 0 og er 6px laengere, saa stubbens nedre ende staar uaendret over pillen. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/trae.html"]) body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section.kf-kapfort:not(:last-child):not(.kf-kaphoved + section):is(:has(> p),:not(:has(> ul.punkter)))::before{ top:0;height:28px} } /* ==== /RUNDE H0 ==== */ /* ==== RUNDE H1 (18-10 nat): Spoergsmaal som eet hvilende panel (Kalmly) ==== Kalmlys FAQ ligger i et lyst, afrundet panel med raekker; her stod spoergsmaalene som loese streger paa baandet. Nu: de fire
bliver eet papirpanel (afrundet top paa foerste, bund paa sidste, blød skygge der ikke danner sømme), luft til siden, plusset i en lille rund plade, og en varm toning paa raekken ved hover og naar den er aaben. Levering og Kontakt. Kun layout; ingen tekst. */ @media (min-width:1100px){ body main section.faq > details.faqpunkt{ background:linear-gradient(180deg,#fffdf9 0%,#fdf9f3 100%); border:1px solid rgba(64,32,24,.10);border-top-color:rgba(64,32,24,.08);border-bottom:0; box-shadow:0 18px 30px -22px rgba(64,32,24,.30); transition:background-color .25s var(--kf-ud,ease)} body main section.faq > details.faqpunkt:first-of-type{border-top-color:rgba(64,32,24,.12);border-radius:18px 18px 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 30px -22px rgba(64,32,24,.30)} body main section.faq > details.faqpunkt:last-of-type{border-bottom:1px solid rgba(64,32,24,.12);border-radius:0 0 18px 18px; box-shadow:0 1px 2px rgba(64,32,24,.05),0 12px 24px -14px rgba(64,32,24,.20),0 34px 60px -36px rgba(64,32,24,.34)} body main section.faq > details.faqpunkt > summary{ padding:20px 72px 20px 30px;border-radius:inherit; transition:background-color .25s var(--kf-ud,ease),color .25s var(--kf-ud,ease)} body main section.faq > details.faqpunkt:last-of-type:not([open]) > summary{border-radius:0 0 17px 17px} body main section.faq > details.faqpunkt:first-of-type > summary{border-radius:17px 17px 0 0} body main section.faq > details.faqpunkt > summary:hover{background-color:rgba(176,132,99,.07)} body main section.faq > details.faqpunkt[open]{background:linear-gradient(180deg,#fdf6ee 0%,#fbf3ea 100%)} /* plusset i en lille rund, praeget plade */ body main section.faq > details.faqpunkt > summary::before, body main section.faq > details.faqpunkt > summary::after{right:39px;width:12px;background:#8a5a3c} body main section.faq > details.faqpunkt > summary > :first-child{display:inline} body main section.faq > details.faqpunkt{position:relative} body main section.faq > details.faqpunkt::after{content:"";position:absolute;right:26px;top:var(--kf-faqplade,33px);width:28px;height:28px; margin-top:-14px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 35% 30%,#fffdf9 0%,#f6ece0 100%); border:1px solid rgba(138,90,60,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 5px -2px rgba(64,32,24,.18); transition:border-color .25s var(--kf-ud,ease)} body main section.faq > details.faqpunkt > summary{z-index:1} body main section.faq > details.faqpunkt:hover::after{border-color:rgba(138,90,60,.38)} body main section.faq > details.faqpunkt > p{padding:0 72px 0 30px;margin:-4px 0 0;padding-bottom:22px;line-height:1.62} } @media (min-width:1100px) and (prefers-reduced-motion:reduce){ body main section.faq > details.faqpunkt, body main section.faq > details.faqpunkt > summary, body main section.faq > details.faqpunkt::after{transition:none} } /* ==== /RUNDE H1 ==== */ /* ==== RUNDE H2 (18-10 nat): Traeet - doedt hul under noegletal-kortene ==== Maalt 1366: fra kortenes bund til «DEL 1 AF 3» stod ca. 198px tom flade (ul.noegletal padding-bottom var(--kf-y)=130px + kapitelhovedets 57px). Kalmly lader et panel blive fulgt af naeste afsnit med en takt, ikke en pause. Afstanden under kortene halveres; kapitelhovedet er uroert. */ @media (min-width:1100px){ html:has(link[rel="canonical"][href$="/trae.html"]) main article.fort.kf-kapitler > ul.noegletal{ padding-bottom:clamp(56px,5vw,72px)} } /* ==== /RUNDE H2 ==== */ /* KRAV 16 (18-10): «Find vej til showroomet» (rute.js' overskrift, h2/h3) og den ydre footer-container stod med text-align:start. Centreres som resten. Maalt foer: h3 ta=start, .vfoot ta=start. */ main .bordmand-rute > h2, main .bordmand-rute > h3, .vfoot.vfoot-a{text-align:center} /* KRAV 13 (18-10): 1px-stregerne vaek. Traeets kapitel-lodlinjer (section::before/::after) og kapitelmaerkets streger, Levering h2- understregning og .vej-tillaeg-stregen, Kontakt-kortenes kanter og Find vej-widgetens og kortets kant. SOLGT-stregerne (krav 14) roeres ikke - de ligger paa forsidens kort, ikke her. Kanterne goeres gennemsigtige frem for at fjernes, saa intet flytter sig en pixel. !important: de lagdelte kapitel-/levering-regler vandt ellers (maalt). */ html:root body main article.fort > .ftsoejle > section::before, html:root body main article.fort > .ftsoejle > section::after, html:root body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section::before, html:root body main article.fort.kf-kapitler.kf-kapitler > .ftsoejle > section::after, html:root body main .kf-kapmaerke::before, html:root body main .kf-kapmaerke::after, html.kf-omkap:root .kf-omhoved .kf-kapmaerke::before, html.kf-omkap:root .kf-omhoved .kf-kapmaerke::after{content:none!important} html:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort h2, html:root body main article.fort .vej-tillaeg, html:root body main section.kontakt, html:root body main .kontaktkort, html:root body main .bordmand-rute, html:root body main .bordmand-rute .br-kort{border-color:transparent!important} /* KRAV 73 (18-10): EEN hjoerneradius for kort, billeder og kasser - var(--kf-r) (24 px). Maalt foer @1366: Levering-kasser og FAQ-gruppens yderhjoerner 18, Til salg-baandet 18, Til salg-kortets billedramme 16, Find vej-widget og kort 3, bordsidens hovedbillede-ramme 2 (billedet indeni 24). Galleriets smaa miniaturer (122x91) faar rammen til at foelge billedet (12), saa der ikke staar sand i hjoernerne. */ html:root body main article.fort > .ftsoejle > section, html:root body main .bordmand-rute, html:root body main .bordmand-rute .br-kort, html:root body main .gitter.enkel > article.kort .ramme, html:root body main .bordsoejle .helt{border-radius:var(--kf-r)!important} html:root body main section.faq > details.faqpunkt:first-of-type{border-radius:var(--kf-r) var(--kf-r) 0 0!important} html:root body main section.faq > details.faqpunkt:last-of-type{border-radius:0 0 var(--kf-r) var(--kf-r)!important} html:root body main section.faq > details.faqpunkt:only-of-type{border-radius:var(--kf-r)!important} @media (min-width:1100px){ html:root body main .flow > section#til-salg::after{border-radius:var(--kf-r)!important} } html:root body main .bordsoejle .galleri button .ramme{border-radius:12px!important} /* KRAV 28: een brun - #6b4a3a/#6b3a28/#333 og Leaflet-blaa -> #402018. Sitet er lyst ogsaa naar systemet staar paa moerk (baggrunden er altid lys), saa tokens gaelder i begge tilstande. */ html:root:root{color-scheme:light;--kf-daempet:#402018;--trae-lys:#402018;accent-color:#402018;-webkit-tap-highlight-color:rgba(64,32,24,.18)} html:root body main section.faq > h2::before{color:#402018} html:root body main form.hv input:not([type=hidden]):focus,html:root body main form.hv textarea:focus,html:root body main form.hv select:focus{box-shadow:0 0 0 2px rgba(64,32,24,.22)} ::selection{background:rgba(64,32,24,.22)} html:root body .leaflet-container .leaflet-control-attribution,html:root body .leaflet-container .leaflet-control-attribution a,html:root body .leaflet-container a{color:#402018} /* KRAV 50: forsidens hul (billedbaandet fra runde E2, 809 px) lukkes til sitets normale sektionsafstand. */ @media (min-width:1100px){ html:root body main .flow > section#til-salg::after{content:none!important;display:none!important} } /* KRAV 34: ens afstand fra top til foerste overskrift - sidetop paa find vej og kontakt starter som de oevrige undersider. */ html:root body main > .soejle.sidetop{padding-top:0!important} /* KRAV 17: eet kort til salg - kortet staar paa sitets midterakse, note og solgt-baand under det. */ html:root body main .flow > section#til-salg:has(> .gitter.enkel){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important} html:root body main .flow > section#til-salg:has(> .gitter.enkel) > *{grid-column:1/-1!important;grid-row:auto!important;justify-self:center} html:root body main .flow > section#til-salg > .gitter.enkel{width:400px!important;max-width:100%} html:root body main .flow > section#til-salg:has(> .gitter.enkel) > .soejle.ind:not(:first-child){width:560px!important;max-width:100%!important;margin-top:32px!important;text-align:center!important} html:root body main .flow > section#til-salg:has(> .gitter.enkel) .tilsalgnote{text-align:center!important} /* Krav 17 (S12 TILLAEG 9): «Tidligere solgt» og baandets link centreres ogsaa - de flugtede med baandets venstrekant over et centreret gitter. */ html:root body main .flow > section#til-salg .solgtbaand .baandmaerke,html:root body main .flow > section#til-salg .baandsaetning{text-align:center!important;margin-left:auto!important;margin-right:auto!important} /* KRAV 26: EEN typografisk skala - seks niveauer, serif til overskrifter, sans til broedtekst. lille 13 · ui 15 · broed 18 · lead 23 · h2 48 · h1 84 (px ved desktop; lead/h2/h1 skalerer ned paa smal skaerm). De gamle tokens (--tf-*, --kf-laes-v2) peger nu paa skalaen; resten laegges over herunder. Undtagelse: ordmaerket .sitenavn er et logo, ikke et tekstniveau. */ html:root{ --ts-lille:13px;--ts-ui:15px;--ts-broed:18px; --ts-lead:clamp(19px,1.7vw,23px);--ts-h2:clamp(34px,4.4vw,48px);--ts-h1:clamp(46px,6.4vw,84px); --tf-kredit:var(--ts-lille);--tf-etiket:var(--ts-lille);--tf-s:var(--ts-ui);--tf-b:var(--ts-broed); --tf-m:var(--ts-lead);--tf-l:var(--ts-h2);--tf-xl:var(--ts-h1);--kf-laes-v2:var(--ts-broed); } @media (min-width:900px){ /* lille - etiketter, oejenbryn, billedtekster, kilder, sprogvaelger */ html:root body :is(.vhead-a .kf-ned,nav.sprog,nav.sprog a,nav.sprog span,main .ojenbryn,main .kf-kapmaerke,main .baandmaerke, main .solgtflag span,main .solgtflag .flagmaal,main figcaption,main .billedkredit,main .billedkredit a, .kontaktkort dt,.kontaktkort .kk-cvr,main form.hv > .under, main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child, main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child > h2, main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child :is(p,li,a), .bordmand-rute .br-svar .br-fra,.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-attribution a, main .galleri button){font-size:var(--ts-lille)!important} html:root body main :is(section > h2,section.faq > h2,.soejle > ul > li)::before{font-size:var(--ts-lille)!important} html:root body main .galleri button{font-family:var(--sans)!important} /* ui - navigation, knapper, formularetiketter, kontaktdetaljer, sidefod */ html:root body :is(.vhead-a nav a,.kf-bjaelke nav a,.vfoot-regel,.vfoot-regel strong,main a.knap-primaer,main a.link-sekundaer, .vhead-a .vtekst .heroknap a,main .kf-sealle button,main form.hv label,.kontaktkort dd,.kontaktkort .kk-aftale, main .bordmand-rute label,main .bordmand-rute button,main .bordmand-rute .br-knap,main .bordmand-rute .br-knap span, main .bordmand-rute .rutenote,main .bordmand-rute .br-info,main .bordmand-rute .br-info span,main .bordmand-rute .br-adresse, main .kf-sortnote,main article.fort .vej-tillaeg > p){font-size:var(--ts-ui)!important} /* broed - al loebende tekst */ html:root body main :is(.efterkort,.baandsaetning,.baandsaetning a,.faqpunkt > p,.findvejnote,.aftalenote, .bordmand-rute .br-intro,.bordmand-rute input[type=text],.bordmand-rute .br-svar, article.fort > .ftsoejle > section > p,article.fort > .ftsoejle > section ul.punkter li){font-size:var(--ts-broed)!important} /* lead - indledninger og serif-mellemrubrikker */ html:root body :is(.vhead-a .vtekst .under,main p.indledning,main > .soejle.sidetop > p:not(.ojenbryn),main .findvejintro, main > section.afslutning p:not(.afslutning-handling),main .faqpunkt summary,.kontaktkort .kk-titel,main article.fort .vej-tillaeg > h3, main .prislinje,main .fakta .v,main article.fort > ul.noegletal .tal,.kf-bjaelke-navn,.leaflet-control-zoom a, .bordmand-rute .br-svar .br-tal,html:has(link[rel="canonical"][href$="/om.html"]) main > .soejle > ul > li, html:has(link[rel="canonical"][href$="/levering.html"]) main article.fort > .ftsoejle > section > h2){font-size:var(--ts-lead)!important} /* h2 - sektionsoverskrifter, citater, produkttitel */ html:root body main :is(.sektionsmaerke,article.fort .vejhoved h2,section.faq > h2,.bordmand-rute h3, .kf-kapcitat p,h1.bordtitel),html:root body main > section.afslutning h2, html:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > h2, html:root:not(:has(link[rel="canonical"][href$="/levering.html"])) body main article.fort > .ftsoejle > section:not(:last-child) > h2{font-size:var(--ts-h2)!important} /* h1 - sidetitler */ html:root body main h1.sidetitel{font-size:var(--ts-h1)!important} } /* KRAV 72 (Session 12 BOER 20-10): kilder-overskriften stod 11 px under 900 px; skalaens lille-niveau gaelder paa alle bredder. */ @media (max-width:899px){ html:root body main article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child > h2{font-size:var(--ts-lille)!important} } /* SOLGTE BORDE STORE IGEN (Stefan 21-10-2026): smaa-baandet er fjernet; paa mobil staar de solgte borde i een stor kolonne i stedet for to smaa. */ @media (max-width:599px){ html:root body main section#solgte > .gitter.enkel{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important} html:root body main section#solgte > .gitter.enkel > article.kort{grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:none!important} html:root body main section#solgte > .gitter.enkel > article.kort img{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover} } /* Desktop: gitteret brydes ud til 1230 px, saa de smaa solgte borde staar ca. 400 px brede (foer 363). */ @media (min-width:1300px){ html:root body main section#solgte > .gitter.enkel{width:1230px!important;max-width:calc(100vw - 96px)!important;margin-left:50%!important;transform:translateX(-50%)} } /* == TYPOGRAFI-ROLLER + OVERGANGE (21-10, Stefan via relay) == Een rolle = eet niveau, ens paa hele sitet. Tokens herunder; storrelserne er KRAV 26-skalaen. Overgange: JS (SOEM 21-10 i centreret.js) saetter --forrige + .kf-soem hvor to baand med forskellig tone moedes; uden JS staar baandene som foer. */ html:root{ --ts-familie-overskrift:var(--serif,"Cormorant Garamond",Georgia,serif); --ts-familie-tekst:var(--sans,Inter,system-ui,sans-serif); --ts-vaegt-tekst:400;--ts-vaegt-overskrift:400;--ts-vaegt-mellem:500;--ts-vaegt-etiket:600;--ts-vaegt-navn:300; --ts-lh-broed:1.7;--ts-lh-lead:1.55;--ts-lh-mellem:1.35;--ts-lh-overskrift:1.15; --ts-sp-etiket:.2em; --ts-farve-tekst:var(--kf-blaek,#402018);--ts-farve-daempet:var(--kf-daempet,#6b4a3a);--ts-farve-accent:var(--trae-lys,#6b3a28); --ts-base-lys:var(--kf-papir,#fbf9f5);--ts-base-moerk:var(--kf-blaek,#402018); --kf-soem:clamp(56px,7vw,120px); /* ornamentet med udtonede stregender (ingen haarde ender) */ --kf-orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='4' y1='0' x2='50' y2='0'%3E%3Cstop offset='0' stop-color='%236b4a3a' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%236b4a3a' stop-opacity='.5'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='116' y1='0' x2='70' y2='0'%3E%3Cstop offset='0' stop-color='%236b4a3a' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%236b4a3a' stop-opacity='.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 6h48' stroke='url(%23a)'/%3E%3Cpath d='M70 6h48' stroke='url(%23b)'/%3E%3Cpath d='M60 1.5l4.5 4.5-4.5 4.5-4.5-4.5z' fill='%23b08463'/%3E%3C/svg%3E"); } /* -- Broedtekst: sans, broed, 400, 1.7 - ogsaa punkter (Tilskaering og specialmaal m.fl.) -- */ html:root body main :is(.faqpunkt > p,article.fort > .ftsoejle > section > p,article.fort > .ftsoejle > section ul.punkter li), html:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > p:not(.ojenbryn), html:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle.soejle.soejle > h2 ~ ul > li{ font-family:var(--ts-familie-tekst)!important;font-size:var(--ts-broed)!important;font-weight:var(--ts-vaegt-tekst)!important; font-style:normal!important;line-height:var(--ts-lh-broed)!important;letter-spacing:0!important;color:var(--ts-farve-tekst)} html:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > h2 ~ ul > li{text-align:start} /* -- Mellemrubrik: serif, lead, 500, 1.35 -- */ html:root body main :is(.faqpunkt > summary,article.fort .vej-tillaeg > h3),html:root body .kontaktkort .kk-titel{ font-family:var(--ts-familie-overskrift)!important;font-size:var(--ts-lead)!important;font-weight:var(--ts-vaegt-mellem)!important; font-style:normal!important;line-height:var(--ts-lh-mellem)!important;letter-spacing:0!important;color:var(--ts-farve-tekst)} /* -- Sektionsoverskrift: serif, h2, 400, 1.15 -- */ html:root body main :is(section.faq > h2,.sektionsmaerke,section.afslutning h2), html:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > h2{ font-family:var(--ts-familie-overskrift)!important;font-weight:var(--ts-vaegt-overskrift)!important;font-style:normal!important; line-height:var(--ts-lh-overskrift)!important;letter-spacing:-.01em!important;text-transform:none!important} /* -- Etiket (oejenbryn): sans, lille, 600, .2em, versaler, accent -- */ html:root body main :is(.ojenbryn,.kf-kapmaerke,.baandmaerke){ font-family:var(--ts-familie-tekst)!important;font-size:var(--ts-lille)!important;font-weight:var(--ts-vaegt-etiket)!important; letter-spacing:var(--ts-sp-etiket)!important;text-transform:uppercase!important;font-style:normal!important;color:var(--ts-farve-accent)} /* -- FAQ: etiketten «Spoergsmaal» = oejenbrynet (rude + versaler), ikke et plus -- */ /* (etiketten fjernet 21-10: LAAST REGEL ingen dobbeltoverskrifter) */ html:root body main section.faq > h2{text-align:center;margin-bottom:clamp(24px,2.6vw,36px)!important} html:root body main section.faq > details.faqpunkt > summary{text-align:start} html:root body main section.faq > details.faqpunkt > p{text-align:start;max-width:none} /* -- Navnet Bordmanden: ens med hovedoverskriften alle steder (LAAST REGEL 21-10) -- */ .navn,html:root body .navn{font-family:var(--serif,"Cormorant Garamond",Georgia,serif)!important;font-weight:300!important; font-style:normal!important;letter-spacing:-.005em!important;text-transform:none!important;font-size:1.12em;line-height:1} html:root body main .ojenbryn .navn{font-size:1.6em;vertical-align:-.04em} /* -- Bloede overgange mellem baand: tonen fra baandet over loeber ind over toppen -- */ html:root body main .kf-soem.kf-soem.kf-soem{ border-image:linear-gradient(var(--forrige) 0,var(--baand) min(var(--kf-soem),70%)) fill 0//0 100vmax} html:root body main > section.afslutning.kf-soem{ background-image:linear-gradient(var(--forrige),var(--kf-honning) var(--kf-soem))} /* -- Skillestreger med udtonede ender -- */ html:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > ul > li, html:root body main ul.fakta{ border-image:linear-gradient(90deg,rgba(64,32,24,0),rgba(64,32,24,.14) 22%,rgba(64,32,24,.14) 78%,rgba(64,32,24,0)) 1} html:root body main .efterkort:not(.solgtnote)::before{background:linear-gradient(90deg,rgba(64,32,24,0),var(--trae) 30%,var(--trae) 70%,rgba(64,32,24,0))!important} /* -- Stregerne tegnes op ved scroll (kun med bevaegelse slaaet til) -- */ @media (prefers-reduced-motion:no-preference){ html:root body main .efterkort.afsloer:not(.solgtnote)::before{transform:scaleX(.15);opacity:.15;transform-origin:0 50%; transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .2s,opacity 1.1s ease .2s} html:root body main .efterkort.afsloer.set:not(.solgtnote)::before{transform:none;opacity:.5} @supports (animation-timeline:view()){ @keyframes kf-tegn{from{clip-path:inset(0 calc(50% - 7px));opacity:.4}to{clip-path:inset(0 0);opacity:1}} main .flow > section.katsektion + section.katsektion::before, main > section.afslutning .afslutning-indhold::before, body main article.fort.kf-kapitler.kf-kapitler .kf-kapcitat::after{ animation:kf-tegn linear both;animation-timeline:view();animation-range:entry 10% cover 40%} } } /* == /TYPOGRAFI-ROLLER + OVERGANGE == */ /* == MENU-OVERGANG A == (21-10, BORDMAND-26 #2: "merge topmenu-overgangen med en premium-animation"). Variant A fra /bordmand-menudemo/ - Glidende sammenfoldning. Toppens menu og bjaelken er nu EEN menu (.md-spor, bygget af centreret.js): den ligger praecis hvor toppens menu stod og folder sig sammen til en frostet bjaelke, styret af rulningen (--p 0..1). Alt er gatet paa html.kf-menu-a, som JS'en saetter; uden JS staar toppens menu og den gamle bjaelke som foer. */ @property --p{syntax:'';inherits:true;initial-value:0} html.kf-menu-a .kf-bjaelke{display:none!important} html.kf-menu-a .vhead-a .vtekst{transform:none!important} html.kf-menu-a .vhead-a .vtekst > .sidemenu{visibility:hidden;animation:none!important} .md-spor{position:sticky;top:0;z-index:50;height:var(--mh,64px); margin-top:calc(var(--off,0px)*-1);margin-bottom:calc(var(--off,0px) - var(--mh,64px)); pointer-events:none} .md{position:relative;height:100%; animation:md-p linear both;animation-timeline:scroll(root); animation-range:calc(var(--y0,600px) - var(--r,200px)) var(--y0,600px); animation-timing-function:cubic-bezier(.45,.05,.55,.95)} @keyframes md-p{from{--p:0}to{--p:1}} html.md-js .md{animation:none} .md-ramme,.md-flade,.md-linje{position:absolute;inset:0;pointer-events:none} .md-linje{top:auto;height:1px;background:var(--kf-kant,rgba(64,32,24,.1));opacity:var(--p)} .md-flade{opacity:var(--p);background:rgba(251,249,245,.92); -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1); transform:scaleY(calc(1.6 - .6*var(--p))); box-shadow:0 10px 28px -20px rgba(64,32,24,calc(.5*var(--p)*var(--p)))} .md-indre{position:relative;height:100%;max-width:70rem;margin:0 auto;padding:0 24px;box-sizing:border-box; display:flex;align-items:center;justify-content:space-between;gap:24px; animation:kf-op .72s var(--kf-ind) .24s both} .md-navn{pointer-events:auto;flex:none;margin:0;line-height:1.2;font-family:var(--serif);font-size:23px;font-weight:500; letter-spacing:.01em;color:var(--kf-blaek,#402018);text-decoration:none;white-space:nowrap; opacity:clamp(0,calc((var(--p) - .55)*2.4),1); transform:translateX(calc(-14px*(1 - var(--p))))} .md-nav{pointer-events:auto;display:flex;margin:0;padding:0;gap:10px 18px;align-items:center; transform:translateX(calc(var(--nx,0px)*(1 - var(--p))))} .md-nav a{font-family:var(--sans);font-size:15px;line-height:28px;white-space:nowrap;text-decoration:none; color:color-mix(in oklab,var(--kf-daempet,#6b4a3a) calc(var(--p)*100%),var(--kf-creme,#f2e6d9)); text-shadow:0 1px 6px rgba(0,0,0,calc(.45*(1 - var(--p)*1.6))); transition:opacity .15s var(--kf-farve,ease)} .md-nav a[aria-current],.md-nav a.nu{color:color-mix(in oklab,var(--kf-blaek,#402018) calc(var(--p)*100%),#fff); text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .md-nav a:hover{color:color-mix(in oklab,var(--kf-blaek,#402018) calc(var(--p)*100%),#fff); text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .md a:focus-visible{outline:2px solid var(--kf-dyb,#d9bc9c);outline-offset:3px;border-radius:2px} /* Under p=.2 hoerer navnet til toppen: ikke klikbart, ikke i fokusraekken. */ html.md-top .md-navn{pointer-events:none;visibility:hidden} /* Mobil: to raekker i toppen, een rulbar raekke i bjaelken (skiftet sker skjult). */ @media (max-width:720px){ .md-indre{padding:0 16px;gap:12px;justify-content:center} .md-navn{font-size:20px} .md-nav{flex-wrap:wrap;justify-content:center;max-width:var(--hw,320px);transform:none!important} html:not(.md-rk) .md-navn{position:absolute;left:16px} html.md-rk .md-indre{justify-content:flex-start} html.md-rk .md-nav{flex-wrap:nowrap;max-width:none;flex:1;min-width:0;justify-content:flex-start; overflow-x:auto;scrollbar-width:none;padding-left:10px;padding-right:18px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 22px),transparent)} html.md-rk .md-nav::-webkit-scrollbar{display:none} .md-nav{transition:opacity .14s ease} html.md-skift .md-nav{opacity:0} } /* Faerre bevaegelser: ingen glidning, kun et kort tonet skift. */ @media (prefers-reduced-motion:reduce){ .md,.md-indre{animation:none!important} .md{transition:--p .2s linear} .md-nav,.md-navn{transform:none!important} html.md-top .md-nav{justify-content:center} } /* == /MENU-OVERGANG A == */ /* == TRAEHISTORIE + KORT == (21-10, BORDMAND-26 #9 + #11). Inline SVG-kort over sheeshams udbredelse (scripts/himalaya_kort.py) i papir og traebrunt, og en rolig ramme om de historiske sort-hvide fotos paa traesiden. */ .himalayafigur{margin:2.2em 0 2.4em;padding:0} .himalayakort{display:block;width:100%;height:auto;border-radius:6px; box-shadow:0 1px 0 rgba(122,74,44,.10),0 18px 40px -28px rgba(64,32,24,.35); font-family:"Cormorant Garamond","Cormorant",Georgia,serif} .himalayakort .hk-hav{fill:#f6f1e8} .himalayakort .hk-havstreg{stroke:#e7dccb;stroke-width:1} .himalayakort .hk-land{fill:#fbf8f2;stroke:#cdb89e;stroke-width:.8;stroke-linejoin:round} .himalayakort .hk-baand{fill:#a8794f;fill-opacity:.62;stroke:#a8794f;stroke-width:5;stroke-opacity:.35;stroke-linejoin:round} .himalayakort .hk-baand-glod{fill:#a8794f;opacity:.28} .himalayakort .hk-flod{fill:none;stroke:#9fb3b8;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.85} .himalayakort text{fill:#6b4a3a} .himalayakort .hk-bjerg{font-size:19px;font-weight:500;letter-spacing:.32em;fill:#7a4a2c;font-style:italic} .himalayakort .hk-landnavn{font-size:15px;letter-spacing:.22em;font-weight:500;fill:#8a6a55} .himalayakort .hk-lille{font-size:11.5px;letter-spacing:.18em;fill:#8a6a55} .himalayakort .hk-region{font-size:19px;font-style:italic;font-weight:500;fill:#402018} .himalayakort .hk-by{fill:#402018} .himalayakort text.hk-by{font-size:14px;fill:#402018;font-weight:500} .himalayakort .hk-flodnavn{font-size:13.5px;font-style:italic;fill:#6f8a90} .himalayakort .hk-legende{font-size:15px;fill:#402018;font-weight:500} .himalayafigur figcaption{margin-top:.9em} @media (max-width:640px){ .himalayafigur{margin:1.6em -4px 2em} .himalayakort .hk-lille,.himalayakort .hk-flodnavn{display:none} } /* == /TRAEHISTORIE + KORT == */ /* == TEKSTKASSER v2 == (21-10, relay Stefan: "for kedelige, bare hvid baggrund"). Variant A fra /demo-tekstkasser.html: tonet papirflade, tydelig 1,5 px traeramme, topkant i traeets farver (som baggrundslag, fordi ::before/::after er content:none laengere oppe), indre haarlinje via outline, dyb varm skygge, loeft ved hover. html:root:root + !important: de lagdelte regler ovenfor saetter border-color transparent!important paa kontakt/kontaktkort. Kun udseende; ingen tekst. */ :root{ --tk-ramme:#a8794f;--tk-ramme-moerk:#7a4a2c;--tk-haar:rgba(122,74,44,.16); --tk-top:linear-gradient(90deg,#7a4a2c 0%,#b5835a 55%,#d9bc9c 100%); --tk-flade:linear-gradient(165deg,#fffaf3 0%,#f4ebdf 62%,#f0e5d7 100%); --tk-skygge:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(64,32,24,.06),0 22px 48px -22px rgba(64,32,24,.38); --tk-skygge-loeft:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px rgba(64,32,24,.08),0 34px 64px -24px rgba(64,32,24,.46)} html:root:root body main section.kontakt.bred, html:root:root body main .kontaktkort, html:root:root body main article.fort > ul.noegletal > li, html:root:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > ul:not(h2 ~ *) > li, html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section{ background:var(--tk-top) top left/100% 6px no-repeat,var(--tk-flade)!important; border:1.5px solid var(--tk-ramme)!important;border-radius:var(--kf-r)!important; outline:1px solid var(--tk-haar)!important;outline-offset:-9px!important; box-shadow:var(--tk-skygge)!important; transition:translate .5s var(--kf-ud),box-shadow .5s var(--kf-ud),border-color .3s ease,opacity .7s var(--kf-ud)!important} @media (hover:hover){ html:root:root body main .kontaktkort:hover, html:root:root body main article.fort > ul.noegletal > li:hover, html:root:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > ul:not(h2 ~ *) > li:hover, html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:hover{ translate:0 -4px;box-shadow:var(--tk-skygge-loeft)!important;border-color:var(--tk-ramme-moerk)!important} html:root:root body main section.kontakt.bred:focus-within{box-shadow:var(--tk-skygge-loeft)!important;border-color:var(--tk-ramme-moerk)!important} } html:root:root body main .kontaktkort .kk-titel{border-bottom:1px solid rgba(122,74,44,.28)!important;padding-bottom:12px!important} html:root:root body main .kontaktkort dt{color:#8a5a37} html:root:root body main section.kontakt.bred :is(input,textarea){background:rgba(255,255,255,.85);border-color:rgba(122,74,44,.30)} /* For meget tekst: foerste afsnit i en leveringsvej faar en fremhaevet foerste linje. */ html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > p:first-of-type::first-line{font-weight:600;color:#402018} html:root:root body main article.fort .vej-tillaeg{border-top:1px solid rgba(122,74,44,.24)!important;padding-top:14px} /* FAQ: gruppen faar samme ramme og topkant som kortene. */ html:root:root body main section.faq > details.faqpunkt{ border-left:1.5px solid var(--tk-ramme)!important;border-right:1.5px solid var(--tk-ramme)!important; border-top:1px solid var(--tk-haar)!important;background-color:#fffaf3} html:root:root body main section.faq > details.faqpunkt:first-of-type{ border-top:1.5px solid var(--tk-ramme)!important; background:var(--tk-top) top left/100% 6px no-repeat,linear-gradient(180deg,#fffaf3,#fbf3ea)!important} html:root:root body main section.faq > details.faqpunkt:last-of-type{ border-bottom:1.5px solid var(--tk-ramme)!important;box-shadow:var(--tk-skygge)!important} @media (max-width:1099px){ html:root:root body main section.faq > details.faqpunkt > summary{padding-left:20px;padding-right:48px} html:root:root body main section.faq > details.faqpunkt > p{padding:0 20px 18px} html:root:root body main section.faq > details.faqpunkt > summary::before, html:root:root body main section.faq > details.faqpunkt > summary::after{right:20px} } @media (prefers-reduced-motion:reduce){ html:root:root body main :is(.kontaktkort,section.kontakt.bred,.soejle > ul > li,article.fort > .ftsoejle > section,ul.noegletal > li){transition:none!important;translate:none!important} } /* == /TEKSTKASSER v2 == */ /* LAAST REGEL (Stefan 21-10-2026): een overskrift pr. sektion - ingen etiket over FAQ-titlen. Staar sidst med hoejere specificitet, saa senere etiket-regler ikke genindfoerer den. */ html:root:root body main section.faq > h2::before{content:none!important;display:none!important} /* Levering paa mobil: een kolonne. L1-bentoen (to kolonner, uden media query) overskrev 860px-reglen, saa kortene stod 169px brede ved 390px (21-10). */ @media (max-width:860px){ html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle:has(> section){ --kf-bred:min(36rem,calc(100vw - 32px));grid-template-columns:minmax(0,1fr)} html:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > :is(section,.vejhoved){ grid-column:1;grid-row:auto} } /* MOBIL-RETTELSER (21-10): (1) bjaelkens menu rullede sidelaens ved 390 px - nu staar navnet centreret oeverst og alle punkter brydes centreret paa to linjer under det. Kun html.md-rk under 720 px; .md-spor beholder sin hoejde, saa flowet ikke flytter sig - kun bjaelkens flade vokser nedad. */ @media (max-width:720px){ html.md-rk .md{height:auto;min-height:100%} html.md-rk .md-indre{height:auto;flex-direction:column;justify-content:center;align-items:center; gap:0;padding:7px 12px 5px} html.md-rk .md-navn{position:static;font-size:18px;line-height:24px} html.md-rk .md-nav{flex-wrap:wrap;justify-content:center;max-width:100%;flex:none;overflow:visible; padding:0;gap:0 16px;-webkit-mask-image:none;mask-image:none} html.md-rk .md-nav a{font-size:14px;line-height:26px} html.kf-menu-a [id]{scroll-margin-top:96px} } /* (2) Himalaya-kortet: teksten skaleres ned med SVG'en (5,7-7,8 px ved 390 px). Under 640 px faar etiketterne stoerre korpus i kortets enheder og mindre spaerring; tre etiketter forskydes, saa de bliver inden for kanten. */ @media (max-width:640px){ .himalayakort .hk-bjerg{font-size:30px;letter-spacing:.14em;transform:translateX(56px)} .himalayakort .hk-landnavn{font-size:25px;letter-spacing:.06em} .himalayakort .hk-region{font-size:31px} .himalayakort text.hk-by{font-size:27px} .himalayakort .hk-legende{font-size:28px} .himalayakort .hk-landnavn[x="88.4"]{text-anchor:start;transform:translateX(-76px)} .himalayakort .hk-landnavn[text-anchor="start"]{text-anchor:end;transform:translateX(152px)} } /* (3) Kashmir-fotoet (1440x1217) blev skaaret 3:2 midt for, saa toppen af de udskaarne skaerme forsvandt. Det vises i sit eget format. */ main article.fort .ftfigur img[src*="historie-traeskaerer-kashmir"]{aspect-ratio:1440/1217;object-position:50% 0} /* Mobil: trykflader under 32 px (maalt 21-10 paa 360/390: menu 29-31 px hoej, EN 23x25, rullepil 1 px bred). Usynlig udvidelse af trykfladen - intet flytter sig. */ @media (max-width:639px){ .vhead-a .vtekst .sidemenu nav a,.vhead-a .vhead-sprog nav.sprog a{position:relative} .vhead-a .vtekst .sidemenu nav a::after,.vhead-a .vhead-sprog nav.sprog a::after,.vhead-a .kf-ned::after{ content:"";position:absolute;inset:-5px -6px} .vhead-a .vhead-sprog nav.sprog a::after{inset:-10px -10px} .vhead-a .kf-ned::after{inset:-4px -20px} } /* Sprogvaelgeren laa under .vtekst (begge z-index 2, .vtekst senere i DOM og daekker hele banneret), saa EN/DA ikke kunne trykkes paa (maalt 21-10 med elementFromPoint paa 360 og 1440). Kun stablingen aendres. */ html .vhead-a .vhead-sprog{z-index:3} /* Mobil: de sekundaere links under knappen var 26 px hoeje (maalt 21-10). Usynlig trykflade paa 38 px - intet flytter sig. */ @media (max-width:639px){ main a.link-sekundaer{position:relative} main a.link-sekundaer::after{content:"";position:absolute;inset:-6px -4px} } /* Mobil: menuen i toppen/bjaelken (.md) havde 29-31 px hoeje links og et 24 px hoejt navn (maalt 21-10). Usynlig traefflade 5 px over og under via ::after, saa bjaelkens hoejde og teksten staar uroert. */ @media (max-width:720px){ .md-nav a,.md-navn{position:relative} .md-nav a::after,.md-navn::after{content:"";position:absolute;inset:-5px -4px} } /* FORELOEBIG (22-10, FRAVAER3T-2210): MOBIL - FOTOS I EGET FORMAT. Kortene og hovedfotoet paa bordsiden blev tvunget til 4:3 med object-fit:cover; maalt 22-10 paa 390 px: portraetfotos (3:4) mistede 44 %, kvadratiske 25 %. Nu bestemmer billedets egne maal hoejden (0 % beskaaret). */ @media (max-width:599px){ html:root body main section.katsektion > .gitter > article.kort img, html:root body main .helt img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important} html:root body main section.katsektion > .gitter > article.kort :is(a,.ramme), html:root body main .helt{height:auto!important;aspect-ratio:auto!important} html:root body main section.katsektion > .gitter{align-items:start} } /* FORELOEBIG (22-10, FRAVAER3T-2210): MOBIL - HVIDE SIDEBJAELKER PAA PJJG. Fotoet (600x500) har hvide bjaelker indbagt: indholdet ligger i x=112-487 (376x500). Paa mobil vises fotos i eget format (rettelse 1), saa vi beskaerer til indholdets format i stedet for at vise bjaelkerne. Rulles tilbage ved at fjerne denne blok. */ @media (max-width:599px){ html:root body main section.katsektion > .gitter > article.kort img[src*="c401-32ed-48d5-a076-4d0846648ace"], html:root body main .helt img[src*="c401-32ed-48d5-a076-4d0846648ace"]{aspect-ratio:372/500!important;object-fit:cover!important;object-position:50% 50%!important;height:auto!important;width:100%!important} } /* FORELOEBIG (22-10, FRAVAER3T-2210): MOBIL - HVID STRIMMEL PAA SOLGT KORT 2 (CZBC). Fotoet (300x300) har hvide bjaelker indbagt: indholdet ligger i y=37-261 (300x225 = 4:3). Paa mobil vises fotos i eget format, saa bjaelkerne blev synlige som en hvid strimmel oeverst. Beskaer til indholdets format. Desktop (4:3 cover) skjuler dem allerede. Rulles tilbage ved at fjerne denne blok. */ @media (max-width:599px){ html:root body main section.katsektion > .gitter > article.kort img[src*="2b3c957abd53"], html:root body main .helt img[src*="2b3c957abd53"]{aspect-ratio:4/3!important;object-fit:cover!important;object-position:50% 50%!important;height:auto!important;width:100%!important} } /* ============================================================ RETTELSE 25-10 (Stefan): menufarver og uniforme grids tilbage. 1) Menuen: #402018 overalt (rettet 29-10, se nedenfor) - som foer 46f0474. Ingen graa --linje-streg under hvert link, intet hvidt aktivt link; det aktive link markeres med en streg i sin egen farve. 2) Solgte/til salg: alle billedfelter ens, 4:3 cover - neutraliserer mosaikken C4 (715a37e/601d19f) paa desktop og eget-format-blokkene (beaceb3, e56fa90, 695fd77) i grids paa mobil. Bordsidens hovedfoto (.helt) er ikke et grid og beholder sit eget format. Rulles tilbage ved at fjerne denne blok. */ html:root .md-nav a,html:root .md-nav a:hover,html:root .md-nav a[aria-current],html:root .md-nav a.nu{ color:color-mix(in oklab,#402018 calc(var(--p)*100%),#f2e6d9)!important; text-decoration:none!important;border-bottom:1px solid transparent!important} html:root .md-nav a[aria-current],html:root .md-nav a.nu{border-bottom-color:currentColor!important} /* 29-10 (Stefan, igen): teksten er ALTID den oprindelige moerkebrune #402018 som i den gamle bjaelke foer 46f0474 - ogsaa i toppen. Over fotoet faar menuen bjaelkens creme bund (#f2e6d9), som toner ud naar man ruller og bjaelken selv er lys. */ /* (creme bund bag menuen fjernet igen 29-10 kl. 17, Stefan: «det har han aldrig bedt om») */ @media (min-width:1000px){ html:root main section#solgte.kf-kurateret > .gitter.enkel > article.kort{grid-column:span 2!important;grid-row:auto!important} html:root main section#solgte.kf-kurateret > .gitter.enkel > article.kort :is(a,.ramme){height:auto!important;aspect-ratio:4/3!important} html:root main section#solgte.kf-kurateret > .gitter.enkel > article.kort img{height:100%!important;aspect-ratio:4/3!important;object-fit:cover!important} } @media (max-width:599px){ html:root:root:root body main section.katsektion > .gitter > article.kort :is(a,.ramme){aspect-ratio:auto!important;height:auto!important} html:root:root:root body main section.katsektion > .gitter > article.kort .ramme{overflow:hidden} html:root:root:root body main section.katsektion > .gitter > article.kort img{display:block;width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:50% 50%!important} } /* 25-10 17:0x: samme 4:3 som property paa alle kortbilleder i alle bredder (renderet var allerede 4:3; leverancekontrollen maaler egenskaben). */ html:root:root:root body main section.katsektion > .gitter > article.kort img{aspect-ratio:4/3!important;object-fit:cover!important} /* == FAKTA SOM PREMIUM-RAEKKE (Stefan 29-10: «den hvide boks med maal, traesort og pris er ikke paen»). Ingen hvid kasse, ingen skygge, ingen runde hjoerner: kun en hairline over og under (den udtonede border-image ovenfor), en svag streg mellem raekkerne, etiketter i smaa versaler med sperring og vaerdier i serif. Prisen er sidste raekke og staar stoerst. Samme farver og fonte som resten. == */ html:root body main .bordsoejle ul.fakta.fakta{background:none;box-shadow:none;border-radius:0; border:0;border-top:1px solid rgba(64,32,24,.28);border-bottom:1px solid rgba(64,32,24,.28); padding:4px 0!important} html:root body main .bordsoejle ul.fakta.fakta li{display:flex;justify-content:space-between; align-items:baseline;gap:20px;padding:15px 2px} html:root body main .bordsoejle ul.fakta.fakta li + li{border-top:1px solid rgba(64,32,24,.08)} html:root body main .bordsoejle ul.fakta.fakta .n{font-size:11px;letter-spacing:.22em; text-transform:uppercase;opacity:.72} html:root body main .bordsoejle ul.fakta.fakta .v{font-family:var(--serif); text-align:right;letter-spacing:.01em;margin:0} html:root body main .bordsoejle ul.fakta.fakta li:last-child .v{font-size:calc(var(--ts-lead) * 1.35)!important;font-weight:500} /* == LOGO-KONTRAST PAA BANNERET (Stefan 29-10: «bordmanden.dk» var svaer at se, naar banneret har lyse aare-striber bag ordmaerket). Undersidernes banner havde ingen scrim; nu en blid, central morkning bag teksten paa ALLE sidetyper, plus en taet + bred skygge om ordmaerket og en let skygge om undertitel og menu. Den rullede, lyse menubjaelke (.md-navn, morkt blaek) roeres ikke. == */ html:not(:has(main .flow > section.katsektion)) .vhead-a::after{ background:radial-gradient(70% 78% at 50% 50%,rgba(22,12,7,.46) 0%,rgba(22,12,7,.26) 58%,rgba(22,12,7,.08) 100%)} html:root body .vhead-a .vtekst .sitenavn{ text-shadow:0 1px 2px rgba(22,12,7,.6),0 2px 14px rgba(22,12,7,.55),0 0 40px rgba(22,12,7,.4)} html:root body .vhead-a .vtekst .under, html:root body .vhead-a .vtekst .sidemenu nav a{ text-shadow:0 1px 2px rgba(22,12,7,.55),0 1px 10px rgba(22,12,7,.45)} /* == MENUEN ER PRAECIS SAA BRED SOM DE TO TEKSTLINJER OVER DEN (Stefan 29-10). .vtekst bliver et gitter med EEN kolonne, der er saa bred som den bredeste af ordmaerket og undertitlen (max-content, men aldrig bredere end banneret). Menuen bidrager med 0 til kolonnens bredde (width:0) og strækkes saa ud til den (min-width:100%), og punkterne fordeles med space-between - saa foerste og sidste punkt flugter med tekstlinjernes kanter. Paa smal skaerm brydes menuen centreret i flere linjer. == */ html:root body .vhead-a .vtekst{display:grid!important;grid-template-columns:minmax(0,max-content); justify-content:center!important;align-content:center;justify-items:center} html:root body .vhead-a .vtekst > .sidemenu{justify-self:stretch;width:0;min-width:100%} html:root body .vhead.vhead-a .vtekst .sidemenu nav{display:flex;flex-wrap:wrap;width:100%; justify-content:space-between;column-gap:14px} @media (max-width:600px){ html:root body .vhead.vhead-a .vtekst .sidemenu nav{justify-content:center;column-gap:20px} } /* Den SYNLIGE menu i toppen er klonen .md-nav (centreret.js; .sidemenu er skjult under html.kf-menu-a). Paa desktop faar den i toppen (--p=0) samme bredde som tekstblokken (--hw, maalt paa den skjulte menu) og punkterne fordelt med space-between; i den rullede bjaelke (--p=1) skrumper den til naturlig bredde. Navnet staar absolut, saa menuens hoejrekant ligger fast og --nx passer. */ @media (min-width:721px){ html:root body .md-indre{justify-content:flex-end} html:root body .md-navn{position:absolute;left:24px;top:50%;translate:0 -50%} html:root body .md-nav{justify-content:space-between;min-width:calc(var(--hw,0px)*(1 - var(--p)))} } /* == BORDET SOM KUNST (Stefan 29-10: «Det her er ikke bare et bord, det er kunst»). Annoncetekstens indledning - kunst-vinklen - staar som en rolig serif-indledning med en tynd linje foran, adskilt fra broedteksten. == */ html:root body main .annoncetekst p.kunst{font-family:var(--serif);font-style:italic; font-size:calc(var(--ts-lead) * 1.12)!important;line-height:1.45;letter-spacing:.005em; color:var(--kf-blaek,#402018);margin:0 0 .55rem;padding-left:18px; border-left:1px solid rgba(64,32,24,.3)} html:root body main .annoncetekst p.kunst + p:not(.kunst){margin-top:1.9rem} /* == KORTET OVER KOEBENHAVN I SITETS FARVER (Stefan 29-10: «det kunne vaere totalt nice hvis selve kortet med Find vej ... ogsaa var i de farver»). Samme palet som Himalaya-kortet: papir #fbf9f5, creme #f2e6d9, guld #a8794f, sheesham-brun #402018. Ingen ny tile-kilde og intet nyt kald udad: det er de SAMME OpenStreetMap-fliser som foer, toneret i browseren med et CSS-filter (graatone -> sepia -> drejet mod sheesham), saa kortet ligner et gammelt trykt kort. rute.js/rute.css er Session 2's og kopieres byte-identisk - alt her er overstyring udefra. .br-kort ER selve Leaflet-containeren. Lagorden: fliser (map-pane, z 400) < vignet+kompasrose (::before, z 450) < kartouche (::after, z 450) < Leaflets knapper og kreditlinje (z 800/1000). == */ main .bordmand-rute .br-kort{ position:relative;isolation:isolate; background:#efe2cf;border:1px solid rgba(64,32,24,.42);border-radius:6px; box-shadow:0 0 0 5px #fbf9f5,0 0 0 6px #a8794f,0 0 0 9px #fbf9f5,0 0 0 10px rgba(64,32,24,.18), 0 24px 56px -20px rgba(64,32,24,.55); margin-top:calc(1.9em + 10px)} main .bordmand-rute .br-kort .leaflet-tile-pane{ filter:grayscale(1) sepia(.9) saturate(1.35) hue-rotate(-12deg) contrast(1.14) brightness(.95)} /* Vignet + kompasrose. Ligger OVER fliserne og ruten men kun ved kanterne, og pointer-events:none, saa kortet traekkes og klikkes som foer. */ main .bordmand-rute .br-kort::before{ content:"";position:absolute;inset:0;z-index:450;pointer-events:none;border-radius:inherit; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 76'%3E%3Ctext x='32' y='9' text-anchor='middle' font-family='Georgia,serif' font-style='italic' font-size='11' fill='%23402018'%3EN%3C/text%3E%3Cg transform='translate(0 12)'%3E%3Ccircle cx='32' cy='32' r='23' fill='%23fbf9f5' fill-opacity='.55' stroke='%23402018' stroke-width='.8' stroke-opacity='.6'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='%23a8794f' stroke-width='.7' stroke-dasharray='1 2.4'/%3E%3Cpath d='M32 18 34.6 29.4 46 32 34.6 34.6 32 46 29.4 34.6 18 32 29.4 29.4Z' transform='rotate(45 32 32)' fill='%23a8794f'/%3E%3Cpath d='M32 5 36 28 59 32 36 36 32 59 28 36 5 32 28 28Z' fill='%23f2e6d9' stroke='%23402018' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M32 5 36 28 32 32ZM59 32 36 36 32 32ZM32 59 28 36 32 32ZM5 32 28 28 32 32Z' fill='%23402018'/%3E%3Ccircle cx='32' cy='32' r='2' fill='%23a8794f' stroke='%23402018' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 14px top 12px/clamp(42px,6vw,58px) auto, radial-gradient(ellipse 78% 74% at 50% 48%,rgba(64,32,24,0) 58%,rgba(64,32,24,.10) 82%,rgba(64,32,24,.30) 100%)} /* Kartouchen: byens gamle stavemaade, som paa et kort fra 1908. */ main .bordmand-rute .br-kort::after{ content:"Kj\00F8 benhavn";position:absolute;left:14px;bottom:14px;z-index:450;pointer-events:none; padding:.28em .9em .34em;font:italic 500 clamp(15px,1.5vw,19px)/1 'Cormorant Garamond',Georgia,serif; letter-spacing:.14em;color:#402018;background:rgba(251,249,245,.9); border:1px solid #a8794f;outline:1px solid rgba(64,32,24,.35);outline-offset:3px; box-shadow:0 6px 18px -8px rgba(64,32,24,.45)} /* Smal skaerm: kreditlinjen fylder hele bunden, saa kartouchen loeftes over den. */ @container (max-width:600px){ main .bordmand-rute .br-kort::after{left:12px;bottom:30px;letter-spacing:.1em}} /* Ruten og markoererne. rute.js tegner dem med farven som SVG-attribut; CSS slaar attributter, saa de kan tones uden at roere filen. Ruten er den eneste sti med fill="none". Moerk sheesham med en lys glorie holder dem tydelige paa den tonede baggrund - ogsaa paa mobil. */ main .bordmand-rute .br-kort path.leaflet-interactive[fill="none"]{ stroke:#402018;stroke-width:5px;stroke-opacity:.95;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 1.5px #fbf9f5) drop-shadow(0 0 4px rgba(251,249,245,.85))} main .bordmand-rute .br-kort path.leaflet-interactive:not([fill="none"]){ fill:#402018;fill-opacity:1;stroke:#fbf9f5;stroke-width:3px;stroke-opacity:1; filter:drop-shadow(0 0 0 #a8794f) drop-shadow(0 0 1px #a8794f) drop-shadow(0 3px 6px rgba(64,32,24,.5))} /* Leaflets knapper og kreditlinje i samme palet. Kreditlinjen bliver (licens). */ main .bordmand-rute .br-kort .leaflet-bar{border:1px solid #a8794f;border-radius:4px; box-shadow:0 6px 16px -8px rgba(64,32,24,.5)} main .bordmand-rute .br-kort .leaflet-bar a{background:#fbf9f5;color:#402018;border-bottom-color:rgba(168,121,79,.5)} main .bordmand-rute .br-kort .leaflet-bar a:hover,main .bordmand-rute .br-kort .leaflet-bar a:focus-visible{ background:#402018;color:#f2e6d9} main .bordmand-rute .br-kort .leaflet-control-attribution{background:rgba(251,249,245,.82);color:#402018} main .bordmand-rute .br-kort .leaflet-control-attribution a{color:#402018} main .bordmand-rute .br-kort .leaflet-popup-content-wrapper, main .bordmand-rute .br-kort .leaflet-popup-tip{background:#fbf9f5;box-shadow:0 10px 28px -10px rgba(64,32,24,.55)} main .bordmand-rute .br-kort .leaflet-popup-content-wrapper{border:1px solid #a8794f;border-radius:4px} /* == AFDAEMPET, EKSKLUSIV TONE I ANNONCETEKSTEN (Stefan 29-10). Rubrikkerne («Netop dette bord» ...) er smaa, spaerrede versaler i stedet for en broedtekst-linje; broedteksten staar roligt med lidt mere luft. == */ html:root body main .annoncetekst .rubrik{display:block;font-family:var(--sans); font-size:11px!important;letter-spacing:.22em;text-transform:uppercase;font-weight:500; opacity:.68;margin:0 0 .6rem} html:root body main .annoncetekst p:not(.kunst){margin-bottom:1.6rem} /* Levering, Stefan 29-10-2026: «for rodet - mindre variation i skrifttype og skriftstoerrelse». Een overskrift (h2) pr. kort, derefter EEN broedtekst: ingen fed foerste linje, ingen mindre afsnit; tillaeggets h3 loeber ind i sit afsnit som almindelig tekst. */ html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > p:first-of-type::first-line{font-weight:inherit;color:inherit} html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section :is(p,li,h3){ font-family:var(--sans)!important;font-size:17px!important;line-height:1.7!important;font-weight:400!important; font-style:normal!important;color:inherit!important;letter-spacing:0!important;text-transform:none!important} html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort .vej-tillaeg > h3{display:inline;margin:0} html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort .vej-tillaeg > h3::after{content:". "} html:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort .vej-tillaeg > h3 + p{display:inline} /* Footer, Stefan 29-10-2026: samme farve som headeren (--paa-banner), 2-4 px stoerre (15 -> 17-18 px; 18 er det der fylder beholderen paa 1148 px i een linje), og intet led braekker: hvert `.fl` er nowrap, saa linjen kun kan dele sig ved prikkerne. */ html:root:root body .vfoot.vfoot-a .vfoot-regel{font-size:clamp(17px,.6vw + 10px,18px)!important;color:var(--paa-banner)!important} html:root:root body .vfoot.vfoot-a .vfoot-regel strong{color:var(--paa-banner)!important} html:root:root body .vfoot.vfoot-a .vfoot-regel .fl{white-space:nowrap} /* Kontakt, Stefan 29-10-2026: «Send besked» var meget moerkere end resten. Lysere flade (--tk-ramme-moerk) og guldtekst (--paa-banner, samme som header/footer); kontrast 6,0:1 (AA). Kassens egen kant/flade er uroert. */ html:root:root body main form.hv button[type=submit]{background:var(--tk-ramme-moerk)!important; color:var(--paa-banner)!important;border-color:var(--tk-ramme-moerk)!important;letter-spacing:.04em} @media (hover:hover){ html:root:root body main form.hv button[type=submit]:not([disabled]):hover{background:#6a3f25!important;filter:none!important}} html:root:root body main form.hv button[type=submit]:focus-visible{outline:2px solid var(--tk-ramme)!important;outline-offset:3px!important} /* Kontaktkassen, Stefan 29-10-2026 (N1): den tynde topkant blev oeget med 6 px til 12 px, fladen er varmere, og haarlinjen rykker tilsvarende ind (-15 px). Kun kontakt - de oevrige tekstkasser beholder v2's 6 px. */ html:root:root body main section.kontakt.bred, html:root:root body main .kontaktkort{ background:var(--tk-top) top left/100% 12px no-repeat,linear-gradient(165deg,#fbf2e6 0%,#f1e2cf 62%,#ead8c2 100%)!important; outline-offset:-15px!important} /* Punkt 10 (Stefan 29-10-2026): TIL SALG-kortene har samme stoerrelse, format og struktur som de solgte - samme gitterbredde (1230 px fra 1300 px), tre lige kolonner (= solgtes span 2 af 6), samme 4:3-ramme med radius og skygge, ingen hvid kortflade. Maal og pris staar under rammen. Krav 17 (eet kort) holdes centreret i een solgt-bred kolonne. */ html:root:root body main .flow > section#til-salg > .gitter.enkel{width:100%!important;max-width:100%!important;display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(22px,2.2vw,30px)!important;justify-content:center} html:root:root body main .flow > section#til-salg > .gitter.enkel:not(:has(> .kort:nth-child(2))){grid-template-columns:minmax(0,calc((100% - 2*clamp(22px,2.2vw,30px))/3))!important} @media (min-width:1300px){ html:root:root body main .flow > section#til-salg > .gitter.enkel{width:1230px!important;max-width:calc(100vw - 96px)!important}} @media (max-width:599px){ html:root:root body main .flow > section#til-salg > .gitter.enkel, html:root:root body main .flow > section#til-salg > .gitter.enkel:not(:has(> .kort:nth-child(2))){grid-template-columns:minmax(0,1fr)!important;gap:22px!important}} html:root:root body main .flow > section#til-salg > .gitter.enkel > article.kort{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important;width:100%!important;max-width:none!important;margin:0!important} html:root:root body main .flow > section#til-salg > .gitter.enkel > article.kort > a{width:100%!important} html:root:root body main .flow > section#til-salg > .gitter.enkel > article.kort .ramme{width:100%!important;aspect-ratio:4/3;box-shadow:var(--kf-skygge-blod)!important;border-radius:var(--kf-r)!important;overflow:hidden} html:root:root body main .flow > section#til-salg > .gitter.enkel > article.kort .ramme img{width:100%!important;height:100%!important;object-fit:cover} /* Ramme om TIL SALG-fotoet (Stefan 29-10-2026): de hvide fotos med fjernet baggrund flød ud i siden. Samme greb som kontaktkassen (TEKSTKASSER v2): traekant (--tk-ramme), en tynd haarlinje uden om og kassens skygge. Paa ALLE til-salg-kort for eet ensartet udtryk; kortets stoerrelse og format er uroert. */ html:root:root body main .flow > section#til-salg > .gitter.enkel > article.kort .ramme{ border:1.5px solid var(--tk-ramme)!important;box-sizing:border-box;background:#fffaf3; outline:1px solid var(--tk-haar);outline-offset:3px; box-shadow:0 2px 4px rgba(64,32,24,.06),0 22px 48px -22px rgba(64,32,24,.38)!important} /* == BESKRIVELSEN I FULD BREDDE + AFSLUTNING MED KONTAKT (Stefan 29-10: «Brug hele bredden, saa man ikke skal scrolle saa meget» og «i bunden mangler der en call to action»). Paa bred desktop flytter annonceteksten ud af den smalle hoejre kolonne og ind under billede/galleri over hele bredden, i to spalter med et roligt maal. Indledningen (p.kunst) spaender over begge spalter. Fakta, pris og knap bliver oeverst til hoejre. Smal skaerm: een centreret spalte. Afslutningen (.bordcta) er een linje i Stefans stemme, en guldknap til kontaktsiden og mail/telefon som ren tekst (ingen mailto/tel, Stefan 12-10). == */ html:root body main .bordsoejle .annoncetekst{max-width:68ch;margin-left:auto;margin-right:auto} @media (min-width:1100px){ html:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst{ grid-column:1 / -1;grid-row:7;max-width:none;width:100%;box-sizing:border-box; margin:clamp(56px,5vw,84px) 0 0;padding-top:clamp(40px,3.6vw,56px); border-top:1px solid rgba(64,32,24,.14); columns:2;column-gap:clamp(48px,5vw,84px);column-rule:1px solid rgba(64,32,24,.07)} html:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst p{break-inside:avoid} html:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst p.kunst{ column-span:all;max-width:62ch;margin:0 auto .55rem} html:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst p.kunst:has(+ p:not(.kunst)){margin-bottom:2.2rem} html:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst p.kunst + p:not(.kunst){margin-top:0} html:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .bordcta{grid-column:1 / -1;grid-row:8} } main .bordsoejle .bordcta{margin:clamp(56px,6vw,96px) auto 0;max-width:46rem;text-align:center; padding:clamp(36px,4vw,56px) clamp(20px,4vw,56px);box-sizing:border-box; border-top:1px solid rgba(64,32,24,.14);border-bottom:1px solid rgba(64,32,24,.14)} main .bordsoejle .bordcta h2{font-family:var(--serif);font-weight:500;font-style:normal; font-size:clamp(28px,3vw,40px);line-height:1.15;margin:0 0 .7rem;color:var(--kf-blaek,#402018);text-wrap:balance} main .bordsoejle .bordcta .bordcta-tekst{font-family:var(--serif);font-style:italic; font-size:calc(var(--ts-lead,1.15rem) * 1.05);line-height:1.5;margin:0 auto 1.8rem;max-width:36rem; color:var(--kf-blaek,#402018);text-wrap:pretty} main .bordsoejle .bordcta .bordcta-knap{margin:0} html:root body main .bordsoejle .bordcta a.knap{display:inline-flex;align-items:center;justify-content:center; background:var(--tk-ramme-moerk,#402018);color:var(--paa-banner,#e3b778);border:0;border-radius:999px; padding:16px 40px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none; transition:background-color .25s ease} html:root body main .bordsoejle .bordcta a.knap:hover{background:#6a3f25;color:var(--paa-banner,#e3b778)} html:root body main .bordsoejle .bordcta a.knap:focus-visible{outline:2px solid var(--tk-ramme,#b08463);outline-offset:4px} main .bordsoejle .bordcta .bordcta-direkte{margin:1.4rem 0 0;font-size:14px;letter-spacing:.06em; color:rgba(64,32,24,.72)} @media (max-width:600px){ main .bordsoejle .bordcta{padding-left:0;padding-right:0} html:root body main .bordsoejle .bordcta a.knap{display:flex;width:100%;box-sizing:border-box;padding:16px 20px} } main .bordsoejle .bordcta .bordcta-direkte span{white-space:nowrap} /* == HEADER (Stefan 29-10 kl. 17) == 1) Menuen over fotoet har SAMME farve som «bordmanden.dk» og undertitlen (#f2e6d9), ingen baggrund; i den rullede, lyse bjaelke bliver den moerkebrun (--p, ovenfor). 2) «Se bordene» faar heller ingen farvet bund: samme creme tekst, tynd creme kant. 3) Den rullede bjaelkes menu er to numre stoerre (15 -> 18 px, mobil 14 -> 16 px). Rulles tilbage ved at fjerne denne blok. */ html:root .md-nav{background:none!important} html:root body .md-nav a{text-shadow:0 1px 2px rgba(22,12,7,calc((1 - var(--p))*.55)),0 1px 10px rgba(22,12,7,calc((1 - var(--p))*.45))} html:root body .vhead-a .vtekst .heroknap a{background:transparent;color:#f2e6d9; box-shadow:inset 0 0 0 1px rgba(242,230,217,.85);text-shadow:0 1px 2px rgba(22,12,7,.55),0 1px 10px rgba(22,12,7,.45)} html:root body .vhead-a .vtekst .heroknap a:hover, html:root body .vhead-a .vtekst .heroknap a:focus-visible{background:rgba(242,230,217,.12);color:#f2e6d9; box-shadow:inset 0 0 0 1px #f2e6d9} html:root:not(.md-top) body .md-nav a{font-size:18px!important} @media (max-width:999px){html:root:not(.md-top) body .md-nav a{font-size:16px!important}} /* VANDMAERKET PAA HVIDE FOTOS (Stefan 29-10): headerens trae bag teksten, en lille kopi af toppen. Kun paa `-bgfri`-fotos (klassen saettes af byg_enkel._vandmaerke_html og premium.js' galleri). */ .vandmaerke.trae{color:#f2e6d9;border-radius:3px;padding:3px 9px 4px; background:linear-gradient(to top,rgba(48,18,6,.34),rgba(48,18,6,.04)), url("banner/B-26-1500x500.jpg") 48% 36%/455% auto no-repeat #6a3420; text-shadow:0 1px 6px rgba(0,0,0,.55); box-shadow:0 1px 2px rgba(40,20,10,.22),0 6px 14px -6px rgba(40,20,10,.45),inset 0 0 0 1px rgba(255,240,220,.14)} /* == SMS FOERST (Stefan 29-10): han vil hellere have en sms eller mail end et opkald. Sms-knappen er den primaere handling; paa bordsiden bliver «Aftal en fremvisning» sekundaer (kant, ingen bund). Nummeret staar stadig som ren tekst. Rulles tilbage ved at fjerne denne blok. */ main .smsvej{margin:0 0 1.6rem} main .smsvej .smsvej-tekst{margin:0 0 .8rem;font-size:15.5px;line-height:1.5} main .smsvej .smsvej-knap{margin:0} /* == TYPOGRAFI-GULV (Stefan 29-10: «Teksten er simpelthen for lille, og den aendrer sig meget undervejs» - gulvet er teksten under «Kom forbi og se bordene», 23 px paa 1440). EEN skala, paa ALLE bredder (KRAV 26-rollerne gjaldt kun >=900 px): lille 14-16 px billedtekster, kilder, etiketter, maerker ui 17-18 px knapper, formularer, kontaktdetaljer, kortmaal (= sidefodens 17-18 px) broed 18-23 px al loebende tekst; 23 px paa 1440 = gulvet lead 20-26 px indledninger og serif-mellemrubrikker h3 22-29 px serif-underoverskrifter (leveringsboksene, prisen) h2 34-48 px · h1 46-84 px Logo, menu (814699d), sidefod og kortets svg-tekst roeres ikke. Rulles tilbage ved at fjerne blokken. */ html:root:root:root{ --ts-lille:clamp(14px,.25vw + 12.4px,16px);--ts-ui:clamp(17px,.6vw + 10px,18px); --ts-broed:clamp(18px,.5vw + 15.8px,23px);--ts-lead:clamp(20px,.6vw + 17.4px,26px); --ts-h3:clamp(22px,.7vw + 19px,29px);--ts-h2:clamp(34px,4.4vw,48px);--ts-h1:clamp(46px,6.4vw,84px); --ts-lh-broed:1.65;--kf-laes-v2:var(--ts-broed)} /* broed: al tekst i main, foer rollerne herunder */ html:root:root:root:root:root:root body main :is(p,li,dd,blockquote){font-size:var(--ts-broed)!important;line-height:1.65!important} html:root:root:root:root:root:root body main :is(article.fort section p,article.fort section li,.annoncetekst p:not(.kunst), .efterkort,.efterkort a,section.afslutning p:not(.afslutning-handling),.faqpunkt > p,.smsvej .smsvej-tekst, .seo-typeliste li a,.vej-tillaeg > h3,.vej-tillaeg > p){ font-family:var(--sans)!important;font-size:var(--ts-broed)!important;line-height:1.65!important;font-weight:400!important} /* lille */ html:root:root:root:root:root:root body :is(nav.sprog,nav.sprog a,nav.sprog span), html:root:root:root:root:root:root body main :is(figcaption,figcaption *,.billedkredit,.billedkredit a,.kontaktkort dt,.kontaktkort .kk-cvr, form.hv > .under,.ojenbryn,.kf-kapmaerke,.baandmaerke,.solgtflag span,.fakta .n,.annoncetekst .rubrik,.baggrund-note, article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child > h2, article.fort:has(> ul.noegletal) > .ftsoejle > section:last-child :is(li,li a,p)){ font-size:var(--ts-lille)!important;line-height:1.45!important} /* ui */ html:root:root:root:root:root:root body .vhead-a .vtekst .heroknap a, html:root:root:root:root:root:root body main :is(a.knap,a.knap-primaer,a.link-sekundaer,button,label,form.hv label,.kontaktkort dd, .kontaktkort .kk-aftale,p.dim,p.tilbage,p.tilbage a,.bordcta-direkte,.bordcta-direkte a,p.handling,.trae-note,li .note, .kf-sortnote,p.afslutning-handling,p.afslutning-handling a){ font-size:var(--ts-ui)!important;line-height:1.5!important} html:root:root:root:root:root:root body main .galleri button{font-size:var(--ts-lille)!important} /* lead */ html:root:root:root:root:root:root body .vhead-a .vtekst .under, html:root:root:root:root:root:root body main :is(p.indledning,.soejle.sidetop > p:not(.ojenbryn),.findvejintro,.faqpunkt summary, .kontaktkort .kk-titel,.prislinje,.fakta .v,.fakta li:not(:last-child) .v,ul.noegletal .tal,.bordcta-tekst,.annoncetekst p.kunst){ font-size:var(--ts-lead)!important;line-height:1.5!important} html:root:root:root:root:root:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > ul > li{font-size:var(--ts-lead)!important;line-height:1.5!important} /* h3 */ html:root:root:root:root:root:root body main .fakta li:last-child .v{font-size:var(--ts-h3)!important;line-height:1.3!important} html:root:root:root:root:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section > h2{ font-size:var(--ts-h3)!important;line-height:1.3!important} /* h2 */ html:root:root:root:root:root:root body main :is(.bordcta h2,section.afslutning h2,.sektionsmaerke,section.faq > h2,h1.bordtitel){ font-size:var(--ts-h2)!important;line-height:1.15!important} html:root:root:root:root:root:root body main h1.sidetitel{font-size:var(--ts-h1)!important} html:root:root:root:root:root:root:not(:has(link[rel="canonical"][href$="/levering.html"])) body main :is(article.fort > .ftsoejle > section:not(:last-child) > h2){font-size:var(--ts-h2)!important;line-height:1.15!important} html:root:root:root:root:root:root:has(link[rel="canonical"][href$="/om.html"]) body main > .soejle > h2{font-size:var(--ts-h2)!important;line-height:1.15!important} html:root:root:root:root:root:root body main .bordmand-rute :is(.br-knap,.br-knap span,label,.br-info,.rutenote){font-size:var(--ts-ui)!important} /* Levering ved 23 px broedtekst: tre spalter (F3, 1.1:.62:1.28) gav kort 2 kun 244 px og «parkeringsforhold» broed midt i ordet. Fra 1100 px: bento i to lige spalter (01 og 02 stablet til venstre, 03 til hoejre). Maalt 1100-1920: ingen brudte ord, kortene fyldt 90/79/94 pct. */ @media (min-width:1100px){ html:root:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle:has(> section){grid-template-columns:repeat(2,minmax(0,1fr))} html:root:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(1){grid-area:2/1} html:root:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(2){grid-area:3/1} html:root:root:root:has(link[rel="canonical"][href$="/levering.html"]) body main article.fort > .ftsoejle > section:nth-of-type(3){grid-area:2/2/span 2} } /* == FIND VEJ PALISANDER (Stefan 29-10: «Kunne den hvide baggrund i stedet vaere som vores palisanderbord»). Den hvide flade bag rute-widgetten og kortet bliver palisander. Farven er MAALT, ikke valgt: median-RGB af bordpladen (kanterne skaaret 15 pct. fra) i IMG_4644-bgfri (BGFN 9004, #5e3622) og IMG_4651-bgfri (WHSV 9005, #6d321f), samlet median #663421 over 64.098 pixels. --palisander staar paa :root, saa knapper og andre flader kan genbruge den. rute.css er Session 2's og kopieres byte-identisk; den bygger alt paa --br-flade/--br-ink/--br-linje, saa widgetten tones ved at saette de tre variabler - ikke ved at overstyre hver regel. Kontrast (WCAG 2.x): creme #f2e6d9 paa #663421 = 8,2:1 (AA og AAA); knapkant #d9b98f = 5,4:1 (over 3:1 for UI-kanter). Kortet selv (fliserne) farves med palisander-skalaen herunder. == */ :root{--palisander:#663421;--pal-0:#2f170c;--pal-1:#4e281a;--pal-2:#723824;--pal-3:#914f2c;--pal-4:#aa6b34;--pal-5:#c8863b;--pal-6:#dfa45e;--pal-7:#efc589;--pal-8:#ffe7b3;--palisander-dyb:#4a2417;--palisander-creme:#f2e6d9;--palisander-guld:#d9b98f} html:root body main .bordmand-rute{ --br-flade:var(--palisander);--br-ink:var(--palisander-creme);--br-linje:rgba(242,230,217,.26); background: radial-gradient(120% 80% at 50% 0%,rgba(255,214,170,.10),rgba(255,214,170,0) 60%), radial-gradient(140% 90% at 50% 110%,rgba(40,14,6,.38),rgba(40,14,6,0) 62%), var(--palisander)!important; box-shadow:inset 0 1px 0 rgba(255,228,196,.14),0 30px 60px -34px rgba(64,32,24,.7)} /* Formularen: feltet bliver lyst papir med moerk tekst (laeses som et felt), knapperne creme kant paa traeet; «Beregn» er den fyldte. */ html:root body main .bordmand-rute input[type=text]{color:#402018;background:#fbf9f5;border-color:transparent} html:root body main .bordmand-rute input[type=text]::placeholder{color:#402018;opacity:.5} html:root body main .bordmand-rute .br-knap{border-color:var(--palisander-guld);color:var(--palisander-creme)} html:root body main .bordmand-rute .br-knap:hover,html:root body main .bordmand-rute .br-knap:focus-visible{ background:rgba(242,230,217,.12)} html:root body main .bordmand-rute .br-beregn{background:var(--palisander-creme);border-color:var(--palisander-creme);color:var(--palisander-dyb)} html:root body main .bordmand-rute .br-beregn:hover,html:root body main .bordmand-rute .br-beregn:focus-visible{background:#fbf9f5} html:root body main .bordmand-rute .br-beregn *{color:var(--palisander-dyb)} html:root body main .bordmand-rute :is(.br-knap,.br-info) svg{stroke:var(--palisander-guld)} /* Kortets ramme: passe-partout i traeet i stedet for paa papir. */ html:root body main .bordmand-rute .br-kort{ box-shadow:0 0 0 5px var(--palisander),0 0 0 6px var(--palisander-guld),0 0 0 9px var(--palisander), 0 0 0 10px rgba(242,230,217,.22),0 26px 50px -18px rgba(20,6,2,.75)} /* Kortets egne kontroller og popup beholder moerk tekst paa lyst papir. */ html:root body main .bordmand-rute .br-kort .leaflet-popup-content, html:root body main .bordmand-rute .br-kort .leaflet-popup-content *{color:#402018} /* Aftalenoten under widgetten staar paa traeet, ikke paa papir. */ html:root body main .bordmand-rute .rutenote{color:var(--palisander-creme)} /* -- Kortets palisander-skala (Stefan 29-10: «som jet colormap, den moerkebrune i den ene ende og den lysegule i den anden»). --pal-0..--pal-8 er ni trin, jaevnt fordelt i OKLab-lyshed (L .24 -> .94, monoton) gennem bordenes egne toner: ankrene er lysheds-percentilerne 0,5/5/25/50/75/90/98/99,5 i bordpladen paa BGFN 9004 og WHSV 9005 (median af hver lysheds-baand), og den lyse ende er splintvedens gul. Toneforloebet: moerk brun (h46) -> roedbrun kerneved (h39) -> rav (h66) -> bleg gul. Flader efter rang, moerkest foerst: vand 0 · land 1 · boligomraade 1,3 · park 1,8 · bygninger 2,3 · vejkant 4,2 · smaa veje 3,3 · stoerre veje 5,6-7,4 (jo stoerre vej, jo lysere) · markoer 8. Vejnavne og stednavne bliver creme #f2e6d9: 4,6:1 paa en lille vej (trin 3,3), 10,4:1 paa land, 13,7:1 paa vand (AA). Filteret ligger i centreret.js. -- */ html.pal-kort:root body main .bordmand-rute .br-kort{background:var(--pal-1)} html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-tile-pane{filter:url(#pal-kort)} html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-container{background:var(--pal-1)} html.pal-kort:root body main .bordmand-rute .br-kort::before{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 76'%3E%3Ctext x='32' y='9' text-anchor='middle' font-family='Georgia,serif' font-style='italic' font-size='11' fill='%23f2e6d9'%3EN%3C/text%3E%3Cg transform='translate(0 12)'%3E%3Ccircle cx='32' cy='32' r='23' fill='%232f170c' fill-opacity='.6' stroke='%23dfa45e' stroke-width='.8' stroke-opacity='.6'/%3E%3Ccircle cx='32' cy='32' r='19' fill='none' stroke='%23a8794f' stroke-width='.7' stroke-dasharray='1 2.4'/%3E%3Cpath d='M32 18 34.6 29.4 46 32 34.6 34.6 32 46 29.4 34.6 18 32 29.4 29.4Z' transform='rotate(45 32 32)' fill='%23a8794f'/%3E%3Cpath d='M32 5 36 28 59 32 36 36 32 59 28 36 5 32 28 28Z' fill='%23f2e6d9' stroke='%23402018' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M32 5 36 28 32 32ZM59 32 36 36 32 32ZM32 59 28 36 32 32ZM5 32 28 28 32 32Z' fill='%23402018'/%3E%3Ccircle cx='32' cy='32' r='2' fill='%23a8794f' stroke='%23402018' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 14px top 12px/clamp(42px,6vw,58px) auto, radial-gradient(ellipse 78% 74% at 50% 48%,rgba(20,8,3,0) 58%,rgba(20,8,3,.16) 82%,rgba(20,8,3,.42) 100%)} html.pal-kort:root body main .bordmand-rute .br-kort::after{ color:var(--palisander-creme);background:rgba(47,23,12,.88);border-color:var(--pal-6);outline-color:rgba(223,164,94,.4)} /* Ruten er det lyseste paa kortet efter markoererne: lys rav med moerk kant. */ html.pal-kort:root body main .bordmand-rute .br-kort path.leaflet-interactive[fill="none"]{ stroke:var(--pal-7);filter:drop-shadow(0 0 1.5px var(--pal-0)) drop-shadow(0 0 4px rgba(47,23,12,.9))} html.pal-kort:root body main .bordmand-rute .br-kort path.leaflet-interactive:not([fill="none"]){ fill:var(--pal-8);stroke:var(--pal-0); filter:drop-shadow(0 0 1px var(--pal-6)) drop-shadow(0 3px 6px rgba(20,8,3,.7))} html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-bar{border-color:var(--pal-5)} html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-bar a{background:var(--pal-1);color:var(--palisander-creme);border-bottom-color:rgba(200,134,59,.45)} html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-bar a:hover, html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-bar a:focus-visible{background:var(--pal-7);color:var(--pal-0)} html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-control-attribution{background:rgba(47,23,12,.8)} html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-control-attribution, html.pal-kort:root body main .bordmand-rute .br-kort .leaflet-control-attribution a{color:var(--palisander-creme)} /* == /FIND VEJ PALISANDER == */ /* MAAL-FORKLARING (Stefan 29-10 kl. 17) «Sådan måler vi» på Håndværket (om.html#maal): rigtigt foto af et bord set skråt fra hjørnet, med tynde dobbeltpile som SVG oven på. Bredde = lange side, Dybde = korte side, Højde lodret. Plus det lille link under mål-rækken på hver bordside. Fotoets egen baggrund er #f5f2eb, så rammen får samme farve og pilene kan gå ud over billedets kant. */ main section.maalforklaring{--maalluft:clamp(14px,4vw,40px);margin:clamp(56px,7vw,96px) auto 0; max-width:min(780px,100%);scroll-margin-top:24px;text-align:left} main section.maalforklaring > h2{margin:0 0 clamp(12px,1.6vw,18px)} main section.maalforklaring > p{margin:0;max-width:62ch} main section.maalforklaring .maalfig{margin:clamp(22px,3vw,34px) 0 0;padding:0} main section.maalforklaring .maalfig-ramme{position:relative;padding:var(--maalluft);background:#f5f2eb; border-radius:3px;box-shadow:0 1px 0 rgba(64,32,24,.06),0 18px 40px -28px rgba(64,32,24,.45); outline:1px solid rgba(64,32,24,.08);outline-offset:-1px} main section.maalforklaring .maalfig-ramme img{display:block;width:100%;height:auto;margin:0;border-radius:0;box-shadow:none} main section.maalforklaring .maalpile{position:absolute;inset:var(--maalluft);width:calc(100% - 2*var(--maalluft)); height:calc(100% - 2*var(--maalluft));overflow:visible;pointer-events:none} main section.maalforklaring .maalpile .pil, main section.maalforklaring .maalpile marker path{stroke:#402018;stroke-width:1.4px;fill:none; vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} main section.maalforklaring .maalpile .hjaelp line{stroke:#7a4a2c;stroke-width:1px;stroke-dasharray:2 4; vector-effect:non-scaling-stroke;opacity:.7} main section.maalforklaring .maalpile text{font-family:var(--sans);font-size:22px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;fill:#402018;text-anchor:middle;dominant-baseline:middle; paint-order:stroke;stroke:#f5f2eb;stroke-width:7px;stroke-linejoin:round} main section.maalforklaring figcaption{margin:14px 0 0;font-family:var(--serif);font-style:italic; font-size:clamp(16px,1.6vw,18px);color:#7a4a2c;text-align:center} @media (max-width:600px){ main section.maalforklaring{--maalluft:10px} main section.maalforklaring .maalpile text{font-size:38px;letter-spacing:.12em;stroke-width:9px} } html:root body main .bordsoejle ul.fakta.fakta .v a.maal-hvad{display:block;margin:6px 0 0; font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1.3; color:#7a4a2c;text-decoration:underline;text-decoration-color:rgba(122,74,44,.4);text-underline-offset:3px} html:root body main .bordsoejle ul.fakta.fakta .v a.maal-hvad:hover{color:#402018;text-decoration-color:currentColor} /* REF-STOERRELSE (Stefan 29-10): referencen («JLAV») er sidste raekke i faktalisten og arvede `li:last-child .v` = --ts-h3 (29 px) fra dengang prisen stod sidst - stoerre end Maal og Pris (--ts-lead, 26 px). Samme stoerrelse og vaegt som de andre vaerdier. Een specificitet over linjen «h3» i stoerrelsesskalaen ovenfor. */ html:root:root:root:root:root:root:root body main .fakta li:last-child .v{font-size:var(--ts-lead)!important; line-height:1.5!important;font-weight:inherit!important} /* == HAANDVAERKET (om.html): EEN typeskala, h1/h2/broed/etiket, to farver == */ main > .hv{--hv-accent:#8a5a3a;--hv-luft:clamp(56px,7vw,96px);--hv-tekst:38rem; width:100%;max-width:64rem;margin:0 auto;padding:clamp(40px,6vw,88px) 0 var(--hv-luft); color:var(--kf-blaek,#402018);font-family:Inter,system-ui,sans-serif;font-size:var(--ts-broed,clamp(18px,.5vw + 15.8px,23px));line-height:1.65;font-weight:400} main > .hv *{box-sizing:border-box} html:root body main > .hv .navn{font-family:inherit!important;font-weight:inherit!important;font-size:inherit!important;letter-spacing:inherit!important} main > .hv h1.hv-titel{font-family:var(--serif);font-weight:400;font-size:var(--ts-h1);line-height:1.05;letter-spacing:-.01em;text-align:center;margin:0 auto var(--hv-luft);color:inherit;max-width:none} main > .hv h1.hv-titel::after{content:"";display:block;width:48px;height:1px;background:var(--hv-accent);margin:clamp(20px,2.4vw,32px) auto 0} main > .hv .hv-afsnit{margin:0;padding:0} main > .hv .hv-afsnit + .hv-afsnit{margin-top:var(--hv-luft)} main > .hv .hv-afsnit > p,main > .hv .hv-afsnit > ul,main > .hv .hv-afsnit > h2{max-width:var(--hv-tekst);margin-inline:auto} main > .hv p{margin:0 auto;font:inherit;color:inherit} main > .hv .hv-afsnit > p + p,main > .hv .hv-afsnit > ul + p,main > .hv .hv-afsnit > p + ul{margin-top:1em} main > .hv h2.hv-h2{font-family:var(--serif);font-weight:400;font-size:var(--ts-h2);line-height:1.1;letter-spacing:-.005em;text-align:left;color:inherit;margin-top:0;margin-bottom:.55em} main > .hv .hv-afsnit + .hv-afsnit{border-top:1px solid var(--kf-kant,rgba(64,32,24,.10));padding-top:var(--hv-luft)} main > .hv .hv-lead{margin-bottom:clamp(32px,4vw,56px)} main > .hv ol.hv-trinliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;column-gap:clamp(28px,3.6vw,56px);row-gap:clamp(28px,3.4vw,48px);counter-reset:none} main > .hv ol.hv-trinliste > li{position:relative;margin:0;padding:clamp(18px,2vw,26px) 0 0;border-top:1px solid var(--kf-kant,rgba(64,32,24,.10));background:none;box-shadow:none;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:baseline;font:inherit} main > .hv ol.hv-trinliste > li::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;background:var(--hv-accent)} main > .hv ol.hv-trinliste > li::marker{content:none} main > .hv .hv-tal{font-family:var(--serif);font-weight:300;font-size:var(--ts-h2);line-height:1;color:var(--hv-accent);font-variant-numeric:lining-nums;letter-spacing:.01em} main > .hv ol.hv-trinliste > li > p{margin:0;max-width:none} main > .hv ol.hv-trinliste > li > p::first-letter,main > .hv ul.hv-vilkaar > li::first-letter{text-transform:uppercase} @media (min-width:600px){main > .hv ol.hv-trinliste{grid-template-columns:repeat(2,minmax(0,1fr))}main > .hv ol.hv-trinliste > li{grid-template-columns:1fr;row-gap:14px;align-items:start;align-content:start}} @media (min-width:900px){main > .hv ol.hv-trinliste{grid-template-columns:repeat(3,minmax(0,1fr))}} main > .hv ul.hv-vilkaar{list-style:none;padding:0;margin-top:1em} main > .hv ul.hv-vilkaar > li{position:relative;margin:0;padding-left:1.6em;font:inherit;background:none} main > .hv ul.hv-vilkaar > li + li{margin-top:.5em} main > .hv ul.hv-vilkaar > li::before{content:"";position:absolute;left:0;top:.82em;width:.9em;height:1px;background:var(--hv-accent)} main > .hv ul.hv-vilkaar > li::marker{content:none} main > .hv a{color:var(--hv-accent);text-decoration-thickness:1px;text-underline-offset:.18em} main > .hv sub{font-size:.7em} main > .hv .udkast{max-width:var(--hv-tekst);margin:0 auto var(--hv-luft);font-size:var(--ts-lille,15px)} html:root body main > .hv section.maalforklaring{max-width:none;width:auto;margin:var(--hv-luft) 0 0;padding-top:var(--hv-luft);border-top:1px solid var(--kf-kant,rgba(64,32,24,.10))} html:root body main > .hv section.maalforklaring > h2,html:root body main > .hv section.maalforklaring > p{max-width:var(--hv-tekst);margin-inline:auto} html:root body main > .hv section.maalforklaring > figure{margin-inline:auto} html:root body main > .hv section.maalforklaring > h2{font-family:var(--serif)!important;font-weight:400!important;font-size:var(--ts-h2)!important;line-height:1.1!important;text-align:left!important;margin-top:0;margin-bottom:.55em;color:inherit!important} html:root body main > .hv section.maalforklaring figcaption{font-family:Inter,system-ui,sans-serif!important;font-size:var(--ts-lille,15px)!important;font-style:normal!important;letter-spacing:.04em;color:var(--hv-accent)!important} /* == /HAANDVAERKET == */ /* MAAL-IKON + SORTERING (Stefan 29-10 kl. 18): lille bordplade med pil for bredde (lang side) og dybde (kort side) ved maalene paa bordsiden og ved sorteringen paa Til salg. «Sortér» og valget i boksen i SAMME ui-token. */ html:root body main a.maal-ikon{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px; color:#7a4a2c;text-decoration:none} html:root body main .bordsoejle ul.fakta.fakta .v a.maal-hvad.maal-ikon{display:flex;margin:10px 0 0;text-decoration:none} html:root body main a.maal-ikon > span{font-family:var(--sans);font-size:var(--ts-lille);font-weight:500; letter-spacing:.03em;line-height:1.3;text-decoration:underline;text-decoration-color:rgba(122,74,44,.4);text-underline-offset:3px} html:root body main a.maal-ikon:hover > span{color:#402018;text-decoration-color:currentColor} svg.maalikon{display:block;width:clamp(150px,14vw,190px);height:auto;overflow:visible} svg.maalikon .plade{fill:#f2e6d9;stroke:#402018;stroke-width:1.4;stroke-linejoin:round} svg.maalikon .kant{fill:none;stroke:#402018;stroke-width:1.4;stroke-linejoin:round} svg.maalikon .ben{stroke:#7a4a2c;stroke-width:3;stroke-linecap:round} svg.maalikon .pil{stroke:#402018;stroke-width:1.3} svg.maalikon marker path{fill:#402018} svg.maalikon text{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:#402018} html:root body main .sorterlinje{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:14px 28px;margin-top:clamp(10px,1.4vw,18px)} html:root body main .sorterlinje .sorter{margin-left:auto} html:root:root:root:root:root:root:root body main label.sorter, html:root:root:root:root:root:root:root body main label.sorter select, html:root:root:root:root:root:root:root body main label.sorter option{font-family:var(--sans)!important; font-size:var(--ts-ui)!important;font-weight:400!important;line-height:1.5!important} @media (max-width:600px){html:root body main .sorterlinje .sorter{margin-left:0}} /* == KONTAKT: SMS-KASSE + MAIL (Stefan 29-10-2026, tre punkter). Egen blok; rulles tilbage ved at fjerne den (og `kasse=True`/`kk-mail` i byg_enkel.py). 1. Mailadressen i kontaktkortet maa aldrig brydes midt i (foer stod «k» alene). 2. Sms-kassen paa kontaktsiden baerer klassen `kontaktkort`, saa flade, kant, radius, haarlinje og skygge kommer fra SAMME regler som soesterkassen. Her kun placering og det indre. 3. `sms:` goer intet paa en computer: dér skjules sms-knappen og «Kopiér nummer» vises; paa telefon omvendt. Nummeret staar tydeligt begge steder. */ html:root:root body main .kontaktkort dd .kk-mail{white-space:nowrap} html:root:root body main .kontakt-par > .kontaktkort dd:has(> .kk-mail){font-size:clamp(13px,.96vw,15px)!important;letter-spacing:0} @media (min-width:900px){ html:root:root body main .kontakt-par{grid-template-columns:minmax(0,46rem) minmax(16.5rem,1fr)}} html:root:root body main .soejle.ind > .kontaktkort.smsvej{margin:0 0 var(--kf-gab);padding:22px 24px} html:root:root:root:root:root body main .kontaktkort.smsvej p.kk-titel{margin:0 0 14px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500} main .smsvej .smsvej-raekke{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px} /* Bordsidens "Se bordet i virkeligheden": nummer og knap samlet i midten, ikke skubbet ud til hver sin kant (Stefan 29-10). */ @media (min-width:600px){main .bordcta .smsvej .smsvej-raekke{justify-content:center;align-items:center;gap:12px 32px}} main .smsvej .smsvej-nr{margin:0;display:grid;gap:2px} main .smsvej .smsvej-etiket{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8a5a37} main .smsvej .smsvej-tal{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(26px,2.4vw,32px);line-height:1.1; white-space:nowrap;font-variant-numeric:lining-nums;letter-spacing:.02em;color:#402018} main .smsvej .smsvej-knap{margin:0;display:flex;gap:10px} html:root:root:root:root:root:root:root body main .smsvej :is(a.smsknap,button.smsvej-kopier){ display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px; border:0;border-radius:10px;background:#7a4a2c;color:#fff;font:inherit;font-size:15.5px; letter-spacing:.02em;text-transform:none;text-decoration:none;cursor:pointer; box-shadow:0 1px 2px rgba(40,20,10,.18),0 6px 14px -8px rgba(40,20,10,.5);transition:background .2s ease} html:root:root:root:root:root:root:root body main .smsvej :is(a.smsknap,button.smsvej-kopier):hover{background:#6a3f25} html:root:root:root:root:root:root:root body main .smsvej button.smsvej-kopier.kopieret{background:#4f6b3a} html:root:root:root:root:root:root:root body main .smsvej :is(a.smsknap,button.smsvej-kopier):focus-visible{outline:2px solid #a8794f;outline-offset:3px} html:root body main .smsvej button.smsvej-kopier[hidden]{display:none!important} /* Computer (mus/pegeplade): kopier i stedet for sms. */ @media (hover:hover) and (pointer:fine){ html:root body main .smsvej a.smsknap{display:none!important}} @media not ((hover:hover) and (pointer:fine)){ html:root body main .smsvej button.smsvej-kopier{display:none!important}} @media (max-width:599px){ main .smsvej .smsvej-raekke{flex-direction:column;align-items:stretch} main .smsvej .smsvej-knap{flex-direction:column} html:root:root:root:root:root:root:root body main .smsvej :is(a.smsknap,button.smsvej-kopier){width:100%;box-sizing:border-box}} /* ================================================================== EEN SPALTE + LOEBENDE AFSLOERING (Stefan 29-10: «EEN kolonne, men laekker, levende og dynamisk ... teksten kommer loebende frem naar man scroller»). Gaelder traeet (trae.html) og beskrivelsen paa bordsiderne (.annoncetekst). Ordlyden er uroert - kun layout. * Afloeser de to spalte-regler «RUNDE E3: Traeet» og «BESKRIVELSEN I FULD BREDDE» (column-count:2 / columns:2) ved 1100+. * Laesebredde ca. 62ch. Brydning: indledning stoerre, forbogstav paa kapitelaabnerne, afsnittene skifter side (zigzag), punktlister som tonet kort, billeder bryder ud i fuld bredde. * Afsloering pr. element: centreret.js saetter html.loeb-paa + .loeb KUN med IntersectionObserver og uden reduceret bevaegelse. Uden JS, under reduceret bevaegelse og i print staar alt synligt. ================================================================== */ html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section{ column-count:auto!important;columns:auto!important;column-rule:none} html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > :is(p,ul.punkter,ol.punkter,h2){ max-width:62ch;margin-left:auto;margin-right:auto} /* Indledning: foerste afsnit i kapitelaabnerne (ikke fortsaettelserne). */ html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section:not(.kf-kapfort) > h2 + p{ font-family:var(--serif);font-size:1.16em;line-height:1.55;color:var(--kf-blaek)} html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section:not(.kf-kapfort) > h2 + p::first-letter{ float:left;font-family:var(--serif);font-size:3.3em;line-height:.86;margin:.06em .12em 0 -.02em;color:var(--kf-ramme)} /* Punktlister som tonet kort. */ html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > ul.punkter{ background:linear-gradient(135deg,var(--kf-linned),var(--kf-sand));border-left:3px solid var(--kf-ramme); border-radius:0 var(--kf-r) var(--kf-r) 0;padding:1.1rem 1.4rem 1.1rem 2.4rem;box-shadow:0 18px 40px -28px rgba(64,32,24,.35)} @media (min-width:1100px){ /* Zigzag: fortsaettelses-afsnittene skifter mellem venstre og hoejre forskudt, saa oejet faar en bevaegelse ned ad siden. */ html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section.kf-kapfort:nth-child(odd) > :is(h2,p){ margin-left:calc((100% - 62ch)/2 - 5rem);margin-right:calc((100% - 62ch)/2 + 5rem)} html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section.kf-kapfort:nth-child(even) > :is(h2,p){ margin-left:calc((100% - 62ch)/2 + 5rem);margin-right:calc((100% - 62ch)/2 - 5rem)} html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section.kf-kapfort:nth-child(even) > p{ border-left:1px solid var(--kf-kant);padding-left:1.6rem} html:root:root:has(link[rel="canonical"][href$="/trae.html"]) main article.fort > .ftsoejle > section > ul.punkter{max-width:56ch} /* Bordsiden: beskrivelsen i een spalte, centreret, med indledning. */ html:root:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst{ columns:auto!important;column-count:auto!important;column-rule:none!important} html:root:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst > p{ max-width:62ch;margin-left:auto;margin-right:auto} html:root:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst > p:nth-of-type(odd):not(.kunst):not(:last-child){ transform:translateX(-3rem)} html:root:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst > p:nth-of-type(even):not(.kunst){ transform:translateX(3rem);border-left:1px solid var(--kf-kant);padding-left:1.4rem} /* Den kursive indledning er smallere end broedteksten, saa centreret stod dens venstrekant naesten lige over afsnit 2's (348 mod 303 px ved 1440). Den rykkes til venstre, saa afsnit 2 staar tydeligt forskudt (Stefan 29-10). */ html:root:root body main > .soejle.bordsoejle:has(> .helt):has(> ul.fakta) > .annoncetekst > p.kunst{ transform:translateX(-4.5rem)} } /* Mellembred og mobil: samme skift i det smaa - hvert andet broedtekst-afsnit rykket ind med en streg, foerst afsnittet lige under den kursive indledning. */ @media (max-width:1099px){ html:root:root body main .bordsoejle .annoncetekst > p.kunst + p:not(.kunst){ margin-left:clamp(1rem,5vw,3rem);border-left:1px solid var(--kf-kant);padding-left:clamp(.8rem,2.5vw,1.4rem)} /* Egen regel: en browser uden «of»-syntaks smider kun denne, ikke ovenstaaende. */ html:root:root body main .bordsoejle .annoncetekst > p:nth-child(odd of :not(.kunst)):not(:last-child){ margin-left:clamp(1rem,5vw,3rem);border-left:1px solid var(--kf-kant);padding-left:clamp(.8rem,2.5vw,1.4rem)} } html:root body main .bordsoejle .annoncetekst > p.kunst + p{font-family:var(--serif);font-size:1.12em;line-height:1.55;color:var(--kf-blaek)} html:root body main .bordsoejle .annoncetekst > p:last-child:not(:first-child){ padding-top:1rem;margin-top:1.4rem;background:var(--kf-orn) no-repeat center top/120px 12px} /* Afsloeringen. Hoej specificitet, saa den vinder over sektionens egen `.afsloer.set > *` - hvert element kommer frem naar DET ses. */ html.loeb-paa:root body main .loeb{ transition:opacity .9s var(--kf-ind,ease),transform .9s var(--kf-ind,ease),translate .9s var(--kf-ind,ease)} html.loeb-paa:root body main .loeb:not(.vist){opacity:0!important;translate:0 26px} html.loeb-paa:root body main .loeb.vist{opacity:1!important;translate:0 0} /* Beskrivelsen paa bordsiden toner ogsaa UD igen (Stefan 29-10): forlader et afsnit toppen, glider det op og vaek; forlader det bunden, ned. */ html.loeb-paa:root body main .loeb.over:not(.vist){translate:0 -26px} html.loeb-paa:root body main article.fort .afsloer > .loeb.vist{transform:none} /* Billedbaandet og .ftfigur centreres med translate:-50% 0 (linje ~254); afsloeringen maa ikke nulstille den vandrette del, ellers skyder baandet ud til hoejre paa mobil (trae.html 390 px: scrollWidth 553, 02-11). Kun under 1100 px: derover saetter trae-reglen left:auto;translate:none. Reduceret bevaegelse/print: se nedenfor. */ @media (max-width:1099.98px){ html.loeb-paa:root body main :is(.billedbaand,article.fort .ftfigur).loeb:not(.vist){translate:-50% 26px} html.loeb-paa:root body main :is(.billedbaand,article.fort .ftfigur).loeb.vist{translate:-50% 0} html.loeb-paa:root body main :is(.billedbaand,article.fort .ftfigur).loeb.over:not(.vist){translate:-50% -26px} } @media (prefers-reduced-motion:reduce){ html.loeb-paa:root body main .loeb{opacity:1!important;translate:none!important;transition:none!important} } @media print{ html:root body main .loeb{opacity:1!important;translate:none!important;transition:none!important} } @media (prefers-reduced-motion:reduce) and (max-width:1099.98px){ html.loeb-paa:root body main :is(.billedbaand,article.fort .ftfigur).loeb{translate:-50% 0!important} } @media print and (max-width:1099.98px){ html:root body main :is(.billedbaand,article.fort .ftfigur).loeb{translate:-50% 0!important} } /* ==== /EEN SPALTE + LOEBENDE AFSLOERING ==== */ /* == BORDCTA ROLIG (Stefan 31-10: «der sker simpelthen for meget ... mere simpel, mere premium og rolig»). Tre lag: overskrift + indledning (serif), EEN primaer knap (sans, almindelige bogstaver, ingen spaerret versal) og EEN stille kontaktlinje (sans, lille) med sms-praeferencen, nummeret een gang og mailen. To skrifter i alt. Nummeret er sms:-link paa telefon; paa computer et diskret understreget «Kopiér nummer». Rulles tilbage ved at fjerne blokken og genskabe _bord_cta fra git. == */ html:root:root:root:root:root:root:root body main .bordsoejle .bordcta{ border-bottom:0;padding-bottom:clamp(24px,3vw,40px)} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta .bordcta-tekst{ margin:0 auto clamp(28px,3vw,36px);max-width:34rem;color:rgba(64,32,24,.86)} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta .bordcta-knap a.knap{ background:var(--tk-ramme-moerk,#402018);color:#f2e6d9;box-shadow:none; font-family:var(--sans);font-weight:500;text-transform:none;letter-spacing:.02em; padding:15px 38px;border-radius:999px;transition:background-color .3s ease} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta .bordcta-knap a.knap:hover{ background:#6a3f25;color:#f2e6d9} main .bordsoejle .bordcta .bordcta-kontakt{margin:clamp(30px,3.2vw,40px) auto 0;max-width:38rem; padding-top:clamp(22px,2.4vw,28px);border-top:1px solid rgba(64,32,24,.12)} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta :is(.bordcta-helst,.bordcta-direkte){ font-family:var(--sans)!important;font-size:var(--ts-lille,15px)!important;line-height:1.6!important; letter-spacing:.01em;color:rgba(64,32,24,.72);margin:0;text-wrap:balance} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta .bordcta-direkte{ margin-top:.45rem;color:var(--kf-blaek,#402018);display:flex;flex-wrap:wrap;justify-content:center; align-items:baseline;gap:.2rem .7rem} main .bordsoejle .bordcta .bordcta-direkte > span{white-space:nowrap} main .bordsoejle .bordcta .bordcta-skille{color:rgba(64,32,24,.35)} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta a.bordcta-nr{ color:inherit;text-decoration:none;font-variant-numeric:tabular-nums;font-weight:500;font-size:inherit!important; border-bottom:1px solid rgba(106,63,37,.35);padding-bottom:1px} main .bordsoejle .bordcta .bordcta-nr{font-variant-numeric:tabular-nums;font-weight:500;font-size:inherit} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta button.bordcta-kopier{ all:unset;cursor:pointer;margin-left:.6rem;font-family:var(--sans);font-size:var(--ts-lille,15px)!important; display:inline-block;padding:.3rem .8rem;border-radius:999px;line-height:1.3; background:rgb(122,74,44);color:rgb(242,230,217);border:1px solid rgb(122,74,44); text-decoration:none;transition:background .2s ease} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta button.bordcta-kopier:hover{background:#643a22;border-color:#643a22;color:rgb(242,230,217)} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta button.bordcta-kopier:focus-visible{ outline:2px solid #a8794f;outline-offset:3px;border-radius:2px} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta button.bordcta-kopier.kopieret{ background:#4f6b3a;border-color:#4f6b3a;color:rgb(242,230,217);text-decoration:none} html:root body main .bordsoejle .bordcta button.bordcta-kopier[hidden]{display:none!important} @media (hover:hover) and (pointer:fine){ html:root:root:root:root:root:root:root body main .bordsoejle .bordcta a.bordcta-nr{ border-bottom:0;pointer-events:none;cursor:text}} @media not ((hover:hover) and (pointer:fine)){ html:root body main .bordsoejle .bordcta button.bordcta-kopier{display:none!important}} @media (max-width:600px){ html:root:root:root:root:root:root:root body main .bordsoejle .bordcta .bordcta-knap a.knap{ display:flex;width:100%;box-sizing:border-box;padding:16px 20px} html:root:root:root:root:root:root:root body main .bordsoejle .bordcta .bordcta-direkte{flex-direction:column;align-items:center;gap:.35rem} main .bordsoejle .bordcta .bordcta-skille{display:none}} /* == LEVERING: samme hoejde under sidetoppen som Traeet (Stefan 29-10 16:54Z: «hoejden paa fanebladene er heller ikke rettet under fanebladet Levering»). Maalt 31-10 paa 1440 px: Traeet har 28 px fra indledningen til indholdet, Levering havde 136+136 px. Rulles tilbage ved at fjerne denne blok. */ html:has(link[rel="canonical"][href$="/levering.html"]) body main > .soejle > article.fort > .ftsoejle:has(h1.sidetitel){padding-bottom:28px} html:has(link[rel="canonical"][href$="/levering.html"]) body main > .soejle > article.fort > .ftsoejle:has(h1.sidetitel) + .ftsoejle{padding-top:56px} html:has(link[rel="canonical"][href$="/levering.html"]) body main > .soejle > article.fort > .ftsoejle:has(h1.sidetitel) + .ftsoejle > .vejhoved{display:none} /* == FOOTER-KONTAKTLINJEN PAA EEN LINJE (Stefan 31-10-2026). Ved 1280 px knak «Kontakt Bordmanden»-linjen i to (56,6 px hoej, CVR alene paa linje 2), fordi kassen er 1120 px bred. Paa desktop staar linjen nu i naturlig bredde, centreret over kassen som typelinjen (vfoot-typer). Skrift og guldfarve er uaendrede. Under 1100 px ombrydes den som foer, mellem de hele led (.fl er nowrap). Rulles tilbage ved at fjerne denne blok. == */ @media (min-width:1100px){ html:root:root body .vfoot.vfoot-a .vfoot-regel{white-space:nowrap;width:max-content;max-width:none; position:relative;left:50%;transform:translateX(-50%)} } /* Tillaeg samme dag: den engelske linje er 1408 px ved 17,68 px og loeb ud over kanten ved 1280. Skriften faar et loft i vw, saa linjen altid passer i vinduet: DA ved 1280 er uaendret (loftet 18,6 px ligger over 17,68), EN bliver ca. 15 px. Engelsk ombrydes under 1200 px. Rulles tilbage med blokken ovenfor. */ @media (min-width:1100px){ html:root:root body .vfoot.vfoot-a .vfoot-regel{font-size:min(clamp(17px,.6vw + 10px,18px),1.45vw)!important} html[lang^="en"]:root:root body .vfoot.vfoot-a .vfoot-regel{font-size:min(clamp(17px,.6vw + 10px,18px),1.18vw)!important} } @media (min-width:1100px) and (max-width:1199.98px){ html[lang^="en"]:root:root body .vfoot.vfoot-a .vfoot-regel{white-space:normal;width:auto;max-width:100%;left:auto;transform:none;font-size:clamp(17px,.6vw + 10px,18px)!important} } /* == ALLE KNAPPER I SEND BESKED-BRUNT (Stefan 31-10-2026). Beregn-knappen var creme, Se bordene / Rute i bil / Offentlig transport var outlinede, og .knap havde tre farver (#402018 med hvid tekst, #7a4a2c, sms-knappen med hvid tekst). Nu er de alle #7a4a2c (--tk-ramme-moerk, som Send besked) med .knap-primaers tekstfarve #f2e6d9 og samme hover (#643a22). Syv :root, saa den slaar baade rute-overstyringerne, sms-knappens regel og .knap's inline-baggrund (!important). Rulles tilbage ved at fjerne denne blok. == */ html:root:root:root:root:root:root:root body :is(.vhead-a .vtekst .heroknap a,main .bordmand-rute button.br-beregn, main .bordmand-rute a.br-knap,main a.knap,main a.knap-primaer,main .smsvej :is(a.smsknap,button.smsvej-kopier)){ background:#7a4a2c!important;color:#f2e6d9!important;border-color:#7a4a2c!important; box-shadow:0 1px 2px rgba(40,20,10,.18),0 8px 18px -10px rgba(40,20,10,.5)!important; transition:background-color .2s ease,translate .2s ease} html:root:root:root:root:root:root:root body :is(.vhead-a .vtekst .heroknap a,main .bordmand-rute button.br-beregn, main .bordmand-rute a.br-knap,main a.knap,main a.knap-primaer,main .smsvej :is(a.smsknap,button.smsvej-kopier)):is(:hover,:focus-visible){ background:#643a22!important;border-color:#643a22!important;color:#f2e6d9!important} html:root:root:root:root:root:root:root body main .bordmand-rute :is(button.br-beregn,a.br-knap) *{color:#f2e6d9!important} html:root:root:root:root:root:root:root body main .bordmand-rute a.br-knap svg{stroke:#f2e6d9!important} @media (hover:hover){html:root:root:root:root:root:root:root body :is(.vhead-a .vtekst .heroknap a,main .bordmand-rute a.br-knap, main a.knap,main a.knap-primaer):hover{translate:0 -1.5px}} /* == STOERRE MENU I TOPBJAELKEN (Stefan 31-10-2026). Den sticky menu (.md-nav, bygget af centreret.js) stod i 18 px og var for lille ved 1280. Nu 21 px fra 1000 px og op; menuen staar stadig paa een linje uden overloeb (maalt DA+EN ved 1280). Under 1000 px er den uaendret (16 px). Rulles tilbage ved at fjerne denne blok. == */ @media (min-width:1000px){ html:root:root:not(.md-top) body .md-nav a,html:root:root body .kf-bjaelke nav a{font-size:21px!important} } /* == BESKRIVELSENS AFSNIT KOMMER OG GAAR (Stefan 31-10-2026). centreret.js saetter og fjerner .set paa hvert afsnit i bordsidens .annoncetekst. Stigningen koerer paa `translate`, ikke `transform`, fordi layoutet over 1100 px allerede bruger transform til at forskyde afsnittene (+-3rem) - de to maa ikke slaas. Rulles tilbage sammen med blokken «BESKRIVELSENS AFSNIT» i centreret.js. == */ html body main .annoncetekst > p.afsloer{transform:none;translate:0 14px; transition:opacity .72s cubic-bezier(.22,.61,.36,1),translate .72s cubic-bezier(.22,.61,.36,1)} html body main .annoncetekst > p.afsloer.set{translate:none} @media (prefers-reduced-motion: reduce){ html body main .annoncetekst > p.afsloer{translate:none;opacity:1;transition:none} } /* == TIL SALG-VANDMAERKET I SAMME FORMAT SOM SOLGT (Stefan 31-10-2026). Traeskiltet paa hvide fotos (.vandmaerke.trae, blokken «VANDMAERKET PAA HVIDE FOTOS») havde egen bund, kant, hjoerner og padding. Nu samme pille som det almindelige vandmaerke: halvgennemsigtig brun bund, 2px 7px 3px, runde ender, ingen skygge. Rulles tilbage ved at fjerne denne blok. == */ html:root body .vandmaerke.trae{background:rgba(64,32,24,.48);padding:2px 7px 3px;border-radius:999px; box-shadow:none;border:0;color:#f2e6d9; text-shadow:0 1px 2px rgba(64,32,24,.8),0 0 6px rgba(64,32,24,.5)} /* == FOOTER-SKRIFTEN SOM HEADERENS (Stefan 02-11-2026, r020645-c2-b + svar 2.48: «farven skal vaere den samme som oppe i headeren, som skriften deroppe»). Naar man er rullet ned til footeren, er den synlige header den faste `.md`- bjaelke: moerkebrun #402018 (--kf-blaek) paa lys flade rgba(251,249,245,.92). Footeren faar nu samme par: lys flade over traeet i stedet for det moerke scrim, brun skrift uden skygge. Rulles tilbage ved at fjerne denne blok. == */ html:root:root body .vfoot.vfoot-a::after, html:root:root body .vfoot.vfoot-a:has(.vfoot-typer)::after{background:rgba(251,249,245,.92)!important} html:root:root body .vfoot.vfoot-a .vfoot-typer, html:root:root body .vfoot.vfoot-a .vfoot-regel, html:root:root body .vfoot.vfoot-a .vfoot-regel strong, html:root:root body .vfoot.vfoot-a .vfoot-vej a{color:var(--kf-blaek,#402018)!important;text-shadow:none!important} /* Forside-widgets, variant A (Stefan 2.35): w-gammelt + w-janka mellem Til salg og Solgte, w-spor foer afslutningen. Kun sitets egne tokens. */ .wzone{width:var(--beholder);margin:clamp(54px,7vw,92px) auto 0} .wzone.taet{margin-top:clamp(36px,5vw,64px)} .wgitter{display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:1fr} @media (min-width:900px){.wgitter.to{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}} .widget{position:relative;background:var(--flade-b);border-radius:var(--r-panel); padding:clamp(22px,3vw,40px);color:var(--blaek);font-family:var(--sans); font-size:var(--tf-b);line-height:1.7;overflow:hidden} .widget .etiket{display:block;font-size:var(--tf-etiket);letter-spacing:.34em; text-transform:uppercase;font-weight:600;color:var(--trae);margin:0 0 12px} .widget .etiket::before{content:"";display:block;width:40px;height:2px;background:var(--trae); margin:0 0 13px;border-radius:2px} .widget h3{font-family:var(--serif);font-weight:500;font-size:var(--tf-l);line-height:1.08; margin:0 0 16px;color:var(--blaek);letter-spacing:-.005em} .widget p{margin:0 0 1em;max-width:var(--laese)} .widget .indgang{font-size:1.06rem} .widget figure{margin:0} .widget img{display:block;width:100%;height:auto;border-radius:var(--r-foto)} .widget figcaption{font-size:var(--tf-s);color:var(--daempet);margin-top:10px;line-height:1.5} /* fold-ud */ .widget details{margin:0 0 1em} .widget summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px; font-weight:600;color:var(--trae);font-size:var(--tf-s);letter-spacing:.04em; padding:8px 0;border-bottom:1px solid currentColor} .widget summary::-webkit-details-marker{display:none} .widget summary::after{content:"+";font-family:var(--serif);font-size:1.4rem;line-height:0; transition:transform var(--t-normal,250ms) var(--e-ud,ease)} .widget details[open] summary::after{transform:rotate(45deg)} .widget summary:focus-visible,.widget a:focus-visible{outline:2px solid var(--trae);outline-offset:4px;border-radius:2px} .widget details .resten{padding-top:14px;animation:wfold var(--t-langsom,350ms) var(--e-ud,ease)} .widget details[open] summary .luk{display:inline}.widget details[open] summary .aaben{display:none} .widget summary .luk{display:none} @keyframes wfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.widget details .resten{animation:none}.widget summary::after{transition:none}} .widget .videre{display:inline-block;margin-top:6px;font-weight:600;color:var(--blaek); text-decoration:none;border-bottom:1px solid var(--linje);padding-bottom:2px; transition:border-color var(--t-hurtig,150ms)} .widget .videre:hover{border-color:var(--trae);color:var(--trae)} /* 1. Hvorfor gammelt træ er bedre */ .w-gammelt{display:grid;gap:clamp(18px,2.6vw,36px);grid-template-columns:1fr} @media (min-width:700px){.w-gammelt.med-foto{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}} .w-gammelt .forbogstav::first-letter{font-family:var(--serif);font-size:3.4em;float:left; line-height:.82;margin:.06em .1em 0 0;color:var(--trae)} /* Smal udgave (variant B: lige under heroen) */ .w-gammelt.smal{background:var(--kort);border:1px solid var(--linje)} /* 2. Sporene fra det første liv */ .w-spor{display:grid;grid-template-columns:1fr;gap:0;padding:0;background:var(--kort); border:1px solid var(--linje)} .w-spor figure{position:relative} .w-spor figure img{border-radius:0;aspect-ratio:4/3;object-fit:cover} .w-spor figcaption{padding:10px clamp(22px,3vw,40px) 0} .w-spor .wtekst{padding:clamp(22px,3vw,40px)} @media (min-width:900px){ .w-spor{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .w-spor figure img{aspect-ratio:auto;height:100%;min-height:100%} .w-spor figure{display:flex;flex-direction:column} .w-spor figure img{flex:1 1 auto} .w-spor figcaption{padding:10px 16px 16px} } .w-spor blockquote{margin:4px 0 18px;padding:0 0 0 18px;border-left:2px solid var(--trae); font-family:var(--serif);font-style:italic;font-size:var(--tf-m);line-height:1.3;color:var(--blaek)} /* 3. Janka-hårdhed */ .w-janka h3{font-size:var(--tf-m);font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,1.9rem)} .w-janka .note{font-size:var(--tf-s);color:var(--daempet)} .soejler{list-style:none;margin:18px 0 14px;padding:0;display:grid;gap:12px} .soejler li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n t" "b b";align-items:baseline;gap:4px 10px; font-size:var(--tf-s)} .soejler .navn{font-weight:600} .soejler .bar{height:14px;background:var(--linje);border-radius:7px;overflow:hidden;position:relative} .soejler .bar i{position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:7px; background:color-mix(in srgb,var(--trae) 42%,var(--linje)); transform-origin:left;animation:wvoks .9s var(--e-ud,ease) both} .soejler li.fremhaev .bar i{background:var(--trae)} .soejler li.fremhaev .navn,.soejler li.fremhaev .tal{color:var(--trae)} .soejler .tal{font-variant-numeric:tabular-nums;color:var(--daempet);min-width:4.2em;text-align:right} .soejler li:nth-child(2) .bar i{animation-delay:.08s}.soejler li:nth-child(3) .bar i{animation-delay:.16s} .soejler li:nth-child(4) .bar i{animation-delay:.24s} @keyframes wvoks{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){.soejler .bar i{animation:none}} .soejler .navn{grid-area:n}.soejler .tal{grid-area:t}.soejler .bar{grid-area:b} /* Favorit som mailto (Stefan 2.33): stille link under knappen paa bordsiden */ main .bordsoejle p.handling a.husk{display:block;margin-top:14px;font-size:.92em;color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:3px} main .bordsoejle p.handling a.husk:hover{opacity:1}