i markup'et, se dér. */ } /* "+" — 25px cirkel, 22px fra toppen, 25px fra højre. Dekorativ: hele kortet er linket. ⛔ GEOMETRIEN LIGGER I FIRE TOKENS, fordi de eksterne kort har EN CIRKEL MERE (se .ph-mcard__ext nedenfor) og skal flugte med denne på pixlen. Skrives tallene direkte i begge regler, skrider de fra hinanden den dag nogen ændrer mobil-varianten — samme begrundelse som --ph-hoved-x, der samlede fem sidehoveders venstrekant ét sted. Mobil ændrer KUN tokens, ikke reglerne. */ .ph-mcard{ --mc-cirkel:25px; --mc-top:22px; --mc-hoejre:25px; --mc-luft:10px; } .ph-mcard__plus{ position:absolute; z-index:3; top:var(--mc-top); right:var(--mc-hoejre); width:var(--mc-cirkel); height:var(--mc-cirkel); border-radius:50%; background:var(--ph-menu-dark); } .ph-mcard__plus::before, .ph-mcard__plus::after{ content:''; position:absolute; top:50%; left:50%; background:var(--ph-offwhite); border-radius:1px; } .ph-mcard__plus::before{ width:13px; height:2.5px; transform:translate(-50%,-50%); } .ph-mcard__plus::after{ width:2.5px; height:13px; transform:translate(-50%,-50%); } .ph-mcard--navy .ph-mcard__plus{ background:var(--ph-offwhite); } .ph-mcard--navy .ph-mcard__plus::before, .ph-mcard--navy .ph-mcard__plus::after{ background:var(--ph-blue); } /* EKSTERNT KORT — TO CIRKLER: pilen til VENSTRE for plusset. ⛔ LAGT OM 11. AUGUST 2026 (Jonas). Indtil da BYTTEDE `.ph-mcard--ext` plussets to streger ud med en ↗ i samme cirkel — altså havde de to eksterne kort (Merch og Bliv medlem) INTET plus. Det var en bevidst konstruktion, ikke en fejl, men den lod de to kort sige det halve: · plusset er kortets AFFORDANCE — "her er noget at åbne" · pilen er en ADVARSEL — "du forlader sitet" Et eksternt kort har begge egenskaber. Samme argument som "+"-et på FIRMA AFTALE (26. juli): et manglende affordance på præcis nogle kort læses som en fejl frem for som en forskel. ⛔ PLUSSET BLIVER YDERST TIL HØJRE, hvor det står på de ti andre kort, og pilen kommer til VENSTRE for det. Så flytter det kendte element sig ikke en pixel, og kun det nye kommer til. Byt dem ikke om. ⚠️ DEN INLINE-PIL ER PRØVET OG FORKASTET — genopfind den ikke. En `.ph-ext` inde i overskriften strækker linjeboksen, og da tekstblokken er bundankret, skubbede den hele labelen 1,8px opad. `line-height:0` flytter glyffen ned under grundlinjen, og `vertical-align` kan ikke løses lineært. Begge cirkler er absolut placeret og kan derfor pr. konstruktion ikke flytte noget i tekstblokken. Begge er aria-hidden, så glyfferne aldrig havner i linkets navn; beskeden til skærmlæsere ligger som .ph-visually-hidden-tekst i selve kortet. */ .ph-mcard__ext{ position:absolute; z-index:3; top:var(--mc-top); /* Plussets plads + plussets bredde + luften imellem. ⛔ Udtrykt i de SAMME tokens som plusset, så mobil kun skal ændre tokenet ét sted. */ right:calc(var(--mc-hoejre) + var(--mc-cirkel) + var(--mc-luft)); width:var(--mc-cirkel); height:var(--mc-cirkel); border-radius:50%; background:var(--ph-menu-dark); display:grid; place-items:center; /* Glyffen følger cirklen, så den ikke bliver for stor på mobil. 17/25 = 0,68 er desktop-forholdet fra den gamle etcirkel-udgave. */ font-size:calc(var(--mc-cirkel) * 0.68); line-height:1; font-weight:400; color:var(--ph-offwhite); } .ph-mcard__ext::before{ content:'\2197'; } .ph-mcard--navy .ph-mcard__ext{ background:var(--ph-offwhite); color:var(--ph-blue); } /* LIVE-badge: rød pille 93×29px, 22px fra venstre og 18px fra toppen — altså modsat plusset, som ligger til højre. */ .ph-mcard__live{ position:absolute; top:18px; left:22px; z-index:3; height:29px; padding:0 16px; display:inline-flex; align-items:center; gap:9px; border-radius:var(--ph-radius-pill); background:var(--ph-live); color:#fff; /* 20px giver cap-højde 14 som i designet, og 16px padding + 9 gap + 13 prik bringer pillen op på designets 93px samlede bredde. */ font-size:20px; font-weight:600; line-height:1; text-transform:uppercase; } .ph-mcard__live i{ width:13px; height:13px; border-radius:50%; background:#fff; } /* ⛔ DET ER PRIKKEN DER BLINKER — IKKE HELE PILLEN (omlagt 10. august 2026). Lærke bad om at LIVE-ikonet skulle være "levende". Pulsen KØRTE — den var bare under tærsklen for at blive bemærket, og det er målt, ikke gættet: hele pillen dæmpet til 0,74 over den mørke card-flade -> kontrast mellem lys og mørk fase: 1,231:1 den hvide prik dæmpet til 0,28 over den røde pille -> kontrast mellem lys og mørk fase: 3,30:1 Samme slags bevægelse, **2,7 gange stærkere signal** — og på 6,2% af pillens areal i stedet for 100%. Det er dét, der gør den mere synlig UDEN at trække blikket: der er langt FÆRRE pixels i bevægelse end før. ⚠️ OG PILLEN STÅR NU HELT STILLE, hvilket er en gevinst i sig selv: ordet LIVE blev før dæmpet til 74% sammen med resten, altså en label der periodisk blev svagere at læse. Nu er teksten altid fuld, og pillen er altid præcis designets 93×29 — den gamle skala nedad (1 → 0,985) findes ikke længere, og dermed heller ikke risikoen for at nogen vender den opad. ⚠️ EN BLINKENDE PRIK ER DEN ETABLEREDE "LIVE"-KONVENTION (optageindikator), hvor en pille der ånder ikke betyder noget bestemt. Signalet er altså også blevet mere præcist, ikke bare kraftigere. ⚠️ KUN opacity og transform animeres. Begge komponeres af GPU'en uden layout eller paint; en puls på background-color eller box-shadow ville i stedet repainte hver frame — i en menu der i forvejen skal bære 12 kort med baggrundsbilleder. ⚠️ 1600ms, ikke 2400. Den gamle halvcyklus var 1200ms, altså så langsom at ændringen skete under opløsningen for "der sker noget". 800ms hver vej læses som et hjerteslag uden at flimre. ⛔ GÅ IKKE UNDER ~500ms HALVCYKLUS. Tre blink i sekundet nærmer sig WCAG 2.3.1's flash-grænse, og et hurtigt blink stjæler opmærksomhed fra de elleve andre kort — som var hele begrundelsen for den rolige puls i første omgang. Animationen koster intet når menuen er lukket: den er display:none via [hidden], og en skjult animation kører ikke. Den starter derfor altid forfra på fuld opacitet, når menuen åbnes. */ @keyframes ph-live-prik{ 0%, 100%{ opacity:1; transform:scale(1); } 50% { opacity:.28; transform:scale(.82); } } .ph-mcard__live i{ animation:ph-live-prik 1600ms ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ /* Helt stille — ikke bare langsommere. Prikken står på fuld opacitet i designets størrelse. ⛔ REGLEN SKAL PEGE PÅ PRIKKEN, IKKE PÅ PILLEN. Menuens egen reduced-motion-regel nulstiller kun `.ph-menu__grid > *` (altså kortene), og animation nedarves ikke — hverken til pillen eller videre til prikken. Stod der stadig `.ph-mcard__live` her, ville prikken blinke lystigt videre for en bruger der har bedt om ro. */ .ph-mcard__live i{ animation:none; opacity:1; transform:none; } } /* Menuens footer: linkene VENSTRESTILLEDE (de er ikke centrerede i designet — målt x159..1007 i et 1366px lærred), logoet centreret nedenunder. */ .ph-menu__foot{ width:78.55vw; max-width:1300px; margin:0 auto; flex:1 0 auto; padding:50px 0 56px; display:flex; flex-direction:column; align-items:center; gap:42px; } .ph-menu__links{ align-self:flex-start; display:flex; flex-wrap:wrap; gap:54px; } .ph-menu__links a{ color:var(--ph-offwhite); font-size:16px; text-transform:uppercase; letter-spacing:.03em; opacity:.88; transition:opacity .2s ease; } .ph-menu__links a:hover{ opacity:1; text-decoration:underline; } .ph-menu__foot .ph-logo img{ height:63px; } /* målt 122×63px i designet */ /* ⛔ .ph-modal ER FJERNET 9. august 2026 sammen med center-vælgeren (Jonas). Den stylede ÉN ting: modalen bag "Prøv Power", som nu linker direkte i booking-systemet. Reglerne er slettet frem for at stå ubrugte — samme disciplin som .ph-subhero 7. august og .ph-burger--sub. ⚠️ Var z-index:130, altså over menuens 120. Den plads er nu ledig; hvis en fremtidig overlejring skal ligge øverst, er det tallet at bruge. */ /* ---------- App-landing (app.html) ---------- */ .ph-applanding{ background:var(--ph-bg); min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; } .ph-applanding__inner{ max-width:520px; } .ph-applanding h1{ font-size:1.7rem; margin-bottom:12px; } .ph-applanding p{ color:var(--ph-muted); margin-bottom:24px; } /* ⚠️ BEGGE HØJDER SKAL SÆTTES HER — ikke kun den fælles. app.html har sin egen badgehøjde, og en regel der kun rammer `.ph-app__badge img` lader Googles modifier stå tilbage med forsidens clamp: målt 56 mod 43px pille, altså præcis det regelbrud modifieren findes for at undgå. Fanget i et sweep, ikke ved at kigge. Forholdet 250/192 og de -29/192 er de samme som på forsiden — se den fulde begrundelse ved .ph-app__badge--google. */ .ph-applanding .ph-app__badge img{ height:56px; } .ph-applanding .ph-app__badge--google img{ height:calc(56px * 250 / 192); margin-block:calc(56px * -29 / 192); } /* ⛔ PANELET ER FJERNET 7. august 2026. Kommentaren sagde "badges er lavet til marineblå" — og det var netop problemet: de gamle filer var omfarvet til navy, hvilket bryder både Apples og Googles retningslinjer. De officielle badges er sorte med Apples grå kant, og de er designet til at ligge på en lys flade. Et navy panel bag dem ville skjule Apples kant, som eksplicit er "part of the badge artwork and should not be modified". */ .ph-applanding .ph-app__badges{ display:inline-flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ---------- 7. RESPONSIVT ---------- */ /* BURGERMENUEN falder fra 4 til 2 kolonner ved 1000px og til 1 ved 640px. ⚠️ Den eksplicitte desktop-placering skal nulstilles med SAMME selektor-form (`.ph-menu__grid > :nth-child(n)`), ellers vinder specificiteten 0,2,0 over --tall/--wide og kortene bliver hængende i deres desktop-felter. Derfor er spænd-reglerne herunder også skrevet med `.ph-menu__grid >`. */ @media (max-width:1000px){ .ph-menu__grid{ width:auto; margin:0 var(--ph-gutter); grid-template-columns:repeat(2, 1fr); grid-auto-rows:minmax(160px, 34vw); gap:16px; } .ph-menu__grid > :nth-child(n){ grid-area:auto; } .ph-menu__grid > .ph-mcard--tall{ grid-row-end:span 2; } .ph-menu__grid > .ph-mcard--wide{ grid-column-end:span 2; } .ph-menu__foot{ width:auto; margin:0 var(--ph-gutter); } .ph-menu__links{ gap:24px 32px; } .ph-mcard__title{ font-size:clamp(22px, 3.6vw, 35px); line-height:1.04; } } /* ⚠️ MOBIL BEVARER MOSAIKKEN — i 2 kolonner, ikke 4, og ikke 1. En ægte 4-kolonne nedskalering blev målt og forkastet: ved 375px bliver kolonnen 68,9-82,1px, og så ender overskriften på 9,6-11,4px og LABELS PÅ 4,4-5,2px med en cap-højde på 3-4 pixels. Teksten ville teknisk KUNNE være der (den bredeste titellinje, "PERSONLIG TRÆNING OG", fylder 106,7px i et 154,7px felt), men den ville ikke kunne læses, og mosaikkens virkning — de store rolige versaler — forsvinder. 1 kolonne var det modsatte problem: læsbart, men uden mosaik. 2 kolonner giver 165,5px kolonner → overskrift 23,1px (cap 16) og label 12px, og der er stadig plads til 2 høje og 2 brede kort. Alle mål er afledt af kolonnebredden via --ph-mk, så designets proportioner holder: 35/251 = 0,1394 for overskriften, 26/251 = 0,1036 for padding osv. */ @media (max-width:640px){ .ph-menu__grid{ --ph-mk: calc((100vw - 44px) / 2); /* kolonnebredden: 100vw − 2×16 margin − 12 gap, delt i to */ width:auto; margin:0 16px; gap:12px; grid-template-columns:repeat(2, 1fr); grid-auto-rows:calc(var(--ph-mk) * 1.1155); /* 280/251 — samme forhold som designets kort */ } /* Mosaikken i 2 kolonner: 2 høje (BLIV MEDLEM, POWER STUDIO), 2 brede (PERSONLIG TRÆNING, FAQ OG KONTAKT), resten enkelte. Eksplicit som på desktop. */ .ph-menu__grid > :nth-child(1){ grid-area:1 / 1 / 3 / 2; } /* navy, høj */ .ph-menu__grid > :nth-child(2){ grid-area:1 / 2 / 2 / 3; } .ph-menu__grid > :nth-child(3){ grid-area:2 / 2 / 3 / 3; } .ph-menu__grid > :nth-child(4){ grid-area:3 / 1 / 4 / 2; } .ph-menu__grid > :nth-child(5){ grid-area:3 / 2 / 5 / 3; } /* høj */ .ph-menu__grid > :nth-child(6){ grid-area:4 / 1 / 5 / 2; } .ph-menu__grid > :nth-child(7){ grid-area:5 / 1 / 6 / 3; } /* bred */ .ph-menu__grid > :nth-child(8){ grid-area:6 / 1 / 7 / 2; } .ph-menu__grid > :nth-child(9){ grid-area:6 / 2 / 7 / 3; } .ph-menu__grid > :nth-child(10){ grid-area:7 / 1 / 8 / 2; } .ph-menu__grid > :nth-child(11){ grid-area:7 / 2 / 8 / 3; } .ph-menu__grid > :nth-child(12){ grid-area:8 / 1 / 9 / 3; } /* bred */ .ph-mcard{ border-radius:calc(var(--ph-mk) * 0.1355); } /* 34/251 */ .ph-mcard__txt{ padding:0 calc(var(--ph-mk) * 0.1036) calc(var(--ph-mk) * 0.1235); gap:calc(var(--ph-mk) * 0.0279); } .ph-mcard__title{ font-size:clamp(18px, calc(var(--ph-mk) * 0.1394), 30px); line-height:1.03; } /* Labelen får et GULV på 12px. Ren proportional skalering ville give 10,5px, og så bliver cap-højden 7px — for lidt til versaler med tracking. */ .ph-mcard__label{ font-size:clamp(12px, calc(var(--ph-mk) * 0.0637), 16px); } /* ⛔ KUN TOKENS. Både "+" og den eksterne pil hænger på dem, så de to cirkler ikke kan skride fra hinanden på mobil. Luften er 10/251 af kortbredden, altså samme forhold som på desktop. */ .ph-mcard{ --mc-cirkel:calc(var(--ph-mk) * 0.0996); --mc-top:calc(var(--ph-mk) * 0.0876); --mc-hoejre:calc(var(--ph-mk) * 0.0996); --mc-luft:calc(var(--ph-mk) * 0.0398); } .ph-mcard__plus::before{ width:calc(var(--ph-mk) * 0.0518); height:2px; } .ph-mcard__plus::after{ width:2px; height:calc(var(--ph-mk) * 0.0518); } .ph-mcard__live{ height:calc(var(--ph-mk) * 0.1155); padding:0 calc(var(--ph-mk) * 0.0637); gap:calc(var(--ph-mk) * 0.0358); font-size:clamp(11px, calc(var(--ph-mk) * 0.0797), 20px); top:calc(var(--ph-mk) * 0.0717); left:calc(var(--ph-mk) * 0.0876); } .ph-mcard__live i{ width:calc(var(--ph-mk) * 0.0518); height:calc(var(--ph-mk) * 0.0518); } /* ⛔ Venstrekanten ændres ÉT sted for alle fem sidehoveder, ikke pr. regel. */ :root{ --ph-hoved-x:20px; } .ph-menu__top{ height:84px; padding:24px 0 0 var(--ph-hoved-x); } /* ⛔ IKONET SKALERES IKKE NED PÅ MOBIL — OG DET ER HELE POINTEN MED 40px. Her stod før `width:44px; height:30px`, altså en mindre og bredere burger på telefon. Mosaikken må ikke følge med derned: ved 30px bliver felterne 9px med 1,5px imellem og flyder sammen — præcis den grund til at ikonet blev afvist 9. august. Den bliver 40×40 på alle bredder. ⚠️ SPRINGET MELLEM SIDENS OG MENUENS BURGER ER STADIG DÆKKET, fordi de to deler ÉN regel og altså ikke KAN drifte fra hinanden. Det var dét, den gamle note her handlede om. */ .ph-menu__links{ align-self:center; justify-content:center; text-align:center; } .ph-menu__foot{ padding:34px 0 40px; gap:30px; } .ph-menu__foot .ph-logo img{ height:48px; } } @media (max-width:860px){ /* Stakket: tilbage i den padded container (--ph-wide slås fra), kort flyder i højden */ .ph-split__grid{ width:auto; max-width:var(--ph-max); padding:0 var(--ph-gutter); grid-template-columns:1fr; gap:var(--ph-s4); } .ph-card{ height:auto; min-height:420px; } /* Stakket app-sektion: HELE desktop-kompositionen rulles tilbage til almindeligt flow. Mockuppens absolutte mål gælder kun desktop, så både tekstblokken og telefonen skal ud af position:absolute igen. ⚠️ HISTORIK: app-sektionen havde kortvarigt sit EGET knækpunkt på 1000px, fordi teksten stødte ind i telefonen fra ca. 897px og ned (15px overlap ved 861px, kun 2px luft ved 900px). Det skyldtes UDELUKKENDE at telefonen dengang var strakt til hele telefon-GRUPPENS 446px. Med Lærkes rigtige enkelt-telefon på 254px er der målt 233px luft ved 1001px og ~152px ved 861px, så sektionen er tilbage på sitets fælles 860px. Gøres telefonen bredere igen, skal luften måles forfra. */ .ph-app__grid{ width:auto; max-width:var(--ph-max); padding:0 var(--ph-gutter); height:auto; } .ph-app__text{ position:static; left:auto; bottom:auto; padding:var(--ph-s6) 0 0; max-width:none; text-align:center; margin:0 auto; } /* Her MÅ badges gerne ombryde — der er ikke plads til 2 × ~145px på en smal telefon. Gap'et sættes fast: 2,343vw ville kun være 9px ved 375px. */ .ph-app__badges{ justify-content:center; flex-wrap:wrap; gap:12px; } /* Telefon i flow (ikke absolut), og LODRET — de 5,32° hører til desktop- kompositionen. Roteret ville bbox'en vokse i højden og blive klippet af .ph-app{overflow:hidden} i bunden. Samme 1320/1299 som før, så min()-værdien fortsat er telefonens KROP og ikke filens bredde. */ .ph-app__phone-wrap{ position:static; left:auto; top:auto; width:auto; transform:none; display:flex; justify-content:center; } /* ⛔ TELEFONEN SÆTTER HELE MODULETS HØJDE PÅ MOBIL (Lærke, 11. august 2026). Modulet målte 644,6px = 79,4% af en 812px skærm, og næsten alt kom herfra: tekst+badges er kun 125,7px, resten er telefonen (495px) plus dens 24px margin. At skrue på padding eller tekst ville derfor ikke flytte noget. Kroppen er sat ned fra 240 til 153px, hvilket giver 315px billedhøjde og et modul på ~465px = 57% af skærmen. ⚠️ De 1320/1299 er stadig telefonens KROP mod filens bredde — sideknapperne stikker ud, så min()-værdien skal ganges op for at ramme kroppen. Fjern ikke faktoren; så bliver telefonen 1,6% for smal. */ .ph-app__phone{ transform:none; width:calc(min(153px,41vw) * 1320 / 1299); margin:24px auto 0; } /* ⛔ BAGSIDEN VISES IKKE PÅ MOBIL. To telefoner ved siden af hinanden er en DESKTOP-komposition: her står telefonen lodret, centreret og i flow, og en bagside ville enten stables under forsiden (meningsløst) eller klemme dem ned i ~120px hver. Mockuppen har heller ingen mobilvisning af parret. ⚠️ `display:none` og ikke blot skjult — ellers henter en telefon stadig filen. */ .ph-app__phone-wrap--bag{ display:none; } .ph-counters__grid{ width:auto; max-width:var(--ph-max); padding:22px var(--ph-gutter); gap:var(--ph-s4); } .ph-trial__inner{ width:auto; max-width:var(--ph-max); padding:18px var(--ph-gutter); } .ph-footer__inner{ width:auto; max-width:var(--ph-max); padding:22px var(--ph-gutter); } } /* ⛔ MOBIL: TRIAL-STRIBEN OG FOOTEREN PÅ ÉN RÆKKE (7. august 2026, Lærke). Begge brød til to rækker, fordi indholdet er bredere end en telefon og `flex-wrap:wrap` så gjorde det eneste den kunne. ⚠️ ALLE MÅL HERUNDER ER FLYDENDE (vw med clamp), IKKE FASTE PR. BREAKPOINT. Det er bevidst: et fast tal ved 640px giver et TRIN hen over grænsen, og ⛔-sektionen i CLAUDE.md om mellembredder er netop skrevet efter tre gange hvor en formel var rigtig ved 375 og 1366 og i stykker ved 768. Med clamp vokser de glat fra 320 til 640, hvor de rammer deres desktop-værdier. Efterregnet ved 320 / 375 / 480 / 560 / 640px — ingen af dem wrapper, og ingen af dem har en spids i forløbet. */ @media (max-width:640px){ /* --- TRIAL: teksten må gerne bryde til to linjer, men den skal stå VED SIDEN AF knappen, ikke over den. Det er dét der halverer højden. "med Prøv Power" skjules: det gentager knappen ordret, og de fire ord er præcis dem der ikke er plads til. */ /* App-teksten skal stå på ÉN linje hele vejen ned til 320px. Sætningen fylder 322,9px ved 16px; pladsen er viewporten minus 47,8px gutter. Ved 400px og opefter går det op ved fuld 16px, derunder skal graden med ned. ⚠️ KOEFFICIENTEN ER 4.0vw OG IKKE 4.15, FORDI `vw` INDEHOLDER SCROLLBAREN. I et testharness (iframe i en desktop-browser) er den 15px bred, så indholdet får 360px mens vw regner med 375 — altså en grad der er sat til en bredere skærm end den teksten faktisk skal stå på. En rigtig telefon har ingen vedvarende scrollbar og er derfor det MILDE tilfælde. 4.0vw holder BEGGE veje; 4.15 holdt kun på telefonen og brød i harnesset. Se lærdommen om 100vw og scrollbaren i CLAUDE.md. Målt (pessimistisk, med scrollbar): 13,4 / 15,0 / 15,6 / 16 / 16px ved 320 / 360 / 375 / 390 / 480 — én linje hele vejen, glat forløb, ingen spids. Cap-højden er 9,4px ved gulvet, altså langt over den 4px-grænse CLAUDE.md advarer om. */ .ph-app__text p{ font-size:clamp(13px, 4vw, 16px); } .ph-trial__inner{ flex-wrap:nowrap; gap:clamp(10px, 3vw, 24px); align-items:center; } .ph-trial__text{ font-size:clamp(12px, 3.7vw, 15.68px); letter-spacing:0.04em; } .ph-trial__lang{ display:none; } .ph-trial .ph-btn--pill{ flex:0 0 auto; padding:clamp(10px, 3vw, 14px) clamp(14px, 4.4vw, 22px); font-size:clamp(12px, 3.6vw, 15.2px); } /* --- FOOTER: brand-blok og ikonrække på samme linje. ⚠️ Her afviger vi bevidst fra fire MÅLTE mockup-tal (logo 41px, gap 23px, tekst 20px, ikoner 34,7px). De er alle målt ved 1366px, hvor der er plads; på 320px er summen 396px i en port på 272. */ .ph-footer__inner{ flex-wrap:nowrap; gap:clamp(8px, 3vw, 24px); } .ph-footer__brand{ gap:clamp(8px, 3vw, 23px); font-size:clamp(12px, 3.6vw, 18px); } .ph-footer__brand .ph-logo img{ height:clamp(24px, 7vw, 41px); } /* ⚠️ Kun de to TOKENS sættes her — reglerne for tapmål og luft står ét sted (§5.8) og regner selv videre. Sætter man `gap` eller `img{width}` direkte her igen, mister linket sin padding og tapmålet falder tilbage til ikonstørrelsen. ⚠️ Luften er hævet fra 1vw til 2vw, fordi den nu ER tapmål og ikke dødt felt: der stod ~41px ubrugt plads mellem ikonrækken og brand-blokken ved 375px. Loftet på 8px og gulvet på 3px er sweepet mod 320-640 — se målingen i CLAUDE.md. */ .ph-social{ --ph-social-ikon:clamp(18px, 5.6vw, 28px); --ph-social-luft:clamp(3px, 2vw, 8px); } } @media (max-width:640px){ /* Logo-striben: ingen særregler for mobil mere — marqueen holder den selv på én linje (nowrap) på alle bredder, inkl. iPhone og smallere. */ .ph-counters__grid{ grid-template-columns:1fr; } .ph-counter{ justify-content:flex-start; } /* Karosellen stakkede før lodret på mobil og smed 3D-transformerne væk. Den forbliver nu vandret og swipes i stedet — ellers er der intet at swipe i. 26.2vw ville give 98px billeder på en 375px-skærm, så de får en egen mobilstørrelse. Forholdet er det samme som på desktop: 72/68 = 1.06. NB: EKSPLICIT height, ikke aspect-ratio — `height="800"` på
fordi vi ikke havde kontaktdata pr. person — `TODO(folk-kontakt)` er dermed lukket. ⚠️ DER ER HVERKEN MAILADRESSER ELLER TELEFONNUMRE. Live-siden har kun Instagram-handles og professionelle websites, altså offentlige faglige profiler. Det er værd at vide, hvis nogen senere spørger hvorfor der ikke er en mail-knap: den findes ikke som data. ⛔ RETTET 11. AUGUST 2026 — HER STOD EN PÅSTAND DER IKKE LÆNGERE ER SAND. Der stod: "TRE PERSONER HAR INGEN LINKS overhovedet (Nicolaj Heindorf, Ryan Harris, Alexander Regenberg). Deres linje er UDELADT HELT." Optalt i markup'en 11. august: ALLE 21 har mindst ét link. De tre navngivne har hver et Instagram-link. 37 links i alt — Instagram 19, Website 15, Klinik 2, Book tid 1 — og NUL tomme kontaktlinjer. ⚠️ Noten stod umiddelbart over selve reglen, altså det første en senere læser møder. Den slags forældede optælling er præcis dét CLAUDE.md advarer imod: "en optælling i denne fil er et øjebliksbillede — tæl efter før du planlægger efter den." Det gælder også en optælling i en CSS-kommentar. ⚠️ Hvis en person en dag IKKE har links, skal linjen udelades helt frem for at stå tom — en overskrift uden indhold ser ud som om siden er gået i stykker. Kortet bliver da 19px lavere, og gitteret og striben tåler det, fordi højden er sat af fotoet og ikke af tekstblokken. */ .ph-folk__kontakt{ margin:6px 0 0; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; display:flex; gap:12px; flex-wrap:wrap; } .ph-folk__kontakt a{ color:var(--ph-black); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } /* Understreget FRA START, ikke først ved hover — kortene har ingen anden klikbar del, så der er intet der antyder at netop den linje kan trykkes, og hover findes ikke på touch. Samme begrundelse som centerkortenes by-profiler på power-house.html. */ .ph-folk__kontakt a:hover{ text-decoration-thickness:2px; } .ph-folk__kontakt a:focus-visible{ outline:3px solid var(--ph-black); outline-offset:3px; border-radius:3px; } /* Pileknapper — samme greb som fotostriben: overlay i hver side, så kortrækken bliver hvor mockuppen har den. */ .ph-folk__next, .ph-folk__prev{ position:absolute; z-index:2; top:clamp(150px, 17vw, 260px); width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(25,28,26,0.3); background:var(--ph-offwhite); color:var(--ph-black); cursor:pointer; display:grid; place-items:center; font-size:16px; line-height:1; transition:background-color .2s ease, color .2s ease, transform .2s ease; } .ph-folk__prev{ left:8px; } .ph-folk__next{ right:8px; } .ph-folk__next:hover, .ph-folk__prev:hover{ background:var(--ph-black); color:#fff; transform:scale(1.06); } .ph-folk__next:focus-visible, .ph-folk__prev:focus-visible{ outline:3px solid var(--ph-black); outline-offset:3px; } /* 14.2 BEHANDLER-GITTERET — seks kort i én række. Mockuppen: foto 199×196, 21px imellem, næsten kant til kant (x51..1350). ⚠️ auto-fit, ikke seks faste kolonner: kommer der en syvende behandler, ombryder rækken af sig selv i stedet for at klemme kortene. */ .ph-folk__sek--be{ padding-bottom:34px; } /* ⚠️ --ph-wide, IKKE containerens 1200px. Lærkes behandlerrække går næsten kant til kant (x51..1350 = 1299px), mens .ph-container ville give 1155. --ph-wide er 95,5vw = 1304px ved 1366 og rammer altså både hendes mål og sitets fælles bredde — samme greb som tæller-bjælken og kort-rækken på forsiden. Se den lukkede --ph-wide-beslutning i CLAUDE.md. */ .ph-folk__gitter{ width:var(--ph-wide); max-width:none; margin:0 auto; display:grid; gap:clamp(10px, 1.54vw, 21px); grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); list-style:none; padding:0; } .ph-folk__kort--be{ width:auto; } /* Kvadratisk kilde i et kvadratisk kort: her beskæres der intet. */ .ph-folk__kort--be .ph-folk__foto{ height:auto; aspect-ratio:199 / 196; } .ph-folk__kort--be .ph-folk__navn{ margin-top:11px; font-size:14px; } .ph-folk__kort--be .ph-folk__rolle, .ph-folk__kort--be .ph-folk__by{ font-size:13px; } @media (max-width:900px){ /* Samme greb som de øvrige striber: pilene må ikke bare skjules, de må ikke fylde. Betjeningen er ren native swipe. */ .ph-folk__next, .ph-folk__prev{ display:none; } } @media (max-width:860px){ /* Samme fallback som tæller-bjælken og kort-rækken: under knækpunktet giver --ph-wide (95,5vw) for lidt luft i siderne, så gitteret falder tilbage på containerens bredde med rigtige guttere. */ .ph-folk__sek--be > .ph-container{ padding:0 var(--ph-gutter); } .ph-folk__gitter, .ph-folk__sek--be .ph-folk__titel{ width:auto; max-width:var(--ph-max); } } @media (max-width:640px){ .ph-folk__gitter{ grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); } .ph-folk__titel{ font-size:17px; } } @media (prefers-reduced-motion: reduce){ .ph-folk__next, .ph-folk__prev{ transition:none; } .ph-folk__next:hover, .ph-folk__prev:hover{ transform:none; } } /* ============================================================ 15. TEKSTSIDE (type A) — den lange, læsetunge underside Bygget 1. august 2026 efter FIRE af Lærkes mockups, ikke én: Privat politik.png (1366×2168), Cookie politik.png (2040), Husets regler.png (4371) og Medlemsbetingelser.png (7528). ⛔ DE FIRE ER PIXELIDENTISKE I SKALLEN — det er derfor der er ÉN blok her og ikke fire særtilfælde. Målt i alle fire: sidehoved y0..92 = 93px #172627 (= .ph-subhead) herobånd y93..343 = 251px (= .ph-subhero) tekstflade fra y344 = navy #171F64, HVID tekst footer navy, CENTRERET hvidt logo 121-122×62-63 Ikke ét af de fire tal afviger. Skallen er altså tegnet, ikke improviseret pr. side. ⛔ FLADEN ER NAVY, IKKE OFFWHITE — og det er let at læse forkert. En nedskaleret visning af mockuppen ligner mørk tekst på lys bund; rå pixels siger det modsatte: 2,17 mio. px (23,31,100) mod 21 tusind (255,255,255). MÅL farven, betragt den ikke. (#171F64 mod vores --ph-blue #182263 er 3 niveauer = samme farve, præcis som menuens navy-kort — se CLAUDE.md.) ⚠️ TYPESKALAEN ER ET VALG, IKKE ET MÅL — de fire mockups er UENIGE: Privat linjeafstand 25 ink 17 Cookie 30 21 Husets regler 32 21 Medlemsbetingelser 33 22 Der er 32% mellem yderpunkterne, så der findes ikke ét rigtigt tal at ramme. Samme situation som --ph-wide (indholdsbredder svinger 79px mellem hendes sider). Vi bruger medianen — 20px/30px — ét sted for alle fem sider. Rejs det ikke som en fejl pr. side. ============================================================ */ .ph-tekst{ /* ⚠️ Spaltemålet er den ENE knap at dreje på — og værdien er MÅLT frem, ikke valgt. Lærkes tekst løber næsten fuld bredde (x58..1281 = 1224px), hvilket er ca. 120 tegn pr. linje. Det er ikke typografi, det er indsat tekst i en fuldbredde-boks — se uenigheden i typeskalaen ovenfor. Ved den længde mister øjet linjen på tilbagespringet, og disse sider SKAL læses igennem. Sweep ved 1366 (målt på privatlivspolitikkens indledning): 74ch -> 624px, 60 tegn/linje, 48% af boksen, side 4452px 98ch -> 840px, 72 tegn/linje, 64% af boksen, side 3972px ⚠️ Tegn/linje afhænger af TEKSTEN: cookiepolitikkens kortere ord giver 92 på præcis samme 840px. Vi ligger altså i toppen af det læsbare interval (45-90) og lidt over på de tætteste afsnit — bevidst, for at komme så tæt på hendes fuldbredde-udtryk som læsbarheden tillader. De 74ch var første forsøg og gav en spalte på under halvdelen af fladen: pænere sat, men langt fra designet. Spalten fryser ved 839px fra 1024px og opefter. ⚠️ VENSTRE KANT ER URØRT og flugter med --ph-wide som alle andre sektioner; kun højre kant kommer ind. Bevidst afvigelse fra mockuppen — står i CLAUDE.md. */ --ph-tekst-maal: 98ch; background:var(--ph-blue); color:var(--ph-offwhite); padding:38px 0 46px; /* → første ink ~48px under fladens overkant, som målt */ } /* Griddet gør to ting på én gang: holder brødteksten på spaltemålet OG lader en tabel bryde ud i fuld --ph-wide. Uden det ville cookietabellens fem kolonner skulle klemmes ned i 74ch. */ .ph-tekst__inder{ width:var(--ph-wide); max-width:none; margin:0 auto; display:grid; grid-template-columns:minmax(0, var(--ph-tekst-maal)) minmax(0, 1fr); } .ph-tekst__inder > *{ grid-column:1; } .ph-tekst__bred{ grid-column:1 / -1; } /* 15.1 TYPOGRAFI ⚠️ HIERARKIET ER EN TILFØJELSE. Lærkes tekstsider er HELT flade — dokumenttitel, "1. Dataansvarlig" og brødtekst har nøjagtig samme størrelse og vægt, fordi teksten er indsat, ikke sat op. En privatlivspolitik på ti nummererede afsnit er ulæselig uden et holdepunkt, så afsnitsoverskrifterne har fået ét trin. Ét trin — ikke en ny typeskala; det flade udtryk er stadig Lærkes. */ .ph-tekst p, .ph-tekst li, .ph-tekst dd{ font-size:20px; line-height:30px; } .ph-tekst p{ margin:0 0 15px; } /* en halv linje — hendes tætte rytme bevares */ .ph-tekst h2{ font-size:23px; font-weight:700; line-height:30px; margin:40px 0 8px; } .ph-tekst h3{ font-size:20px; font-weight:600; line-height:30px; margin:24px 0 2px; } .ph-tekst > .ph-tekst__inder > :first-child, .ph-tekst__inder > h2:first-child{ margin-top:0; } /* Dokumenttitlen er IKKE en
— den står allerede i den mørke
bjælke øverst. To h1'er ville give siden to overskrifter der siger
det samme. */
.ph-tekst__doktitel{
font-size:23px; font-weight:700; line-height:30px;
text-transform:uppercase; letter-spacing:.01em;
margin:0 0 4px;
}
.ph-tekst__dato{ margin:0 0 22px; opacity:.82; }
/* Indledningen på husets-regler: en rigtig sætning, ikke et tidsstempel, så
den har brødtekstens vægt og blot lidt mere luft under sig — som i
mockuppen, hvor der står en tom linje mellem titel og indledning. */
.ph-tekst__lead{ margin:0 0 22px; }
/* Listerne er UDEN punkttegn, fordi Lærkes design ikke har nogen — men
de er rigtige lister i markup'et, så en skærmlæser annoncerer
"liste med 7 elementer" i stedet for syv løsrevne sætninger. */
.ph-tekst__liste{ list-style:none; padding:0; margin:0 0 15px; }
.ph-tekst__liste li + li{ margin-top:2px; }
.ph-tekst__liste strong{ font-weight:600; }
.ph-tekst a{
color:var(--ph-offwhite);
text-decoration:underline; text-underline-offset:3px;
}
.ph-tekst a:hover{ opacity:.75; }
/* 15.2 COOKIEDEKLARATIONEN — en rigtig TABEL
⚠️ I mockuppen er tabellen kollapset til løbende prosa
("Navn Udbyder Formål Udløb Type _ga Google Registrerer …"), fordi
kolonnestrukturen gik tabt i en copy-paste fra Cookiebot. Den er
genopbygget her; indholdet er uændret. */
.ph-tekst__tabelboks{
overflow-x:auto; /* kun tabellen ruller — aldrig siden */
margin:0 0 26px;
-webkit-overflow-scrolling:touch;
}
.ph-tekst table{
border-collapse:collapse;
width:100%; min-width:720px;
font-size:16px; line-height:23px;
text-align:left;
}
.ph-tekst caption{
text-align:left; font-weight:600; font-size:16px;
padding:0 0 8px; opacity:.82;
}
.ph-tekst th,
.ph-tekst td{
padding:9px 14px 9px 0;
vertical-align:top;
border-bottom:1px solid rgba(255,255,255,.16);
}
.ph-tekst thead th{
font-weight:700;
border-bottom-color:rgba(255,255,255,.45);
white-space:nowrap;
}
.ph-tekst td:first-child{ font-weight:600; white-space:nowrap; }
/* 15.3 FOOTER PÅ EN MØRK SIDE — centreret logo, ingen sociale ikoner.
⚠️ IKONERNE ER IKKE GLEMT. De er nøglet som ÉN farve (#1B2628) med
gennemsigtige udstansninger (se CLAUDE.md), så de er beregnet på en
lys flade. På navy ville de være nærmest usynlige — og Lærke har da
også udeladt dem i alle fire mørke mockups. Skal de med, kræver det
et lyst ikonsæt, ikke en CSS-rettelse.
Målt i mockuppene: logo 121-122×62-63 centreret, 87-96px navy under
det. */
.ph-footer--moerk{ background:var(--ph-blue); }
.ph-footer--moerk .ph-footer__inner{
justify-content:center;
padding-block:56px 88px;
}
.ph-footer--moerk .ph-logo img{ height:63px; }
@media (max-width:860px){
/* Samme fallback som tæller-bjælken, kort-rækken og folkegitteret:
under knækpunktet giver --ph-wide (95,5vw) for lidt luft i siderne,
så indholdet falder tilbage på containerbredden med rigtige guttere. */
.ph-tekst__inder{
width:auto; max-width:var(--ph-max);
padding:0 var(--ph-gutter);
grid-template-columns:minmax(0, 1fr);
}
.ph-tekst__bred{ grid-column:1; }
.ph-tekst p,
.ph-tekst li,
.ph-tekst dd{ font-size:18px; line-height:27px; }
.ph-tekst h2{ font-size:21px; line-height:28px; margin-top:32px; }
.ph-tekst h3,
.ph-tekst__doktitel{ font-size:18px; line-height:26px; }
.ph-footer--moerk .ph-footer__inner{ padding-block:40px 56px; }
.ph-footer--moerk .ph-logo img{ height:52px; }
}
/* 15.4 INDHOLDSFORTEGNELSE — kun på de lange tekstsider.
⚠️ EN TILFØJELSE TIL LÆRKES DESIGN, besluttet af Jonas 2. august 2026.
Hendes mockups har ingen — men målt er Husets regler 6,6 skærmfulde og
Medlemsbetingelser 12 (19 på mobil). Begge er OPSLAGSdokumenter: man
kommer for at finde ét svar ("hvordan opsiger jeg?"), ikke for at læse
forfra, og på mobil findes der ikke Ctrl+F.
⛔ KUN HOVEDAFSNIT (h2). Med h3 ville listerne blive 28 og 52 punkter —
altså en mur i stedet for en genvej. Det er hele pointen med at den er
kort nok til at overskue på én gang.
To spalter, fordi 12-14 punkter i én søjle bliver et højt tårn der
skubber selve teksten under folden. */
.ph-tekst__ifo{
margin:0 0 34px;
padding:20px 26px 22px;
background:rgba(255,255,255,.055);
border-left:3px solid rgba(255,255,255,.38);
border-radius:0 8px 8px 0;
}
/* ⚠️ SELEKTORERNE ER SCOPET UNDER .ph-tekst MED VILJE. `.ph-tekst h2` er
(0,1,1), så en løs `.ph-tekst__ifo-titel` (0,1,0) ville TABE på både
font-size og margin — indholdsfortegnelsens overskrift ville stille og
roligt blive et 23px afsnitshoved med 40px luft over. */
.ph-tekst .ph-tekst__ifo-titel{
font-size:16px; font-weight:700; line-height:1;
text-transform:uppercase; letter-spacing:.06em;
margin:0 0 14px; opacity:.82;
}
.ph-tekst .ph-tekst__ifo-liste{
list-style:none; margin:0; padding:0;
columns:2; column-gap:34px;
}
.ph-tekst .ph-tekst__ifo-liste li{
font-size:17px; line-height:27px;
break-inside:avoid; /* et punkt må ikke brækkes over to spalter */
}
.ph-tekst__ifo-liste a{ text-decoration:none; }
.ph-tekst__ifo-liste a:hover,
.ph-tekst__ifo-liste a:focus-visible{ text-decoration:underline; }
/* ⚠️ scroll-margin er IKKE kosmetik: uden den lander overskriften klinet op
ad viewportens overkant, så man ikke kan se om man ramte rigtigt.
⛔ MEN DEN ER IKKE EN HEADERHØJDE. Der er INGEN sticky header på disse
sider: `position:sticky` findes kun på `.site-header` (§8), altså netop
den gamle undersidemarkup restylingen fjernede. `.ph-subhead` er
`position:relative` og ruller væk med siden. Sætter man 93px her, får man
et stort tomt hul over overskriften i stedet for at rydde en bjælke der
ikke er der. 24px er luft, ikke kompensation.
⚠️ Får en tekstside en dag en sticky bjælke, SKAL tallet op — og så er
det bjælkens højde plus luften. */
.ph-tekst h2[id]{ scroll-margin-top:24px; }
/* Fokus flyttes til overskriften ved et spring (se phInitIndhold), og et
programmatisk fokuseret element må ikke tegne en ring det ikke selv
inviterede til. :focus-visible holder ringen til tastaturbrug. */
.ph-tekst h2[id]:focus{ outline:none; }
.ph-tekst h2[id]:focus-visible{
outline:3px solid var(--ph-orange); outline-offset:6px;
}
/* Springer man ind i 12 skærmfulde tekst, er "hvor landede jeg" det første
spørgsmål. Markøren svarer på det uden at ændre typografien.
⚠️ Farve er ikke eneste signal — markøren er en form (en streg i
venstremargenen), ikke en farvet tekst. */
.ph-tekst h2[id]:target{
position:relative;
}
.ph-tekst h2[id]:target::before{
content:''; position:absolute;
left:-18px; top:.15em; bottom:.15em; width:4px;
background:var(--ph-orange); border-radius:2px;
}
@media (max-width:860px){
/* ⚠️ SAMME SCOPING SOM BASEREGLERNE — og det er ikke pedanteri.
Basen er `.ph-tekst .ph-tekst__ifo-liste` (0,2,0); en løs
`.ph-tekst__ifo-liste` her er (0,1,0) og TABER, uanset at den står
senere i filen og inde i en media query. Målt før rettelsen: 375px
viste stadig to spalter à ~140px, hvor overskrifterne brækkede i
stumper. Media queries hæver ikke specificitet. */
.ph-tekst .ph-tekst__ifo-liste{ columns:1; }
.ph-tekst .ph-tekst__ifo-liste li{ font-size:16px; line-height:26px; }
.ph-tekst .ph-tekst__ifo{ padding:16px 18px 18px; margin-bottom:26px; }
.ph-tekst h2[id]:target::before{ left:-12px; }
}
/* ============================================================
16. MEDLEMSFORDELE (undersidetype A)
Bygget 2. august 2026 efter Lærkes Medlemsfordele.png (1366×1157).
Alle mål er læst i filen, ikke skønnet.
sidehoved 93px #172627 (= .ph-subhead)
herobånd y93..343 = 251px (= .ph-subhero)
indhold offwhite fra y344
kortrække 7 kort à 131×205, gap 19, pitch ~149,5
pile 21×21 cirkler, x112 og x1233, centreret y870
footer logo 79×41 + ikonrække 240px (= FOOTER-SUB)
⚠️ SIDEN HAR IKKE SIN EGEN BREDDE. Lærkes kortrække måler x169..1196 =
1028px, men vi bruger --ph-wide som alle andre sektioner — det er den
lukkede beslutning fra 27. juli. Kortene bliver derfor 17% større end i
mockuppen, præcis som Jobs-kortene blev 619,5 mod hendes 571. Rejs det
ikke som en fejl.
============================================================ */
.ph-fordele{ background:var(--ph-offwhite); padding:44px 0 0; }
.ph-fordele__inder{
width:var(--ph-wide); max-width:none; margin:0 auto;
text-align:center;
}
/* Indledningen er MINDRE end brødteksten i kolonnerne — målt, ikke valgt:
ink 17 mod kolonnernes 20 ved samme skrift. Den læses som en manchet,
ikke som et afsnit. */
/* ⚠️ 18/26, IKKE 16/24 — rettet 7. august 2026 (Lærke: "justér
tekststørrelserne, så de stemmer indbyrdes"). Siden havde TO
indledningsafsnit i to forskellige grader: dette på 16/24 og
`.ph-fordele__intro2` på 18/26. To afsnit med samme rolle og samme
placering skal have samme grad; forskellen læses som en fejl.
18/26 er sitets brødtekstmål og bruges også på jobs, kontakt og
firmasiden. */
.ph-fordele__intro{
font-size:18px; line-height:26px;
margin:0 auto 34px; max-width:64em;
}
/* 24px giver ink-højde 17px = mockuppens cap, samme tal som Jobs-kortenes
overskrift. Hierarkiet er fladt hos Lærke — ét trin over brødteksten. */
.ph-fordele__titel{
font-size:24px; font-weight:700; line-height:1;
text-transform:uppercase; letter-spacing:.01em;
margin:0 0 13px;
}
.ph-fordele__titel--sek{ margin-top:0; }
/* ⚠️ PARRET SPÆNDER IKKE --ph-wide, og det er en bevidst undtagelse.
Lærkes to tekstblokke er en CENTRERET komposition, ikke en række der er
justeret ud til kanterne: hun måler 476 + 87 + 486 = 1049px midt i en
1366px side, med ~160px luft i hver side. Spredes de to kolonner ud over
hele --ph-wide, havner deres centre 57px for langt ude (målt: 335/1016
mod hendes 407/973 omregnet), og teksten bliver til to smalle striber
langt fra hinanden.
--ph-wide-beslutningen handler om SEKTIONERNES kanter, ikke om at tvinge
hvert indre element ud i fuld bredde. Kortrækken nedenfor følger den
fortsat. */
.ph-fordele__par{
display:grid; grid-template-columns:1fr 1fr;
gap:87px; /* målt mellem kolonnerne: x644..731 */
max-width:1049px; margin:0 auto 46px;
}
.ph-fordele__koncept p{
font-size:18px; line-height:26px; /* pitch 26 målt i begge kolonner */
margin:0;
}
.ph-fordele__intro2{
font-size:18px; line-height:26px;
margin:0 auto 26px; max-width:70em;
}
/* 16.1 PARTNERKORTENE — stribe-mekanikken med Lærkes eget udseende.
⛔ KOBLINGEN ER DATA-ATTRIBUTTER (data-ph-stribe/-port/-felt/-next/-prev),
ikke klassenavne. JS'en må ikke vide hvilken side eller hvilket brand den
betjener — se de tre lærdomme 28. juli. */
.ph-fordele__stribe{
width:var(--ph-wide); max-width:none; margin:0 auto;
display:flex; align-items:center; gap:20px;
padding-bottom:56px;
/* ⚠️ KORTBREDDEN ER REGNET, IKKE SAT: syv kort skal fylde porten præcis
som i mockuppen, uanset hvor bred --ph-wide gør den. Sætter man et fast
tal, passer det kun ved én skærmbredde.
max() er gulvet — uden det bliver kortene 35px på en telefon, og så
ruller striben i stedet, hvilket er den rigtige opførsel. */
--mf-gap:19px;
--mf-kort:max(150px, calc((var(--ph-wide) - 2 * 64px - 6 * var(--mf-gap)) / 7));
}
.ph-fordele__port{
flex:1 1 auto; min-width:0;
list-style:none; margin:0; padding:0;
display:flex; gap:var(--mf-gap);
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x proximity;
scroll-behavior:auto; /* pilene animerer selv, se phInitStriber */
scrollbar-width:none;
}
.ph-fordele__port::-webkit-scrollbar{ display:none; }
.ph-fordele__felt{
flex:0 0 auto;
width:var(--mf-kort);
/* 131×205 i mockuppen = 0,639. Forholdet holdes, ikke pixeltallene. */
aspect-ratio:131 / 205;
scroll-snap-align:start;
}
/* Partneren: logofelt over navnet. ⏳ Logoet er en pladsholder (.ph-ph) indtil
vi ved om vi må genpublicere partnernes mærker — se noten i markup'en.
Navnet bærer informationen indtil da, og det er derfor det står UNDER
feltet og ikke inde i det: en stribet firkant med tekst i ligner et
ødelagt billede, en stribet firkant med en label under ligner en
pladsholder. */
.ph-fordele__partner{
display:flex; flex-direction:column; height:100%;
color:var(--ph-ink); text-decoration:none;
}
/* ⛔ NAVYEN LIGGER HER, IKKE I BILLEDFILEN (9. august 2026).
Lærkes logofiler er kvadratiske med hvidt mærke på HENDES navy #31387E.
Mærket er nøglet fri, så filen kun bærer alfa, og fladen kommer herfra i
sitets egen #182263. Det løser to ting på én gang: farven bliver den
rigtige, og et KVADRATISK mærke kan sidde i et PORTRÆT-felt uden søm —
det tomme bånd, en flise ville have efterladt, er bare mere navy.
⚠️ Skifter fladen farve en dag, er det denne ene linje. Rør ikke filerne. */
.ph-fordele__logo{
flex:1 1 auto; min-height:0;
display:grid; place-items:center;
background:var(--ph-blue);
border-radius:20px; /* målt: 18px indryk 1px nede i hjørnet */
overflow:hidden;
}
/* Mærket står i sin egen optiske størrelse inde i det kvadrat Lærke har sat
det i — vi skalerer altså ikke hendes balance om. Bredden binder, fordi
feltet er smallere end det er højt. */
.ph-fordele__logo img{
display:block; width:100%; height:auto; max-height:100%;
object-fit:contain;
}
.ph-fordele__pnavn{
flex:0 0 auto; margin-top:8px;
font-size:13px; line-height:16px; letter-spacing:0.02em;
text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
/* ⚠️ HVOR RABATTEN GÆLDER — tilføjet 9. august 2026 (Jonas). Uden den er
halvdelen af listen irrelevant for enhver enkelt læser: et Vejle-medlem kan
ikke se, at Café Cozy gælder netop dér.
Dæmpet og under navnet, så det læses som en oplysning og ikke som en del af
partnerens navn — samme greb som .ph-fac__kun ved saunaen. */
.ph-fordele__psted{
flex:0 0 auto; margin-top:3px;
font-size:12px; line-height:15px; color:var(--ph-muted);
text-decoration:none;
}
.ph-fordele__partner:hover .ph-fordele__pnavn{ text-decoration-thickness:2px; }
.ph-fordele__partner:focus-visible{
outline:3px solid var(--ph-black); outline-offset:3px; border-radius:4px;
}
.ph-fordele__felt .ph-ph{
width:100%; height:100%;
border-radius:20px; /* målt: 18px indryk 1px nede i hjørnet */
}
/* Pilene: Lærkes er 21px cirkler. Knappen er 44px, så touch-målet holder
anbefalingen — den synlige cirkel er inderst og uændret 21px. */
.ph-fordele__pil{
flex:0 0 auto;
width:44px; height:44px; padding:0;
background:none; border:0; cursor:pointer;
display:grid; place-items:center;
color:var(--ph-ink);
}
.ph-fordele__pil > span{
width:21px; height:21px; border-radius:50%;
border:1px solid currentColor;
display:grid; place-items:center;
font-size:11px; line-height:1;
transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.ph-fordele__pil:hover > span{
background:var(--ph-ink); color:var(--ph-offwhite); transform:scale(1.08);
}
@media (max-width:860px){
.ph-fordele__inder,
.ph-fordele__stribe{
width:auto; max-width:var(--ph-max);
padding-left:var(--ph-gutter); padding-right:var(--ph-gutter);
}
.ph-fordele__par{ grid-template-columns:1fr; gap:34px; }
.ph-fordele__titel{ font-size:20px; }
/* Følger .ph-fordele__intro2 på mobil af samme grund som på desktop. */
.ph-fordele__intro{ font-size:17px; line-height:25px; margin-bottom:26px; }
.ph-fordele__koncept p,
.ph-fordele__intro2{ font-size:17px; line-height:25px; }
/* Samme greb som .ph-fac: pilene må ikke bare være usynlige — de må ikke
fylde. Med visibility åd de to knapper plus gap en hel kortbredde.
Betjeningen er ren native swipe. */
.ph-fordele__pil{ display:none; }
/* ⚠️ MELLEMBREDDERNE FÅR ET FAST KORT, ikke telefonens 2-op-formel.
Den formel er et ANDET problems løsning: på 375px skal to kort plus et
kig fylde skærmen, men på en 768px tablet giver præcis samme regel
338×528px kort — altså plakater. Målt før rettelsen. Mellem 641 og 860
er der plads til flere kort ved siden af hinanden, så et fast mål er
rigtigt, og striben ruller. */
.ph-fordele__stribe{ gap:0; --mf-kort:170px; }
}
@media (max-width:640px){
/* To kort plus et kig (26px), så det er synligt at rækken fortsætter —
samme regnestykke som .ph-fac, hvor kigget ER hele affordancen på touch:
der er hverken pil eller scrollbar at se. */
.ph-fordele__stribe{
--mf-kort:calc((100vw - 2 * var(--ph-gutter) - var(--mf-gap) - 26px) / 2);
}
}
@media (prefers-reduced-motion: reduce){
.ph-fordele__pil > span{ transition:none; }
.ph-fordele__pil:hover > span{ transform:none; }
}
/* ============================================================
17. FIRMAAFTALER + FAQ/KONTAKT (undersidetype A)
Bygget 2. august 2026 efter Firma aftale.png (1366×986) og
FAQ og kontakt .png (1366×693).
⛔ DE TO SIDER ER IKKE ÉN BLOK — og det er efterprøvet, ikke antaget.
De deler SKALLEN (93px bjælke + 251px herobånd + FOOTER-SUB), men den
fandtes i forvejen og genbruges af sig selv gennem partials. Derudover
deler de intet:
Firma aftale navy flade, ét CTA-udsagn, TRE offwhite kort
FAQ og kontakt offwhite flade, centreret tekstblok, ingen kort
Det er en anden situation end de fem tekstsider, som var pixelidentiske
i skallen OG havde samme indholdsform. At presse disse to sammen ville
være en falsk abstraktion. De ligger i samme sektion her, fordi de er
bygget samme dag — ikke fordi de deler kode.
============================================================ */
/* 17.1 FIRMAAFTALER — navy flade med tre offwhite kort.
Målt: flade fra y344, lead-linjens ink y378 (34px nede), kort y435..837
(403px høje), radius 26. */
.ph-firma{ background:var(--ph-blue); color:var(--ph-offwhite); padding:34px 0 46px; }
.ph-firma__inder{ width:var(--ph-wide); max-width:none; margin:0 auto; text-align:center; }
/* ⚠️ INDLEDNINGEN ER BEHOLDT FRA DEN GAMLE SIDE, og det er en tilføjelse
til Lærkes design. Hendes navy-flade har ÉN linje før kortene — CTA'en
nedenfor — så en side med titlen "Fleksible firmaaftaler til
virksomheder" ville åbne direkte med en e-mailadresse. Afsnittet er
husets egen, allerede offentliggjorte tekst og indeholder det eneste
sted på sitet hvor det B2B-mæssigt står at kæden er landsdækkende med
fem byer. At slette indhold er en større afvigelse end at beholde det.
Sig til, hvis den skal ud. */
.ph-firma__intro{
font-size:18px; line-height:26px;
margin:0 auto 22px; max-width:74em;
}
.ph-firma__lead{
font-size:18px; line-height:26px;
margin:0 auto 38px; max-width:74em;
}
.ph-firma__lead a{ font-weight:700; color:inherit; text-decoration:underline; text-underline-offset:3px; }
/* ⚠️ TRE LIGE KORT — mockuppens er 430 / 431 / 268 med gap 22 og 83.
Det er håndplacering, ikke rytme: kort 3 har mindst tekst OG en stor
tom bund, så bredden er sat efter indholdet frem for efter et gitter.
Tre kort af samme slags i tre forskellige bredder læses som en fejl.
Lige tredjedele holder desuden når teksten ændrer sig. */
.ph-firma__kort{
display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
text-align:center;
}
.ph-firmakort{
background:var(--ph-offwhite); color:var(--ph-ink);
border-radius:26px; /* målt i mockuppens hjørne */
padding:29px 26px 32px; /* 29 = kortets top til overskrift-ink */
display:flex; flex-direction:column;
}
/* Kortteksten er MINDRE end sidens — målt, ikke valgt: kortenes ink er 16
og pitch 22, mod sidens 20/26. Tre kort med meget tekst side om side
kan ikke bære brødtekstens grad. Samme fund som Power Studios kort. */
.ph-firmakort__titel{
font-size:17px; font-weight:700; line-height:22px;
text-transform:uppercase; letter-spacing:.01em;
margin:0 0 18px;
}
.ph-firmakort p{ font-size:15px; line-height:22px; margin:0 0 10px; }
.ph-firmakort ul{
list-style:none; margin:0 0 10px; padding:0;
font-size:15px; line-height:22px;
}
/* ⚠️ Punkttegnene er væk, fordi Lærkes kort ikke har nogen — hendes liste
står som løbende linjer. Men det ER en liste i markup'en, så en
skærmlæser annoncerer "liste med 3 elementer". */
.ph-firmakort__cta{
margin-top:auto; padding-top:14px;
font-size:15px; line-height:22px;
}
/* ⛔ INGEN UNDERSTREGNING — DET ER EN KNAP, IKKE ET TEKSTLINK (Lærke,
10. august 2026). De tre CTA'er er `.ph-btn .ph-btn--light .ph-btn--pill`:
pilleform, egen baggrund, egen padding og egen vægt. Affordancen ligger i
knapformen, og en streg oveni er redundant.
⚠️ DET ER UNDTAGELSEN, IKKE REGLEN. Alle sitets øvrige understregede links
måler kontrast 1,00 mod deres omgivende tekst — dér er stregen den ENESTE
markering, og den skal blive. Se gennemgangen i CLAUDE.md. */
.ph-firmakort__cta a{ color:var(--ph-ink); text-decoration:none; }
/* 17.2 FAQ OG KONTAKT — offwhite flade, centreret tekst, ingen kort.
Målt: overskrifts-ink y380 (36px under fladens top), cap 14 → 20px;
brødtekst ink 20 / pitch 26 → 18px; alt centreret på x682,5. */
.ph-kontakt{ background:var(--ph-offwhite); padding:30px 0 46px; }
.ph-kontakt__inder{
width:var(--ph-wide); max-width:none; margin:0 auto; text-align:center;
}
.ph-kontakt__titel{
font-size:20px; font-weight:700; line-height:1;
text-transform:uppercase; letter-spacing:.01em;
margin:0 0 30px;
}
/* ⚠️ 17/27 OG ET MÅL PÅ 62ch — rettet 7. august 2026 (Lærke: "gør brødteksten
en anelse mindre, eller del den anderledes op, så den ser naturligt
placeret ud på både computer og telefon").
⛔ DET VAR IKKE GRADEN DER VAR PROBLEMET, DET VAR LINJELÆNGDEN. `max-width`
stod på 64em = 1152px ved 18px, altså bredere end den centrerede spalte
nogensinde bliver — så den bandt aldrig, og teksten løb i sidens fulde
bredde. Målt før: 118 tegn pr. linje ved 1366px, mod de 45-90 der er
læsbart. Det er dét der får den til at se "forkert placeret" ud, ikke
skriftstørrelsen.
`ch` frem for `em`: målet er tegn pr. linje, og `ch` er netop bredden af
et nul i den aktuelle skrift — det følger med når fonten skifter.
Graden er sat en anelse ned som hun bad om, og linjeafstanden en anelse op,
fordi en kortere linje tåler mere luft. */
.ph-kontakt p{
font-size:17px; line-height:27px;
margin:0 auto 26px; max-width:62ch;
}
.ph-kontakt p:last-child{ margin-bottom:0; }
/* ⚠️ MAILADRESSEN ER UDEN STREG FRA START (Lærke, 10. august 2026), og den
kommer ved hover. Det er sitets ENESTE tekstlink uden permanent markering,
og det hviler på ét forhold: linkteksten ER adressen
("info@powerhousedanmark.dk"), introduceret af sætningen lige før — så
indholdet identificerer sig selv, hvor et link på ordet "her" ikke ville.
⛔ BRUG DET IKKE SOM PRÆCEDENS FOR ANDRE LINKS. Kontrasten mod den
omgivende tekst er 1,00, altså ingen farveforskel — for et link hvis tekst
IKKE er en adresse, ville stregen være den eneste markering, og hover
findes ikke på touch. Se gennemgangen af alle 79 i CLAUDE.md. */
.ph-kontakt a{ color:var(--ph-ink); text-decoration:none; }
.ph-kontakt a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ph-kontakt a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:860px){
.ph-firma__inder, .ph-kontakt__inder{
width:auto; max-width:var(--ph-max);
padding-left:var(--ph-gutter); padding-right:var(--ph-gutter);
}
/* ⚠️ TO SPALTER, IKKE ÉN, helt ned til 640px. Én spalte ved 768 gav kort
på 705px med 15px centreret tekst — ca. 88 tegn pr. linje, altså
dobbelt så langt som kortformatet er tænkt til. Målt, ikke gættet.
Kortenes lille grad forudsætter en smal spalte; bliver spalten bred,
skal graden op, og så er det ikke et kort længere. */
.ph-firma__kort{ grid-template-columns:repeat(2, 1fr); gap:18px; }
.ph-firma__intro, .ph-firma__lead,
.ph-kontakt p{ font-size:17px; line-height:25px; }
.ph-kontakt__titel{ font-size:18px; margin-bottom:22px; }
.ph-firmakort{ padding:24px 22px 26px; }
}
@media (max-width:640px){
.ph-firma__kort{ grid-template-columns:1fr; }
}
@media (min-width:861px) and (max-width:1100px){
/* Tre kort under 1100px giver spalter på ~330px, hvor de længste punkter
brækker i tre linjer. To kort er mere læseligt end tre klemte. */
.ph-firma__kort{ grid-template-columns:repeat(2, 1fr); }
}
/* 17.3 FAQ — står OVER kontaktblokken på samme side og samme offwhite flade.
Bygget 9. august 2026 ud fra data/faq.json; markup'en genereres af build.py.
⛔ SPALTEN ER 62ch — SAMME MÅL SOM .ph-kontakt p, OG DET ER IKKE TILFÆLDIGT.
De to blokke står lige over hinanden. Får FAQ'en sin egen bredde, læses de
som to sider klistret sammen frem for én side.
⚠️ Målet er tegn pr. linje, derfor `ch` og ikke `px` — det følger med, hvis
graden eller fonten ændrer sig.
⛔ OG DERFOR SÆTTER DE TRE SPALTE-BEHOLDERE `font-size:17px`, SELVOM DE
IKKE SELV VISER TEKST. `ch` er bredden af et nul i ELEMENTETS EGEN skrift,
så `62ch` på en beholder der arver 16px giver et andet tal end `62ch` på
.ph-kontakt p, der står på 17px. Målt før rettelsen: 560px mod 596px —
FAQ-spalten var 36px smallere end teksten lige under den, og de to
venstrekanter stod 17,5px fra hinanden.
⚠️ Det er sikkert, fordi hvert eneste barn sætter sin egen grad (felt 17,
spørgsmål 18, kategori 12, svar 17, status/knap 15, forslag 16/11). De 17px
bruges KUN til at opløse `ch`. Tilføjes et barn uden egen font-size, arver
det 17 — så sæt en grad på det.
⚠️ INGEN SKILLELINJE MELLEM DE TO BLOKKE. Lærkes design har ingen, og
listens egen afsluttende hairline plus 74px luft og en centreret versaltitel
adskiller dem rigeligt. */
.ph-faq{ background:var(--ph-offwhite); padding:34px 0 44px; }
.ph-faq__inder{
width:var(--ph-wide); max-width:none; margin:0 auto;
/* Kun titlen centreres — alt indhold stiller sig selv til venstre igen.
Centreret brødtekst i en foldet liste er ulæselig. */
text-align:center;
}
.ph-faq__titel{
font-size:20px; font-weight:700; line-height:1;
text-transform:uppercase; letter-spacing:.01em;
margin:0 0 26px;
}
/* ---- søgefelt og knapper (indsat af js/faq.js) ---- */
.ph-faq__vaerktoej{ font-size:17px; max-width:62ch; margin:0 auto 20px; text-align:left; }
.ph-faq__vaerktoej:empty{ margin:0; } /* uden JS er der intet — så heller ingen luft */
.ph-faq__felt{
width:100%; box-sizing:border-box;
font:inherit; font-size:17px; line-height:24px;
padding:13px 16px;
border:1px solid rgba(25,28,26,.28); border-radius:var(--ph-radius);
background:#fff; color:var(--ph-ink);
/* Safari giver type=search afrundede hjørner og egen skrift som standard. */
-webkit-appearance:none; appearance:none;
}
.ph-faq__felt::placeholder{ color:var(--ph-muted); opacity:1; }
.ph-faq__raekke{
display:flex; flex-wrap:wrap; gap:8px 18px;
align-items:baseline; justify-content:space-between;
margin-top:12px; min-height:22px; /* holder højden når status er tom */
}
.ph-faq__status{ margin:0; font-size:15px; line-height:22px; color:var(--ph-muted); }
.ph-faq__vis{
background:none; border:none; padding:0;
font-size:15px; line-height:22px; font-weight:600; color:var(--ph-ink);
text-decoration:underline; text-underline-offset:3px;
}
.ph-faq__vis:hover{ text-decoration-thickness:2px; }
.ph-faq__vis[hidden]{ display:none; }
/* ---- selve listen ---- */
.ph-faq__liste{
list-style:none; margin:0 auto; padding:0;
font-size:17px; max-width:62ch; text-align:left;
/* flex, så søgningen kan sætte rækkefølgen med `order` frem for at flytte
noder. At flytte en node ville lukke et åbent og rive fokus ud
af hænderne på den, der lige har foldet et svar ud. */
display:flex; flex-direction:column;
border-top:1px solid rgba(25,28,26,.16);
}
/* ⚠️ Hver post bærer sin egen bundlinje — IKKE :last-child. Med `order` er den
visuelt sidste ikke den sidste i DOM'en, og skjulte poster ville efterlade
linjen et vilkårligt sted. */
.ph-faq__post{ border-bottom:1px solid rgba(25,28,26,.16); }
/* Eksplicit, fordi et flex-barn ellers kan arve en display-værdi der slår
[hidden] ihjel — og så ville søgningen ikke kunne skjule noget. */
.ph-faq__post[hidden]{ display:none; }
.ph-faq__d{ /* ingen egen boks — linjerne kommer fra */ }
.ph-faq__sum{
display:block; position:relative;
padding:18px 42px 18px 0; cursor:pointer;
list-style:none; /* fjerner trekanten i Firefox */
}
.ph-faq__sum::-webkit-details-marker{ display:none; }
.ph-faq__sum:focus-visible{ outline:2px solid var(--ph-blue); outline-offset:-2px; }
.ph-faq__kat{
display:block; margin-bottom:5px;
font-size:12px; line-height:16px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; color:var(--ph-muted);
}
.ph-faq__sp{ display:block; font-size:18px; line-height:25px; font-weight:600; }
/* Foldemarkøren er tegnet af to kanter frem for en glyf, så den ikke afhænger
af at en bestemt skrift har tegnet — og så den kan dreje blødt. */
.ph-faq__sum::after{
content:''; position:absolute; right:8px; top:50%;
width:9px; height:9px; margin-top:-7px;
border-right:2px solid var(--ph-ink); border-bottom:2px solid var(--ph-ink);
transform:rotate(45deg); transition:transform .2s ease;
}
.ph-faq__d[open] .ph-faq__sum::after{ transform:rotate(-135deg); margin-top:-2px; }
.ph-faq__svar{ padding:0 42px 20px 0; }
.ph-faq__svar p{ font-size:17px; line-height:26px; margin:0 0 16px; }
.ph-faq__svar p:last-child{ margin-bottom:0; }
/* ⛔ `overflow-wrap:anywhere` ER IKKE PYNT. Svarene indeholder URL'er på op til
66 tegn, og i en 327px spalte på en telefon er der plads til ~38. Uden den
skubber ét link hele siden vandret — præcis den fejl der ellers er nul af. */
.ph-faq__svar a{
color:var(--ph-ink); text-decoration:underline; text-underline-offset:3px;
overflow-wrap:anywhere;
}
.ph-faq__svar a:hover{ text-decoration-thickness:2px; }
/* ---- ingen fund ---- */
.ph-faq__intet{ font-size:17px; max-width:62ch; margin:14px auto 0; text-align:left; }
.ph-faq__intet[hidden]{ display:none; }
.ph-faq__intet-titel{ font-size:18px; line-height:26px; font-weight:600; margin:0 0 16px; }
.ph-faq__forslag{
list-style:none; margin:0 0 20px; padding:0;
display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.ph-faq__forslag-knap{
display:block; width:100%; height:100%; text-align:left;
background:#fff; border:1px solid rgba(25,28,26,.16);
border-radius:var(--ph-radius); padding:12px 15px;
font-size:16px; line-height:22px; font-weight:600; color:var(--ph-ink);
}
.ph-faq__forslag-knap:hover{ border-color:rgba(25,28,26,.42); }
.ph-faq__forslag-kat{
display:block; margin-bottom:3px;
font-size:11px; line-height:15px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; color:var(--ph-muted);
}
.ph-faq__intet-mail{ font-size:17px; line-height:26px; margin:0; }
.ph-faq__intet-mail a{ color:var(--ph-ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:860px){
.ph-faq__inder{
width:auto; max-width:var(--ph-max);
padding-left:var(--ph-gutter); padding-right:var(--ph-gutter);
}
.ph-faq__sp{ font-size:17px; line-height:24px; }
.ph-faq__svar p, .ph-faq__intet-mail{ font-size:17px; line-height:25px; }
}
@media (max-width:560px){
/* To forslagskort under 560px giver spalter på ~145px, hvor et spørgsmål
som "Jeg kan ikke komme ind — appen virker ikke" brækker i seks linjer.
Én spalte er kortere at læse end to klemte. */
.ph-faq__forslag{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
.ph-faq__sum::after{ transition:none; }
}
/* 17.4 HJÆLPEKNAP OG FAQ-PANEL — sitets anden indgang til de samme spørgsmål.
Markup i partials/hjaelp.html, adfærd i js/faq.js. Bygget 9. august 2026.
⛔ DEN MÅ IKKE LIGNE EN CHATBOT (Jonas). Derfor et spørgsmålstegn og ordet
"Hjælp" — aldrig en taleboble. Farven er brandets navy, altså samme sprog
som sitets øvrige knapper, ikke det grønne/blå cirkelikon en chatwidget
bruger. Overskriften i panelet siger hvad det er, og underlinjen siger
eksplicit at man ikke skriver til nogen.
⛔ Z-INDEX LIGGER UNDER MENUENS 120 OG MODALENS 130 — med vilje. Går noget
galt, skal menuen vinde over hjælpeknappen, ikke omvendt. Knappen bliver
desuden fjernet fra tabrækkefølgen når menuen er åben (.er-vaek), for ellers
kunne man tabbe til en knap man ikke kan se. */
/* ⛔ HVID FLADE **OG** NAVY KANT — TO SEPARATORER, OG BEGGE SKAL BLIVE.
Knappen var helt navy indtil 9. august 2026. Forsiden har en NAVY
TÆLLERBJÆLKE, og den faste knap flyder hen over den, når man scroller —
dér forsvandt den helt.
Målt mod de tre flader knappen kan lande på:
hvid flade navy flade (før)
navy tællerbjælke 14,50:1 ✅ 1,00:1 ⛔
mørkt hero-foto 14,76:1 ✅ 1,02:1 ⛔
offwhite side 1,15:1 ⛔ 12,60:1 ✅
⛔ INGEN ENKELT FARVE VIRKER PÅ ALLE TRE — og det er hele pointen med
kanten. På navy og på foto er det den HVIDE FLADE der skiller knappen ud;
på den offwhite side kan fladen ikke, og dér gør den 2px NAVY KANT
arbejdet (12,60:1). De to dækker hver sin flade.
⚠️ Fjern derfor aldrig kanten som "pynt" — så er knappen usynlig på
halvdelen af sitet. Og gør den aldrig navy igen uden først at holde den op
mod tællerbjælken. */
.ph-hjaelp__knap{
position:fixed; right:20px; bottom:20px; z-index:110;
display:inline-flex; align-items:center; gap:10px;
padding:11px 20px 11px 12px;
border:2px solid var(--ph-blue); border-radius:var(--ph-radius-pill);
background:#fff; color:var(--ph-blue);
text-align:left;
box-shadow:0 8px 24px rgba(16,23,64,.26);
}
.ph-hjaelp__knap:hover{ background:var(--ph-offwhite); }
.ph-hjaelp__knap:focus-visible{ outline:3px solid var(--ph-ink); outline-offset:3px; }
/* Spørgsmålstegnet i en FYLDT cirkel — på den lyse knap er det mærket der
bærer genkendelsen, så det skal have fuld kontrast, ikke en svag tone. */
.ph-hjaelp__tegn{
flex:0 0 auto;
display:grid; place-items:center;
width:28px; height:28px; border-radius:50%;
background:var(--ph-blue); color:#fff;
font-size:17px; font-weight:700; line-height:1;
}
.ph-hjaelp__ord b{
display:block; font-size:15px; font-weight:700; line-height:19px;
}
/* ⛔ UNDERLINJEN ER DET DER FJERNER CHAT-TVIVLEN. "Se svar på de 30 vi oftest
får" siger at der ligger færdige svar — ikke at nogen sidder og venter.
Tallet sættes af build.py ud fra data/faq.json; se partials/hjaelp.html. */
.ph-hjaelp__ord small{
display:block; font-size:12px; font-weight:400; line-height:16px;
color:rgba(24,34,99,.78);
}
/* ⛔ TO SKJULETILSTANDE MED HVER SIN GRUND — slå dem ikke sammen.
.er-skjult: footeren er i billedet. De seks sociale ikoner ligger præcis i
nederste højre hjørne med 44px tapmål, og holdplanens Book-knapper samme
sted; knappen ville dække dem. Målt på alle 16 sider.
.er-vaek: burgermenuen er åben og dækker skærmen.
Begge bruger display:none, så knappen hverken kan klikkes eller tabbes. */
.ph-hjaelp__knap.er-skjult,
.ph-hjaelp__knap.er-vaek{ display:none; }
.ph-hjaelp[hidden]{ display:none; }
.ph-hjaelp{ position:fixed; inset:0; z-index:115; }
/* Bagtæppet gør modaliteten ægte og fanger klik udenfor. Let, fordi panelet
er lille på desktop — det skal signalere "resten venter", ikke slukke siden. */
.ph-hjaelp__bagtaeppe{ position:absolute; inset:0; background:rgba(16,23,64,.28); }
.ph-hjaelp__panel{
position:absolute; right:20px; bottom:20px;
/* 460 og ikke 420: målt gav 420px kun 37 tegn pr. linje i svarteksten, og
selv om en hjælpepanel-spalte gerne må være smallere end en sides, er 37
under det læsbare. 460 giver 41-42 og er stadig et hjørnepanel — det
dækker 25% af en 1366px skærm. */
width:min(460px, calc(100vw - 40px));
max-height:min(72vh, 660px);
display:flex; flex-direction:column;
background:var(--ph-offwhite); color:var(--ph-ink);
border-radius:14px; box-shadow:0 18px 48px rgba(16,23,64,.34);
overflow:hidden;
}
/* ⛔ INGEN ANIMATION (Jonas). Et panel der glider eller popper ind, trækker
opmærksomhed til sig selv — og det er præcis dét en hjælpeknap ikke skal.
Den vises, når man beder om den, og forsvinder når man lukker. */
.ph-hjaelp__top{
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
padding:18px 16px 0 20px;
}
.ph-hjaelp__titel{
margin:0; font-size:18px; line-height:24px; font-weight:700;
}
.ph-hjaelp__luk{
flex:0 0 auto; width:36px; height:36px; margin:-7px -6px 0 0;
display:grid; place-items:center;
background:none; border:none; border-radius:50%;
font-size:26px; line-height:1; color:var(--ph-ink);
}
.ph-hjaelp__luk:hover{ background:rgba(25,28,26,.08); }
.ph-hjaelp__luk:focus-visible{ outline:2px solid var(--ph-blue); outline-offset:1px; }
/* Siger hvad panelet ER, før nogen når at skrive "hej kan I hjælpe". */
.ph-hjaelp__uddyb{
margin:6px 20px 0; padding-bottom:14px;
font-size:14px; line-height:20px; color:var(--ph-muted);
border-bottom:1px solid rgba(25,28,26,.14);
}
.ph-hjaelp__krop{
flex:1 1 auto; overflow-y:auto;
padding:14px 20px 4px;
font-size:17px; /* opløser 62ch som i §17.3 — binder ikke her */
-webkit-overflow-scrolling:touch;
}
/* Listen fylder panelets bredde; 62ch-loftet fra §17.3 er bredere end panelet
og binder derfor aldrig. Kanten øverst kommer fra uddyb-linjen i stedet. */
.ph-hjaelp__krop .ph-faq__liste{ border-top:none; max-width:none; }
.ph-hjaelp__krop .ph-faq__vaerktoej{ max-width:none; margin-bottom:14px; }
.ph-hjaelp__krop .ph-faq__intet{ max-width:none; }
.ph-hjaelp__krop .ph-faq__sum{ padding:14px 34px 14px 0; }
.ph-hjaelp__krop .ph-faq__sp{ font-size:16px; line-height:23px; }
.ph-hjaelp__krop .ph-faq__svar{ padding:0 34px 16px 0; }
.ph-hjaelp__krop .ph-faq__svar p{ font-size:16px; line-height:24px; }
/* Ét forslag pr. række i panelet — to kolonner ville give ~170px spalter. */
.ph-hjaelp__krop .ph-faq__forslag{ grid-template-columns:1fr; }
.ph-hjaelp__fejl{ margin:0; font-size:16px; line-height:24px; }
.ph-hjaelp__fejl a{ color:var(--ph-ink); text-decoration:underline; text-underline-offset:3px; }
.ph-hjaelp__bund{
flex:0 0 auto; padding:12px 20px 16px;
border-top:1px solid rgba(25,28,26,.14);
}
.ph-hjaelp__bund a{
font-size:15px; font-weight:600; color:var(--ph-ink);
text-decoration:underline; text-underline-offset:3px;
}
.ph-hjaelp__bund a:hover{ text-decoration-thickness:2px; }
@media (max-width:640px){
/* ⛔ PANELET FYLDER SKÆRMEN PÅ MOBIL (Jonas). Et lille hjørnepanel på en
telefon giver hverken plads til søgefelt, liste og svar på én gang — og
det ville efterlade en stribe side udenom, som man rammer i stedet for
panelet. */
.ph-hjaelp__panel{
inset:0; right:auto; bottom:auto;
width:100%; max-width:none; max-height:none; height:100%;
border-radius:0;
}
.ph-hjaelp__bagtaeppe{ display:none; } /* intet at se udenom */
/* ⛔ UNDERLINJEN VÆK PÅ MOBIL — målt, ikke skønnet. Med den er knappen
246px bred, altså 66% af en 375px skærm; uden den 198px. Overlinjen
bærer stadig hele budskabet ("Har du et spørgsmål?"), så det der falder
bort, er uddybningen — ikke betydningen.
Samme greb som .ph-trial__lang på forsiden. */
.ph-hjaelp__knap{ right:14px; bottom:14px; padding:10px 16px 10px 10px; }
.ph-hjaelp__ord small{ display:none; }
}
Bygget 2. august 2026 efter Lærkes Styrkeløft klub.png (1366×1262).
⚠️ SAMME MØNSTER SOM §17.1 — navy flade med offwhite kort — men med
sine egne klasser. Det er REGLEN OM TRE: to forekomster er ikke nok til
at abstrahere, og en fælles klasse ville skulle hedde noget der hverken
er "firma" eller "klub" og dermed kræve at en netop committet side blev
lagt om. Kommer der en TREDJE navy-kort-side, skal §17.1 og §18 slås
sammen til én blok — og så er det den rigtige beslutning, ikke nu.
Målt @1366: kort x52..682 (631px) og x732..1313 (582px), gap 49,
rækken centreret på x682,5, radius 24-26, begge kort TOPstillede
(venstre 713px høj, højre 388px).
============================================================ */
.ph-klub{ background:var(--ph-blue); color:var(--ph-offwhite); padding:34px 0 46px; }
.ph-klub__inder{ width:var(--ph-wide); max-width:none; margin:0 auto; }
/* ⚠️ KOLONNERNE ER BEVIDST ULIGE — modsat firmasidens tre.
Lærkes er 631 og 582, altså 52/48 af rækken. Her er det IKKE
håndplacering: de to kort har forskellige roller (venstre er
beskrivelsen, højre er "hvad koster det, og hvordan melder jeg mig"),
og venstre bærer cirka dobbelt så meget tekst. På firmasiden var de tre
kort derimod ligeværdige, og dér blev de gjort lige brede. */
.ph-klub__kort{
display:grid; grid-template-columns:1.08fr 1fr; gap:49px;
align-items:start; /* topstillede — de er ikke lige høje */
}
.ph-klubkort{
background:var(--ph-offwhite); color:var(--ph-ink);
border-radius:26px;
padding:28px 32px 32px;
}
/* 18px/26px = sidens brødtekst. Modsat firmasidens 15px, fordi der er TO
kort her og ikke tre: spalten er 652px mod firmaets 420, og en smal
grad i en bred spalte giver 80+ tegn pr. linje. Målt i mockuppen:
ink 20-21, pitch 26-28. */
.ph-klubkort p{ font-size:18px; line-height:26px; margin:0 0 22px; }
.ph-klubkort p:last-child{ margin-bottom:0; }
.ph-klubkort ul{
list-style:none; margin:0 0 22px; padding:0;
font-size:18px; line-height:26px;
}
/* Lærkes punkter står med tankestreg, ikke bullet — gengivet med ::before,
så tegnet ikke skal skrives ind i hvert og dermed også bliver læst
op af en skærmlæser. */
.ph-klubkort li{ padding-left:18px; position:relative; }
.ph-klubkort li::before{
content:'–'; position:absolute; left:0; opacity:.8;
}
.ph-klubkort__titel{
font-size:18px; font-weight:700; line-height:26px;
margin:0 0 4px;
}
/* Højre kort er centreret, venstre venstrestillet — som i mockuppen. */
.ph-klubkort--hoejre{ text-align:center; }
.ph-klubkort__mail{ font-weight:700; }
.ph-klubkort__mail a{ color:var(--ph-ink); text-decoration:underline; text-underline-offset:3px; }
/* Den kursive linje er sidens gamle hero-lead. Lærke har flyttet den ned
som afrunding i højre kort; den står derfor her og ikke øverst. */
.ph-klubkort__note{ font-style:italic; }
@media (max-width:860px){
.ph-klub__inder{
width:auto; max-width:var(--ph-max);
padding-left:var(--ph-gutter); padding-right:var(--ph-gutter);
}
/* ⛔ ÉN SPALTE ER IKKE NOK — kortet skal også have et MÅL.
Her stod der først, at én spalte var i orden fordi teksten er 18px og
ikke firmakortenes 15px. Det holdt ikke: målt gav 768px et kort på
705px med 76 tegn pr. linje, mod 46-57 ved alle andre bredder. Den
større grad flytter grænsen, den fjerner den ikke.
Med et loft på 600px bliver forløbet 33 (375) / 57 (640) / 60 (768)
tegn — uden spids. Se den permanente lærdom om mellembredder. */
.ph-klub__kort{ grid-template-columns:1fr; gap:18px; }
.ph-klubkort{
padding:24px 22px 26px;
max-width:600px; margin-inline:auto;
}
.ph-klubkort p, .ph-klubkort ul{ font-size:17px; line-height:25px; }
}
/* ---------- 19. CONTENT OG KAMERA ---------- */
/* Lærkes design, målt i Content og kamera.png (1366×1079, fyldt med tekst
7. august 2026 — den var tom indtil da).
⛔ OMVENDT AF §17.1 OG §18. De to er navy flade med offwhite kort; det her
er offwhite flade med NAVY kort. Det er derfor en selvstændig blok og ikke
en tredje bruger af firma/klub-mønsteret — "reglen om tre" gælder samme
mønster, ikke dets spejlbillede. Kommer der en side mere med navy kort på
offwhite, skal denne og .ph-centres (§10.4) ses efter sammen.
MÅLT I MOCKUPPEN @1366:
kort 1 x102..650 = 549 × 357
kort 2 x715..1263 = 549 × 488 (topstillede, ulige høje)
gap 64
rækken x102..1263 = 1162, centrum 682,5 mod sidens 683
radius ~6 (inset 6px ved kortets øverste række, 0 ved dy=5)
top-padding 26 (kort-top -> overskriftens ink)
overskrift ink 16, versaler, centreret
brødtekst ink 15-17, pitch 25, én tom linje mellem afsnit (pitch 50)
tekstspalte 87,6% af kortbredden -> 34px vandret padding
bund-padding 26 (kort 1) / 32 (kort 2)
henvisning 50px under kortene, centreret
⚠️ KORTENE ER BREDERE END MOCKUPPENS 549 — de spænder --ph-wide og bliver
620,25px. Det følger den lukkede --ph-wide-beslutning: undersider bruger
sitets fælles bredde, ikke deres egen mockups. Præcis samme afvigelse som
Jobs-kortene (571 -> 619,5). Den vandrette padding er derfor sat som andelen
6,2% af kortbredden og ikke som mockuppens 34px, så tekstspalten bevarer
sine 87,6%. */
.ph-ck{ background:var(--ph-offwhite); padding:36px 0 50px; }
.ph-ck__grid{
width:var(--ph-wide); max-width:none; margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:64px;
align-items:start; /* topstillede — kort 2 er 131px højere */
}
.ph-ck__kort{
background:var(--ph-blue); color:#fff;
border-radius:6px;
padding:26px 6.2% 26px;
text-align:center;
}
/* 22px giver ink 16 = mockuppens. ⚠️ Jag ikke GRADEN hvis fonten skifter —
målet er ink-højden, ligesom på Jobs-kortene. */
.ph-ck__titel{
font-size:22px; line-height:1.2; font-weight:700;
text-transform:uppercase; letter-spacing:0.01em;
margin:0 0 24px; /* 24 = overskrifts-ink til første tekst-ink */
}
/* Marginen er ÉN linje (25px), fordi mockuppens afstand mellem to afsnit er
pitch 50 mod 25 inde i et afsnit. */
.ph-ck__kort p,
.ph-ck__liste{ font-size:17px; line-height:25px; margin:0 0 25px; }
.ph-ck__kort > *:last-child{ margin-bottom:0; }
/* Punkterne står uden markør og centreret i mockuppen. er beholdt for
semantikkens skyld — det ER en liste, uanset at den ikke ser ud som en. */
.ph-ck__liste{ list-style:none; padding:0; }
.ph-ck__kort a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.ph-ck__kort a:hover{ text-decoration-thickness:2px; }
.ph-ck__henvis{
margin:50px auto 0; text-align:center;
font-size:17px; line-height:25px; color:var(--ph-ink);
}
/* ⛔ UNDERSTREGNINGEN ER IKKE PYNT. Uden den arver de to links brødtekstens
farve præcist — målt kontrast 1,0 mod den omgivende tekst, samme vægt,
ingen understregning — altså et link der er umuligt at se. Lærkes egen
linje har "her" som det klikbare og er lige så umarkeret i mockuppen; det
er en fejl i designet, ikke et udtryk vi skal genskabe. Farve alene ville
desuden ikke være nok (WCAG 1.4.1). */
.ph-ck__henvis a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ph-ck__henvis a:hover{ text-decoration-thickness:2px; }
@media (max-width:860px){
/* Samme fallback som sitets øvrige sektioner: under knækpunktet giver
--ph-wide for lidt luft i siderne. */
.ph-ck__grid{
width:auto; max-width:var(--ph-max);
padding-inline:var(--ph-gutter); gap:24px;
}
.ph-ck__kort{ padding-inline:24px; }
}
@media (max-width:640px){
/* ⛔ ÉN SPALTE KRÆVER ET LOFT — se den permanente lærdom om mellembredder.
Uden max-width ville ét kort blive 592px bredt ved 640 med 17px tekst,
altså den samme spids som styrkeløft-kortene havde ved 768. Loftet er
600px som dér, hvor forløbet blev målt glat. */
.ph-ck__grid{ grid-template-columns:1fr; }
.ph-ck__kort{ max-width:600px; margin-inline:auto; width:100%; }
}
- er beholdt for
semantikkens skyld — det ER en liste, uanset at den ikke ser ud som en. */
.ph-ck__liste{ list-style:none; padding:0; }
.ph-ck__kort a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.ph-ck__kort a:hover{ text-decoration-thickness:2px; }
.ph-ck__henvis{
margin:50px auto 0; text-align:center;
font-size:17px; line-height:25px; color:var(--ph-ink);
}
/* ⛔ UNDERSTREGNINGEN ER IKKE PYNT. Uden den arver de to links brødtekstens
farve præcist — målt kontrast 1,0 mod den omgivende tekst, samme vægt,
ingen understregning — altså et link der er umuligt at se. Lærkes egen
linje har "her" som det klikbare og er lige så umarkeret i mockuppen; det
er en fejl i designet, ikke et udtryk vi skal genskabe. Farve alene ville
desuden ikke være nok (WCAG 1.4.1). */
.ph-ck__henvis a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ph-ck__henvis a:hover{ text-decoration-thickness:2px; }
@media (max-width:860px){
/* Samme fallback som sitets øvrige sektioner: under knækpunktet giver
--ph-wide for lidt luft i siderne. */
.ph-ck__grid{
width:auto; max-width:var(--ph-max);
padding-inline:var(--ph-gutter); gap:24px;
}
.ph-ck__kort{ padding-inline:24px; }
}
@media (max-width:640px){
/* ⛔ ÉN SPALTE KRÆVER ET LOFT — se den permanente lærdom om mellembredder.
Uden max-width ville ét kort blive 592px bredt ved 640 med 17px tekst,
altså den samme spids som styrkeløft-kortene havde ved 768. Loftet er
600px som dér, hvor forløbet blev målt glat. */
.ph-ck__grid{ grid-template-columns:1fr; }
.ph-ck__kort{ max-width:600px; margin-inline:auto; width:100%; }
}