/* ══════════════════════════════════════════════════════════════════════════════════════════
   pulsn-site.css — DET OFFENTLIGE SITES KROM: bjælke, knapper, sektionsbase, fod, skip-link.
   ══════════════════════════════════════════════════════════════════════════════════════════

   HVORFOR DEN FINDES (08-09-2026)
   `/bramming/` og `/tarp/` blev bygget med husets TOKENS (farver, skrifter) og opfandt derefter
   hele resten selv. Målt: forsiden bærer 2.813 linjer `<style>` og 239 klasser; de to undersider
   havde 82 linjer og genbrugte **1 af de 239**. De ramte altså temaet i FARVE og ikke i FORM —
   ingen bjælke, intet logo, sætnings-overskrifter i normal vægt. Ejeren så det med det samme:
   «følger bare ikke vores theme / udseende og heller ej med logo».

   ⭐ Lærdommen bag filen: **et sæt tokens er ikke et udseende.** Tokens er råvaren; udseendet er
   de komponentregler, der bruger dem. En side kan være 100 % tokeniseret og stadig ligne et
   fremmed produkt — og netop dét ser ingen automatisk prøve, fordi hver enkelt værdi er «rigtig».

   HVAD DER ER HER, OG HVOR DET KOMMER FRA
   Blokkene er UÆNDREDE udtræk af `index.html`s eget `<style>` (linje 375-435, 436-524, 562-805,
   1116-1155, 2209-2238, 2286-2413, 2522-2534 på `27f82e92`), så undersiderne får forsidens
   udseende ved KONSTRUKTION og ikke ved genfortolkning. Kun krom — ingen hero, ingen sektioner,
   der hører én side til.

   ⛔ GÆLDEN, SKREVET HØJT SÅ DEN IKKE SKJULES: `index.html` har STADIG sin egen kopi af disse
   ~600 linjer inline. Der er altså to kilder til ét udseende, indtil forsiden også henter dette
   ark. Det blev bevidst ikke gjort i samme ombæring: forsiden er husets mest værdifulde flade,
   og ejeren bad om undersiderne. **Flytningen er en selvstændig opgave med sin egen måling.**
   ⇒ Ændrer du krommet, så ret BEGGE steder, til den opgave er kørt.

   ⚠ Tokennavnene nedenfor er BROEN fra motorens `--pulsn-*` til fladens korte navne. Rør den
   ikke uden at læse kommentarerne: `--paa-brand` erklæres BEVIDST ikke (den forbruges direkte
   fra temaet, hvor den er alias for den BEREGNEDE `--on-brand`), og et tidligere forsøg på at

/* ─── TOKENS (udtraek af index.html 375-435 paa 27f82e92) ─────────────────── */
    /* ─── TOKENS (trækker fra det fælles designsystem, med fallback) ─── */
    :root {
      --bg:        var(--pulsn-bg, #080808);
      --bg-2:      var(--pulsn-bg-2, #111111);
      --bg-3:      var(--pulsn-bg-3, #1a1a1a);
      --border:    var(--pulsn-bg-4,#242424);
      --red:       var(--pulsn-red, #ff1c35);
      --red-dark:  var(--pulsn-red-dark, #d90020);
      --blue:      #0e274f;
      --white:     var(--pulsn-ink, #ffffff);
      /* `--paa-brand` (blækket PÅ brandfladen) erklæres BEVIDST IKKE her — audit D1.
         Den forbruges direkte fra `assets/pulsn-theme.css`, hvor den er alias for motorens
         BEREGNEDE `--on-brand`. Erklæres den her, vinder denne blok (den står efter arket,
         samme specificitet) og låser forgrunden — præcis den fejl portalen lavede i F3.
         `--white` er blækket på SIDEN og er det forkerte valg oven på rødt: målt gav den
         2,75:1 på frost mod stilretningens egne 6,02:1. Ingen fallback, fordi tema-arket er
         en hård afhængighed — en fallback ville kun fastholde en værdi motoren har forladt. */
      /* ─ D1 · DE TRE GRÅ UDLEDES NU AF STILRETNINGENS EGET BLÆK, ikke af faste hex. Som hex
         målte de 1,01–1,14 · 2,08–2,61 · 2,60–3,28:1 på de fire LYSE stilretninger: fladerne
         vendte med temaet, blækket gjorde ikke. Nu ≥4,5:1 på alle 11 stilretningers fire
         flader (dårligst 11,16 · 5,78 · 4,81). `--gray-3` bærer åbningstiderne, "Lukket"-
         mærkerne og receptionens telefontid — det en person med nedsat syn kommer for at læse.
         .94 gengiver #f0f0f0 præcist på standard-stilretningen; .72 er kanonens
         `--pulsn-ink-soft`; .66 er tilmeldingens målte `--daemp-2` og klarer 4,5:1 på alle fire
         lyse — kanonens .62 måler 4,26:1 på «ler». Målt i public_theme_reach_test.php, afsnit 4c. */
      --gray-1:    rgba(var(--pulsn-ink-rgb), .94);
      --gray-2:    rgba(var(--pulsn-ink-rgb), .72);
      --gray-3:    rgba(var(--pulsn-ink-rgb), .66);
      --font-display: var(--pulsn-font-display, 'Exo', sans-serif);
      /* ⛔ OVERSKRIFTENS UDTRYK ER EN DEL AF STILRETNINGEN — ikke et fast tal i fladen.
         Temaet har haft `--pulsn-display-style/-weight` hele tiden, og **7 af 11 retninger
         beder om OPRET display-skrift** (vaerksted · skovnat · violet · kontrast · avispapir ·
         ler · frost), mens fem vil have vaegt 600 eller 700. Forsiden hardkodede
         `font-style:italic; font-weight:800` seks steder og overhoerte dem alle.
         MAALT paa avispapir: Playfair Display er en SERIF med svungne bogstaver, og i
         kursiv 800 ved linjehoejde 0,95 kolliderer N og D med linjen nedenunder.
         Retningen sagde `normal`; fladen sagde italic, og fladen vandt.
         ⚠ `letter-spacing` er MED VILJE ikke lagt om: den er per-element (en 140px
         overskrift og en 18px etiket skal ikke spaerres ens), mens tokenet er en
         retnings-standard. Det ville vaere at bytte en rigtig vaerdi for en generel.
         ⚠ OG DER BLEV IKKE OPFUNDET ET LOKALT NAVN. Foerste udgave lagde
         `--display-style/-weight` ind her som alias — og `token_vocabulary_test`
         faeldede den: fladens ordforraad maa kun skrumpe. Husets regel er at forbruge
         motorens kanoniske `--pulsn-*` frem for at doebe et nyt navn til fladen. */
      --font-body:    var(--pulsn-font-body, 'Inter', sans-serif);
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
      --max-w: 1280px;
      --gutter: clamp(20px, 5vw, 80px);
      /* ⛔ MENUBJÆLKENS HØJDE SOM ÉT NAVN — ejer-melding 03-09: «"Her Starter Forandringen",
         den tekst på forsiden, det er den som nogen gange er under menuen».
         Målt: `#navbar` er `position: fixed` og 72 px høj, mens `#hero` var `min-height:100dvh`
         med `align-items: flex-end` og `padding-top: 0`. Er indholdet højere end skærmen, vokser
         det derfor OPAD — ind under bjælken — og `overflow: hidden` klipper det væk. Reproduceret
         på 375×600 (kun «FORANDRINGEN» tilbage) og 740×380, telefon på tværs («Her» væk).
         To steder besluttede bjælkens højde: bjælken selv og den plads, heroen skulle holde fri.
         Ét navn, ligesom `--p-tabbar-h` i medlemsfladen — den blev tilføjet af nøjagtig samme
         grund, dengang FIRE steder var uenige om bundbarens højde. */
      --nav-h: 72px;
    }


/* ─── RESET + TASTATURFOKUS (udtraek af index.html 436-524 paa 27f82e92) ─────────────────── */
    /* ─── RESET ──────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ⛔⛔ HER STOD `font-size: 16px` PÅ <html> — FJERNET 28-08-2026 (WCAG 1.4.4).
       Den så harmløs ud, fordi 16px ER browserens standard: intet flyttede sig, og derfor
       overlevede den. Men den flytter noget for den, det handler om. Har et menneske skruet
       skriftstørrelsen op i sin browser — fordi synet er dårligt, eller fordi telefonen holdes
       på armslængde — sætter linjen roden TILBAGE til 16px. Og fordi hele stigen er i `rem`
       (bevidst, se `assets/pulsn-type.css`), trak den samtidig hver eneste af de 121
       skriftstørrelser nedenfor tilbage til DESIGNERENS tal. Indstillingen så ud til at virke
       overalt undtagen på pulsn.dk.
       Vejledningen i `assets/pulsn-theme.css` siger det uden forbehold: **sæt ALDRIG
       `html { font-size: … }`.** Ingen prøve fangede den; kun en gennemlæsning gjorde.
       ⚠ Ved standard-indstilling ændrer fjernelsen INTET — det er målt. Forskellen opstår kun
       hos den, der selv har bedt om den. Det er netop derfor den var svær at få øje på.

       ─── SKRIFTEN KOMMER NU FRA STIGEN (assets/pulsn-type.css) ─────────────────────────────
       140 rå `font-size`-tal → 18. De 121, der er lagt om, er valgt efter ROLLEN, og
       UI-rampen (9 · 10 · 11 · 12 · 13 · 14 · 15 · 16px) rammer forsidens egne tal ÉN TIL ÉN:
       113 af dem skifter ikke en eneste pixel. Resten flytter sig højst 1px:
           12,5px ×2 → --fs-sm (12)      halv pixel, kan ikke skelnes ved 1× DPR
           17px   ×1 → --fs-2xl (16)     `.cta-sub` lægger sig på linje med sidens øvrige leads
           22px   ×4 → --fs-4xl (21,6)   26px ×1 → --fs-5xl (25,9)
           clamp(13px,1.4vw,15px) → clamp(var(--fs-md), 1.4vw, var(--fs-xl))  — ordret den samme

       ⛔ DE 18, DER BEVIDST STÅR TILBAGE — OG HVORFOR DET IKKE ER DOVENSKAB.
       Forsidens display-skrift er STØRRE END STIGEN RÆKKER. Målt mod hinanden:
           stigens display-rampe topper på  --fs-8xl   = 44,8px
           stigens flydende trin topper på  --fs-fluid-hero = clamp(37,3px, 14vw, 77,4px)
           forsidens hero er               clamp(72px, 10vw, 140px)
       `--fs-fluid-hero` ville altså skære loftet fra 140px til 77,4px — næsten en halvering af
       det første, en besøgende ser. Det er en REDESIGN-beslutning, ikke en oprydning, og den er
       ikke min at tage. Samme historie for `.pricing-amount` (72px), `.cta-headline`
       (→110px), `.section-title` (→80px), `.about-title` (→68px), `.hero-stat-number` (52px),
       `.location-name`/`.mobile-nav a`/`.form-success-icon` (40px), `.mobile-nav-close` (28px)
       og de tre 20px (`.pricing-currency`, `.form-success h3`, `.ci-modal-name`), som ligger
       2px fra nærmeste trin i begge retninger.
       ⚠ OG DE MÅ IKKE «LØSES» MED ET GANGETEGN: `calc(var(--fs-8xl) * 3.125)` ville tælle som
       tokeniseret hos skralden og være et magisk tal med et pænere navn — netop det, stigen
       blev bygget for at komme af med. En halv tokenisering, der ser færdig ud, er værre end
       en ærlig px.
       ⇒ VEJEN VIDERE, hvis de skal lukkes: stigen mangler trin OVER --fs-8xl, og et nyt trin
       hører i `assets/pulsn-type.css`, afledt af `--fs-base`/`--fs-ratio` — aldrig her. Det er
       en ejer- og type-fil-beslutning. Indtil da er et råt px-tal det ærlige svar. */
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--font-body);
      font-weight: 400;
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    /* <picture> er kun en indpakning om <img> — den må ikke kunne ændre layoutet.
       Hver billed-regel på siden er skrevet som `.holder img { … }` (efterkommer, ikke `>`), så
       de rammer stadig. Men en `<picture>` er som udgangspunkt `inline`, og en inline-boks får en
       linjehøjde: det er præcis dér de klassiske 4-5 px under et billede kommer fra, og i en
       ramme med `overflow:hidden` og fast højde ville billedet så blive skubbet. `display:contents`
       fjerner indpakningens egen boks, så `<img>` ligger i forælderens layout nøjagtig som før
       WebP-alternativet blev tilføjet. Uden linjen er ændringen ikke længere kun en optimering. */
    picture { display: contents; }
    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; border: none; background: none; font: inherit; }
    /* Ikonerne fra assets/pulsn-icons.js. ÉN regel, og den vælger ingenting: `1em` betyder
       "samme størrelse som teksten omkring", så glyffernes gamle mål (22px i fordelene, 40px
       i kvitteringen, 15px i pilene) følger med af sig selv fra de font-size-regler der
       allerede stod der. Et `--ico-sm/md/lg` ville have været et sjette ordforråd for et
       begreb der allerede har et. Farven er `currentColor` fra SVG'en selv — brandfarven er
       ikke valgt endnu, og et ikonlag er præcis dér man kommer til at vælge den. */
    .ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

    /* ─── TASTATURFOKUS ──────────────────────────────────────── */
    /* HVEM DET LUKKER UDE: den der ikke kan bruge mus. Forsiden havde 48 `:hover`-regler og
       NUL `:focus-visible` (audit D5) — musen fik 48 tilbagemeldinger, tastaturet fik ingen.
       Målt: 86 fokuserbare elementer (25 knapper, 54 links, 7 felter) uden ét eneste synligt
       fokusmærke. Værst var kontaktformularen, som med `outline:none` slukkede browserens
       EGEN ring uden at sætte noget i stedet: man kunne ikke se hvilket felt man skrev i, og
       heller ikke at man var nået til "Send". Det er samme fejlklasse som F2 i `fx-header.js`.
       AFLEDT, IKKE VALGT: `--focus-ring` peger på stilretningens accent-tone i
       `assets/pulsn-theme.css` — samme token tilmeldingen bruger, og den ENE der findes.
       En ring med sin egen farve her ville skulle vælges om igen når brandfarven vælges.
       `--red` er kun nødblus hvis temaarket slet ikke blev hentet. */
    :focus-visible {
      outline: 2px solid var(--focus-ring, var(--red));
      outline-offset: 2px;
    }


/* ─── NAVBAR, KNAPPER, MOBIL-UDLOESER (udtraek af index.html 562-805 paa 27f82e92) ─────────────────── */
    /* ─── NAVBAR ─────────────────────────────────────────────── */
    /* BJÆLKEN FØLGER IKKE STILRETNINGEN — og må derfor heller ikke låne dens blæk (D1+D5).
       Målt 2026-08-03: bjælken er hardcodet mørk, mens `--gray-2`/`--white` er SIDENS blæk,
       som på de fire lyse stilretninger er MØRKT. Hovednavigationens links målte 1,03–1,11:1
       på den sorte bjælke, og fokusringen (sidens accent) 2,51–2,68:1 — under WCAG 1.4.11.
       Bjælken har nu sit eget par i `assets/pulsn-theme.css` (`--pulsn-nav-bg` +
       `--pulsn-nav-ink-rgb` + `--pulsn-nav-panel`), præcis som sidebarens `--sb-ink-rgb`.
       Forsiden ERKLÆRER dem ikke — den forbruger dem, så arket ikke kan overtrumfes (F3).
       Fallbacks er nøjagtig arkets egne værdier, så udseendet er uændret på alle tolv.
       Målt efter: ring dårligst 19,17:1, navtekst dårligst 10,09:1; mod de mørke
       stilretninger blev intet dårligere (ring 5,22–12,83 → 19,91–20,03). */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 0 var(--gutter);
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* Ingen fallback (EB-08 c): den lød `rgba(8,8,8,0.97)` og var enig med den GAMLE standard.
         Efter at bjælken følger temaet, ville den samme fallback påstå det modsatte af motoren —
         præcis den fejlklasse `tests/token_vocabulary_test.php` findes for. Tokenet kan ikke
         mangle: `pulsn-theme.css` hentes af denne side (målt), og uden det ark er der intet tema
         at falde tilbage til alligevel. */
      background: var(--pulsn-nav-bg);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .nav-logo {
      display: flex;
      align-items: center;
      height: 42px;
      /* ⛔ ET LOGO MAA ALDRIG KRYMPE — det er identiteten, ikke layout. Maalt paa den aegte side
         03-09 ved 375 px: ordmaerket stod 68x36, altsaa i forholdet 1,887 mod billedets egne
         2,177 — **13 % sammenklemt** — og roerte den roede PORTAL-knap med 0 px imellem. Derfor
         saa «pulsn» ud til at vaere skaaret midt over (ejer-melding).
         Kaeden var: `#navbar` er en flex-raekke, dette element havde `flex-shrink: 1`, og raekken
         er bredere end en telefon. Billedet har LAAST hoejde (36 px inline) og arver `max-width`
         fra den krympede forfader — og et loft paa bredden med en laast hoejde giver en
         FORVRAENGNING, ikke en formindskelse.
         ⚠ Ingen medieregel her, med vilje: reglen gaelder enhver bredde, og huset har kun tre
         brudpunkter (480/768/1024). Et fjerde tal ville vaere et knaek, ingen anden flade kender
         — `arkitektur_gaeld_skralde` fangede praecis det i min foerste udgave og havde ret. */
      flex: 0 0 auto;
    }
    .nav-logo img {
      height: 42px;
      width: auto;
    }
    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
      align-items: center;
    }
    .nav-links a {
      font-size: var(--fs-md);
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(var(--pulsn-nav-ink-rgb,255,255,255), .72);
      transition: color 0.2s;
    }
    .nav-links a:hover { color: rgba(var(--pulsn-nav-ink-rgb,255,255,255), 1); }
    .nav-cta {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .nav-portal-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--red);
      color: var(--paa-brand);
      font: 600 var(--fs-sm)/1 var(--font-body);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 11px 18px;
      border-radius: 2px;
      min-height: 44px;
      transition: background 0.2s;
      white-space: nowrap;
    }
    .nav-portal-btn:hover { background: var(--red-dark); color: var(--paa-brand); }
    .nav-social {
      position: relative;
    }
    .nav-social-btn {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(var(--pulsn-nav-ink-rgb,255,255,255),0.15);
      border-radius: 50%;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      color: rgba(var(--pulsn-nav-ink-rgb,255,255,255),0.75);
      padding: 0;
    }
    .nav-social-btn:hover {
      border-color: var(--accent-ink, var(--red));
      background: rgba(var(--pulsn-red-rgb,255,28,53),0.08);
      color: rgba(var(--pulsn-nav-ink-rgb,255,255,255),1);
    }
    .nav-social-btn svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
    .nav-social-drop {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      background: var(--pulsn-nav-panel);   /* fallback fjernet — se noten ved --pulsn-nav-bg */
      border: 1px solid rgba(var(--pulsn-nav-ink-rgb,255,255,255),0.1);
      border-radius: 10px;
      overflow: hidden;
      min-width: 148px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity 0.18s, transform 0.18s;
      z-index: 200;
    }
    .nav-social:hover .nav-social-drop,
    .nav-social:focus-within .nav-social-drop {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .nav-social-drop a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      font-size: var(--fs-md);
      font-weight: 500;
      color: rgba(var(--pulsn-nav-ink-rgb,255,255,255),0.8);
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: background 0.15s, color 0.15s;
    }
    .nav-social-drop a:hover {
      background: rgba(var(--pulsn-red-rgb,255,28,53),0.1);
      color: rgba(var(--pulsn-nav-ink-rgb,255,255,255),1);
    }
    .nav-social-drop a + a {
      border-top: 1px solid rgba(var(--pulsn-nav-ink-rgb,255,255,255),0.07);
    }
    .nav-social-label {
      font-size: var(--fs-2xs);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      /* Alfaen er UÆNDRET (.3) — den måler 2,56:1 og er en åben ejer-beslutning, ikke
         et tema-problem: den er lige lav på alle tolv stilretninger. Se D5-rækken. */
      color: rgba(var(--pulsn-nav-ink-rgb,255,255,255),0.3);
      padding: 9px 16px 4px;
    }
    /* ─── FEM DØDE KNAPREGLER ER FJERNET (audit D5, 2026-08-03) ─────────────────────
       Her stod `.btn-outline` og `.btn-primary`; længere nede stod `.btn-cta-primary` og
       `.btn-cta-secondary`; og i 480px-media queryen stod `.btn`. Alle fem havde rigtig
       CSS med hover og active — og NUL bærere. Målt med `git grep` i hele træet: ingen
       markup, ingen JS-skabelon, kun CSS'ens egne selvhenvisninger (en media query
       slukkede `.nav-cta .btn-outline`, altså en knap der ikke fandtes). De er SLETTET,
       ikke slået sammen: en klasse uden bærer kan ikke ændre en pixel, så netop dén
       oprydning er gratis og bevislig. 20 → 16 basisklasser målt maskinelt.

       DE SEKSTEN DER BLEV STÅENDE, ER MÅLT OG ER FORSKELLIGE. »16 → 1« kan derfor ikke tages
       som oprydning her: geometrierne spænder fra 11px 18px/r2 (nav) over 14px/r6 (book) og
       10px 18px/r20 (centervælgeren) til 16px 32px/r2 (helten). Præcis ÉT par deler hver
       eneste geometri-egenskab — `.btn-hero-primary` og `.form-submit` — og de er stadig
       ikke ens: den ene animerer sit `gap`, den anden løfter sig 1px på hover. En
       sammenlægning ville altså ændre BEVÆGELSEN på den offentlige flade. Det er ejerens
       valg, ikke oprydningens. Målingen holdes i live af `tests/knap_basis_test.php`.

       OG BASEN KAN IKKE FLYTTE TIL `assets/` UNDER NAVNET `.btn`: tre flader ejer allerede
       det navn med tre forskellige geometrier (portalen 11px 18px/r11 · tilmeldingen
       15px 24px/r12 · kvitteringen 15px 34px/r13) og 442 bærere tilsammen. En delt `.btn` i
       temaarket ville give portalens 433 knapper `width:100%` og `justify-content:center`,
       som portalens egen regel ikke sætter og derfor ikke kan overskrive. Målt, ikke gættet
       — se noten i `assets/pulsn-theme.css`. */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 10px;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--white);
      transition: all 0.3s;
    }
    /* Hamburger → X når menuen er åben (tydeligt "tryk for at lukke") */
    .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.active span:nth-child(2) { opacity: 0; }
    .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ⛔ LOGOET BLEV KLEMT SAMMEN PAA EN TELEFON  (ejer-melding 03-09-2026)
       Maalt paa den aegte side ved viewport 375: ordmaerket stod 68 x 36 px, altsaa i forholdet
       1,887 mod billedets egne 2,177 — **13 % sammenklemt** — og det roerte den roede PORTAL-knap
       med 0 px imellem. Det er derfor «pulsn» saa ud til at vaere skaaret midt over.

       AARSAGEN er en kaede, hvor hvert led er rimeligt: `#navbar` er en flex-raekke, `.nav-logo`
       er et flex-element med `flex-shrink: 1`, og raekken er bredere end 375 px. Altsaa krymper
       logoet. Billedet har `height: 36px; width: auto` (inline), men arver `max-width: 100%` fra
       den krympede forfader — og med en LAAST hoejde og et loft paa bredden bliver resultatet en
       forvraengning, ikke en formindskelse.
       ⭐ Et logo maa aldrig krympe: det er identiteten, ikke layout. Derfor `flex: 0 0 auto`.

       Naar logoet ikke laengere giver efter, skal pladsen komme et andet sted fra. Paa en TELEFON
       viger ORDET «Portal», saa ikonet staar alene — og det koster ingen adgang: **PORTAL staar i
       forvejen i hamburger-menuen** (maalt), og knappens `aria-label` er uaendret. */
    /* ⚠ 480 er husets eget telefon-brudpunkt, ikke et nyt tal. Min foerste udgave havde 430 og
       374 — to knaek, ingen anden flade kender — og `arkitektur_gaeld_skralde` sagde fra og havde
       ret. Anden udgave blev baade enklere OG mere principiel: paa telefon er portalen et ikon,
       fra tablet og op baerer den sit ord.
       Maalt paa den aegte side EFTER rettelsen — viewport / logo / forhold / luft til knapperne /
       hamburger inden for kanten. Forholdet er billedets eget 2,177 hele vejen, altsaa nul
       forvraengning; ordet «Portal» er skjult paa alle fire, fordi de alle er <= 480:
           480   78x36   2,177   77 px   ja
           430   78x36   2,177   54 px   ja
           375   78x36   2,177   32 px   ja
           320   78x36   2,177    5 px   ja  (portal-knappen maaler 44 x 44) */
    @media (max-width: 480px) {
      .nav-portal-txt { display: none; }
      /* Paa den smalleste skaerm (320 px) stod der kun 1 px mellem logoet og knapperne. Otte
         pixels i stedet for tolv mellem de fire knapper giver otte tilbage til den luft. */
      .nav-cta { gap: var(--space-2); }
      /* Uden ordet blev knappen 30 px bred — under husets 44 px-gulv for en tryk-flade.
         `min-width` er gulvet; `justify-content` holder ikonet i midten. */
      .nav-portal-btn { padding: 11px var(--space-2); min-width: 44px; justify-content: center; }
    }


/* ─── SECTION BASE (udtraek af index.html 1116-1155 paa 27f82e92) ─────────────────── */
    /* ─── SECTION BASE ───────────────────────────────────────── */
    section {
      padding: clamp(80px, 10vw, 140px) var(--gutter);
      scroll-margin-top: 80px;
    }
    .section-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }
    .section-tag-line { width: 32px; height: 2px; background: var(--red); }
    .section-tag span {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-ink, var(--red));
    }
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(44px, 6vw, 80px);
      font-weight: var(--pulsn-display-weight, 800);
      font-style: var(--pulsn-display-style, italic);
      line-height: 0.95;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .section-sub {
      font-size: var(--fs-2xl);
      color: var(--gray-2);
      line-height: 1.7;
      max-width: 540px;
    }



/* ─── MAERKE-FAMILIEN (udtraek af index.html 1548-1591) ──────────────────────────────
   ⚠ FLYTTET MED AF EN MAALT GRUND, ikke af ryddelighed. Forsidens markup er
   `<span class="location-reception-dynamic hours-badge">` — elementet baerer BEGGE
   klasser, og de saetter samme `padding`. Foer vandt `.hours-badge`, fordi den stod
   SENERE i filen. Da tidskortet flyttede hertil (et ark, der indlaeses FOER forsidens
   egen `<style>`), vandt `.location-reception-dynamic` i stedet, og maerket skiftede
   fra 3px 9px til 3px 8px. Maalt paa 50 selektorer, ikke set med oejet.
   ⭐ Laerdommen: **at flytte CSS ud i et ark aendrer KASKADEN, ikke kun filen.** To
   regler, der loeste hinanden ved raekkefoelge, skal flytte SAMMEN og i samme orden. */
    .location-reception-dynamic {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 3px 8px;
      border-radius: 20px;
      background: rgba(var(--pulsn-red-rgb,255,28,53),0.15);
      color: var(--accent-ink, var(--red));
      white-space: nowrap;
    }
    .location-reception-dynamic.recep-closed { background: rgba(var(--pulsn-ink-rgb), 0.06); color: var(--gray-3); }
    .location-phone-dynamic {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 3px 8px;
      border-radius: 20px;
      background: rgba(var(--pulsn-red-rgb,255,28,53),0.15);
      color: var(--accent-ink, var(--red));
      white-space: nowrap;
    }
    .location-phone-dynamic.phone-closed { background: rgba(var(--pulsn-ink-rgb), 0.06); color: var(--gray-3); }
    .fitness-status-badge {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 3px 9px;
      border-radius: 20px;
      white-space: nowrap;
      background: color-mix(in srgb, var(--ok) 12%, transparent);
      color: var(--ok);
    }
    .fitness-status-badge.closed { background: rgba(var(--pulsn-ink-rgb), 0.06); color: var(--gray-3); }
    .location-badge-always-open {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 3px 8px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--ok) 12%, transparent);
      color: var(--ok);
      white-space: nowrap;
    }

/* ─── AABNINGSTIDS-KORT (udtraek af index.html 2098-2158 paa 27f82e92) ─────────────────── */
    .hours-card {
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 28px 28px 20px;
      background: var(--bg-2);
    }
    .hours-card-title {
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gray-3);
      margin-bottom: 20px;
    }
    .hours-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .hours-row:last-child { border-bottom: none; padding-bottom: 0; }
    .hours-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(var(--pulsn-ink-rgb), 0.04);
      border: 1px solid var(--border);
      border-radius: 2px;
      color: var(--accent-ink, var(--red));
      flex-shrink: 0;
    }
    .hours-row-info { flex: 1; min-width: 0; }
    .hours-row-label { font-size: var(--fs-md); font-weight: 600; color: var(--white); line-height: 1.3; }
    .hours-row-time { font-size: var(--fs-sm); color: var(--gray-3); margin-top: 2px; }
    .hours-badge {
      font-size: var(--fs-xs);
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 20px;
      white-space: nowrap;
    }
    /* ⛔ DE TO SEMANTISKE FARVER KOM FRA TEMAET 27-08 — og de var usynlige for skralden.
       «Åbent nu» og «næsten fuldt» stod som `var(--stat-ok,#22c55e)` og `#e07020`, altså RÅ hex midt i en regel.
       `pr_immune()` i `public_theme_reach_test` tæller `:root`-tokens og rå hvid/sort — **den ser
       ikke en bar hex i en regelkrop**, så de otte forekomster lå i en fil, hvis farve-arkitektur
       ellers er målt til mindste detalje.

       ⚠ `var(--stat-ok,#22c55e)` var i øvrigt PRÆCIS den værdi, `--stat-ok` har i dag — siden hardkodede altså
       tokenets nuværende tal. En anden stilretning sætter `--stat-ok: #35d39a`, og der ville
       forsiden have beholdt den gamle grønne, mens alt andet skiftede.

       ⭐ Orangen skifter nuance (`#e07020` → `--stat-warn` `var(--stat-warn,#f5a623)`), og det er en forbedring, ikke
       en bivirkning: målt mod sidens tre bundfarver går kontrasten fra 5,39–6,21:1 op til
       8,59–9,88:1. `--ok` er uforandret på 8,79–9,88:1. */
    .hours-badge-green { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
    .hours-badge-dynamic { background: rgba(var(--pulsn-red-rgb,255,28,53),0.12); color: var(--accent-ink, var(--red)); }
    .hours-badge-closed { background: rgba(var(--pulsn-ink-rgb), 0.06); color: var(--gray-3); }


/* ─── FOD: SOCIALE UDFOLD (udtraek af index.html 2209-2238 paa 27f82e92) ─────────────────── */
    /* ─── FOOTER SOCIAL DROPDOWNS ───────────────────────────── */
    .footer-social-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
    .footer-social-item { position: relative; }
    .footer-social-btn {
      display: flex; align-items: center; gap: 7px;
      background: var(--bg-3); border: 1px solid var(--border);
      color: var(--gray-2); font-size: var(--fs-md); font-weight: 500;
      padding: 12px 14px; min-height: 44px; border-radius: 6px; cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }
    .footer-social-btn:hover, .footer-social-item:focus-within .footer-social-btn { color: var(--white); border-color: var(--gray-3); }
    .footer-social-chevron { transition: transform 0.2s; }
    .footer-social-item:hover .footer-social-chevron,
    .footer-social-item:focus-within .footer-social-chevron { transform: rotate(180deg); }
    .footer-social-drop {
      position: absolute; bottom: calc(100% + 6px); left: 0;
      background: var(--bg-3); border: 1px solid var(--border);
      border-radius: 8px; padding: 6px; min-width: 130px;
      opacity: 0; pointer-events: none; transform: translateY(6px);
      transition: opacity 0.18s, transform 0.18s; z-index: 100;
    }
    .footer-social-item:hover .footer-social-drop,
    .footer-social-item:focus-within .footer-social-drop { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .footer-social-drop a {
      display: block; padding: 7px 10px; font-size: var(--fs-md);
      color: var(--gray-2); text-decoration: none; border-radius: 5px;
      transition: background 0.15s, color 0.15s;
    }
    .footer-social-drop a:hover { background: rgba(var(--pulsn-ink-rgb), 0.06); color: var(--white); }


/* ─── FOD + MOBILMENU (udtraek af index.html 2286-2413 paa 27f82e92) ─────────────────── */
    /* ─── FOOTER ─────────────────────────────────────────────── */
    footer {
      background: var(--bg-2);
      border-top: 1px solid var(--border);
      padding: 60px var(--gutter) 32px;
    }
    .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      margin-bottom: 60px;
    }
    .footer-brand {}
    .footer-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      text-decoration: none;
    }
    .footer-tagline {
      font-size: var(--fs-lg);
      color: var(--gray-2);
      line-height: 1.7;
      max-width: 280px;
      margin-bottom: 28px;
    }
    .footer-social {
      display: flex;
      gap: 12px;
    }
    .footer-social a {
      width: 36px;
      height: 36px;
      border: 1px solid var(--border);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gray-2);
      transition: color 0.2s, border-color 0.2s;
    }
    .footer-social a:hover { color: var(--white); border-color: var(--gray-3); }
    .footer-col-title {
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 20px;
    }
    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-links a {
      font-size: var(--fs-lg);
      color: var(--gray-2);
      transition: color 0.2s;
      display: inline-block;
      padding: 6px 0;
    }
    .footer-links a:hover { color: var(--white); }
    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .footer-copy {
      font-size: var(--fs-md);
      color: var(--gray-3);
    }
    .footer-legal {
      display: flex;
      gap: 24px;
    }
    .footer-legal a {
      font-size: var(--fs-md);
      color: var(--gray-3);
      transition: color 0.2s;
    }
    .footer-legal a:hover { color: var(--gray-2); }

    /* ─── MOBILE NAV ─────────────────────────────────────────── */
    .mobile-nav {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 99;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 32px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .mobile-nav.open { display: flex; opacity: 1; }
    /* OVERSKRIFT: menupunkterne staar i overskriftsstoerrelse — «Om os», «Hold», «Priser» (markup l.2988-2993). */
    .mobile-nav a {
      font-family: var(--font-display);
      font-size: 40px;
      font-weight: var(--pulsn-display-weight, 800);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--gray-2);
      transition: color 0.2s;
    }
    .mobile-nav a:hover { color: var(--white); }
    .mobile-nav-close {
      position: absolute;
      top: 24px;
      right: var(--gutter);
      font-size: 28px;
      color: var(--white);
      cursor: pointer;
    }


/* ─── SKIP-LINK (udtraek af index.html 2522-2534 paa 27f82e92) ─────────────────── */
    /* ─── SKIP LINK ──────────────────────────────────────────── */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--red);
      color: var(--paa-brand);
      padding: 8px 16px;
      font-size: var(--fs-lg);
      z-index: 999;
    }
    .skip-link:focus { top: 0; }


/* ─── KROMMETS RESPONSIVE REGLER ──────────────────────────────────────────────────────────
   ⚠ SKREVET I HAANDEN, ikke udtrukket — og det er en MAALT beslutning, ikke dovenskab.
   Forsidens `RESPONSIVE`-blok (index.html 2414-2521) er BLANDET: den bærer bjælkens og fodens
   telefon-regler side om side med `.hero-*`, `.team-grid`, `.pricing-*`, `.classes-*` og
   `.contact-grid`. Første forsøg tog hele blokken med — og en fingeraftryks-måling af 34
   selektorer på forsiden FØR og EFTER fandt tre ægte regressioner: `.testimonial-card` mistede
   baggrund og polstring, og `.contact-form` faldt fra `flex` til `block`.
   ⭐ Derfor står kun krommets egne regler her, med forsidens værdier uændret. Forsiden beholder
   sin blok; de syv linjer findes altså to steder, og det er den billigste af de valgte fejl. */
@media (max-width: 1024px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 768px)  { .nav-links { display: none; } .nav-hamburger { display: flex; }
                             .section-title { font-size: clamp(32px, 8vw, 52px); } }
@media (max-width: 540px)  { .footer-top { grid-template-columns: 1fr 1fr; }
                             .hours-card { padding: 20px 16px 14px; }
                             .footer-bottom { flex-direction: column; text-align: center; }
                             .section-inner { padding: 72px var(--gutter); } }
@media (max-width: 480px)  { .footer-top { grid-template-columns: 1fr; } }