/* =========================================================
   AUROA DESIGN SYSTEM v9.92
   Bricks Builder — Global Custom CSS
   Mobile-first, fluid, BEM-like prefixes (l-, c-, u-)

   Layers (top → bottom):
     1.  TOKENS         — design tokens (colors, type, space)
     2.  BASE           — element resets, html/body, headings, links
     3.  LAYOUT         — .l-* containers, sections, grids, splits
     4.  COMPONENTS     — .c-* reusable UI building blocks
     5.  PROSE          — .c-prose article typography
     6.  UTILITIES      — .u-* single-purpose helpers
     7.  AMELIA         — third-party booking widget overrides
     8.  RESPONSIVE     — media queries, sm → 2xl

   v9.92 changelog:
     - 4.3 Lukkeknappen (X) i mobilmenuen blev staaende i headeren
       oeverst paa siden, efter at panelet i v9.91 blev viewport-fast.
       Toggle-elementet saettes nu selv position: fixed oeverst til
       hoejre, mens .show-mobile-menu er sat, med admin-bar-hoejden
       regnet med for indloggede. Burgeren i lukket tilstand er uaendret.

   v9.91 changelog:
     - 4.3 Mobilmenuen aabnede oeverst paa SIDEN, ikke paa skaermen.
       .c-header har backdrop-filter, og #brx-header (Bricks sticky
       on-scroll) har transform, naar den er gledet op. Begge goer
       headeren til containing block for menuens position: fixed, saa
       menuen fulgte headeren ud af skaermen. Mens menuen er aaben
       (.show-mobile-menu), fjernes backdrop-filter og transform via
       :has(), og fixed regnes igen mod viewporten. Ingen JavaScript.
       Bemaerk: :has() kraever Safari 15.4+/Chrome 105+; aeldre
       browsere faar den gamle adfaerd, ikke en fejl.

   v9.90 changelog:
     - 4.3 Mobilmenuens bredde (90 %) og baggrund (rgba(10,19,36,.97))
       flyttet fra nav-menu-elementets indstillinger til filen. Det var
       det eneste udseende, der laa i header- og footerskabelonen; resten
       af post-18.min.css er Bricks' egen nav-menu-CSS. Selektoren er
       .c-header__nav frem for #brxe-941961, saa den ikke er bundet til
       et element-id.
     - Footer: fvhead (Viden & vaerktoejer-overskriften) havde arvet
       _cssId fra 2b84e2 ved kopieringen, saa to elementer delte id i
       HTML. Rettet i skabelonen, ikke i CSS.

   v9.89 changelog:
     - 4.3b "Start her"- og "Gratis"-pillerne i vaerktoejsmenuen har
       klassen .c-megamenu__case-badge, ikke .c-eyebrow, saa v9.88's
       eyebrow-klasser paa dem ramte ingenting (og er fjernet fra
       skabelonen igen). Pillen faar nu ravgul tekst, kant og flade
       under .c-megamenu--tools.
     - 4.3b NY: .c-megamenu__title--warn. Gruppetitlerne i Ydelser-,
       Loesninger- og Viden-menuen foelger sidens kategorifarve:
       "Overvaagning & respons" og "Akut og beskyttelse" i ravgul,
       resten i teal. Samme regel som eyebrows paa siderne.

   v9.88 changelog:
     - 4.3b .c-megamenu--tools: gruppetitlerne i vaerktoejsmenuen i
       ravgul (--sev-medium) som vaerktoejssidernes eyebrows. Teal er
       reserveret til dokumentation og bekraeftelse (v9.51); vaerktoejer
       er blikfang. De oevrige megamenuer er uaendrede. "Start her"-
       badget og "Gratis"-badgene i samme menu faar c-eyebrow
       c-eyebrow--warn i skabelonen (5241); de stod uden klasse.

   v9.87 changelog:
     - 8. .c-footer__bottom (lg) er et grid med sporene auto 1fr i
       stedet for en flex-raekke. Som flex-child fik nav'en med
       linksene sin bredde fra en intrinsisk maaling, og Safari
       skrumpede den til mindstebredden og skubbede den ud over
       kanten, uanset flex-basis (v9.84-v9.86 var forsoeg paa at styre
       det med flex, og det er den forkerte mekanisme). Med et grid
       faar nav'en et bestemt spor (1fr), stiller sine links til hoejre
       og ombryder kun, naar sporet er for smalt. Copyright fylder sit
       eget indhold i auto-sporet. Grundreglen (flex-kolonne under lg)
       er uaendret.

   v9.86 changelog:
     - 8. .c-footer__bottom (lg) tilbage til flex-wrap: nowrap. v9.84
       satte wrap paa raekken, saa nav'en med links laa paa sin egen
       linje under copyright. Raekken ombryder ikke; nav'en, som er
       indholdsbred og selv har wrap, ombryder sine links, hvis
       pladsen mangler. Copyright og links staar nu paa én linje.

   v9.85 changelog:
     - 4.4 .c-footer__grid og .c-footer__bottom faar width: 100%.
       Footerens container er Bricks' .brxe-container, en flex-kolonne
       med align-items: flex-start, saa begge boern blev kun saa brede
       som deres indhold. Grid'et fyldte tilfaeldigt, fordi kolonnerne
       har mindstebredder; bundlinjen maalte ca. 800 px, saa stregen
       og linksene stoppede 380 px foer hoejre kant. Samme sikring som
       .c-group fik i v9.55, og af samme aarsag.

   v9.84 changelog:
     - 4.31/8. Footerens bundlinje. nav.c-footer__bottom-links maalte
       0 x 147 px i Safari: flex: 1 1 auto sammen med min-width: 0
       paa en flex-child med inline-links loeste flex-basis til nul,
       og de syv links laa oven paa hinanden (nowrap) eller under
       hinanden (wrap). Nu er nav'en indholdsbred (flex: 0 1 auto)
       og skubbes til hoejre med margin-left: auto. min-width: 0 er
       fjernet fra grundreglen, og xl-blokkens nowrap er fjernet:
       med en indholdsbred nav ombryder linksene kun, naar der
       faktisk mangler plads. Maalt: én raekke ved 1440.

   v9.83 changelog:
     - 8. Footerens kolonnespor rettet PAA STEDET i den oprindelige
       lg-regel (blokken "Footer: 4 columns"), ikke ved en ny regel.
       v9.82 lagde en fem-spors regel i sektion 8's FOERSTE lg-blok,
       men den oprindelige regel staar i en SENERE lg-blok og vandt
       paa raekkefoelge, saa femte kolonne faldt ned under de andre.
       Duplikatet er fjernet; der er nu én regel for footerens spor.
     - Skabelonen: brandkolonnen (element 1190b3) faar klassen
       c-footer__col--brand, som reglerne i 4.4 og 4.31 altid har
       peget paa (se v9.43). Uden klassen ramte de ingenting.

   v9.82 changelog:
     - 4.29 NY SEKTION: Ikon paa kort. .c-card__ikon, 32 px inline-SVG
       oeverst i kortene paa /ydelser/, /losninger/ og Naeste skridt.
       Stregen er --text, detaljen --accent-2 via SVG'ens egen klasse.
     - 4.30 NY SEKTION: Tilbud under et skridt i vaerktoejet.
       .c-vt__tilbud er én linje med teal kant under recorden paa de
       DMARC-trin, hvor nogen skal laese rapporter. Ikke et banner:
       brugeren har lige laest hvorfor. Hoerer til
       auroa-vaerktoej-dmarc.php 1.7.1.
     - 4.31 NY SEKTION: Footer. Auroa-kolonnen var vokset til ti
       links; nu brand + fire link-kolonner (Sikkerhed, Compliance &
       drift, Viden & vaerktoejer, Auroa) med seks links hver.
       Bundlinjen: copyright venstre, politik-links hoejre. Mail og
       telefon skjules fra lg, de staar i kontaktkolonnen. Kolonne-
       spor og raekke-layout ligger i sektion 8 (md, lg, xl).
     - 8. Footer-regler lagt i de eksisterende md/lg/xl-blokke. Under
       1280 maa politik-links ombryde; fra 1280 staar de paa én linje.
     - RETTER v9.75-v9.81, som IKKE maa bruges: samme regler var
       haengt bagpaa filen som seks loese blokke (4.29, 4.30, 4.31a-e)
       uden for lagstrukturen, med media queries uden for sektion 8 og
       en !important-nulstilling. Alt er nu paa plads, og
       !important er fjernet.

   v9.74 changelog:
     - 4.28 NY SEKTION: Pris paa ydelser. Priskort til "Hvad koster det?"
       og hovedprisen i heroens glaspanel. Kortene bygger paa .c-card og
       .c-card--glass, som allerede ligger paa dem i skabelonen; her
       saettes kun det, der afviger: kortets indre opstilling, den blaa
       kant paa primaerkortet, og tillaegskortenes lettere udtryk.
       Hovedprisen i panelet er et stort tal med en linje under. Ikke
       .c-bignum: gradienten dér er reserveret til CVE-taelleren og
       noegletal, og en pris skal laeses som en pris, ikke som et resultat.
       Markup kommer fra inc/auroa-ydelse-visning.php ([auroa_ydelse_panel]
       og [auroa_ydelse_brodtekst]); Bricks-klasserne c-pris__* har tomme
       settings, saa denne fil er eneste kilde.
       Media query i sektion 8 (md).
     - 4.8  .c-bullet-list--facts. Fakta-listen i hero-panelet: etiketten
       foran hvert punkt i --text, resten i --text-muted som listen selv.
     - 1.   RETTER en rest fra v9.65: prefers-reduced-motion-blokken under
       tokens stod uden sin @media-linje, saa fire regler gjaldt altid og
       en loes "}" lukkede ingenting. Reglerne er flyttet ned i sektion 8
       til den reduced-motion-blok, de hoerer til (se v9.24), og blokken
       dér er samtidig rettet: en @media laa inde i en anden.
     - 8.   Den tomme skabelon-header "8. RESPONSIVE" (den med tegnet
       "≥" og kun tomme kommentarer) er fjernet. Der var to headere, og
       kun den anden havde indhold.

   v9.73 changelog:
     - 4.3b: .c-megamenu--promo gentages i 1024-blokken. Uden den vandt
       .c-megamenu's tre kolonner over varianten fra 768-blokken.

   v9.72 changelog:
     - 4.3b NY: .c-megamenu__promo. Promokortet i vaerktoejsmenuen, med
       plads til en laengere tekst end .c-megamenu__case og linket i
       bunden, saa kortet flugter med kortlisten.
     - 4.3b NY: .c-megamenu--promo. To kolonner fra md, promoen smallest.

   v9.71 changelog:
     - Headeren: menuen foldes til burger under 1280 i stedet for 992.
       Mellem 992 og 1180 laa den op til 132 px inde under knappen.
     - Omrokeringen (logo, knap, burger) flyttet med til 1279.98.
     - .c-header__inner bredde 100 %. Uden den blev logo, knap og burger
       pakket til venstre paa tablet og telefon.
     - 8 px mellem topniveauets punkter i stedet for Bricks' 30, saa et
       sjette punkt, Vaerktoejer, er plads ved 1280 med 40 px luft.
     - Megamenuens links i mobilmenuen: normal linjehoejde i stedet for
       Bricks' 60 px.
       Maalt i Chrome ved 360, 768, 900, 1100, 1279, 1280 og 1440 px.

   v9.70 changelog:
     - 4.27 Vaerktoej: naeste skridt med kopierbare records, selector-
       felt og E-mail Skjold-linjen i lead-boksen. Hoerer til
       auroa-vaerktoej-dmarc.php 1.7.0.

   v9.69 changelog:
     - Overskrifter deler lange ord under md: hyphens: auto (kun ord
       paa 14+ tegn) og overflow-wrap: anywhere paa h1-h6. "Salgs- og leveringsbetingelser" stak 11 px
       ud ved 360 og mistede sidste bogstav under clip. Maalt paa 24
       sider ved 360-1280; det var det eneste overloeb tilbage.

   v9.68 changelog:
     - overflow-x: clip ogsaa paa <html>. Med den kun paa body kunne
       dokumentet stadig scrolle, og forsiden havde 17 px tilbage ved
       768. Maalt: 17 -> 0, og position: sticky paa headeren overlever.

   v9.67 changelog:
     - overflow-x: clip paa body som sikkerhedsnet mod vandret overloeb.
       clip og ikke hidden, fordi hidden laver en scroll-container og
       braekker position: sticky paa headeren.
       Det skjuler symptomet: 17 px paa forsiden ved 768 og 24 px paa
       /ydelser/ ved 1024 stammer fra dekoration uden for sin sektion og
       bor rettes ved kilden, naar de sider efterses.

   v9.66 changelog:
     - Headerens omrokering flyttet fra max-width: 1023.98px til
       991.98px, saa den foelger Bricks' tablet_portrait-breakpoint.
       Blokken staar derfor nu i sin egen gruppe i sektion 8.
       Maalt foer: 121 px overloeb ved 992, 90 ved 1023. Efter: 0.

   v9.65 changelog:
     - Alle 33 media queries samlet i sektion 8, som filens egen
       lagliste altid har udpeget til formaalet. De laa spredt over ni
       sektioner, og tre af dem baar det "by design".
       Blokke paa stigen sm/md/lg/xl/2xl er lagt i deres respektive rum.
       Breakpoints uden for stigen (560, 720, 900 px og de gamle
       max-width) staar i en egen gruppe med en note. De er IKKE flyttet
       til naermeste trin, fordi det ville aendre, hvornaar de virker.
     - RETTER v9.64, som ikke maa bruges. Flytningen dér blev lavet med
       regex, og klammetaellingen ramte forkert paa
       prefers-reduced-motion-blokken. Den slugte de efterfoelgende
       regler, saa headerens mobilregler kun gjaldt for brugere med
       animationer slaaet fra. For alle andre faldt headeren fra
       hinanden med 479 px vandret overloeb paa telefon.
       Denne udgave er lavet med tinycss2 og verificeret ved at
       sammenligne media query, selektor og deklarationer foer og efter.

   v9.63 changelog:
     - 4.27 NY SEKTION: Vaerktoej. Formular, resultatliste, score og
       lead-felt til /vaerktoejer/dmarc-tjek/.
       Mobile first: input og knap staar under hinanden som grundregel
       og ved siden af hinanden fra 560 px. Statusfarverne bruger baade
       farve og en lodret streg, saa resultatet kan laeses uden at
       kunne skelne roed fra groen.
       Honningkrukkefeltet skjules med position: absolute frem for
       display: none. Nogle robotter springer skjulte felter over.

   v9.62 changelog:
     - 4.26 NY SEKTION: Kort i vidensarkivet. .c-card__meta til
       laesetiden nederst paa kortet.
       .c-card gøres IKKE flex globalt — den bruges paa hele sitet, og
       et layoutskifte dér ville ramme kort, der ikke er set efter.
       I stedet :has(.c-card__meta), saa kun de kort, der faktisk har
       en metalinje, bliver til en kolonne. Uden :has-stoette lander
       linjen bare under teksten frem for i bunden; kortet gaar ikke i
       stykker.
       margin-top: auto er hele pointen: uden den staar linjen lige
       under en beskrivelse, der er forskellig lang paa hvert kort, og
       de tre kort i en raekke faar laesetiden i tre forskellige
       hoejder.

   v9.61 changelog:
     - Mobile first genoprettet i 4.22 og 4.23. To regler var skrevet
       baglaens og kostede 267 px vandret overloeb paa telefon.
       white-space: pre stod som grundregel uden mobilt modstykke. En
       <pre> med en DNS-record faar dermed en mindstebredde paa hele
       linjens laengde, og et grid-spor kan ikke skrumpe under sit
       indhold. Grundreglen er nu pre-wrap; én linje med vandret scroll
       faas foerst fra lg, hvor der er plads.
     - .l-article var grid med én kolonne under lg. <aside> staar efter
       <article> i DOM'en, fordi den paa desktop hoerer til i
       sidespalten — paa telefon landede indholdsfortegnelsen derfor
       71 % nede paa siden. Grundlayoutet er nu flex med order: -1 paa
       sidespalten, og grid genindfoeres fra lg.
     - .c-toc__link faar 44 px hoejde som grundregel og slippes fri
       igen fra lg, hvor der er en mus.
     - Bemaerk: mellem 600 og 1023 px kommer der stadig vandret
       overloeb fra HOVEDMENUEN, ikke fra artiklen. Bricks' nav-menu
       skifter foerst til mobilmenu ved mobile_landscape. Det rettes i
       header-skabelonen, ikke her.

   v9.60 changelog:
     - 4.24 sat til syv kort. Rapporten har faaet en forside, saa stakken
       gik fra seks til syv. Spredningen er -12 til +12 grader i hvile og
       -19 til +19 ved hover, kortbredden 52 % og stakken 560 px.
       Midterkortet staar nu lige (0 grader), fordi et ulige antal ellers
       giver en skaev vifte uden midte.

   v9.59 changelog:
     - 4.24 opdateret til seks kort. Rotations- og forskydningsvaerdierne
       var sat til fire; med seks laa kortene for taet og de bagerste
       forsvandt bag de forreste. Spredningen gaar nu fra -11 til +11
       grader i hvile og fra -17 til +17 ved hover, kortbredden er 56 %
       og stakken 520 px bred.
       Vaerdierne er bundet til antallet. Skifter rapporten sidetal igen,
       skal de justeres, ellers bliver viften enten for tynd eller for
       bred. Det staar noteret i sektionen.

   v9.58 changelog:
     - 4.24 NY SEKTION: Dokumentvifte. En stak dokumentsider lagt som
       en vifte, der spreder sig ved hover, og som aabner den valgte
       side i fuld stoerrelse i en <dialog>.
       <dialog> frem for en div med position: fixed. Browseren
       haandterer selv fokusfaelde, Escape, inert baggrund og top-layer,
       saa der er tre stykker JavaScript mindre at vedligeholde, og
       adfaerden er den, folk kender fra alt andet.
       Rotationen ligger paa :nth-child, saa markup'en er en almindelig
       <ul> uden inline style. Sidste barn ligger oeverst — siderne
       skrives derfor i omvendt raekkefoelge, side 4 foerst.

   v9.57 changelog:
     - 4.23 NY SEKTION: Rettelser mod Bricks' egen frontend-CSS.
       Bricks saetter color, font-family, font-size og margin direkte
       paa pre. Designsystemet satte kun baggrund, ramme og polstring,
       saa Bricks vandt paa resten, og kodeblokke stod i #fc1f49 rod
       systemfont. Her tages de fire egenskaber tilbage.
       Desuden white-space: pre paa kodeblokke i prosa. En DNS-record
       skal kunne laeses paa én linje med vandret scroll; ombrudt midt
       i "p=reject;" ligner den en syntaksfejl.
     - .brx-query-trail skjules i lister. Bricks efterlader et tomt
       element efter hvert query loop. I en <ul> eller <ol> er det et
       tomt listepunkt, som skaermlaesere taeller med.

   v9.56 changelog:
     - 4.22 NY SEKTION: Viden, enkeltartikel. Seks komponenter til
       single-viden-skabelonen, som ikke fandtes i forvejen: .l-article
       (prosaspalte + sidespalte), .c-toc, .c-figure, .c-callout--me,
       .c-sources og .c-author.
       .c-toc er et kort under lg og en stille kolonne med én lodret
       streg fra lg og op. Et kort i sidespalten ville konkurrere med
       artiklen om opmaerksomheden; en liste paa otte punkter oeverst
       paa en telefon ville skubbe teksten under folden. Samme komponent
       kan ikke loese begge dele med samme udtryk.
       Prosaspalten er laast til --container-prose (72ch) og ikke til en
       broekdel af gitteret: linjelaengden afgoer om lang tekst kan
       laeses, og den maa ikke vokse bare fordi skaermen goer.
       Bemaerk scroll-margin-top paa .c-article__body :is(h2,h3)[id].
       Uden den lander overskriften bag den klaebende header, naar man
       klikker i indholdsfortegnelsen, og afsnittet ser ud til at mangle
       sin titel.

   v9.55 changelog:
     - 4.13 .c-group faar width: 100%. Beholderen er en flex-kolonne,
       saa en gruppe blev kun saa bred som sit indhold. De to foerste
       grupper havde et kortgitter, der tvang fuld bredde; de to sidste
       havde kun raekker og krympede. Layoutet sprang derfor midt paa
       siden. Samme sikring paa .c-vlist og .c-group__head.

   v9.54 changelog:
     - 4.13 Luft mellem miniature og overskrift i kortene. .c-thumb
       havde ingen bundmargen, og .c-card__title nulstiller sin egen
       topmargen i en senere regel, saa billede og overskrift stod klods
       op ad hinanden. Mockuppen har 4px paa .thumb; her bruges --s4,
       fordi kortene har mere luft end mockuppens.

   v9.53 changelog:
     - 4.13 .c-group.is-first fjerner topmargenen paa den foerste
       synlige gruppe. :first-of-type raekker ikke, naar filteret har
       skjult gruppen foer — den er stadig foerste af sin type i DOM'en,
       saa den synlige gruppe fik sin margen oven i chip-raekkens.
       Klassen saettes af auroa-viden-filter.php.

   v9.52 changelog:
     - 4.13 .c-featured__media gik fra cover til fill. OG-billedet er
       1200x630 (1.90), mens pladsen i kortet er ca. 1.55, saa cover
       klippede logo og overskrift af i siderne. fill trykker billedet
       ca. 18 % vandret sammen, hvilket er mindre synligt end en
       afhugget titel, fordi motivet er et net uden lige linjer. Vil du
       hellere have hele billedet uden forvraengning, er alternativet
       contain med --bg-sunken bag; det giver baelter over og under.
     - 4.13 Luft mellem chip-raekken og foerste gruppeoverskrift.
     - 4.13 .c-chip.is-active og [hidden] til emnefilteret.

   v9.51 changelog:
     - Hover paa links er blaa, ikke teal. Mockuppen bruger --accent-h
       (#4A82FF); design systemet pegede paa --accent-2 (#00D3A7). Teal
       er reserveret til dokumentation og bekraeftelse — flueben,
       eyebrows, noegletal — og skal ikke ogsaa betyde "klik her".
       Rettet paa .c-vrow, .c-item-list, .c-cve-row, .c-cve-list og
       .c-megamenu__case. Reglerne er rettet paa stedet frem for at
       blive gentaget sidst i filen, hvor en duplikat blot vinder paa
       raekkefoelge og skjuler originalen.
       IKKE rettet: a:hover, .c-prose a:hover og .c-voice__item:hover.
       De hoerer til broedtekst og citater, hvor teal er en bevidst
       tone — spoerg foer de aendres.

   v9.50 changelog:
     - 6. .c-vrow manglede position: relative. Et .stretched-link inde i
       en raekke regnede derfor sin inset: 0 mod viewporten, ikke mod
       raekken. Resultatet var 33 usynlige links oven paa hele siden:
       et klik hvor som helst ramte en artikel, og titlerne stablede sig
       ét sted. .c-related__card, .c-item-list__item og .c-services-card
       fik reglen i v9.38; .c-vrow blev glemt.

   v9.49 changelog:
     - 4.13 Fem regler manglede til viden-oversigten. .c-featured,
       .c-chip, .c-group, .c-vlist og .c-vrow fandtes allerede, men
       .c-chips, .c-group__num, .c-group__desc, .c-vrow__read og
       .c-thumb gjorde ikke. Uden dem har chip-raekken ingen ombrydning,
       gruppetallet ingen mono-skrift og laesetiden ingen plads.
       De to-spalte-regler, jeg foerst skrev til .c-featured og .c-vrow,
       fandtes allerede i v9.24-blokken sidst i filen med samme vaerdier.
       De er fjernet igen: en duplikat, der taber paa raekkefoelge, er
       kun forvirrende.

   v9.48 changelog:
     - 4.12 Glasskaeret er flyttet fra modifier til basiskomponent.
       .c-card, .c-related__card og .c-glass-panel brugte allerede
       --bg-glass, men forsidens kort havde desuden et diagonalt skaer og
       en lysstribe i toppen via --glass. Resultatet var, at kort paa
       oevrige sider saa matte ud ved siden af.
       Skaeret ligger nu i bunden af alle tre, saa hele sitet foelger med
       uden en eneste skabelonredigering.
       Loeftet ved hover bliver i modifieren: et kort, der ikke er et
       link, skal ikke bevaege sig, naar musen passerer.

   v9.47 changelog:
     - 4.21 Sektionen efter en underside-hero traekkes op. .c-hero
       beholder sin min-height paa 748px ogsaa paa undersider, hvor
       indholdet sjaeldent fylder saa meget, og der stod derfor et stort
       tomt felt under teksten.
       Rettelsen er en soeskende-selektor: enhver .l-section lige efter
       en .c-hero--page traekkes op. Ingen klasse at huske, og den kan
       ikke lande et forkert sted.
       Bemaerk: margin-top og ikke position/top. Sidstnaevnte flytter kun
       elementet visuelt og lader pladsen staa, saa hullet flytter ned
       under sektionen i stedet for at forsvinde.
       Vaerdien skalerer med skaermbredden. En fast vaerdi paa -200px
       ville paa en smal skaerm traekke sektionen ind over heroens tekst.

   v9.45 changelog:
     - 4.21 .c-hero--page havde 72px i bunden oven paa den foelgende
       sektions egen topmargen. To polstringer stoedte sammen, og der
       stod for meget luft mellem heroen og indholdet. Bunden er skaaret
       til 32px; sektionen under saetter selv resten.
     - 4.12 .c-card--glass. Samme behandling som .c-related__card--glass,
       men paa den almindelige kortkomponent, saa kort uden for
       relateret-gitteret kan faa den uden at laane en fremmed klasse.
     - 4.19 .c-proof--compact. Bevislisten i et kort skal fylde mindre
       end i en case: mindre skrift, taettere linjer og ingen streg
       foroven, fordi kortet allerede har en kant.

   v9.44 changelog:
     - 4.21 NY: .c-hero--page. Forsidens hero er 748px hoej med lodret
       centrering. Paa en underside skal den vaere lavere og starte
       oppe, ellers skubbes indholdet under folden uden grund.
     - 4.21 NY: .c-panel-stat. Tallet nederst i bookingpanelet, adskilt
       med en haarfin linje. Mono, saa 30 og 45 minutter flugter.

   v9.43 changelog:
     - 4.4 Footerlogoet var ubegraenset. Reglerne pegede paa
       .c-footer__col--brand img, men brandkolonnen i skabelonen har kun
       .c-footer__col, saa hverken desktop-loftet paa 160px eller
       mobil-loftet paa 200px har nogensinde ramt noget. Reglen peger nu
       paa .c-footer__col img, som er robust: den eneste billed i en
       footerkolonne er logoet.
     - 4.3 Headerens raekkefoelge paa mobil. Logo, burger og CTA stod i
       DOM-orden, saa burgeren laa mellem logoet og knappen. Nu er
       logoet til venstre, knappen i midten og burgeren til hoejre,
       hvor tommelfingeren er. DOM-orden er urort, saa tabuloerdenen
       foelger stadig laeseretningen.

   v9.42 changelog:
     - 4.3 Header paa mobil. CTA'en havde fast polstring og fast
       skriftstoerrelse, saa "Book gratis samtale" skubbede sig ud over
       hoejre skaermkant paa telefoner. Knappen skrumper nu under 560px,
       og logoet begraenses, saa der er plads til alle tre elementer.
     - 4.4 Footer paa mobil. Brandlogoet stod i fuld bredde og blev
       skaaret af i hoejre side. Der er nu et loft paa 200px.
     - 4.4 Plads til de flydende knapper. Cookiebot nederst til venstre
       og chatten nederst til hoejre laa hen over footerens links. Der er
       lagt 76px ekstra i bunden paa mobil.

   v9.41 changelog:
     - 4.12c .c-item-list--2 forskyder hoejre spalte, som .c-voice
       allerede goer. Uden det flugter de to spalters skillelinjer
       vandret hele vejen ned, og listen laeses som et skema.
       Skillelinjen paa foerste punkt i hver spalte fjernes, saa der
       ikke staar en streg lige under overskriften.

   v9.40 changelog:
     - 4.20 NY: .c-voice. Loesningssektionens fire punkter er saetninger,
       kunder rent faktisk siger, ikke produktnavne. De stod i et 2x2 af
       ens kort — samme mangel paa hierarki som viden-kortene havde.
       Nu er de citater: teal lodret streg, ingen kasse, udsagnet stort
       og svaret daempet under. Hoejre spalte er forskudt nedad, saa
       gitteret ikke laeses som et regneark.
       Samme princip som .c-proof: faerre kasser, mere typografi.

   v9.39 changelog:
     - 4.19 NY: .c-proof. Noegletal blev vist som .c-stat-kasser inde i
       et kort, altsaa kort paa kort, og fire kasser i et gitter fyldte
       mere end resultatet de skulle formidle. Erstattet af en linje pr.
       tal: flueben, vaerdi i teal, label i daempet tekst. Samme
       information, en fjerdedel af stoejen.
     - 4.12 .c-related__card--glass tilfoejet. Standardkortet har flad
       --bg-glass uden slør. Varianten laegger backdrop-filter og en
       svag lysgradient fra oeverste venstre hjoerne paa, saa kortet
       loefter sig fra fladen frem for at ligge fladt paa den.

   v9.38 changelog:
     - 6.  .stretched-link er gjort almen. Den var kun defineret inde i
       .c-related__card, saa i alle andre kort og listepunkter havde
       klassen ingen virkning, og kun overskriften var klikbar. Nu
       gaelder den overalt, og forfaelderen faar position: relative,
       saa linket daekker hele feltet.
     - 4.12 .c-related--2 haevet til .c-related.c-related--2. Varianten
       stod tidligere i filen end .c-related's tre-spalte-regel og tabte
       derfor paa raekkefoelge — fire kort blev til 3+1. Hoejere
       specificitet frem for flytning, saa den vinder uanset placering.
     - 4.4 .c-section-actions tilfoejet: luft over knappen under et
       gitter eller en liste. Stod foer klods op ad indholdet.

   v9.37 changelog:
     - 4.11/4.17/6. Animationerne er gjort langsommere. De var sat til
       0.8-1.1s, hvilket foeltes hastigt paa store flader, hvor
       bevaegelsen skal traekke oejet med. Reveal gaar fra 0.8 til 1.0s,
       diagramsoejlerne fra 0.95 til 1.25s og tidslinjen fra 1.1 til
       1.5s. Procesforloebets forsinkelser er skaleret tilsvarende, saa
       raekkefoelgen streg-perle-tekst holder sin rytme.

   v9.36 changelog:
     - 4.12c .c-item-list--2 og --divided tilfoejet. Seks ens kort i et
       2x3-gitter giver alt samme vaegt og laeses som genereret frem for
       redigeret. Varianterne her goer listen redaktionel i stedet:
       to spalter, haarfine skillelinjer, emnet som lille versal-etiket
       og en pil der glider frem ved hover. Ingen kasser.
       Reglerne bygger paa den eksisterende .c-item-list frem for en ny
       komponent, saa der ikke kommer endnu et kortsystem i systemet.

   v9.35 changelog:
     - 4.12 .c-related--2 tilfoejet. .c-related gaar til tre spalter paa
       desktop, hvilket er rigtigt for relaterede sider men for smalt
       til viden-kort med baade emne, titel og resume.
     - 4.11 Procesforloebet animeres i raekkefoelge: stregen tegnes fra
       venstre, derefter dukker perlerne op én ad gangen, og til sidst
       teksten. Foer kom alt paa samme tid, og laeseren fik ingen
       fornemmelse af et forloeb. Forsinkelserne ligger paa nth-child,
       saa der ikke skal maerkes noget i markup.
       Alt ligger bag .is-anim: uden JavaScript ses hele forloebet
       med det samme, og prefers-reduced-motion slaar det fra.

   v9.34 changelog:
     - 4.16 .c-backdrop toner ud i bunden. Nettet og skjoldet blev foer
       skaaret brat af heroens overflow: hidden, saa der stod en synlig
       vandret kant mod naeste sektion. Nu smelter de sammen, og
       skjoldet fader ud dér hvor det gaar ned i sektionen under.
       Masken ligger paa .c-backdrop og gaelder alt indeni, saa den
       virker uanset hvad der tilfoejes senere.

   v9.33 changelog:
     - 2.  body er flad igen. --bg-page lagde to radiale gradienter paa
       body oven paa heroens egne .c-backdrop__glow, og de to systemer
       gav ujaevne felter. Mockuppen har flad --bg og lader al farve
       komme fra backdrop'en. Gradienterne findes stadig som token, hvis
       de skal bruges bevidst et sted.
     - 4.16 .c-shield placeres ikke laengere med CSS. Skjoldet er flyttet
       ind i backdrop-SVG'ens koordinatsystem, saa det beskaeres praecis
       som nettet, og de indgaaende pakker kan foelge nettets faktiske
       linjer. De udstraalende .c-shield__feed-linjer er fjernet: de
       pegede ud fra skjoldet og signalerede afsendelse, hvor et SIEM
       indsamler. Placering justeres nu i SVG'ens transform.
     - 3.  --fade-edge strammet fra 170px til 120px. Paa sektioner under
       800px aad den gamle vaerdi hele baggrunden fra begge ender, saa
       overgangen aldrig blev synlig.
     - 4.17 .c-live__dot laast med flex: 0 0 8px, saa den ikke kan
       straekkes af en flexboks.

   v9.32 changelog:
     - 4.17/4.18 Animationerne er vendt om. Diagramsoejler og
       tidslinjestreg stod foer i scaleY(0) og scaleX(0) og ventede paa,
       at JavaScript satte .is-inview. Skete det ikke — i Bricks'
       builder, ved en JS-fejl, eller hos en bruger med blokerede
       scripts — var de usynlige for altid.
       Nu viser CSS sluttilstanden, og JavaScript tilfoejer .is-anim
       for at bede om lov til at animere. Uden JavaScript ses alt.
     - 4.17 .c-chart__value flyttet under soejlen som i mockuppen. Den
       laa over, saa tallene stod i luften naar soejlen ikke blev tegnet.
     - 6.  .u-count sat op til optaelling. Tallet staar faerdigt i
       markup; scriptet taeller kun op, hvis det kan.

   v9.31 changelog:
     - 3.  .l-section--elevated manglede position: relative. Dens
       ::before havde inset: 0 uden en positioneret forfader, saa
       baggrunden lagde sig mod viewporten i stedet for mod sektionen,
       og den glidende overgang blev aldrig synlig. --sunken havde det
       i forvejen; nu har begge.
     - 4.11 .c-process-step__number bragt paa mockuppens udtryk:
       uigennemsigtig baggrund, saa tidslinjen skjules bag perlen,
       accent-kant, mono-tal i teal og z-index over stregen. Den
       tidligere gradient lod stregen skinne igennem, saa numrene ikke
       lignede perler paa en snor.
     - 4.4 Mere luft. .c-section-head gik fra --s7 til 72px som i
       mockuppen, og heroens gitter fra 48px til 74px.

   v9.30 changelog:
     - 4.18 NY SEKTION: Forside. Fire komponenter fandtes som tomme
       Bricks-klasseobjekter uden en eneste CSS-regel:
       .c-services-grid, .c-services-card, .c-services-card__title og
       .c-process-grid. Mockuppen styler dem som .svc, .card og .tl i
       auroa-v3.css, men reglerne blev aldrig porteret. Resultatet var
       ydelseskort uden flade og et procesforloeb, der stablede sig
       lodret i stedet for at ligge paa en vandret tidslinje.
       Reglerne herunder er mockuppens, oversat til design systemets
       tokens. Ingen nye farver: --hair bliver --border, --muted bliver
       --text-muted, --r-l bliver --r-xl og saa videre.
     - 4.18 .c-panel--overlap tilfoejet. Mockuppens .overlap traekker
       panelet 120px op over sektionsgraensen, saa det bryder heroens
       nederste kant. Uden den staar panelet som en almindelig sektion.

   v9.29 changelog:
     - 4.17 Diagramfarver flyttet fra markup til CSS. Soejlerne fik
       tidligere deres gradient som inline style fra en shortcode, saa
       paletten laa i en PHP-fil frem for i design systemet. Nu saetter
       markup kun klasse og hoejde; farven staar her under
       .c-chart__fill--<niveau> og .c-chart__swatch--<niveau>.
       Gradienterne er mockuppens egne vaerdier.

   v9.28 changelog:
     - 4.5 Heroen fik sin luft tilbage. Desktop-reglen satte
       padding-block: 0 sammen med min-height og lodret centrering, saa
       indholdet kunne staa helt op ad headeren paa lave viewports.
       Mockuppen har 72px foroven og 88px forneden oven paa min-height,
       og det er den adfaerd, der gaelder. Vaerdierne er lagt paa
       spacing-skalaen: --s7 (48px) til --s8 (64px) med clamp op til
       mockuppens tal, saa de skalerer med resten.

   v9.27 changelog:
     - 4.3  RETTELSE af v9.26. Reglen white-space: nowrap var sat på
       .c-header__nav :is(a, button), altså ETHVERT link i headeren —
       også megamenuens links og case-kortenes ankre. Resultatet var, at
       case-resuméet ikke kunne ombryde og skød ud af kortet, og at lange
       Viden-titler løb ud af deres kolonne. Reglen er nu bundet til
       menuens topniveau via barn-selektorer, så den ikke kan sive ned i
       panelernes indhold.
     - 4.3c .c-megamenu--1col tilføjet. Cases-panelet har én gruppe, og i
       basisgitterets tre kolonner stod to tredjedele tomme mens kortene
       stablede sig i den første. Varianten gør panelet enkolonnet, så
       .c-megamenu__cases får hele bredden og kortene står side om side.

   v9.26 changelog:
     - 4.3  Nav-links brækker ikke længere midt i en etiket. Med fem
       punkter plus en CTA i en 1180px-container var der ikke plads nok,
       og "Om Auroa" delte sig over to linjer i stedet for at lade
       flexboksen skrumpe mellemrummene. white-space: nowrap tvinger
       hvert punkt til at forblive ét stykke; gap og padding giver efter
       først. Sker det alligevel, er der reelt for mange punkter, og så
       skal indholdet skæres — ikke typografien.

   v9.25 changelog:
     - 0.   RTF-rester ryddet. 120 sekvenser som \\'e5 og \\'f8 stod i
       kommentarerne efter en tur gennem RTF; nu igen å, æ, ø og –.
       Kun kommentarer var ramt, ingen regler.
     - 4.3b .c-megamenu__footer tilføjet — fuldbredde-række nederst i et
       panel til "Se alle …"-links. Et all-link i et grid-panel landede
       ellers vilkårligt i næste rækkes første kolonne.
     - 4.3b Højdeloft på .c-megamenu-panel fra 768px. Viden-panelet var
       tre grid-rækker og omkring 900px højt og kunne klippe på en
       bærbar uden nogen vej til at rulle.
     - 4.3b .c-megamenu--4col tilføjet. BEMÆRK: v9.9 rullede netop 4 →
       3 kolonner tilbage. Den beslutning gjaldt et panel med SEKS
       grupper, hvor 4 kolonner gav et skævt 4+2. Varianten her bruges
       kun på et panel med FIRE grupper, hvor de fylder én ren række,
       og feed-kolonnen bliver en fuldbredde-rail nedenunder i stedet
       for en vilkårligt placeret sidekolonne. Prisen er smallere
       spalter, ca. 230px mod v9.9's ca. 360px. Basisgitteret er
       uændret 1 → 2 → 3.

   v9.24 changelog:
     - 1.   Nye tokens: --hero-h (ens herohøjde på tværs af sider) og
       --fade-edge (hvor blødt sektionsflader toner ind og ud).
     - 1.   prefers-reduced-motion udvidet med de nye animerede lag —
       pakker og pulserende knuder SKJULES frem for at fryse, da et
       frosset element ligner en fejl frem for et bevidst fravalg.
     - 4.1  .c-eyebrow har fået en indledende streg. BEMÆRK: det er en
       global ændring, der rammer alle eksisterende sider. Ønskes den
       kun på nye sider, flyt ::before-reglen til .c-eyebrow--rule.
     - 4.1  .c-bignum tilføjet — stort tal med gradient, brugt til
       CVE-tælleren og nøgletal.
     - 4.2  .c-portrait tilføjet.
     - 4.5  .c-hero har fået fast højde fra lg og op, samt lodret
       centrering. Uden det flyttede backdrop og skjold sig ved
       navigation mellem sider med forskelligt indhold.
     - 4.8  .c-steps tilføjet — nummererede punkter i én samlet blok.
     - 4.9  .c-featured, .c-vlist/.c-vrow og .c-quote tilføjet.
     - 4.10 .c-cve-row tilføjet — kompakt række som alternativ til
       .c-cve-list__item's kortform. Bruges hvor listen skal scannes.
     - 4.11 .c-chip tilføjet — filterknap, beslægtet med .c-tag men
       med aktiv-tilstand.
     - 4.12 .c-team og .c-faq tilføjet. .c-faq er den generiske
       accordion; .c-service-faq bevares uændret.
     - 4.16 NY SEKTION: Backdrop — .c-backdrop (gitter, konstellation)
       og .c-shield (Auroa-skjold med indgående pakker).
     - 4.17 NY SEKTION: Data — .c-live (alarmpanel), .c-chart
       (søjlediagram), .c-kpi og .c-group.
     - 6.   .u-depth og .u-reveal tilføjet.
     - 8.   Alle nye responsive regler ligger i de eksisterende
       breakpoints. Ingen nye media queries uden for sektion 8, bortset
       fra dem der allerede er selvstændige by design (4.3b, 4.13, 5).

   v9.22 changelog:
     - 4.12 Booking-panel bragt på samme indre rytme som hero-glass-
       panelet: head og embed kørte to forskellige vandrette indryk
       (s5-s7 vs s4-s6), så titel og Amelia-widget ikke flugtede og
       udtrykket virkede uharmonisk. Begge bruger nu glass-panelets
       padding-token (clamp s5, 4vw, s7) på alle sider — én konsekvent
       indre margin, alt indhold på samme venstrekant, kontrolleret
       s5-mellemrum mellem lead og widget.

   v9.21 changelog:
     - 4.12 Booking-panel luft strammet — tre padding-lag stod oven i
       hinanden (head + embed + #amelia-container fra v9.7) og gav for
       meget white space. Embed'et mister top-padding (widget hugger
       hovedet), container-padding nulstillet (embed bærer nu side/
       bund), og Amelias egen margin + min-height nulstillet på
       wrapperen. Hvis der stadig er et stort hul: tjek i DevTools om
       Amelia sætter min-height på .am-fs__main, eller om der ligger
       en spacer/min-height på Bricks-div'en.

   v9.20 changelog:
     - 4.12 .c-booking__head tilføjet — booking-panelet kører
       c-glass-panel--flush (med vilje, v9.7: Amelia-embed styrer sin
       egen indre padding), men eyebrow/titel/lead stod derfor helt
       ude i panelkanten. __head giver teksthovedet panelets normale
       padding, uden bund-padding så det flyder pænt ned i embed'et.
       Bricks: fjern .c-card fra panelet (redundant oven på
       .c-glass-panel — dobbelt border/skygge) og wrap eyebrow+titel+
       lead i en div med klassen c-booking__head.

   v9.19 changelog:
     - 7.   Custom-field dropdown items — de faktiske vars fundet i
       DevTools: Amelia styrer item-udseendet via --am-c-option-bgr
       (baggrund) og --am-c-option-text (tekst), ikke Element Plus'
       generiske properties. v9.19 overstyrer dem på popper- og
       item-niveau: transparent base, blå (--accent) hover og valgt.
       v9.16-18's direkte background/color-regler beholdes som bælte-
       og-seler oven på var-overriderne.

   v9.18 changelog:
     - 7.   Custom-field select TRIGGERS (step 2: antal medarbejdere +
       interesse) — Amelia sætter LYSE inline --am-c-select-* vars
       (hvid bgr, mørk tekst) direkte på .el-select.am-select i
       info-formularen. v9's eksisterende var-override var scoped til
       .am-advsc__header (step 1 måned/år) og ramte dem ikke. Ny regel
       overstyrer alle vars på .am-select-wrapper/.am-fs__info-selects
       (samme mønster som v9.7) + felt-surface, placeholder og caret.

   v9.17 changelog:
     - 7.   Custom-field select-dropdowns (v9.16) omstylet fra flad grå
       til sidens blå glass-udtryk: blåtonet gradient-surface (samme
       radial-mønster som --bg-glass), blå kant + glow, r-lg hjørner,
       og hover/valgt i --accent (#2F6BFF) i stedet for Amelias 2f53d3.
       Overstyrer nu også --am-c-drop-* inline vars direkte på popperen,
       som vandt over v9.16's surface og gav den grå fallback.

   v9.16 changelog:
     - 7.   Amelia custom-field selects (step 2: virksomhedsstørrelse +
       interesse) styled — items har .am-select-option og popperen bruger
       .el-select__popper, som ikke blev ramt af de eksisterende
       body-scopede dropdown-regler (v9.7-æraen). Dækker popper-klassen
       direkte, gør indre scrollbar-wrappers transparente, og overstyrer
       Amelias egne vars på item-niveau. Popper-pil medtaget (renderede
       ellers lys). Verificér i DevTools om popperen bærer en
       Amelia-specifik klasse (fx am-select-popper) og/eller inline
       --am-c-drop-* vars — tilføj i så fald jf. kommentar i blokken.

   v9.15 changelog:
     - 4.3b Cases column: cards now sit side by side instead of a tall
       narrow stack. The Cases mega menu is its own panel (full width),
       so 2 cases as a single vertical column left too much dead space.
       .c-megamenu__cases is now a responsive grid (1 col mobile, 2+ from
       tablet, auto-fit) and each card gets a card surface (border + bg)
       so it reads as a proper case card.

   v9.14 changelog:
     - 4.3b Cases column gains a branch badge (.c-megamenu__case-badge)
       above the title, mirroring the Indsigter feed's badge treatment so
       both "special" columns read consistently. Quiet teal pill using
       case_branche.

   v9.13 changelog:
     - 4.3b Cases megamenu column — .c-megamenu__case* card-style items
       (title + one-line resume) for the Cases mega menu. Cases are social
       proof, so a short outcome line under the title earns the click more
       than a bare link. Includes a hidden-ready "Se alle cases" link
       (.c-megamenu__link--all reused) for when there are enough cases to
       warrant an archive link.

   v9.12 changelog:
     - 4.3b Feed-item badge no longer stretches full column width. The
       column-flex .c-megamenu__feed-item defaulted to align-items:
       stretch, so the severity badge filled the whole row. Set
       align-items: flex-start so each badge is only as wide as its text.

   v9.11 changelog:
     - 7.   Amelia cascader header confirmed: the class is
       .am-adv-select__popper-heading (it sets its own dark-on-light
       inline custom props). v9.11 targets it exactly + overrides those
       inline vars, and tightens v9.10's broad guess-list down to this
       one real selector.

   v9.10 changelog:
     - 7.   Amelia cascader header row ("Kategori"/"Service") styled — the
       light grey header stripe at the top of the service dropdown still
       rendered with Element Plus' default light surface. Covers the
       plausible Amelia/EP header selectors (am-adv-select header/title,
       el-cascader-menu title) on the dark panel. Broad by design; tighten
       once the exact class is confirmed in DevTools.

   v9.9 changelog:
     - 4.3b Mega menu desktop grid reverted 4 → 3 columns. With 6 groups
       (5 evergreen topics + Indsigter feed) 3 cols give a clean 3+3 two-
       row layout; 4 cols left an uneven 4+2. Tablet stays at 2 columns.
       Wider columns (~360px) keep long Danish titles + the CVE feed
       readable. Feed column styling (v9.8) unchanged — the severity
       badges + divider still read as "news" within the 3-grid.

   v9.8 changelog:
     - 4.3b Mega menu feed column added — .c-megamenu__group--feed and
       .c-megamenu__feed* for the "Indsigter" column (4+1 layout): an
       archive link + a live loop of the 5 newest CVE indsigter, each
       with a small severity badge + Danish title. Pairs with the
       Bricks import "megamenu-indsigter-kolonne.json".
     - 4.10 .c-severity--sm size modifier (compact badge for the menu
       feed; smaller than --lg hero variant).
     - 6.   u-clamp-2 utility (2-line clip) for CVE titles in the feed.

   v9.7 changelog:
     - 4.7  Form submit button now inherits .c-btn--primary visuals
       (gradient, border, glow). Bricks renders submit as
       <button class="bricks-button"> with no .c-btn, so it fell back
       to unstyled. Scoped to .c-form to avoid touching Amelia buttons.
     - 4.12 Booking panel padding — .c-booking__embed / #amelia-container
       got inner padding so content doesn't touch the panel edge.
     - 7.   Amelia service cascader (el-cascader) styled — kategori/
       service picker rendered with raw Element Plus light theme on the
       dark panel. Body-scoped (Vue mounts the popper in <body>, same as
       the el-select dropdown precedent).

   v9.6 changelog:
     - 4.3b Mega menu grid widened 3 → 4 columns at desktop, with a
       2-column tablet step (768–1023px) so spalter ikke bliver for
       smalle ved spring fra 1 → 4. Affects both Ydelser and Viden
       megamenus (shared .c-megamenu). Self-contained media queries.

   v9.5 changelog:
     - 4.14 Pagination added — archive/search pages (Bricks
       pagination element rendered with raw browser defaults
       on dark bg, same failure mode as prose tables pre-v9.4).
       Used by Archive – Viden, Archive – Indsigter, Search.
     - 4.15 Breadcrumb added — Rank Math breadcrumb markup via
       [auroa_breadcrumb] shortcode. Quiet, fs-xs, above H1.
     - 6.   u-clamp-3 utility — 3-line text clip on card
       excerpts (TL;DR in c-related__card) so grid rows stay
       even.

   v9.4 changelog:
     - 5. PROSE: table styling added (.c-prose table/th/td) — left-
       aligned headers, row dividers, zebra striping, top-aligned
       cells, horizontal scroll on narrow viewports. Prose tables
       previously rendered with raw browser defaults (unreadable
       on dark bg). Used by /viden/ articles.

   v9.3 changelog:
     - 4.1  Badge-as-eyebrow spacing: headings directly following
       a .c-badge get margin-top (cards had badge glued to title).
     - 4.3  Removed dead WP nav-menu rules (.bricks-nav-menu,
       .sub-menu) — header now runs on Bricks Menu Builder (4.3b).
       Matching responsive rules removed from section 8.
     - 4.3b Added [aria-current="page"] active-state styling.
     - 4.13 Indsigter renumbered from duplicate "4.11" and added
       to the section index.

   v9.2 changelog:
     - 4.3b Mega menu (Bricks Menu Builder) added — panel frame,
       3-column content grid, nav-link styling for Menu Builder
       markup, mobile inline collapse. Self-contained media queries
       (precedent: 4.11 Indsigter).

   v9.1 changelog:
     - 4.11 Indsigter (single CVE post) added — Danish-label severity,
       callout, stat-grid, cvss vector, cwe tags, timeline, product
       scroll, indsigt sidebar. Used by auroa-indsigter plugin.

   Audience: Auroa ApS — Danish B2B cybersecurity consultancy
   serving SMEs and municipalities. Trust > flash, readability
   > aesthetics, performance is a feature.
========================================================= */


/* =========================================================
   1. TOKENS
   Single source of truth for colors, typography, spacing,
   radii, shadows, and motion. Override these to re-skin.
========================================================= */

:root {
  /* ---------- Page & surfaces ---------- */
  --bg:               #0B1220;            /* Page base */
  --bg-elevated:      #0F172A;            /* Cards, sidebars */
  --bg-sunken:        #070D18;            /* Footer, code blocks */
  --surface:          #0F172A;            /* Default panel */
  --surface-strong:   #131D33;            /* Hover/active panel */

  /* ---------- Page background gradient ---------- */
  --bg-page:
    radial-gradient(900px 500px at 20% 10%, rgba(47 107 255 / .18), transparent 60%),
    radial-gradient(700px 500px at 90% 30%, rgba(0 211 167 / .10), transparent 55%),
    linear-gradient(180deg, #0B1220 0%, #0A1324 100%);

  /* ---------- Glass surface gradient (cards, panels) ---------- */
  --bg-glass:
    radial-gradient(500px 220px at 12% 0%, rgba(47 107 255 / .14), transparent 58%),
    radial-gradient(420px 220px at 100% 0%, rgba(0 211 167 / .10), transparent 55%),
    linear-gradient(180deg, rgba(255 255 255 / .06), rgba(255 255 255 / .03));

  /* ---------- Glow accent (used in ::after layers) ---------- */
  --bg-glow:
    radial-gradient(420px 220px at 0% 0%, rgba(47 107 255 / .14), transparent 60%),
    radial-gradient(360px 220px at 100% 0%, rgba(0 211 167 / .10), transparent 60%);

  /* ---------- Text colors ---------- */
  --text:             #EAF0FF;            /* Primary body text */
  --text-muted:       rgba(234 240 255 / .72);
  --text-subtle:      rgba(234 240 255 / .56);
  --text-faint:       rgba(234 240 255 / .42);
  --text-on-accent:   #FFFFFF;

  /* ---------- Borders ---------- */
  --border:           rgba(234 240 255 / .12);
  --border-strong:    rgba(234 240 255 / .20);
  --border-faint:     rgba(234 240 255 / .06);

  /* ---------- Brand accents ---------- */
  --accent:           #2F6BFF;            /* Auroa primary blue */
  --accent-hover:     #4A82FF;
  --accent-2:         #00D3A7;            /* Auroa teal */
  --accent-2-hover:   #7BE7D7;
  --glow:             rgba(47 107 255 / .18);
  --glow-2:           rgba(0 211 167 / .14);

  /* ---------- Semantic / severity colors ---------- */
  /* Used for CVE database, alerts, NIS2 status indicators */
  --sev-critical:     #DC2626;            /* CVSS 9.0–10.0 */
  --sev-critical-bg:  rgba(220 38 38 / .14);
  --sev-high:         #EA580C;            /* CVSS 7.0–8.9 */
  --sev-high-bg:      rgba(234 88 12 / .14);
  --sev-medium:       #F59E0B;            /* CVSS 4.0–6.9 */
  --sev-medium-bg:    rgba(245 158 11 / .14);
  --sev-low:          #3B82F6;            /* CVSS 0.1–3.9 */
  --sev-low-bg:       rgba(59 130 246 / .14);
  --sev-info:         #6B7280;            /* No score / informational */
  --sev-info-bg:      rgba(107 114 128 / .14);

  /* ---------- Typography ---------- */
  --font-sans:        Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --lh-tight:         1.15;               /* Headings */
  --lh-snug:          1.4;                /* UI text */
  --lh-normal:        1.65;               /* Body */
  --lh-loose:         1.8;                /* Long-form prose */

  /* Fluid font sizes (320px → 1280px) */
  --fs-xs:            0.78rem;            /* 12.5px */
  --fs-sm:            0.875rem;           /* 14px */
  --fs-base:          1rem;                /* 16px */
  --fs-md:            1.125rem;           /* 18px */
  --fs-lg:            clamp(1.2rem, 0.6vw + 1.05rem, 1.35rem);
  --fs-xl:            clamp(1.4rem, 1vw + 1.2rem, 1.65rem);
  --fs-2xl:           clamp(1.7rem, 1.5vw + 1.4rem, 2.1rem);
  --fs-3xl:           clamp(2rem, 2.2vw + 1.6rem, 2.8rem);
  --fs-4xl:           clamp(2.4rem, 3vw + 1.8rem, 3.6rem);

  /* ---------- Spacing scale (4px base) ---------- */
  --s1:  4px;   --s2:  8px;   --s3:  12px;  --s4:  16px;
  --s5:  24px;  --s6:  32px;  --s7:  48px;  --s8:  64px;  --s9:  96px;
  --s10: 128px;

  /* ---------- Layout ---------- */
  --container:        1180px;
  --container-narrow: 880px;
  --container-prose:  72ch;
  --container-wide:   1320px;
  --gutter:           clamp(16px, 4vw, 32px);
  --header-h:         clamp(64px, 8vw, 76px);

  /* ---------- Radius ---------- */
  --r-sm:             4px;
  --r-md:             8px;
  --r-lg:             14px;
  --r-xl:             20px;
  --r-2xl:            28px;
  --r-pill:           999px;

  /* ---------- Effects ---------- */
  --blur-sm:          blur(6px);
  --blur:             blur(10px);
  --blur-lg:          blur(16px);

  --shadow-sm:        0 4px 12px rgba(0 0 0 / .25);
  --shadow:           0 14px 40px rgba(0 0 0 / .35);
  --shadow-lg:        0 24px 60px rgba(0 0 0 / .50);
  --shadow-glow:      0 10px 24px rgba(47 107 255 / .18);

  /* ---------- Motion ---------- */
  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:           0.15s var(--ease);
  --t:                0.25s var(--ease);
  --t-slow:           0.4s var(--ease);

  /* ---------- Z-index scale ---------- */
  --z-base:           1;
  --z-raised:         10;
  --z-dropdown:       100;
  --z-sticky:         500;
  --z-header:         900;
  --z-overlay:        1000;
  --z-modal:          1100;

  /* ---------- Hero & flader (v9.24) ---------- */
  /* Ens herohøjde. Uden den skifter backdrop og skjold plads, når man
     navigerer mellem sider med forskelligt indhold. Anvendes først fra
     lg — på mobil bestemmer indholdet højden. */
  --hero-h:           748px;

  /* Hvor blødt .l-section--elevated / --sunken toner ind og ud.
     Clamp frem for media query, så der ikke skal vedligeholdes
     et breakpoint for det. */
  --fade-edge:        clamp(80px, 8vw, 120px);
}



/* =========================================================
   2. BASE / RESET
   Element-level defaults. No classes here — these set the
   tone for unstyled HTML coming from the CMS or markdown.
========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;

  /* Sikkerhedsnettet skal staa begge steder. Med clip kun paa body
     kan <html> stadig scrolle, og de sidste pixels slipper igennem:
     forsiden havde 17 px tilbage ved 768. Se noten paa body. */
  overflow-x: clip;
}

body {
  margin: 0;
  /* Flad baggrund. Farven kommer fra .c-backdrop, ikke herfra. v9.33 */
  background-color: var(--bg);  /* Fallback if gradient fails */
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /**
   * Sikkerhedsnet mod vandret overloeb. Var hidden indtil v9.67.
   *
   * clip og ikke hidden: hidden laver en scroll-container, og saa
   * holder position: sticky op med at virke i nogle browsere. Med
   * hidden fangede den heller ikke de sidste rester, fordi <html>
   * stadig kunne scrolle.
   *
   * Dette skjuler symptomet, ikke aarsagen. Maalte rester da den blev
   * sat: 17 px paa forsiden ved 768 og 24 px paa /ydelser/ ved 1024,
   * begge fra dekoration der stikker uden for sin sektion. Naar de
   * sektioner alligevel skal efterses, hoerer rettelsen hjemme dér.
   * Netter er der, saa en ny fejl ikke giver sidelaens scroll paa
   * telefon, foer nogen opdager den.
   */
  overflow-x: clip;
}

img, svg, video, canvas, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-2);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--t);
}
a:hover {
  color: var(--accent-2-hover);
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

:is(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

p {
  margin: 0 0 var(--s4);
  line-height: var(--lh-normal);
  color: var(--text);
}

:is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--s4);
  color: var(--text);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  text-wrap: balance;

  /* Danske sammensatte ord er laengere end en telefonlinje ved stor
   * skrift: "leveringsbetingelser" i 39,6 px er 355 px bred, og ved
   * 360 er der 328. Uden brud goer ordet hele sektionshovedet bredere
   * end skaermen, og clip paa html skaerer det sidste bogstav af.
   * hyphens deler korrekt efter lang="da-DK". anywhere er nettet, hvis
   * browseren mangler ordbogen, og bryder kun ord, der ikke kan vaere
   * der. break-word er ikke nok: det aendrer ikke elementets
   * mindstebredde i flex og grid.
   *
   * hyphenate-limit-chars 14 6 6: kun ord paa mindst 14 tegn deles, med
   * mindst 6 tegn paa hver side. Uden graensen deler Chrome ogsaa
   * almindelige ord ved linjeskift. Fra md slaas deling fra igen, se
   * afsnit 8; der er linjerne lange nok. */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 14 6 6;
  overflow-wrap: anywhere;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s6) 0;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.15em 0.4em;
  background: rgba(255 255 255 / .07);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-faint);
}

pre {
  margin: 0 0 var(--s5);
  padding: var(--s5);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  line-height: var(--lh-snug);
}
pre code {
  padding: 0;
  background: transparent;
  border: 0;
}

/* Form base */
:is(input, textarea, select) {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.8rem 1rem;
}
:is(input, textarea, select):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47 107 255 / .22);
}

::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}


/* =========================================================
   3. LAYOUT
   .l-* classes = structural primitives. Page-level scaffolding,
   no visual styling beyond what's needed for layout.
========================================================= */

/* ---------- Containers ---------- */

.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-container--narrow { max-width: var(--container-narrow); }
.l-container--prose  { max-width: var(--container-prose); }
.l-container--wide   { max-width: var(--container-wide); }

/* ---------- Sections ---------- */

.l-section {
  padding-block: clamp(var(--s7), 8vw, var(--s9));
}
.l-section--tight { padding-block: clamp(var(--s6), 6vw, var(--s8)); }
.l-section--loose { padding-block: clamp(var(--s8), 10vw, var(--s10)); }
.l-section--flush-top    { padding-top: 0; }
.l-section--flush-bottom { padding-bottom: 0; }

/**
 * Surface variants — the section's background sits in a masked
 * pseudo-element so it fades in and out over --fade-edge instead of
 * meeting the page with a hard line. Hairline borders between sections
 * are the single clearest sign of a template; a gradient is not.
 */
.l-section--elevated,
.l-section--elevated,
.l-section--sunken { position: relative; isolation: isolate; }

.l-section--elevated::before,
.l-section--sunken::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--fade-edge),
    #000 calc(100% - var(--fade-edge)), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--fade-edge),
    #000 calc(100% - var(--fade-edge)), transparent 100%);
}
.l-section--elevated::before { background: var(--bg-elevated); }
.l-section--sunken::before   { background: var(--bg-sunken); }

/**
 * Overlap — pulls a panel up across the section boundary so one
 * element breaks the plane. Without it every panel sits at the same
 * depth and the page reads flat. Disabled below lg (section 8).
 */
.l-overlap { position: relative; z-index: var(--z-raised); }

/* ---------- Grid (responsive auto-fit by default) ---------- */

.l-grid {
  display: grid;
  gap: var(--s5);
}
.l-grid > * { min-width: 0; }

/* Mobile-first: all single column. Breakpoints upgrade. */
.l-grid--2,
.l-grid--3,
.l-grid--4 {
  grid-template-columns: 1fr;
}

/* Auto-fit grid: cards flow naturally without explicit count */
.l-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/**
 * Service grid — deliberately uneven: one tall card plus smaller ones.
 * An even three-column row repeated down the page is the strongest
 * signal that a layout was generated rather than composed.
 * Columns are set at lg (section 8).
 */
.l-grid--svc { grid-template-columns: 1fr; }
.l-grid--svc > .is-tall { justify-content: space-between; }

/* ---------- Split layouts (asymmetric two-column) ---------- */

.l-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}
.l-split--center { align-items: center; }

/* ---------- Stack (vertical flow with consistent rhythm) ---------- */

.l-stack > * + * { margin-top: var(--s4); }
.l-stack--tight > * + * { margin-top: var(--s2); }
.l-stack--loose > * + * { margin-top: var(--s6); }

/* ---------- Cluster (horizontal wrap-flex group) ---------- */

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}
.l-cluster--center { justify-content: center; }
.l-cluster--end    { justify-content: flex-end; }


/* =========================================================
   4. COMPONENTS
   .c-* classes = reusable UI building blocks. Self-contained,
   composable, named for what they ARE not what they LOOK LIKE.

   Order of subsections:
     4.1  Foundations    — eyebrow, badge, button, link
     4.2  Surfaces       — card, panel, glass-panel
     4.3  Header & nav
     4.3b Mega menu      — Bricks Menu Builder panel + grid
     4.3c Mega menu      — panel-footer, højdeloft, 4-kolonne
     4.4  Footer
     4.5  Hero & section heads
     4.6  CTA blocks
     4.7  Forms
     4.8  Lists           — bullet, item, process steps
     4.9  Article          — meta, body, related
     4.10 Severity         — CVE/security indicators
     4.11 Tag pills
     4.12 Page-specific    — about, contact, 404, maintenance, booking
     4.13 Indsigter        — single CVE post (auroa-indsigter plugin)
     4.14 Pagination       — archive/search page-numbers
     4.15 Breadcrumb       — Rank Math markup via [auroa_breadcrumb]
========================================================= */


/* ---------- 4.1 Foundations ---------- */

/**
 * Eyebrow label — small uppercase text above headings.
 * Use as: <span class="c-eyebrow">Cybersecurity</span>
 */
.c-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* v9.24: indledende streg. Global ændring — rammer alle eksisterende
   sider. Skal den kun gælde nye sider, flyt reglen til .c-eyebrow--rule
   og tilføj klassen manuelt i Bricks. */
.c-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  flex: 0 0 auto;
}
.c-eyebrow--accent { color: var(--accent-2); }
.c-eyebrow--warn   { color: var(--sev-medium); }

/**
 * Big number — oversized figure with brand gradient. Used for the CVE
 * counter, case KPIs and stat blocks. tabular-nums so a count-up
 * animation doesn't shift the layout on every frame.
 */
.c-bignum {
  font-size: clamp(3.6rem, 7vw, 6.2rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--accent-2-hover), var(--accent-2) 55%, #00A98A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-bignum--sm { font-size: clamp(2.2rem, 3.4vw, 3rem); }

/**
 * Badge — small status/category indicator. Pill-shaped.
 * Modifiers control color: --accent, --severity-{level}.
 */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(255 255 255 / .04);
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  width: fit-content;
}
.c-badge--accent {
  border-color: rgba(47 107 255 / .35);
  background: rgba(47 107 255 / .12);
  color: var(--text);
}
.c-badge--solid {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
}

/* Badge used as eyebrow: a heading directly after a badge needs
   breathing room (badges have no bottom margin, headings no top). */
.c-badge + :is(h1, h2, h3, h4, h5, h6),
.c-badge + .c-card__title {
  margin-top: var(--s3);
}

/**
 * Button — primary action element.
 * Variants: --primary (filled blue), --outline (subtle), --ghost (text-only).
 * Sizes: default 48px, --sm 40px, --lg 56px.
 */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background var(--t), border-color var(--t), transform var(--t-fast), box-shadow var(--t);
}
.c-btn:hover { text-decoration: none; transform: translateY(-1px); }
.c-btn:active { transform: translateY(0); }

.c-btn--primary {
  background: linear-gradient(180deg, rgba(47 107 255 / .42), rgba(47 107 255 / .24));
  border-color: rgba(47 107 255 / .58);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-glow), inset 0 0 0 1px rgba(255 255 255 / .03);
}
.c-btn--primary:hover {
  background: linear-gradient(180deg, rgba(47 107 255 / .50), rgba(47 107 255 / .30));
  border-color: rgba(47 107 255 / .72);
}

.c-btn--outline {
  background: rgba(255 255 255 / .04);
  color: var(--text);
  border-color: rgba(255 255 255 / .14);
}
.c-btn--outline:hover {
  background: rgba(255 255 255 / .08);
  border-color: rgba(255 255 255 / .22);
  color: var(--text-on-accent);
}

.c-btn--ghost {
  background: transparent;
  color: var(--text);
}
.c-btn--ghost:hover {
  background: rgba(255 255 255 / .04);
}

.c-btn--sm { min-height: 40px; padding: 0.6rem 1.1rem; font-size: var(--fs-sm); }
.c-btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: var(--fs-md); }
.c-btn--block { width: 100%; }


/* ---------- 4.2 Surfaces ---------- */

/**
 * Card — generic content container with raised appearance.
 * Composable with --tight, --soft, --hover modifiers.
 */
.c-card {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  padding: clamp(var(--s5), 3vw, var(--s6));
  min-width: 0;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.c-card--tight  { padding: var(--s5); }
.c-card--flush  { padding: 0; }
.c-card--soft   { box-shadow: var(--shadow-sm); }
.c-card--hover:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.c-card__title { margin: 0 0 var(--s3); font-size: var(--fs-lg); }
.c-card__text  { margin: 0; color: var(--text-muted); }

/**
 * Glass panel — card variant with corner-glow effect.
 * Used for hero panels, CTAs, 404 hero, and accent surfaces.
 * The ::after layer creates the dual radial-gradient glow.
 */
.c-glass-panel {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--blur);
  padding: clamp(var(--s5), 4vw, var(--s7));
  min-width: 0;
  overflow: hidden;
}
.c-glass-panel > * { position: relative; z-index: 1; }
.c-glass-panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--bg-glow);
  opacity: 0.6;
}
.c-glass-panel--center { text-align: center; }
.c-glass-panel--flush  { padding: 0; }

/**
 * Portrait — photo with panel depth. Aspect-ratio modifiers keep the
 * crop consistent across templates so faces aren't cut differently
 * from page to page.
 */
.c-portrait {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.c-portrait--45     { aspect-ratio: 4 / 5; }
.c-portrait--square { aspect-ratio: 1; }


/* ---------- 4.3 Header & nav ---------- */

/**
 * Site header — sticky top navigation.
 * Inner uses .c-header__inner for height and flex alignment.
 * Mobile menu toggled by Bricks via .show-mobile-menu class.
 */
.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(10 19 36 / .82);
  backdrop-filter: var(--blur-lg);
  border-bottom: 1px solid var(--border-faint);
}
.c-header.is-scrolled { background: rgba(10 19 36 / .94); }

.c-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  /* Inner er et flex-barn af .l-container. Uden bredden krymper den til
   * indholdet, naar menuen er foldet sammen, og logo, knap og burger
   * pakkes til venstre i stedet for at fordele sig. Maalt ved 900 px:
   * 425 px bred i en container paa 836. */
  width: 100%;
}

.c-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.c-header__logo img { max-width: 160px; height: auto; }

.c-header__nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-width: 0;
}

.c-header__cta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
}

/* Nav-link styling lives in 4.3b (Bricks Menu Builder markup).
   Legacy WP nav-menu rules (.bricks-nav-menu, .sub-menu) removed
   in v9.3 — header no longer renders WP menu markup. */


/* ---------- 4.3b Mega menu (Bricks Menu Builder) ---------- */

/**
 * Mega menu — built with Bricks 2.0 Menu Builder (Bricks → Menus).
 * Menu Builder generates its own markup (not .bricks-nav-menu /
 * .sub-menu), hence dedicated selectors alongside 4.3.
 *
 * Structure:
 *   .c-megamenu-panel    Root div of the mega menu content (assign
 *                        manually on the panel's outer container)
 *   .c-megamenu          Content grid (from section template).
 *                        v9.6: 4-up at desktop, 2-up at tablet.
 *   .c-megamenu__group   One column: title + desc + links
 *   .c-megamenu--simple  Single-column dropdown variant (Viden)
 *
 * Self-contained media queries by design (precedent: 4.11 Indsigter)
 * — the feature can be maintained or removed as one block.
 *
 * ⚠ VERIFY in DevTools: nav-link selector below is intentionally
 * broad but header-scoped; tighten to the actual Menu Builder class
 * once confirmed in your Bricks version.
 */

/* Nav-links (Menu Builder markup) */
.c-header__nav :is(a, button.brx-dropdown-toggle) {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  transition: color var(--t), background var(--t);
}
/* Afstand mellem topniveauets punkter (v9.71). Bricks' standard er 30 px
 * margin foran hvert punkt via :where(), altsaa uden vaegt. Med seks
 * punkter var der ikke plads ved 1280: menuen stak 30 px ind under
 * knappen. 8 px margin plus linkets egen polstring paa 12 px giver 32 px
 * mellem teksterne, og 40 px luft til knappen. */
.c-header__nav .bricks-nav-menu > li { margin: 0 0 0 var(--s2); }
.c-header__nav .bricks-nav-menu > li > .brx-submenu-toggle > button { margin-left: var(--s1); }

/* Megamenuens links i mobilmenuen. Bricks giver alle links i mobilmenuen
 * line-height: 60px, ogsaa dem inde i megamenuen, saa et link over to
 * linjer blev 120 px hoejt. */
/* Mobilmenuens bredde og baggrund. Laa foer som elementindstillinger paa
   nav-menuen (mobileMenuWidth, mobileMenuBackground), som Bricks skrev til
   post-18.min.css. Nu her, som alt andet udseende. Breakpointet (mobileMenu:
   tablet_portrait) er funktion og bliver paa elementet. */
/* Mens mobilmenuen er aaben, maa headeren hverken have backdrop-filter eller
   transform: begge goer den til containing block for menuens position: fixed,
   saa menuen placeres i forhold til headeren i stedet for skaermen. Med Bricks'
   sticky "on-scroll" er headeren gledet op (translateY), og menuen aabnede
   derfor uden for skaermen; man skulle scrolle op for at se den. */
.c-header:has(.show-mobile-menu) { backdrop-filter: none; -webkit-backdrop-filter: none; }
#brx-header.brx-sticky:has(.show-mobile-menu) { transform: none; transition: none; }
/* Lukkeknappen er samme element som burgeren og bliver i headeren, naar
   menupanelet aabner viewport-fast (v9.91). Mens menuen er aaben, saettes
   den derfor selv viewport-fast i panelets oeverste hoejre hjoerne, over
   panelet (Bricks giver den z-index 1000; panelet har 999). */
.c-header__nav.show-mobile-menu .bricks-mobile-menu-toggle {
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--s4));
  right: var(--s4);
  z-index: 1001;
}
.c-header__nav .bricks-mobile-menu-wrapper { width: 90%; }
.c-header__nav .bricks-mobile-menu-wrapper::before { background-color: rgba(10 19 36 / .97); }

.c-header__nav .bricks-mobile-menu-wrapper .c-megamenu-panel a {
  line-height: var(--lh-normal);
  padding-block: var(--s2);
}

/* Kun menuens topniveau. Må ikke ramme megamenuens indhold — se v9.27. */
.c-header__nav .bricks-nav-menu > li > a,
.c-header__nav .bricks-nav-menu > li > .brx-submenu-toggle > :is(a, button) {
  white-space: nowrap;
}

.c-header__nav :is(a, button.brx-dropdown-toggle):hover {
  color: var(--text);
  background: rgba(255 255 255 / .05);
  text-decoration: none;
}
.c-header__nav [aria-expanded="true"] {
  color: var(--text-on-accent);
  background: rgba(255 255 255 / .06);
}
.c-header__nav [aria-current="page"] {
  color: var(--text-on-accent);
}

/* Mega panel frame — centered, aligned with .l-container content edges.
   Bricks renders mega content full-viewport-width; this constrains and
   centers the panel so it aligns with the logo's left edge at any size. */
.c-megamenu-panel {
  width: min(calc(var(--container) - 2 * var(--gutter)),
             calc(100vw - 2 * var(--gutter)));
  margin-inline: auto;
  padding: clamp(var(--s5), 3vw, var(--s6));
  background: rgba(15 23 42 / .98);            /* --bg-elevated, opaque */
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  z-index: var(--z-dropdown);
}

/* Content grid (from "Megamenu – Ydelser" section template) */
.c-megamenu {
  display: grid;
  grid-template-columns: 1fr;                   /* mobile-first */
  gap: var(--s5);
}

.c-megamenu__group { min-width: 0; }

.c-megamenu__title {
  margin: 0 0 var(--s1);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}
/* Vaerktoejsmenuen er ravgul, som vaerktoejssidernes eyebrows (blikfang, ikke
   dokumentation). De oevrige megamenuer beholder teal. */
.c-megamenu--tools .c-megamenu__title { color: var(--sev-medium); }
.c-megamenu--tools .c-megamenu__case-badge {
  color: var(--sev-medium);
  border-color: rgba(245 158 11 / .32);
  background: rgba(245 158 11 / .08);
}
/* Gruppetitler i de oevrige megamenuer foelger sidens kategorifarve:
   ravgul paa overvaagning, respons og akut (samme regel som eyebrows paa
   siem-xdr, sentinelone, incident-response og de akutte loesninger), teal
   paa compliance, beskyttelse og drift. Klassen saettes paa titlen. */
.c-megamenu__title--warn { color: var(--sev-medium); }

.c-megamenu__desc {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border-faint);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  font-style: italic;
}

.c-megamenu__link {
  display: block;
  padding: var(--s2) var(--s3);
  margin-inline: calc(var(--s3) * -1);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t), background var(--t);
}
.c-megamenu__link:hover {
  color: var(--text);
  background: rgba(0 211 167 / .08);            /* --accent-2 glow */
  text-decoration: none;
}

/* Feed column (Indsigter) — the "+1" in the 4+1 megamenu.
   v9.8: a CVE rail that differs from the evergreen topic columns:
   subtle left divider + a vertical list of severity-badge + title rows.
   The visual difference is intentional — it reads as "news", not "topics". */
.c-megamenu__group--feed {
  padding-left: var(--s5);
  border-left: 1px solid var(--border-faint);
}
.c-megamenu__link--all {
  margin-bottom: var(--s3);
  color: var(--accent-2);
  font-weight: 700;
}
.c-megamenu__feed {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.c-megamenu__feed-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* v9.12: badge kun så bred som teksten */
  gap: var(--s1);
}
.c-megamenu__feed-link {
  margin-inline: 0;            /* override negative inset from base link */
  padding: 0;
  font-weight: 500;
  line-height: var(--lh-snug);
}
.c-megamenu__feed-link:hover { background: transparent; }

/* On tablet the feed divider would look odd as a left border when the
   column wraps under the topic columns — drop it below desktop. */


/* Cases column — card-style items: title + one-line outcome.
   v9.13: cases are social proof; a short result line under the title
   makes the link more compelling than a bare text link. Reuses the
   feed column's quiet divider treatment via --feed if applied. */
.c-megamenu__cases {
  display: grid;
  grid-template-columns: 1fr;                 /* mobile: 1 kort pr. række */
  gap: var(--s4);
}
.c-megamenu__case {
  display: block;
  padding: var(--s5);
  border-radius: var(--r-lg);
  text-decoration: none;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.c-megamenu__case:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  text-decoration: none;
}
/* Side om side fra tablet og op — auto-fit så 3.+ case wrapper pænt. */

.c-megamenu__case-badge {
  display: inline-block;
  margin-bottom: var(--s2);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0 211 167 / .28);
  background: rgba(0 211 167 / .08);
  color: var(--accent-2);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.c-megamenu__case-title {
  margin: 0 0 var(--s1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-snug);
}
.c-megamenu__case:hover .c-megamenu__case-title { color: var(--accent-hover); }
.c-megamenu__case-resume {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: var(--lh-snug);
}

/**
 * Promokort i megamenuen (v9.72). Staar til venstre for kortlisten og
 * peger paa det vaerktoej, folk skal starte med. Bruger .c-megamenu__case
 * som udgangspunkt, men med plads til en laengere tekst, saa
 * case-resume's to-linjers klip ikke passer.
 */
.c-megamenu__promo {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  height: 100%;
  padding: var(--s5);
  border-radius: var(--r-lg);
  text-decoration: none;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.c-megamenu__promo:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.c-megamenu__promo-title {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.c-megamenu__promo-text {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
/* Linket skubbes til bunden, saa kortet flugter med kortlisten ved siden af. */
.c-megamenu__promo .c-megamenu__link { margin-top: auto; }


/* Simple dropdown variant (Viden) */
.c-megamenu--simple {
  display: flex;
  flex-direction: column;
  min-width: 260px;
}

/* Responsive — self-contained.
   v9.9: 1 col (mobile) → 2 col (tablet)  3 col (desktop).
   The intermediate tablet step keeps columns from getting too narrow.
   3 cols at desktop = clean 3+3 for the 6 menu groups. */


/* Accessibility */
.c-megamenu__link:focus-visible,
.c-header__nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ---------- 4.3c Mega menu — panel-footer, højdeloft, 4-kolonne ---------- */

/**
 * Tilføjelser til 4.3b. Holdt som selvstændig blok med egne media
 * queries, samme princip som 4.3b, så den kan vedligeholdes eller
 * fjernes samlet.
 *
 *   .c-megamenu__footer   Fuldbredde-række nederst i panelet til
 *                         "Se alle …"-links.
 *   .c-megamenu--4col     Fire kolonner fra 1024px. Kun til paneler
 *                         med præcis fire grupper — se v9.25 changelog
 *                         om hvorfor v9.9's rulletilbage ikke gælder her.
 */

.c-megamenu__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-faint);
}

/* Panelet må aldrig blive højere end skærmen. Mobil er undtaget —
   der er panelet inline i menuen og ruller med resten. */


/* Enkolonnet panel (Cases): én gruppe skal have hele bredden, ikke
   en tredjedel med to tomme kolonner ved siden af. */


/* ---------- 4.3b Header og footer paa telefoner ---------- */


/* ---------- 4.4 Footer ---------- */

/**
 * Footer — multi-column site footer with brand, link groups,
 * and bottom-line meta (copyright, legal links).
 */
.c-footer {
  position: relative;
  background:
    radial-gradient(1100px 380px at 0% 0%, rgba(47 107 255 / .12), transparent 58%),
    radial-gradient(820px 320px at 100% 8%, rgba(0 211 167 / .07), transparent 60%),
    linear-gradient(180deg, var(--bg-sunken) 0%, #081120 50%, #091325 100%);
  color: var(--text);
  margin-top: var(--s8);
  padding: clamp(var(--s7), 8vw, var(--s9)) 0 var(--s7);
  border-top: 1px solid var(--border-faint);
  overflow-x: hidden;
}
.c-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47 107 255 / .38), rgba(0 211 167 / .22), transparent);
}

.c-footer__grid {
  /* Bricks' .brxe-container er en flex-kolonne med align-items: flex-start,
     saa boernene bliver kun saa brede som deres indhold. Samme sikring som
     .c-group fik i v9.55. Gaelder ogsaa .c-footer__bottom (se nedenfor). */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}

.c-footer__col { min-width: 0; }
.c-footer__col--brand { max-width: 360px; }
.c-footer__col img { max-width: 160px; height: auto; margin-bottom: var(--s4); }

.c-footer__heading {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--s4);
}
.c-footer__text {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.c-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.c-footer__link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: color var(--t), transform var(--t-fast);
}
.c-footer__link:hover {
  color: var(--text-on-accent);
  text-decoration: none;
  transform: translateX(2px);
}

.c-footer__sub-links {
  margin-top: var(--s2);
  padding-left: var(--s4);
  border-left: 1px solid var(--border-faint);
}
.c-footer__sub-links .c-footer__link { font-size: 0.95em; opacity: 0.85; }

.c-footer__bottom {
  width: 100%;
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.c-footer__bottom-links {
  display: flex;
  /* flex-direction skal stå eksplicit. Bricks' .brxe-block sætter
     column, og uden en modsat erklæring her bliver den stående,
     selvom denne regel kommer senere i kilden. Samme specificitet
     afgør ikke noget, når egenskaben slet ikke er sat. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s4);
}
.c-footer__bottom-links a {
  color: var(--text-subtle);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t);
}
.c-footer__bottom-links a:hover { color: var(--text-on-accent); }


/* ---------- 4.5 Hero & section heads ---------- */

/**
 * Hero — page-top promotional section. Use .c-hero__grid
 * for two-column layouts, or just .c-hero__content for single.
 */
/* v9.24: fast højde fra lg og op (sektion 8). På mobil bestemmer
   indholdet højden — en låst højde på 748px giver ingen mening, når
   kolonnerne stables. Den faste højde findes, fordi backdrop og skjold
   ellers flytter sig, når man navigerer mellem sider. */
.c-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s7), 9vw, var(--s9));
}
/* Backdrop ligger bag; alt indhold skal ligge over */
.c-hero > .l-container { position: relative; z-index: var(--z-raised); }

.c-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}
/* Bredere venstrekolonne — til sider hvor panelet er et faktaark
   frem for et billede */
.c-hero__grid--wide { grid-template-columns: 1fr; }
.c-hero__content { min-width: 0; }
.c-hero__title { margin-bottom: var(--s4); }
.c-hero__lead {
  max-width: 60ch;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  margin-bottom: var(--s5);
}
.c-hero__media { min-width: 0; }

/**
 * Section head — title block introducing a content section.
 * Composes eyebrow + heading + lead in consistent rhythm.
 */
.c-section-actions {
  margin-top: clamp(var(--s6), 5vw, 64px);
}

.c-section-head {
  max-width: var(--container-prose);
  margin-bottom: clamp(var(--s7), 6vw, 72px);
}
.c-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.c-section-head__title { margin: 0 0 var(--s4); }
.c-section-head__lead {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
}


/* ---------- 4.6 CTA blocks ---------- */

/**
 * CTA — "call to action" promotional band. Centered glass
 * panel with title, supporting text, and action buttons.
 */
.c-cta {
  padding-block: clamp(var(--s6), 7vw, var(--s8));
}
.c-cta__inner {
  position: relative;
  overflow: hidden;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(var(--s6), 5vw, var(--s7));
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--bg-glass);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--blur);
  text-align: center;
}
.c-cta__inner::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--bg-glow);
  opacity: 0.5;
}
.c-cta__title,
.c-cta__text,
.c-cta__actions { position: relative; z-index: 1; }
.c-cta__title { margin: 0 0 var(--s4); }
.c-cta__text {
  margin: 0 auto var(--s5);
  color: var(--text-muted);
  max-width: 60ch;
  line-height: var(--lh-normal);
}
.c-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
}


/* ---------- 4.7 Forms ---------- */

/**
 * Form — contact, booking, newsletter. Vertical stack with
 * consistent input styling. Honeypot field auto-hidden.
 */
.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  width: 100%;
}
.c-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

/* Honeypot detection: hide any field with tabindex="-1" */
.c-form .form-group:has(input[tabindex="-1"]) {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.c-form :is(input:not([type="submit"]), textarea, select) {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.9rem 1rem;
  background: rgba(10 19 36 / .82);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t), box-shadow var(--t);
}
.c-form :is(input, textarea, select)::placeholder {
  color: var(--text-faint);
}
.c-form :is(input:not([type="submit"]), textarea, select):focus {
  border-color: rgba(47 107 255 / .55);
  box-shadow: 0 0 0 3px rgba(47 107 255 / .18);
}
.c-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Safari/iOS autofill highlight override */
.c-form input:-webkit-autofill,
.c-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(10 19 36 / .92) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* Form submit button — inherits .c-btn--primary visuals.
   v9.7: Bricks renders submit as <button class="bricks-button"> with the
   label in a child <span class="text">, so it never picked up .c-btn.
   These rules give it the primary-button look without needing extra
   classes in Bricks. Scoped to .c-form so Amelia's .am-button is untouched. */
.c-form :is(button[type="submit"], input[type="submit"], .bricks-button) {
  align-self: flex-start;
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  background: linear-gradient(180deg, rgba(47 107 255 / .42), rgba(47 107 255 / .24));
  border: 1px solid rgba(47 107 255 / .58);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-glow), inset 0 0 0 1px rgba(255 255 255 / .03);
  transition: background var(--t), border-color var(--t), transform var(--t-fast), box-shadow var(--t);
}
.c-form :is(button[type="submit"], input[type="submit"], .bricks-button):hover {
  background: linear-gradient(180deg, rgba(47 107 255 / .50), rgba(47 107 255 / .30));
  border-color: rgba(47 107 255 / .72);
  transform: translateY(-1px);
  text-decoration: none;
}
.c-form :is(button[type="submit"], input[type="submit"], .bricks-button):active {
  transform: translateY(0);
}
/* Bricks wraps label in .text and a hidden .loading spinner */
.c-form .bricks-button .text { color: inherit; }
.c-form .bricks-button .loading { display: none; }
.c-form .bricks-button.is-loading .loading { display: inline-flex; }
.c-form .bricks-button.is-loading .text { opacity: .6; }


/* ---------- 4.8 Lists ---------- */

/**
 * Bullet list — gradient-dot bullets, used for feature lists.
 */
.c-bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-bullet-list__item {
  position: relative;
  padding-left: 18px;
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.c-bullet-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/**
 * Item list — dividers between rows, used for service includes/excludes.
 */
.c-item-list { list-style: none; margin: 0; padding: 0; }
.c-item-list__item {
  padding: var(--s4) 0;
  border-top: 1px solid var(--border);
}
.c-item-list__item:first-child { border-top: 0; padding-top: 0; }
.c-item-list__title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}
.c-item-list__text {
  margin: 0;
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/**
 * Process steps — numbered card series for workflow display.
 */
.c-process-step {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
.c-process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s4);
  border-radius: var(--r-pill);
  border: 1px solid var(--accent);
  /* Uigennemsigtig, saa tidslinjen skjules bag perlen i stedet for at
     skaere igennem den. Se v9.31. */
  background: var(--bg);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  position: relative;
  z-index: 1;
}

/**
 * Steps — numbered points in one continuous block with hairlines
 * between. Differs from .c-process-step, which is a card series:
 * use steps when the points are read in sequence, cards when they
 * are scanned in parallel.
 */
.c-steps {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--border-faint);
}
.c-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  align-items: start;
  padding: var(--s5);
  background: var(--bg-elevated);
}
.c-step__number {
  min-width: 26px;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-2);
}
.c-step__title { margin: 0 0 var(--s2); font-size: var(--fs-base); }
.c-step__text  { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }


/* ---------- 4.9 Article ---------- */

/**
 * Article — long-form content (blog posts, CVE detail pages).
 * Combine .c-article with .c-prose inside __body for typography.
 */
.c-article {
  max-width: var(--container-prose);
  margin-inline: auto;
}
.c-article__header { margin-bottom: var(--s6); }
.c-article__title {
  margin-bottom: var(--s4);
  font-size: var(--fs-3xl);
  letter-spacing: -0.03em;
}
.c-article__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--s5);
}

/**
 * Article meta — author, date, reading time, identifiers.
 * Horizontal cluster on desktop, wraps on mobile.
 */
.c-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.c-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.c-article__meta-label {
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  font-weight: 700;
}

.c-article__body {
  margin-block: var(--s7);
}

.c-article__footer {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--border);
}

/**
 * Related articles — cross-link grid at end of article.
 */
.c-related {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  align-items: stretch;        /* kort i samme række får ens højde */
}
.c-related__card {
  position: relative;
  display: flex;               /* så indhold kan fordeles lodret */
  flex-direction: column;
  height: 100%;                /* fyld grid-cellens højde → ens kort */
  padding: var(--s5);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t), transform var(--t);
}
.c-related__card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.stretched-link {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  font-size: 0;
  color: transparent;
}

/* Feltet skal have et udgangspunkt, ellers daekker linket viewporten. */
.c-related__card,
.c-item-list__item,
.c-services-card,
.c-vrow { position: relative; }

/* Indhold skal ligge over linket, saa tekst stadig kan markeres. */
.c-item-list__item > *:not(.stretched-link),
.c-services-card > *:not(.stretched-link),
.c-vrow > *:not(.stretched-link) { position: relative; z-index: var(--z-base); }
.c-related__card > *:not(.stretched-link) {
  position: relative;
  z-index: var(--z-base);
}

/* Badge-rækken øverst i kortet: venstrejusteret, pæn wrapping.
   Bruges på case-kort (kunde/anonym + periode). */
.c-related__card .l-cluster {
  align-items: flex-start;
  margin-bottom: var(--s3);
}

.c-related__title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-md);
}
.c-related__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/**
 * Featured — one article given full width with image. Used at the top
 * of an archive to give the reader an obvious entry point before the
 * grid begins.
 */
.c-featured {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--bg-glass);
  box-shadow: var(--shadow);
}
.c-featured__media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  /* fill, ikke cover: se v9.52-noten oeverst. */
  object-fit: fill;
  background: var(--bg-sunken);
}
.c-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  padding: clamp(var(--s5), 3.4vw, var(--s7));
}

/**
 * Article rows — compact list for archives with many entries. Cards
 * for what should be highlighted, rows for what will be scanned.
 * Thirty cards in a row is unreadable; thirty rows is a table of
 * contents.
 */
.c-vlist {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.c-vrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background var(--t), padding-inline var(--t);
}
.c-vrow:hover,
.c-vrow:focus-visible {
  background: rgba(255 255 255 / .025);
  padding-inline: var(--s4);
  text-decoration: none;
}
.c-vrow__title { font-weight: 700; font-size: var(--fs-md); color: var(--text); }
.c-vrow:hover .c-vrow__title { color: var(--accent-hover); }
.c-vrow__topic { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; }
.c-vrow__time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

/**
 * Quote — customer testimonial. Named attribution is the point; the
 * avatar carries initials when there is no photo.
 */
.c-quote {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--bg-glass);
}
.c-quote blockquote {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  text-wrap: balance;
  color: var(--text);
}
.c-quote__by { display: flex; align-items: center; gap: var(--s4); margin-top: auto; }
.c-quote__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(0 211 167 / .22);
  background: rgba(0 211 167 / .10);
  color: var(--accent-2);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.c-quote__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.c-quote__meta strong { display: block; color: var(--text); }


/* ---------- 4.10 Severity (CVE database) ---------- */

/**
 * Severity badge — CVSS-aligned color coding for security
 * disclosure pages. Use as: <span class="c-severity c-severity--critical">Critical</span>
 *
 * Levels map to CVSS v3.1 ranges:
 *   critical: 9.0–10.0  (red)
 *   high:     7.0–8.9   (orange)
 *   medium:   4.0–6.9   (amber)
 *   low:      0.1–3.9   (blue)
 *   info:     no score  (gray)
 */
.c-severity {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid currentColor;
}
.c-severity::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.c-severity--critical { color: var(--sev-critical); background: var(--sev-critical-bg); }
.c-severity--high     { color: var(--sev-high);     background: var(--sev-high-bg); }
.c-severity--medium   { color: var(--sev-medium);   background: var(--sev-medium-bg); }
.c-severity--low      { color: var(--sev-low);      background: var(--sev-low-bg); }
.c-severity--info     { color: var(--sev-info);     background: var(--sev-info-bg); }

/**
 * CVSS score — numeric badge displaying 0.0–10.0 score.
 * Color matches severity level. Use with --critical, --high, etc.
 */
.c-cvss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 800;
  border: 1px solid currentColor;
}
.c-cvss--critical { color: var(--sev-critical); background: var(--sev-critical-bg); }
.c-cvss--high     { color: var(--sev-high);     background: var(--sev-high-bg); }
.c-cvss--medium   { color: var(--sev-medium);   background: var(--sev-medium-bg); }
.c-cvss--low      { color: var(--sev-low);      background: var(--sev-low-bg); }
.c-cvss--info     { color: var(--sev-info);     background: var(--sev-info-bg); }

/**
 * CVE list — index/archive view of CVE entries.
 * Each item has severity badge, title, score, and date.
 */
.c-cve-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-cve-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t), transform var(--t);
}
.c-cve-list__item:hover {
  border-color: var(--border-strong);
}
.c-cve-list__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.c-cve-list__id {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.c-cve-list__title {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.c-cve-list__title a { color: var(--text); }
.c-cve-list__title a:hover { color: var(--accent-hover); text-decoration: none; }
.c-cve-list__excerpt {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.c-cve-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/**
 * CVE row — compact alternative to .c-cve-list__item's card form.
 * Use rows where the list is long and scanned, cards where each entry
 * needs an excerpt. Deliberately borderless except for hairlines, so
 * it reads differently from the card sections around it.
 */
.c-cve-rows { border-top: 1px solid var(--border); }
.c-cve-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background var(--t), padding-inline var(--t);
}
.c-cve-row:hover,
.c-cve-row:focus-visible {
  background: rgba(255 255 255 / .025);
  padding-inline: var(--s4);
  text-decoration: none;
}
.c-cve-row__title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--text);
}
.c-cve-row:hover .c-cve-row__title { color: var(--accent-hover); }
.c-cve-row__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}

/**
 * CVE detail header — top of single CVE page. Shows ID, severity,
 * CVSS, disclosure date, and affected vendor/product.
 */
.c-cve-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  padding: clamp(var(--s5), 4vw, var(--s7));
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin-bottom: var(--s7);
}
.c-cve-header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.c-cve-header__id {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.c-cve-header__title {
  margin: 0;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}
.c-cve-header__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-faint);
}
.c-cve-header__stat-label {
  display: block;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: var(--s1);
}
.c-cve-header__stat-value {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
}

/**
 * Disclosure timeline — vertical stepper for CVE lifecycle.
 * Discovered → reported  patched  publicly disclosed.
 */
.c-timeline { list-style: none; margin: 0; padding: 0; }
.c-timeline__item {
  position: relative;
  padding-left: var(--s6);
  padding-bottom: var(--s5);
  border-left: 2px solid var(--border);
}
.c-timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.c-timeline__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
.c-timeline__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-bottom: var(--s1);
}
.c-timeline__title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-base);
  font-weight: 700;
}
.c-timeline__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/**
 * Filter bar — search + facet filters for CVE database index.
 */
.c-filter-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s6);
}


/* ---------- 4.11 Tag pills ---------- */

/**
 * Tag — small clickable label for taxonomies (vendor, technology).
 * Use lists of these for CVE tags, blog post categories.
 */
.c-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255 255 255 / .04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.c-tag:hover {
  background: rgba(47 107 255 / .12);
  border-color: rgba(47 107 255 / .35);
  color: var(--text);
  text-decoration: none;
}

.c-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Chip — filter control. Related to .c-tag but larger, with an active
 * state. Tags label content; chips change what is shown.
 */
.c-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.c-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.c-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}
.c-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
}


/* ---------- 4.12 Page-specific ---------- */

/**
 * Contact page — info column + form column, stacked on mobile.
 */
.c-contact {
  padding-block: clamp(var(--s7), 8vw, var(--s8));
}
.c-contact__detail {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s4);
}
.c-contact__label {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.c-contact__value { color: var(--text); }
.c-contact__value--link { color: var(--accent-2); font-weight: 700; }

/**
 * 404 page — centered hero with code, message, actions.
 */
.c-error-page {
  position: relative;
  padding-block: clamp(var(--s8), 12vw, var(--s10));
  text-align: center;
}
.c-error-page__code {
  display: block;
  margin-bottom: var(--s3);
  font-size: clamp(4.5rem, 14vw, 8rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--text-on-accent);
  text-shadow: 0 0 30px rgba(47 107 255 / .16);
}
.c-error-page__title { margin-bottom: var(--s4); }
.c-error-page__lead {
  max-width: 56ch;
  margin: 0 auto var(--s6);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.c-error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
}

/**
 * Maintenance page — standalone "coming soon" with logo, contact, form.
 */
.c-maintenance {
  padding-block: clamp(var(--s7), 8vw, var(--s8));
}
.c-maintenance__logo {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto var(--s5);
}

/**
 * Booking page — Amelia widget wrapped in glass panel.
 */
.c-booking {
  padding-block: clamp(var(--s7), 8vw, var(--s8));
}
/* v9.20: Teksthoved i booking-panelet (eyebrow + titel + lead).
   Panelet er --flush, så hovedet bærer selv panelets padding —
   uden bund-padding, da Amelia-embed'et nedenunder har sin egen
   (v9.7-reglerne på .c-booking__embed / #amelia-container). */
.c-booking__head {
  /* v9.22: samme padding-token som .c-glass-panel — head og embed
     deler nu indryk, så alt indhold flugter på én venstrekant */
  padding: clamp(var(--s5), 4vw, var(--s7)) clamp(var(--s5), 4vw, var(--s7)) 0;
}
.c-booking__head > *:last-child { margin-bottom: 0; }
/* v9.7: inner padding so Amelia content doesn't touch the panel edge.
   Amelia's own wrapper has no padding; this gives the whole booking
   embed breathing room on all sides. */
.c-booking__embed {
  width: 100%;
  min-width: 0;
  /* v9.22: vandret indryk matcher .c-booking__head (glass-panelets
     token), top er et fast s5-mellemrum til lead'et — én konsekvent
     indre margin hele vejen rundt, som hero-panelet */
  padding: var(--s5) clamp(var(--s5), 4vw, var(--s7)) clamp(var(--s5), 4vw, var(--s7));
}
/* v9.21: container-padding nulstillet — embed'et bærer nu al ydre
   luft, så de to lag ikke stakker (var årsagen til for meget white
   space). Margin + min-height nulstilles også: Amelia bringer selv
   begge dele med og skubbede widgetten ned/centrerede den i et for
   højt wrapper-felt. */
#amelia-container.am-fs__wrapper,
.c-booking__embed .amelia-v2-booking {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/**
 * Service detail — single service page (deep-link from services hub).
 */
.c-service-faq {
  display: grid;
  gap: var(--s4);
  max-width: 920px;
}
.c-service-faq__item { padding: var(--s5); }
.c-service-faq__question { margin: 0 0 var(--s3); }
.c-service-faq__answer { color: var(--text-muted); }
.c-service-faq__answer > *:last-child { margin-bottom: 0; }

/**
 * FAQ — generic accordion on <details>/<summary>. No JavaScript: the
 * browser handles open/close, and the content is in the DOM whether
 * open or not, so it is indexed and searchable.
 * .c-service-faq above is the always-open card variant; keep both.
 */
.c-faq { border-top: 1px solid var(--border); }
.c-faq details { border-bottom: 1px solid var(--border); }
.c-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: var(--fs-md);
}
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--accent-2);
  transition: transform var(--t);
}
.c-faq details[open] summary::after { transform: rotate(45deg); }
.c-faq details > *:not(summary) {
  padding-bottom: var(--s5);
  color: var(--text-muted);
  max-width: var(--container-prose);
}

/**
 * Team — staff grid. Sized for a small team; scales without markup
 * changes as people are added.
 */
.c-team {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
}
.c-team__card { display: flex; flex-direction: column; gap: var(--s4); }
.c-team__name { font-size: var(--fs-md); font-weight: 700; }
.c-team__role { font-size: var(--fs-sm); font-weight: 700; color: var(--accent-2); }
.c-team__bio  { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }


/* ---------- 4.13 Indsigter (single CVE post) ---------- */

/**
 * Components for the "/indsigter/<cve-id>" single-post template.
 * Used by the Auroa Indsigter plugin (custom post type "indsigt").
 *
 * Naming aligns with broader v9 CVE database conventions but adds
 * Danish severity-label support via [data-severity] attribute selectors
 * (since the plugin stores Danish labels: Kritisk/Alvorlig/Moderat/Lav).
 *
 * Layout:
 *   1. .c-severity--lg          Hero-size variant of severity badge
 *   2. .c-callout               Tidsfrist + "Sådan ser Auroa det" boxes
 *   3. .c-stat-grid + .c-stat   CVSS metric tiles
 *   4. .c-cvss__vector          Raw CVSS:3.1/... string in monospace
 *   5. .c-cwe-tags + .c-cwe-tag CWE taxonomy pills
 *   6. .c-timeline              Vertical disclosure timeline
 *   7. .c-product-scroll        Scrollable "Ramte produkter" container
 *   8. .c-indsigt-sidebar       Sticky sidebar wrapper
 */

/**
 * Severity badge — Danish-label support.
 * Extends .c-severity (4.10) with [data-severity="..."] attribute
 * selectors so the Bricks template can pipe ACF's severity_dansk_label
 * directly without translation.
 */
.c-severity[data-severity="Kritisk"]     { color: var(--sev-critical); background: var(--sev-critical-bg); }
.c-severity[data-severity="Alvorlig"]    { color: var(--sev-high);     background: var(--sev-high-bg); }
.c-severity[data-severity="Moderat"]     { color: var(--sev-medium);   background: var(--sev-medium-bg); }
.c-severity[data-severity="Lav"]         { color: var(--sev-low);      background: var(--sev-low-bg); }
.c-severity[data-severity="Information"] { color: var(--sev-info);     background: var(--sev-info-bg); }

/**
 * Size modifier — hero placement requires larger badge for visual weight
 * next to CVE-ID eyebrow and H1.
 */
.c-severity--lg {
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
}
/**
 * Size modifier — small (menu feed). Compact badge for the Indsigter
 * megamenu column, smaller than --lg hero variant.
 */
.c-severity--sm {
  padding: 0.15rem 0.45rem;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  gap: var(--s1);
}
.c-severity--sm::before { width: 6px; height: 6px; }


/**
 * CVSS score — additional sub-elements for indsigt detail view.
 * Base .c-cvss is in 4.10. These add the explanatory label and the
 * full vector string display.
 */
.c-cvss__label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
}
.c-cvss__vector {
  display: block;
  margin-top: var(--s3);
  padding: var(--s3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  word-break: break-all;
  line-height: var(--lh-snug);
}

/**
 * Callout — emphasized info box for "Tidsfrist", "Sådan ser Auroa det",
 * and similar editorial blocks. Border on left edge, soft background.
 */
.c-callout {
  padding: var(--s5);
  border-left: 3px solid var(--accent-2);
  background: rgba(0 211 167 / .04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.c-callout--warning {
  border-left-color: var(--sev-high);
  background: rgba(234 88 12 / .05);
}
.c-callout--critical {
  border-left-color: var(--sev-critical);
  background: rgba(220 38 38 / .05);
}
.c-callout__label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-subtle);
}
.c-callout > *:last-child { margin-bottom: 0; }

/**
 * Stat grid — CVSS-breakdown metrics in compact tile layout.
 * Auto-fit so 3–8 stats flow naturally across viewport widths.
 */
.c-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s3);
}
.c-stat {
  padding: var(--s4);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.c-stat__label {
  margin-bottom: var(--s1);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
}
.c-stat__value {
  font-weight: 600;
  color: var(--text);
}

/**
 * CWE taxonomy pills — small code-style tags for CWE IDs (CWE-79, CWE-89…).
 * Sits in a wrap-flex cluster.
 */
.c-cwe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.c-cwe-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/**
 * Timeline — vertical chronological list for CVE disclosure milestones.
 * Date column fixed-width on left, event + detail flow on right.
 * Dot-on-line visual via ::before pseudo-elements.
 */
.c-timeline {
  position: relative;
  padding-left: var(--s5);
  list-style: none;
  margin: 0;
}
.c-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: var(--s2);
  bottom: var(--s2);
  width: 1px;
  background: var(--border-strong);
}
.c-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--s4);
  padding-bottom: var(--s5);
  align-items: start;
}
.c-timeline__item:last-child { padding-bottom: 0; }
.c-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s5) * -1 + 2px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 12px var(--glow-2);
}
.c-timeline__date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  padding-top: 2px;
}
.c-timeline__event {
  font-weight: 600;
  margin-bottom: var(--s1);
  color: var(--text);
}

/**
 * Product scroll container — "Ramte produkter" can list 100+ CPE entries.
 * Cap height and scroll to keep page compact. Thin scrollbar styled to
 * match dark surface aesthetic.
 */
.c-product-scroll {
  max-height: 480px;
  overflow-y: auto;
  padding-right: var(--s3);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--border-faint);
}
.c-product-scroll::-webkit-scrollbar { width: 6px; }
.c-product-scroll::-webkit-scrollbar-track {
  background: var(--border-faint);
  border-radius: var(--r-sm);
}
.c-product-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-sm);
}
.c-product-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

/**
 * Indsigt sidebar — sticky on viewports where there's vertical room.
 * Holds severity card, view toggle, quick-facts, and CTA.
 */
.c-indsigt-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--s4));
  align-self: start;
}

/* On narrow viewports, drop sticky so it doesn't fight the scroll. */


/* ---------- 4.14 Pagination ---------- */

/**
 * Pagination — WP page-numbers markup (Bricks pagination element).
 * Pill-style numbers, current page solid accent.
 * Use as: element class "c-pagination" on the pagination element.
 * Used by Archive – Viden, Archive – Indsigter, Search – Resultater.
 * Self-contained by design (precedent: 4.3b, 4.13).
 */
.c-pagination {
  margin-top: var(--s7);
}
.c-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(255 255 255 / .04);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.c-pagination a.page-numbers:hover {
  background: rgba(47 107 255 / .12);
  border-color: rgba(47 107 255 / .35);
  color: var(--text);
  text-decoration: none;
}
.c-pagination .page-numbers.current {
  background: linear-gradient(180deg, rgba(47 107 255 / .42), rgba(47 107 255 / .24));
  border-color: rgba(47 107 255 / .58);
  color: var(--text-on-accent);
}
.c-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--text-faint);
}


/* ---------- 4.15 Breadcrumb ---------- */

/**
 * Breadcrumb — Rank Math markup via [auroa_breadcrumb] shortcode
 * (defensive wrapper in child-theme functions.php).
 * Sits above H1 in hero; deliberately quiet. Enabling the Rank Math
 * breadcrumb feature also emits BreadcrumbList schema sitewide.
 */
.c-breadcrumb,
.rank-math-breadcrumb {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-bottom: var(--s4);
}
.rank-math-breadcrumb a {
  color: var(--text-subtle);
  font-weight: 500;
}
.rank-math-breadcrumb a:hover {
  color: var(--text);
  text-decoration: none;
}
.rank-math-breadcrumb .separator {
  margin-inline: var(--s2);
  color: var(--text-faint);
}
.rank-math-breadcrumb .last {
  color: var(--text-muted);
}


/* ---------- 4.16 Backdrop (hero graphics) ---------- */

/**
 * Backdrop — the layered hero graphic: a quiet glow, a square grid,
 * a network constellation, and the Auroa shield collecting packets.
 *
 * Composition is deliberately right-weighted so the left half stays
 * free for the hero text. The SVG markup lives in the Bricks template
 * (or auroa-network.svg); this file only styles and animates it.
 *
 * Structure:
 *   .c-backdrop            absolutely positioned wrapper inside .c-hero
 *   .c-backdrop__glow      wide blue glow, breathing slowly
 *   .c-backdrop__glow--2   small teal accent in the corner
 *   .c-backdrop__net       inline SVG: grid + constellation
 *   .c-shield              Auroa shield with incoming packets
 */
.c-backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  overflow: hidden;
  pointer-events: none;
  /* Toner ud mod bunden, saa net og skjold ikke skaeres brat af
     heroens overflow. Uden den staar der en vandret kant mod naeste
     sektion. Se v9.34. */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0 0 0 / .45) 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, rgba(0 0 0 / .45) 84%, transparent 100%);
}

.c-backdrop__glow,
.c-backdrop__glow--2 {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.c-backdrop__glow {
  left: 64%;
  top: -40%;
  width: 1400px;
  height: 1050px;
  transform: translateX(-50%);
  filter: blur(120px);
  background: radial-gradient(closest-side,
    rgba(47 107 255 / .30), rgba(47 107 255 / .10) 55%, transparent 72%);
  animation: auroa-breathe 26s ease-in-out infinite;
}
.c-backdrop__glow--2 {
  right: -4%;
  top: 8%;
  width: 640px;
  height: 640px;
  filter: blur(130px);
  background: radial-gradient(closest-side, rgba(0 211 167 / .14), transparent 70%);
  animation: auroa-breathe-2 34s ease-in-out infinite;
}
@keyframes auroa-breathe {
  0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
@keyframes auroa-breathe-2 {
  0%, 100% { opacity: .7; transform: translate(0, 0); }
  50%      { opacity: 1;  transform: translate(-40px, 30px); }
}

/* Two masks combined: a horizontal fade to the left, and a radial
   fade centred on the right. Without the horizontal one the graphic
   creeps in under the headline. */
.c-backdrop__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image:
    linear-gradient(100deg, transparent 4%, rgba(0 0 0 / .35) 30%, #000 62%, #000 92%, transparent 100%),
    radial-gradient(126% 122% at 74% 44%, #000 34%, rgba(0 0 0 / .62) 70%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(100deg, transparent 4%, rgba(0 0 0 / .35) 30%, #000 62%, #000 92%, transparent 100%),
    radial-gradient(126% 122% at 74% 44%, #000 34%, rgba(0 0 0 / .62) 70%, transparent 94%);
  mask-composite: intersect;
}

/* Pulsing nodes. Each carries its own --o, --d and --t inline so the
   thirteen never fall into step — in step it reads as animation,
   out of step it reads as activity. */
.c-backdrop__net .is-pulse {
  fill-opacity: var(--o);
  transform-box: fill-box;
  transform-origin: center;
  animation: auroa-node var(--d, 5s) ease-in-out infinite var(--t, 0s);
}
@keyframes auroa-node {
  0%, 100% { fill-opacity: var(--o); transform: scale(1); }
  46%      { fill-opacity: 1;       transform: scale(2.1); }
}

/**
 * Shield — the Auroa mark as the collection point. Its SVG carries a
 * 760-unit viewBox where the shield occupies the middle 200, leaving
 * room for packets to arrive from outside and stop at its edge.
 *
 * Anchored in CSS rather than at a coordinate inside the network SVG.
 * A fixed coordinate lands in dead space as soon as the hero height
 * changes from page to page.
 */
.c-shield {
  /* Placering ligger i backdrop-SVG'ens transform, ikke her. v9.33 */
  pointer-events: none;
}
.c-shield__body {
  fill: url(#auroaShieldGrad);
  stroke: var(--accent-2);
  stroke-opacity: .72;
  stroke-width: 3.2;
}
.c-shield__lock { fill: var(--accent-2-hover); fill-opacity: .92; }
.c-shield__key  { fill: var(--bg); }


/* Packet: a 0.1-unit dash with round caps renders as a dot. Animating
   stroke-dashoffset moves it along the line toward the shield. No
   JavaScript, no canvas, no per-frame work. */
.c-shield__packet {
  stroke: var(--accent-2-hover);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-opacity: 0;
  stroke-dasharray: 0.1 calc(var(--len) * 1px);
  stroke-dashoffset: calc(var(--len) * 1px);
  animation: auroa-packet var(--d, 5s) linear infinite var(--t, 0s);
}
@keyframes auroa-packet {
  0%   { stroke-dashoffset: calc(var(--len) * 1px); stroke-opacity: 0; }
  10%  { stroke-opacity: .9; }
  86%  { stroke-opacity: .9; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; }
}

.c-shield__halo {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 3;
  stroke-opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: auroa-halo 5.2s cubic-bezier(.2, .6, .3, 1) infinite;
}
/* Offset so a ring is always on its way out, rather than one flash
   every five seconds */
.c-shield__halo--2 { animation-delay: 2.6s; }
@keyframes auroa-halo {
  0%        { transform: scale(.62);  stroke-opacity: .6; }
  80%, 100% { transform: scale(1.32); stroke-opacity: 0; }
}


/* ---------- 4.17 Data display ---------- */

/**
 * Live panel — alert feed showing the newest CVE analyses. Reads as
 * a monitoring view rather than a marketing list, which is the point:
 * it is the shape the work actually takes.
 */
.c-live { padding: var(--s5); }
.c-live__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s4);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
.c-live__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sev-critical);
  animation: auroa-live-pulse 2.6s infinite;
}
@keyframes auroa-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220 38 38 / .5); }
  70%  { box-shadow: 0 0 0 8px rgba(220 38 38 / 0); }
  100% { box-shadow: 0 0 0 0 rgba(220 38 38 / 0); }
}
.c-live__title {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.c-live__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.c-live__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s4) var(--s1);
  border-bottom: 1px solid var(--border);
}
.c-live__row:last-child { border-bottom: 0; }
.c-live__text  { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.c-live__score { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }

/**
 * Chart — bar chart driven by inline height percentages.
 *
 * NOTE: .c-chart must be align-items:stretch and .c-chart__bar
 * height:100%. With flex-end the bars only get content height, so the
 * percentage heights resolve against zero and nothing is drawn. This
 * was a real bug in the mockups: labels and legend rendered, bars did
 * not, and nothing in DevTools pointed at it.
 */
.c-chart {
  display: flex;
  align-items: stretch;
  gap: var(--s3);
  height: 190px;
  margin-top: var(--s2);
}
.c-chart__bar {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s3);
}
.c-chart__fill {
  width: 100%;
  border-radius: var(--r-sm) var(--r-sm) 3px 3px;
  transform-origin: bottom;
  transition: transform 1.25s cubic-bezier(.16, 1, .3, 1);
}

/* Sluttilstand er standard. .is-anim saettes af JavaScript og er den
   eneste maade, soejlen kan starte sammenklappet. Se v9.32. */
.c-chart.is-anim .c-chart__fill { transform: scaleY(0); }
.c-chart.is-anim.is-inview .c-chart__fill { transform: scaleY(1); }
.c-chart__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-faint);
}
.c-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.c-chart__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--s2);
  border-radius: var(--r-sm);
  vertical-align: -1px;
}

/* 4.17 Diagram — farve pr. alvorlighedsniveau -------------------------- */

/**
 * Markup leverer klasse og hoejde, intet andet. Skal paletten aendres,
 * sker det her og ét sted.
 */
.c-chart__fill--kritisk     { background: linear-gradient(180deg, #DC2626, #7F1616); }
.c-chart__fill--alvorlig    { background: linear-gradient(180deg, #EA580C, #8A3407); }
.c-chart__fill--moderat     { background: linear-gradient(180deg, #F59E0B, #8F5C06); }
.c-chart__fill--lav         { background: linear-gradient(180deg, #3B82F6, #1E4691); }
.c-chart__fill--information { background: linear-gradient(180deg, #64748B, #334155); }

/* Legendens prik bruger den lyse ende af samme gradient. */
.c-chart__swatch--kritisk     { background: #DC2626; }
.c-chart__swatch--alvorlig    { background: #EA580C; }
.c-chart__swatch--moderat     { background: #F59E0B; }
.c-chart__swatch--lav         { background: #3B82F6; }
.c-chart__swatch--information { background: #64748B; }


/**
 * KPI — stacked figures with labels. Used on case pages and in the
 * overlapping panel below the hero.
 */
.c-kpi { display: flex; flex-direction: column; gap: var(--s6); }
.c-kpi__label { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/**
 * Group head — section divider inside a long page. Used to split
 * eleven services into three groups, or a knowledge base into topics.
 */
.c-group {
  margin-top: var(--s9);
  /* Uden bredden krymper en gruppe uden kortgitter til sit indhold,
     fordi beholderen er en flex-kolonne. */
  width: 100%;
}

.c-group__head,
.c-vlist { width: 100%; }
.c-group:first-of-type,
.c-group.is-first { margin-top: 0; }
.c-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
.c-group__title { margin: 0; font-size: var(--fs-lg); }
.c-group__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.c-group__lead {
  max-width: 56ch;
  margin: 0 0 var(--s5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}


/* =========================================================
   4.18 FORSIDE
   Komponenter der kun bruges paa forsiden. Reglerne er
   mockuppens (auroa-v3.css), oversat til design systemets
   tokens, saa paletten kun findes ét sted.
   ========================================================= */

/**
 * Ydelsesgitter — ét hoejt kort til venstre, fire mindre i
 * to spalter. Kortet med --tall spaender over begge raekker.
 */
.c-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

.c-services-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(168deg, rgba(255 255 255 / .045), rgba(255 255 255 / .008));
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .05);
  transition: transform var(--t-fast), border-color var(--t), box-shadow var(--t);
}
.c-services-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .08),
              0 34px 70px -28px rgba(0 0 0 / .85);
}

.c-services-card__eyebrow {
  align-self: flex-start;
  margin: 0;
  padding: 0.32rem 0.75rem;
  border: 1px solid rgba(0 211 167 / .22);
  border-radius: var(--r-pill);
  background: rgba(0 211 167 / .09);
  color: var(--accent-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.c-services-card__title { margin: 0; }

.c-services-card__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Linket skubbes til bunden, saa kortene flugter uanset tekstlaengde. */
.c-services-card__link {
  margin-top: auto;
  padding-top: var(--s3);
  color: var(--accent-hover);
  font-size: var(--fs-sm);
  font-weight: 650;
}


/**
 * Procesforloeb — vandret tidslinje. Stregen ligger bag
 * numrene og tegnes fra venstre, naar sektionen kommer i syne.
 */
.c-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  margin-top: var(--s4);
}

.c-process-grid > * { position: relative; }


/**
 * Overlap — traekker et panel op over sektionsgraensen, saa det
 * bryder heroens nederste kant i stedet for at ligge under den.
 */


/* 4.12c Emneliste — redaktionel variant ------------------------------ */

/**
 * Til lister hvor punkterne er sideordnede indgange og skal skimmes.
 * Skillelinjer frem for kasser: mindre stoej, mere typografi.
 */
.c-item-list--divided > .c-item-list__item {
  position: relative;
  padding-block: var(--s5);
  border-top: 1px solid var(--border-faint);
  transition: border-color var(--t);
}
.c-item-list--divided > .c-item-list__item:hover { border-color: var(--accent); }

/* Pilen ligger stille til hoejre og glider frem, naar der peges. */
.c-item-list--divided > .c-item-list__item::after {
  content: "→";
  position: absolute;
  top: var(--s5);
  right: 0;
  color: var(--text-faint);
  transition: transform var(--t), color var(--t);
}
.c-item-list--divided > .c-item-list__item:hover::after {
  transform: translateX(5px);
  color: var(--accent-hover);
}

.c-item-list__label {
  display: block;
  margin-bottom: var(--s2);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-item-list--divided .c-item-list__title {
  margin: 0 0 var(--s2);
  padding-right: var(--s5);
  font-size: var(--fs-lg);
}


/* 4.20 Kundeudsagn ------------------------------------------------------ */

/**
 * Til indhold hvor overskriften er noget, nogen har sagt. Citatstregen
 * goer det tydeligt uden at pakke udsagnet i en kasse.
 */
.c-voice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-voice__item {
  position: relative;
  padding-left: var(--s5);
  border-left: 2px solid var(--accent-2);
  transition: border-color var(--t), transform var(--t);
}
.c-voice__item:hover {
  border-left-color: var(--accent-2-hover);
  transform: translateX(3px);
}

.c-voice__said {
  margin: 0 0 var(--s3);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.c-voice__answer {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}


/* 4.21 Undersider — hero og panel-noegletal ------------------------------ */

/**
 * Hero paa en underside. Forsidens variant er 748px hoej og centrerer
 * lodret, hvilket er rigtigt der og forkert her: paa en underside vil
 * folk se indholdet, ikke en luftig indledning.
 */
.c-hero--page {
  min-height: 0;
  align-items: start;
  /* Bunden er lav med vilje: sektionen under saetter selv sin topluft,
     og to polstringer oven paa hinanden bliver for meget. Se v9.45. */
  padding-block: clamp(var(--s6), 5vw, 56px) var(--s6);
}


/**
 * Noegletal nederst i et panel. Adskilt med en haarfin linje, tallet i
 * mono saa 30 og 45 minutter flugter under hinanden paa tvaers af sider.
 */
.c-panel-stat {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-faint);
}

.c-panel-stat__value {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
}

.c-panel-stat__label {
  margin: var(--s2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}


/* 4.12e Kort med glaseffekt --------------------------------------------- */

.c-card--glass {
  transition: transform var(--t-fast), border-color var(--t), box-shadow var(--t);
}
.c-card--glass:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .1),
              0 30px 64px -30px rgba(0 0 0 / .8);
}

/* Bevisliste inde i et kort. Kortet har allerede en kant, saa stregen
   foroven ville blive den anden vandrette linje paa faa pixels. */
.c-proof--compact {
  margin-top: var(--s3);
  padding-top: 0;
  border-top: 0;
  gap: var(--s1);
}
.c-proof--compact .c-proof__item { font-size: var(--fs-xs); }


/* 4.21c Sektionen efter en underside-hero ------------------------------- */

/**
 * .c-hero holder sin min-height ogsaa her, og paa en underside fylder
 * indholdet sjaeldent 748px. Resultatet er et tomt felt under teksten.
 *
 * Soeskende-selektor frem for en klasse: reglen gaelder automatisk for
 * enhver sektion lige efter en underside-hero, og kan ikke glemmes
 * eller saettes forkert.
 */


/* 4.12f Glasskaer paa alle kortflader ----------------------------------- */

/**
 * --bg-glass giver farven; det her giver dybden. Et diagonalt skaer fra
 * oeverste venstre hjoerne og en lysstribe langs overkanten, saa fladen
 * ser ud til at ligge foran baggrunden frem for i den.
 *
 * Ligger paa basiskomponenterne, saa alle kort paa sitet foelger med.
 * --glass-modifierne tilfoejer nu kun loeftet ved hover.
 */
.c-card,
.c-related__card,
.c-services-card,
.c-glass-panel {
  background-image:
    linear-gradient(152deg, rgba(255 255 255 / .055), rgba(255 255 255 / .012) 46%),
    var(--bg-glass);
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .06), var(--shadow);
}

.c-glass-panel {
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .06), var(--shadow-lg);
}


/* 4.13b Viden-oversigt — de manglende dele -------------------------------- */

/**
 * Chip-raekken. Uden ombrydning ligger seks emner paa én linje og
 * overloeber paa telefon.
 */
.c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  /* Chippene laa klods op ad foerste gruppeoverskrift. */
  margin-block: var(--s6) clamp(var(--s7), 5vw, var(--s9));
}

/* Valgt emne. aria-pressed saettes af filteret, saa tilstanden ogsaa
   naar skaermlaesere. */
.c-chip.is-active {
  border-color: var(--accent);
  background: rgba(47 107 255 / .12);
  color: var(--text);
}

/* Filteret bruger hidden frem for en klasse, saa skjult indhold ogsaa
   er skjult for skaermlaesere og ikke bare usynligt. */
.c-group[hidden],
[data-emne][hidden] { display: none !important; }

/* Antallet ved siden af gruppens overskrift. Mono, saa tallene flugter
   naar man skimmer ned ad siden. */
.c-group__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

.c-group__desc {
  max-width: 56ch;
  margin: 0 0 var(--s5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Laesetiden yderst til hoejre i en raekke. */
.c-vrow__read {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

.c-thumb {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* Overskriften nulstiller sin topmargen laengere nede i filen, saa
   luften skal komme fra billedet. Mere specifik end .c-thumb alene,
   saa den vinder uanset raekkefoelge. */
.c-card > .c-thumb { margin-bottom: var(--s4); }

/* .c-featured og .c-vrow faar deres to-spalte-layout af v9.24-blokken
   sidst i filen. Gentages de her, taber de paa raekkefoelge alligevel. */


/* 4.19 Bevisliste — noegletal som linjer -------------------------------- */

/**
 * Til resultater der skal kunne skimmes: ét tal pr. linje med flueben.
 * Ikke kasser. Kasser inde i et kort konkurrerer med kortet selv.
 */
.c-proof {
  margin: var(--s4) 0 0;
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--border-faint);
  list-style: none;
  display: grid;
  gap: var(--s2);
}

.c-proof__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 0 var(--s2);
  font-size: var(--fs-sm);
}

.c-proof__item::before {
  content: "✓";
  color: var(--accent-2);
  font-weight: 700;
  line-height: 1;
}

.c-proof__value {
  margin: 0;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

.c-proof__label {
  margin: 0;
  color: var(--text-muted);
}

/* Ravgul variant til tal der er en advarsel frem for et resultat. */
.c-proof--warn .c-proof__item::before,
.c-proof--warn .c-proof__value { color: var(--sev-medium); }


/* 4.12d Kort med glaseffekt --------------------------------------------- */

/* Skaeret ligger nu i basiskomponenten (se 4.12f). Modifieren
   tilfoejer kun loeftet ved hover, som hoerer til kort der er links. */
.c-related__card--glass { will-change: transform; }
.c-related__card--glass:hover {
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .1),
              0 30px 64px -30px rgba(0 0 0 / .8);
}


/* 4.12b Relaterede kort — to spalter -------------------------------- */


/* 4.11b Procesforloeb — trinvis animation ---------------------------- */

/**
 * Raekkefoelgen er: streg, perler, tekst. Tallene herunder er
 * forsinkelser i sekunder, ikke varigheder.
 *
 *   0.00  stregen begynder at tegne sig (1.1s, se 4.18)
 *   0.55  perle 1     1.00  tekst 1
 *   0.85  perle 2     1.30  tekst 2
 *   1.15  perle 3     1.60  tekst 3
 *
 * Perlen naar frem, kort foer stregen har passeret den, saa det ser ud
 * som om stregen samler dem op undervejs.
 */
.c-process-step__number,
.c-process-step__title,
.c-process-step__text {
  transition: opacity 0.65s cubic-bezier(.16, 1, .3, 1),
              transform 0.65s cubic-bezier(.16, 1, .3, 1);
}

.c-process-grid.is-anim .c-process-step__number {
  opacity: 0;
  transform: scale(0.55);
}
.c-process-grid.is-anim .c-process-step__title,
.c-process-grid.is-anim .c-process-step__text {
  opacity: 0;
  transform: translateY(12px);
}

.c-process-grid.is-anim.is-inview .c-process-step__number { opacity: 1; transform: none; }
.c-process-grid.is-anim.is-inview .c-process-step__title,
.c-process-grid.is-anim.is-inview .c-process-step__text { opacity: 1; transform: none; }

.c-process-grid.is-anim.is-inview .c-process-step:nth-child(1) .c-process-step__number { transition-delay: 0.70s; }
.c-process-grid.is-anim.is-inview .c-process-step:nth-child(2) .c-process-step__number { transition-delay: 1.05s; }
.c-process-grid.is-anim.is-inview .c-process-step:nth-child(3) .c-process-step__number { transition-delay: 1.40s; }

.c-process-grid.is-anim.is-inview .c-process-step:nth-child(1) :is(.c-process-step__title, .c-process-step__text) { transition-delay: 1.25s; }
.c-process-grid.is-anim.is-inview .c-process-step:nth-child(2) :is(.c-process-step__title, .c-process-step__text) { transition-delay: 1.60s; }
.c-process-grid.is-anim.is-inview .c-process-step:nth-child(3) :is(.c-process-step__title, .c-process-step__text) { transition-delay: 1.95s; }

/* 4.29 Ikon paa kort ------------------------------------------------------
 * Inline SVG oeverst i et kort. 32 px, streg i --text, detalje i --accent-2
 * via SVG'ens egen .a-klasse. Dekoration (aria-hidden). */
.c-card__ikon { display: block; width: 32px; height: 32px; margin-bottom: var(--s3); color: var(--text); }
.c-card__ikon svg { width: 100%; height: 100%; }

/* 4.30 Tilbud under et skridt i vaerktoejet --------------------------------
 * Én linje under recorden, ikke et banner. */
.c-vt__tilbud { margin-top: var(--s3); padding: var(--s3) var(--s4); border-left: 2px solid var(--accent-2); background: rgba(0,211,167,.05); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.c-vt__tilbud-link { color: var(--accent-2); font-weight: 600; white-space: nowrap; }
.c-vt__tilbud-link:hover { text-decoration: underline; }

/* 4.31 Footer: brand-kolonne og bundlinje -----------------------------------
 * Grid-kolonner og raekke-layout pr. breakpoint ligger i 8. RESPONSIVE.
 * Bundlinjen: copyright venstre, politik-links hoejre. Mail/telefon vises
 * kun under lg (de staar i kontaktkolonnen). */
.c-footer__col--brand .c-footer__text { line-height: 1.75; margin-bottom: var(--s4); max-width: 38ch; }
.c-footer__col--brand .c-footer__link { display: inline-block; margin-top: var(--s2); }
.c-footer__copyright { flex: 0 0 auto; white-space: nowrap; }
.c-footer__bottom-links { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--s4); row-gap: var(--s2); }
.c-footer__bottom-links > a { position: static; display: inline-block; margin: 0; white-space: nowrap; }

/* =========================================================
   5. PROSE
   .c-prose — typography styles applied to descendant elements.
   Use on article bodies, CMS-rendered content, or any block
   where authors write semantic HTML and need it to look right.
========================================================= */

.c-prose {
  color: var(--text);
  line-height: var(--lh-loose);
  font-size: var(--fs-base);
}
.c-prose > * + * { margin-top: var(--s4); }
.c-prose :is(h2, h3, h4) {
  margin-top: var(--s7);
  margin-bottom: var(--s3);
}
.c-prose h2 { font-size: var(--fs-2xl); }
.c-prose h3 { font-size: var(--fs-xl); }
.c-prose h4 { font-size: var(--fs-lg); }
.c-prose p { color: var(--text); }
.c-prose strong { color: var(--text); font-weight: 700; }
.c-prose :is(ul, ol) {
  padding-left: var(--s5);
  color: var(--text);
}
.c-prose li { margin-bottom: var(--s2); }
.c-prose li::marker { color: var(--accent-2); }
.c-prose blockquote {
  margin: var(--s6) 0;
  padding: var(--s5);
  border-left: 3px solid var(--accent);
  background: rgba(47 107 255 / .06);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-muted);
  font-style: italic;
}
.c-prose blockquote p:last-child { margin-bottom: 0; }
.c-prose a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.c-prose a:hover { color: var(--accent-2-hover); }
.c-prose img,
.c-prose figure {
  margin: var(--s6) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.c-prose figcaption {
  margin-top: var(--s2);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  text-align: center;
}
.c-prose hr {
  margin: var(--s7) 0;
  border-top: 1px solid var(--border);
}

/**
 * Tables — data tables inside prose (DMARC felt-tabeller, politik-
 * oversigter, sammenligninger). Left-aligned, dividers + subtle zebra.
 * Self-contained media query by design (precedent: 4.3b, 4.13).
 */
.c-prose table {
  width: 100%;
  margin: var(--s5) 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.c-prose thead th {
  padding: var(--s3) var(--s4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--border-strong);
}
.c-prose tbody td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border-faint);
  vertical-align: top;
  color: var(--text-muted);
}
.c-prose tbody tr:last-child td { border-bottom: 0; }
.c-prose tbody tr:nth-child(odd) td { background: rgba(255 255 255 / .02); }
.c-prose td code { white-space: nowrap; }
.c-prose td:first-child { color: var(--text); }

/* Narrow viewports: let wide tables scroll instead of crushing columns */


/* =========================================================
   6. UTILITIES
   .u-* classes = single-purpose helpers. Use sparingly;
   prefer composable components. Never apply to elements
   with semantic component classes that already handle layout.
========================================================= */

.u-text-muted   { color: var(--text-muted); }
.u-text-subtle  { color: var(--text-subtle); }
.u-text-faint   { color: var(--text-faint); }
.u-text-center  { text-align: center; }
.u-text-balance { text-wrap: balance; }
.u-text-pretty  { text-wrap: pretty; }

/**
 * u-clamp-3 — clip text to 3 lines with ellipsis.
 * Used on card excerpts (TL;DR in c-related__card) so grid rows
 * stay even regardless of excerpt length.
 */
.u-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/**
 * u-clamp-2 — clip text to 2 lines with ellipsis.
 * Used on CVE titles in the Indsigter megamenu feed so long Danish
 * vulnerability titles stay tidy in the narrow column.
 */
.u-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.u-font-mono { font-family: var(--font-mono); }

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.u-mb-0 { margin-bottom: 0; }
.u-mt-0 { margin-top: 0; }

.u-flow > * + *        { margin-top: var(--s4); }
.u-flow--tight > * + * { margin-top: var(--s2); }
.u-flow--loose > * + * { margin-top: var(--s6); }

.u-no-overflow { overflow: hidden; }

/**
 * u-depth — inset highlight on the top edge plus a deep shadow below.
 * This is what makes a panel sit ON the background rather than IN it.
 * A border alone keeps everything on one plane.
 */
.u-depth {
  box-shadow:
    0 1px 0 rgba(255 255 255 / .06) inset,
    0 28px 70px -28px rgba(0 0 0 / .8),
    0 2px 8px rgba(0 0 0 / .3);
}
.u-depth--lift {
  box-shadow:
    0 1px 0 rgba(255 255 255 / .08) inset,
    0 48px 110px -34px rgba(0 0 0 / .9),
    0 4px 14px rgba(0 0 0 / .4);
}

/**
 * u-reveal — glider op og toner ind ved scroll.
 *
 * Sluttilstanden er standard. .is-anim saettes af JavaScript lige foer
 * elementet observeres, og er den eneste maade det kan starte skjult.
 * Uden JavaScript, eller ved prefers-reduced-motion, ses indholdet
 * med det samme. Se v9.32.
 */
.u-reveal {
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
              transform 1s cubic-bezier(.16, 1, .3, 1);
}
.u-reveal.is-anim { opacity: 0; transform: translateY(28px); }
.u-reveal.is-anim.is-inview { opacity: 1; transform: none; }


/* =========================================================
   7. AMELIA BOOKING (third-party — preserved as-is)
   The Amelia v2 booking widget injects inline custom
   properties on the wrapper, requiring high-specificity
   overrides to apply Auroa branding. Do NOT refactor this
   section without testing all 3 booking steps end-to-end.
========================================================= */

.amelia-v2-booking,
.amelia-v2-booking * { box-sizing: border-box; }

.amelia-v2-booking {
  --am-c-primary: #2f53d3 !important;
  --am-c-success: #2f53d3 !important;
  --am-c-error: #b4190f !important;
  --am-c-warning: #cca20c !important;

  --am-c-main-bgr: rgba(15 23 42 / .18) !important;
  --am-c-main-heading-text: #f8fafc !important;
  --am-c-main-text: rgba(248 250 252 / .80) !important;

  --am-c-sb-bgr: rgba(37 67 170 / .48) !important;
  --am-c-sb-text: #f8fafc !important;

  --am-c-inp-bgr: rgba(255 255 255 / .045) !important;
  --am-c-inp-border: rgba(255 255 255 / .09) !important;
  --am-c-inp-text: #f8fafc !important;
  --am-c-inp-placeholder: rgba(248 250 252 / .42) !important;

  --am-c-drop-bgr: rgba(15 23 42 / .96) !important;
  --am-c-drop-text: #f8fafc !important;

  --am-c-btn-prim: #2f53d3 !important;
  --am-c-btn-prim-text: #ffffff !important;
  --am-c-btn-sec: rgba(255 255 255 / .05) !important;
  --am-c-btn-sec-text: #f8fafc !important;

  --am-brad-main: 0 !important;
  --am-font-family: Inter, system-ui, sans-serif !important;

  /* Shared field tokens for Amelia internal reuse */
  --auroa-field-bg:          rgba(255 255 255 / .045);
  --auroa-field-border:      rgba(255 255 255 / .09);
  --auroa-field-text:        #f8fafc;
  --auroa-field-placeholder: rgba(248 250 252 / .42);
}

/* Outer wrapper — Amelia sets inline lights on #amelia-container.
   ID selector wins over inline custom properties. */
#amelia-container.am-fs__wrapper {
  --am-c-main-bgr:          rgba(15 23 42 / .18) !important;
  --am-c-main-heading-text: #f8fafc !important;
  --am-c-main-text:         rgba(248 250 252 / .80) !important;
  --am-c-inp-bgr:           rgba(255 255 255 / .045) !important;
  --am-c-inp-border:        rgba(255 255 255 / .09) !important;
  --am-c-inp-text:          #f8fafc !important;
  --am-c-inp-placeholder:   rgba(248 250 252 / .42) !important;
  --am-c-drop-bgr:          rgba(15 23 42 / .98) !important;
  --am-c-drop-text:         #f8fafc !important;
  --am-c-btn-prim:          rgba(47 83 211 / .42) !important;
  --am-c-btn-prim-text:     #ffffff !important;
  --am-font-family:         Inter, system-ui, sans-serif !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  max-width: 100% !important;
}

.amelia-v2-booking .am-fs-sb,
.amelia-v2-booking .am-fs__main,
.amelia-v2-booking .am-fs__main-inner,
.amelia-v2-booking .am-fs__main-content,
.amelia-v2-booking .am-fs-dt__calendar,
.amelia-v2-booking .am-advsc__wrapper,
.amelia-v2-booking .am-slide-popup__block-inner {
  box-shadow: none !important;
}

/* Left sidebar */
.amelia-v2-booking .am-fs-sb {
  background: linear-gradient(
    180deg,
    rgba(47 83 211 / .36) 0%,
    rgba(29 58 156 / .42) 100%
  ) !important;
  border-right: 1px solid rgba(255 255 255 / .05) !important;
}
.amelia-v2-booking .am-fs-sb__step,
.amelia-v2-booking .am-fs-sb__footer,
.amelia-v2-booking .am-fs-sb__support {
  border-color: rgba(255 255 255 / .06) !important;
}
.amelia-v2-booking .am-fs-sb__step-heading,
.amelia-v2-booking .am-fs-sb__support-heading,
.amelia-v2-booking .am-fs-sb__support-email,
.amelia-v2-booking .am-fs-sb__menu-text,
.amelia-v2-booking .am-fs-sb__step-selection,
.amelia-v2-booking .am-fs-sb__step-selection span,
.amelia-v2-booking .am-fs-sb-cs p,
.amelia-v2-booking .am-fs-sb-cs span,
.amelia-v2-booking .am-fs-sb-cs-cals-card p {
  color: #f8fafc !important;
}
.amelia-v2-booking .am-fs-sb__step-selection__wrapper,
.amelia-v2-booking .am-fs-sb__step-selection__wrapper * {
  color: rgba(248 250 252 / .72) !important;
}

/* Sidebar checker / progress dots */
.amelia-v2-booking .am-fs-sb__step-checker,
.amelia-v2-booking .am-fs-sb__step-checker div,
.amelia-v2-booking .am-fs-sb__step-checker span {
  background: rgba(255 255 255 / .10) !important;
  border-color: rgba(255 255 255 / .14) !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-fs-sb__step-checker-selected,
.amelia-v2-booking .am-fs-sb__step-checker-selected div,
.amelia-v2-booking .am-fs-sb__step-checker-selected span {
  background: rgba(47 83 211 / .65) !important;
  border-color: rgba(47 83 211 / .75) !important;
}
.amelia-v2-booking .am-icon-check { color: #ffffff !important; }

/* Add-to-calendar */
.amelia-v2-booking .am-fs-sb-cs,
.amelia-v2-booking .am-fs-sb-cs-cals,
.amelia-v2-booking .am-fs-sb-cs-cals-cards { background: transparent !important; }
.amelia-v2-booking .am-fs-sb-cs-cals-card {
  background: rgba(255 255 255 / .03) !important;
  border: 1px solid rgba(255 255 255 / .10) !important;
}

/* Right main content */
.amelia-v2-booking .am-fs__main { background: rgba(15 23 42 / .10) !important; }
.amelia-v2-booking .am-fs__main-inner,
.amelia-v2-booking .am-fs__main-content,
.amelia-v2-booking .am-fs-dt__calendar,
.amelia-v2-booking .am-advsc__wrapper,
.amelia-v2-booking .am-fs__info,
.amelia-v2-booking .am-fs__info > div,
.amelia-v2-booking .am-fs__info-form,
.amelia-v2-booking .el-form,
.amelia-v2-booking .el-form-item,
.amelia-v2-booking .el-form-item__content,
.amelia-v2-booking .am-fs__info-form__item,
.amelia-v2-booking .am-fs__payment_default {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-fs__main-heading,
.amelia-v2-booking .am-fs__main-footer {
  background: transparent !important;
  border-color: rgba(255 255 255 / .06) !important;
}
.amelia-v2-booking .am-fs__main-heading {
  border-bottom: 1px solid rgba(255 255 255 / .08) !important;
}
.amelia-v2-booking .am-fs__main-heading-inner-title,
.amelia-v2-booking .fc-col-header-cell-cushion,
.amelia-v2-booking .fc-daygrid-day-number { color: #f8fafc !important; }

/* Labels */
.amelia-v2-booking .el-form-item__label,
.amelia-v2-booking .am-fs__info-form__label { color: rgba(248 250 252 / .86) !important; }

/* Inputs / textarea / select — neutral outer wrappers */
.amelia-v2-booking .am-input-wrapper,
.amelia-v2-booking .am-input-phone-wrapper,
.amelia-v2-booking .m-phone-number-input,
.amelia-v2-booking .m-phone-number-input__select,
.amelia-v2-booking .m-input,
.amelia-v2-booking .m-input-wrapper-input,
.amelia-v2-booking .el-input,
.amelia-v2-booking .el-textarea {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Dark field surface — hardcoded so inline custom properties don't win */
.amelia-v2-booking .el-input__wrapper,
.amelia-v2-booking .el-textarea__inner,
.amelia-v2-booking .el-select__wrapper,
.amelia-v2-booking .m-phone-number-input__select .m-input-wrapper,
.amelia-v2-booking .m-phone-number-input__input .m-input-wrapper,
.amelia-v2-booking .m-select .m-input-wrapper,
.amelia-v2-booking .m-select-input .m-input-wrapper {
  background: rgba(255 255 255 / .045) !important;
  border: 1px solid rgba(255 255 255 / .09) !important;
  box-shadow: none !important;
}

/* Country flag button */
.amelia-v2-booking .m-phone-number-input__country-flag {
  background: rgba(255 255 255 / .045) !important;
  border: 1px solid rgba(255 255 255 / .09) !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* Safari/iOS autofill yellow highlight — inset shadow trick */
.amelia-v2-booking input:-webkit-autofill,
.amelia-v2-booking input:-webkit-autofill:hover,
.amelia-v2-booking input:-webkit-autofill:focus,
.amelia-v2-booking input:-webkit-autofill:active,
.amelia-v2-booking textarea:-webkit-autofill,
.amelia-v2-booking textarea:-webkit-autofill:hover,
.amelia-v2-booking textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(15 23 42 / .92) inset !important;
  box-shadow: 0 0 0 1000px rgba(15 23 42 / .92) inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc !important;
  border-color: var(--auroa-field-border) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Text */
.amelia-v2-booking .el-input__inner,
.amelia-v2-booking .el-textarea__inner,
.amelia-v2-booking .el-select__input,
.amelia-v2-booking .m-input-input,
.amelia-v2-booking input,
.amelia-v2-booking textarea {
  background: transparent !important;
  color: var(--auroa-field-text) !important;
  -webkit-text-fill-color: var(--auroa-field-text) !important;
}

/* Placeholders */
.amelia-v2-booking .el-input__inner::placeholder,
.amelia-v2-booking .el-textarea__inner::placeholder,
.amelia-v2-booking .m-input-input::placeholder,
.amelia-v2-booking input::placeholder,
.amelia-v2-booking textarea::placeholder {
  color: var(--auroa-field-placeholder) !important;
  -webkit-text-fill-color: var(--auroa-field-placeholder) !important;
}

/* Select */
.amelia-v2-booking .el-select,
.amelia-v2-booking .el-select *,
.amelia-v2-booking .am-select,
.amelia-v2-booking .am-select * { color: var(--auroa-field-text) !important; }

.amelia-v2-booking .el-select__selected-item,
.amelia-v2-booking .el-select__placeholder,
.amelia-v2-booking .el-select__input,
.amelia-v2-booking .el-select__caret,
.amelia-v2-booking .el-select__icon,
.amelia-v2-booking .am-select .el-select__selected-item span,
.amelia-v2-booking .am-select .el-select__placeholder span {
  color: var(--auroa-field-text) !important;
  -webkit-text-fill-color: var(--auroa-field-text) !important;
}

/* Dropdown popup — Vue mounts el-popper outside .amelia-v2-booking
   directly in <body>. Use body-scoped + attribute selectors. */
body > .el-popper,
body > .el-select-dropdown,
.el-popper.is-light,
.el-popper[data-popper-placement],
.el-select-dropdown {
  background: rgba(15 23 42 / .98) !important;
  border: 1px solid rgba(255 255 255 / .10) !important;
  color: #f8fafc !important;
  --el-bg-color-overlay: rgba(15 23 42 / .98) !important;
  --el-text-color-regular: #f8fafc !important;
  --el-border-color-light: rgba(255 255 255 / .10) !important;
}
body > .el-popper .el-scrollbar,
body > .el-popper .el-select-dropdown__list { background: transparent !important; }
.el-select-dropdown__item { color: #f8fafc !important; background: transparent !important; }
.el-select-dropdown__item span { color: #f8fafc !important; }
.el-select-dropdown__item.is-hovering,
.el-select-dropdown__item:hover {
  background: rgba(47 83 211 / .20) !important;
  color: #ffffff !important;
}
.el-select-dropdown__item.is-selected,
.el-select-dropdown__item.selected {
  background: rgba(47 83 211 / .30) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Amelia custom-field selects — virksomhedsstørrelse / interesse (step 2).
   v9.17: Blåtonet surface så dropdownen matcher sidens glass-udtryk
   (megamenu-panel/kort) i stedet for flad grå. Overstyrer også Amelias
   inline --am-c-drop-* vars direkte på popperen — de vandt over v9.16's
   surface-regler og gav den grå fallback.
   ⚠ VERIFY i DevTools: hvis den stadig er grå, matcher .el-select__popper
   ikke i denne Amelia-version — inspicér popper-roden og tilføj dens
   faktiske klasse som selektor (præcedens: v9.11 cascader-heading). */
.el-popper.el-select__popper,
.el-select__popper.el-popper {
  --am-c-drop-bgr: transparent !important;
  --am-c-drop-text: #f8fafc !important;
  --am-c-option-bgr: transparent !important;
  --am-c-option-text: #f8fafc !important;
  --el-bg-color-overlay: transparent !important;
  --el-text-color-regular: #f8fafc !important;
  --el-border-color-light: rgba(47 107 255 / .28) !important;
  --el-fill-color-light: rgba(47 107 255 / .16) !important;
  background:
    radial-gradient(320px 140px at 12% 0%, rgba(47 107 255 / .16), transparent 60%),
    radial-gradient(260px 140px at 100% 0%, rgba(0 211 167 / .08), transparent 55%),
    linear-gradient(180deg, rgba(21 32 60 / .98), rgba(15 23 42 / .98)) !important;
  border: 1px solid rgba(47 107 255 / .28) !important;
  border-radius: var(--r-lg) !important;
  color: #f8fafc !important;
  box-shadow: var(--shadow), 0 0 24px rgba(47 107 255 / .10) !important;
  overflow: hidden;
}

/* Popper-pil — matcher den blåtonede kant */
.el-popper.el-select__popper .el-popper__arrow::before {
  background: rgba(21 32 60 / .98) !important;
  border-color: rgba(47 107 255 / .28) !important;
}

/* Indre wrappers transparente så gradienten skinner igennem */
.el-select__popper .el-scrollbar,
.el-select__popper .el-scrollbar__view,
.el-select-dropdown__wrap,
.el-select-dropdown__list {
  background: transparent !important;
}

/* Scrollbar-thumb — matcher dark surface */
.el-select__popper .el-scrollbar__thumb {
  background: rgba(255 255 255 / .16) !important;
  border-radius: var(--r-pill) !important;
}

/* Items — blå hover/valgt i sidens accentfarve (--accent #2F6BFF),
   ikke Amelias mørkere 2f53d3, så det matcher megamenu-links */
.el-select-dropdown__item.am-select-option {
  --am-c-option-bgr: transparent !important;
  --am-c-option-text: rgba(234 240 255 / .82) !important;
  color: rgba(234 240 255 / .82) !important;
  background: transparent !important;
  border-radius: var(--r-md);
  margin-inline: var(--s2);
  transition: background var(--t-fast), color var(--t-fast);
}
.el-select-dropdown__item.am-select-option span {
  color: inherit !important;
}
.el-select-dropdown__item.am-select-option.is-hovering,
.el-select-dropdown__item.am-select-option:hover {
  --am-c-option-bgr: rgba(47 107 255 / .16) !important;
  --am-c-option-text: #ffffff !important;
  background: rgba(47 107 255 / .16) !important;
  color: #ffffff !important;
}
.el-select-dropdown__item.am-select-option.is-selected {
  --am-c-option-bgr: rgba(47 107 255 / .28) !important;
  --am-c-option-text: #ffffff !important;
  background: linear-gradient(180deg, rgba(47 107 255 / .34), rgba(47 107 255 / .20)) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.el-select-dropdown__item.am-select-option.is-disabled {
  --am-c-option-bgr: transparent !important;
  --am-c-option-text: rgba(248 250 252 / .28) !important;
  color: rgba(248 250 252 / .28) !important;
  background: transparent !important;
}

/* Fang også vars sat på mellemliggende wrappers (dropdown/list) */
.el-select-dropdown,
.el-select-dropdown__list,
.el-select__popper .el-scrollbar {
  --am-c-option-bgr: transparent !important;
  --am-c-option-text: #f8fafc !important;
}

/* Custom-field select TRIGGERS (step 2) — Amelia sætter lyse inline
   --am-c-select-* vars på .el-select.am-select i info-formularen
   (bekræftet i DevTools: rgb(255,255,255) bgr, rgb(15,23,42) tekst).
   v9.18: overstyr vars'ene direkte (præcedens: v9.7's step 1-regel,
   som var scoped til .am-advsc__header og derfor ikke ramte disse). */
.amelia-v2-booking .am-select-wrapper .el-select.am-select,
.amelia-v2-booking .am-fs__info .el-select.am-select {
  --am-c-select-bgr:         var(--auroa-field-bg) !important;
  --am-c-select-border:      var(--auroa-field-border) !important;
  --am-c-select-text:        var(--auroa-field-text) !important;
  --am-c-select-placeholder: var(--auroa-field-placeholder) !important;
  --am-c-select-shadow:      transparent !important;
  --am-c-select-text-op60:   rgba(248 250 252 / .60) !important;
  --am-c-select-text-op50:   rgba(248 250 252 / .50) !important;
  --am-c-select-text-op40:   rgba(248 250 252 / .40) !important;
  --am-c-select-text-op03:   rgba(248 250 252 / .03) !important;
  --am-c-select-text-op06:   rgba(248 250 252 / .06) !important;
  --am-font-family:          Inter, system-ui, sans-serif !important;
}

/* Trigger-feltets surface — matcher øvrige Auroa-felter, blå fokusring */
.amelia-v2-booking .am-select-wrapper .el-select__wrapper {
  background: var(--auroa-field-bg) !important;
  border: 1px solid var(--auroa-field-border) !important;
  box-shadow: none !important;
  transition: border-color var(--t), box-shadow var(--t);
}
.amelia-v2-booking .am-select-wrapper .el-select__wrapper.is-focused,
.amelia-v2-booking .am-select-wrapper .el-select__wrapper:focus-within {
  border-color: rgba(47 107 255 / .55) !important;
  box-shadow: 0 0 0 3px rgba(47 107 255 / .18) !important;
}

/* Valgt værdi lys, placeholder ("Vælg") dæmpet */
.amelia-v2-booking .am-select-wrapper .el-select__selected-item,
.amelia-v2-booking .am-select-wrapper .el-select__selected-item span {
  color: var(--auroa-field-text) !important;
  -webkit-text-fill-color: var(--auroa-field-text) !important;
}
.amelia-v2-booking .am-select-wrapper .el-select__placeholder,
.amelia-v2-booking .am-select-wrapper .el-select__placeholder span,
.amelia-v2-booking .am-select-wrapper .el-select__placeholder.is-transparent span {
  color: var(--auroa-field-placeholder) !important;
  -webkit-text-fill-color: var(--auroa-field-placeholder) !important;
}

/* Caret-pil (am-icon-arrow-down) — dæmpet lys i stedet for mørk */
.amelia-v2-booking .am-select-wrapper .el-select__caret,
.amelia-v2-booking .am-select-wrapper .el-select__icon,
.amelia-v2-booking .am-select-wrapper .am-icon-arrow-down {
  color: rgba(248 250 252 / .60) !important;
}

/* Phone field */
.amelia-v2-booking .m-select-input,
.amelia-v2-booking .m-select-input input,
.amelia-v2-booking .m-phone-number-input__select input,
.amelia-v2-booking .m-phone-number-input__input input {
  color: var(--auroa-field-text) !important;
  -webkit-text-fill-color: var(--auroa-field-text) !important;
  background: transparent !important;
}
.amelia-v2-booking .m-phone-number-input__country-flag {
  background: var(--auroa-field-bg) !important;
  border: 1px solid var(--auroa-field-border) !important;
  border-right: 0 !important;
}

/* Buttons — Amelia injects --am-c-btn-first inline; override directly */
.amelia-v2-booking .am-button {
  --am-c-btn-first: rgba(47 83 211 / 0) !important;
  --am-c-btn-second: #ffffff !important;
  --am-c-btn-first-op80: rgba(47 83 211 / 0) !important;
  --am-c-btn-first-op30: rgba(47 83 211 / 0) !important;
  --am-c-btn-first-op20: rgba(47 83 211 / 0) !important;
}
.amelia-v2-booking .am-button.am-button--primary {
  background: linear-gradient(180deg, rgba(47 83 211 / .52), rgba(47 83 211 / .34)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(47 83 211 / .58) !important;
  box-shadow: 0 10px 24px rgba(47 83 211 / .18), inset 0 0 0 1px rgba(255 255 255 / .03) !important;
}
.amelia-v2-booking .am-button.am-button--primary:hover {
  background: linear-gradient(180deg, rgba(47 83 211 / .62), rgba(47 83 211 / .44)) !important;
  border-color: rgba(47 83 211 / .72) !important;
}
.amelia-v2-booking .am-button.am-button--secondary,
.amelia-v2-booking .am-button.am-button--plain {
  background: rgba(255 255 255 / .05) !important;
  border: 1px solid rgba(255 255 255 / .08) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-button.is-disabled,
.amelia-v2-booking .am-button:disabled {
  background: rgba(255 255 255 / .06) !important;
  color: rgba(248 250 252 / .28) !important;
  border-color: rgba(255 255 255 / .04) !important;
  box-shadow: none !important;
}

/* Calendar */
.amelia-v2-booking .fc,
.amelia-v2-booking .fc-scrollgrid,
.amelia-v2-booking .fc-theme-standard td,
.amelia-v2-booking .fc-theme-standard th {
  background: transparent !important;
  border-color: rgba(255 255 255 / .05) !important;
}
.amelia-v2-booking .am-advsc__dayGridMonth-cell[role="button"] .fc-daygrid-day-frame {
  background: rgba(255 255 255 / .02) !important;
  border-radius: var(--r-md) !important;
}
.amelia-v2-booking .am-advsc__dayGridMonth-disabled { opacity: 0.30 !important; }
.amelia-v2-booking .fc-daygrid-day.fc-day-selected .fc-daygrid-day-frame,
.amelia-v2-booking .fc-daygrid-day.fc-day-selected .fc-daygrid-day-number,
.amelia-v2-booking .fc-daygrid-day.fc-day-selected {
  background: rgba(47 83 211 / .18) !important;
  color: #ffffff !important;
}

/* Timeslots */
.amelia-v2-booking .am-timeslot,
.amelia-v2-booking .am-time-slot,
.amelia-v2-booking [class*="timeslot"] button,
.amelia-v2-booking [class*="slot"] button {
  background: rgba(255 255 255 / .04) !important;
  border: 1px solid rgba(255 255 255 / .08) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

/* Step 1 month/year dropdowns */
.amelia-v2-booking .am-advsc__header .el-select.am-select {
  --am-c-select-bgr:         rgba(255 255 255 / .045) !important;
  --am-c-select-border:      rgba(255 255 255 / .09) !important;
  --am-c-select-text:        #f8fafc !important;
  --am-c-select-placeholder: rgba(248 250 252 / .42) !important;
  --am-c-select-shadow:      transparent !important;
  --am-c-select-text-op60:   rgba(248 250 252 / .60) !important;
  --am-c-select-text-op50:   rgba(248 250 252 / .50) !important;
  --am-c-select-text-op40:   rgba(248 250 252 / .40) !important;
  --am-c-select-text-op03:   rgba(248 250 252 / .03) !important;
  --am-c-select-text-op06:   rgba(248 250 252 / .06) !important;
}
.amelia-v2-booking .am-advsc__header .el-select__wrapper {
  background: var(--auroa-field-bg) !important;
  border: 1px solid var(--auroa-field-border) !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-advsc__header .el-select__selection,
.amelia-v2-booking .am-advsc__header .el-select__selected-item,
.amelia-v2-booking .am-advsc__header .el-select__placeholder,
.amelia-v2-booking .am-advsc__header .el-select__placeholder span,
.amelia-v2-booking .am-advsc__header .el-select__selected-item span,
.amelia-v2-booking .am-advsc__header .el-select__input,
.amelia-v2-booking .am-advsc__header .el-select__caret,
.amelia-v2-booking .am-advsc__header .el-select__icon {
  color: var(--auroa-field-text) !important;
  -webkit-text-fill-color: var(--auroa-field-text) !important;
}
.amelia-v2-booking .am-advsc__slots-heading,
.amelia-v2-booking .am-advsc__time-zone span,
.amelia-v2-booking .am-advsc__duration,
.amelia-v2-booking .am-advsc__header,
.amelia-v2-booking .am-advsc__header * { color: #f8fafc !important; }
.amelia-v2-booking .am-advsc__slots-item {
  background: var(--auroa-field-bg) !important;
  border: 1px solid var(--auroa-field-border) !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-advsc__slots-item__inner { color: #f8fafc !important; }
.amelia-v2-booking .am-advsc__slots-item__selected {
  background: rgba(47 83 211 / .24) !important;
  border-color: rgba(61 99 234 / .55) !important;
}

/* Step 2 info form */
.amelia-v2-booking .am-fs__info .am-input-wrapper,
.amelia-v2-booking .am-fs__info .am-input-phone-wrapper,
.amelia-v2-booking .am-fs__info .el-input,
.amelia-v2-booking .am-fs__info .el-textarea,
.amelia-v2-booking .am-fs__info .m-input,
.amelia-v2-booking .am-fs__info .m-select,
.amelia-v2-booking .am-fs__info .m-phone-number-input,
.amelia-v2-booking .am-fs__info .m-phone-number-input__select,
.amelia-v2-booking .am-fs__info .m-phone-number-input__input,
.amelia-v2-booking .am-fs__info .el-form-item__content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-fs__info .el-input__wrapper,
.amelia-v2-booking .am-fs__info .el-textarea__inner,
.amelia-v2-booking .am-fs__info .m-input-wrapper,
.amelia-v2-booking .am-fs__info .m-phone-number-input__country-flag,
.amelia-v2-booking .am-fs__info .m-phone-number-input__select .m-input-wrapper,
.amelia-v2-booking .am-fs__info .m-phone-number-input__input .m-input-wrapper,
.amelia-v2-booking .am-fs__info .m-select-input .m-input-wrapper {
  background: rgba(255 255 255 / .045) !important;
  border: 1px solid rgba(255 255 255 / .09) !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-fs__info .el-form-item__label,
.amelia-v2-booking .am-fs__info .am-fs__info-form__label { color: rgba(248 250 252 / .88) !important; }
.amelia-v2-booking .am-fs__info .el-input__inner,
.amelia-v2-booking .am-fs__info .el-textarea__inner,
.amelia-v2-booking .am-fs__info .m-input-input,
.amelia-v2-booking .am-fs__info input,
.amelia-v2-booking .am-fs__info textarea {
  background: transparent !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
.amelia-v2-booking .am-fs__info .el-input__inner::placeholder,
.amelia-v2-booking .am-fs__info .el-textarea__inner::placeholder,
.amelia-v2-booking .am-fs__info .m-input-input::placeholder,
.amelia-v2-booking .am-fs__info input::placeholder,
.amelia-v2-booking .am-fs__info textarea::placeholder {
  color: rgba(248 250 252 / .42) !important;
  -webkit-text-fill-color: rgba(248 250 252 / .42) !important;
}
.amelia-v2-booking .am-fs__info .m-input-label { color: rgba(248 250 252 / .42) !important; }
.amelia-v2-booking .am-fs__info .m-select-input,
.amelia-v2-booking .am-fs__info .m-select-input input,
.amelia-v2-booking .am-fs__info .m-phone-number-input__select input,
.amelia-v2-booking .am-fs__info .m-phone-number-input__input input,
.amelia-v2-booking .am-fs__info .m-select-chevron {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

/* Step 3 booking confirmation */
.amelia-v2-booking .am-fs__congrats {
  --am-c-atc-text:              rgba(248 250 252 / .78) !important;
  --am-c-atc-heading-text:      #f8fafc !important;
  --am-c-atc-text-op40:         rgba(248 250 252 / .40) !important;
  --am-c-atc-heading-text-op40: rgba(248 250 252 / .40) !important;
  --am-c-atc-text-op30:         rgba(248 250 252 / .30) !important;
}
.amelia-v2-booking .am-fs__congrats,
.amelia-v2-booking .am-fs__congrats-main,
.amelia-v2-booking .am-fs__congrats-info,
.amelia-v2-booking .am-fs__congrats-info-customer {
  background: transparent !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-fs__congrats-main-heading { color: #f8fafc !important; }
.amelia-v2-booking .am-fs__congrats-main > span  { color: rgba(248 250 252 / .68) !important; }
.amelia-v2-booking .am-fs__congrats-info-app-date,
.amelia-v2-booking .am-fs__congrats-info-app-time,
.amelia-v2-booking .am-fs__congrats-info-app-service,
.amelia-v2-booking .am-fs__congrats-info-app-employee,
.amelia-v2-booking .am-fs__congrats-info-customer-name,
.amelia-v2-booking .am-fs__congrats-info-customer-email,
.amelia-v2-booking .am-fs__congrats-info-customer-phone {
  background: transparent !important;
  border-color: rgba(255 255 255 / .08) !important;
  box-shadow: none !important;
}
.amelia-v2-booking .am-fs__congrats-info-customer,
.amelia-v2-booking .am-fs__congrats-info-customer-border {
  border-top: 1px solid rgba(255 255 255 / .08) !important;
}
.amelia-v2-booking .am-fs__congrats-info-app-date > span:first-child,
.amelia-v2-booking .am-fs__congrats-info-app-time > span:first-child,
.amelia-v2-booking .am-fs__congrats-info-app-service > span:first-child,
.amelia-v2-booking .am-fs__congrats-info-app-employee > span:first-child,
.amelia-v2-booking .am-fs__congrats-info-customer-name > span:first-child,
.amelia-v2-booking .am-fs__congrats-info-customer-email > span:first-child,
.amelia-v2-booking .am-fs__congrats-info-customer-phone > span:first-child {
  color: rgba(248 250 252 / .62) !important;
}
.amelia-v2-booking .am-fs__congrats-info-app-date > span:last-child,
.amelia-v2-booking .am-fs__congrats-info-app-time > span:last-child,
.amelia-v2-booking .am-fs__congrats-info-app-service > span:last-child,
.amelia-v2-booking .am-fs__congrats-info-app-employee > span:last-child,
.amelia-v2-booking .am-fs__congrats-info-customer-name > span:last-child,
.amelia-v2-booking .am-fs__congrats-info-customer-email > span:last-child,
.amelia-v2-booking .am-fs__congrats-info-customer-phone > span:last-child {
  color: #f8fafc !important;
  font-weight: 500 !important;
}

/* Sidebar calendar card on step 3 */
.amelia-v2-booking .am-fs-sb-cs,
.amelia-v2-booking .am-fs-sb-cs p,
.amelia-v2-booking .am-fs-sb-cs span,
.amelia-v2-booking .am-fs-sb-cs-cals-card p { color: #f8fafc !important; }

/* Ensure broad input rules don't bleed into step 3 */
.amelia-v2-booking .am-fs__congrats .el-input__wrapper,
.amelia-v2-booking .am-fs__congrats .m-input-wrapper,
.amelia-v2-booking .am-fs__congrats .el-textarea__inner {
  background: transparent !important;
  border: 0 !important;
}

/* Popup / packages */
.amelia-v2-booking .am-slide-popup__block,
.amelia-v2-booking .am-slide-popup__block-inner {
  background: rgba(15 23 42 / .88) !important;
  color: #f8fafc !important;
}

/* Skeleton loading state */
.amelia-v2-booking .el-skeleton,
.amelia-v2-booking .am-skeleton-payment,
.amelia-v2-booking .el-skeleton__item {
  background-image: none !important;
  background-color: rgba(255 255 255 / .06) !important;
}

/* Service cascader (el-cascader) — kategori → service picker.
   v9.7: Vue mounts the cascader popper in <body>, so body-scoped like
   the el-select dropdown above. Default Element Plus renders it light;
   these rules bring it onto the dark surface. */
body > .el-popper.el-cascader__dropdown,
.el-cascader__dropdown,
.el-cascader-menus,
.el-cascader-panel {
  background: rgba(15 23 42 / .98) !important;
  border: 1px solid rgba(255 255 255 / .10) !important;
  color: #f8fafc !important;
  box-shadow: var(--shadow) !important;
  --el-bg-color-overlay: rgba(15 23 42 / .98) !important;
  --el-text-color-regular: #f8fafc !important;
  --el-border-color-light: rgba(255 255 255 / .10) !important;
  --el-fill-color-light: rgba(47 83 211 / .18) !important;
}
.el-cascader-menu { border-right: 1px solid rgba(255 255 255 / .08) !important; }
.el-cascader-menu:last-child { border-right: 0 !important; }
.el-cascader-menu__wrap,
.el-cascader-menu__list { background: transparent !important; }
.el-cascader-node {
  color: #f8fafc !important;
  background: transparent !important;
}
.el-cascader-node:hover,
.el-cascader-node:focus {
  background: rgba(47 83 211 / .18) !important;
}
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node[aria-checked="true"] {
  background: rgba(47 83 211 / .28) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}
.el-cascader-node__label { color: inherit !important; }
.el-cascader-node__postfix,
.el-cascader-node .el-icon { color: rgba(248 250 252 / .56) !important; }
/* Amelia's inner service item inside each node */
.el-cascader-node .am-adv-select__item,
.el-cascader-node .am-adv-select__item-label,
.el-cascader-node .am-adv-select__item-quantity {
  color: inherit !important;
}
.el-cascader-node .am-adv-select__item-quantity { color: rgba(248 250 252 / .56) !important; }

/* Cascader trigger field (the "Vælg Service" closed input) */
.amelia-v2-booking .el-cascader,
.amelia-v2-booking .el-cascader .el-input__wrapper {
  background: var(--auroa-field-bg) !important;
  border: 1px solid var(--auroa-field-border) !important;
  box-shadow: none !important;
}
.amelia-v2-booking .el-cascader .el-input__inner,
.amelia-v2-booking .el-cascader .el-input__inner::placeholder {
  color: var(--auroa-field-text) !important;
  -webkit-text-fill-color: var(--auroa-field-text) !important;
}

/* Cascader header row ("Kategori" / "Service") — confirmed class is
   .am-adv-select__popper-heading. v9.11: it sets its own inline custom
   props for dark-text-on-light, so we override those vars too, not just
   the surface. Styled to match .c-megamenu__title (quiet uppercase). */
.am-adv-select__popper-heading {
  --am-c-advs-item-heading-op65: var(--text-subtle) !important;
  --am-c-advs-shadow: transparent !important;
  background: rgba(255 255 255 / .03) !important;
  color: var(--text-subtle) !important;
  border-bottom: 1px solid rgba(255 255 255 / .08) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.am-adv-select__popper-heading * { color: inherit !important; }

/* Scrollbar */
.amelia-v2-booking ::-webkit-scrollbar       { width: 10px; }
.amelia-v2-booking ::-webkit-scrollbar-track { background: rgba(255 255 255 / .03); }
.amelia-v2-booking ::-webkit-scrollbar-thumb {
  background: rgba(255 255 255 / .16);
  border-radius: var(--r-pill);
}


/* 4.22 Viden — enkeltartikel -------------------------------------------- */

/**
 * Komponenter til single-viden. Artiklen laeses forfra, saa layoutet er
 * én spalte med et fast maal paa 72ch og en stille kolonne ved siden af
 * til indholdsfortegnelsen. Ingen bokse i broedteksten ud over dem, der
 * baerer indhold der ikke er broedtekst.
 *
 *   1. .l-article      Prosaspalte + sidespalte
 *   2. .c-toc          Indholdsfortegnelse, klaebende paa desktop
 *   3. .c-figure       Diagram med billedtekst
 *   4. .c-callout--me  Vurderingsboks med portraet
 *   5. .c-sources      Kildeliste
 *   6. .c-author       Forfatterkort under artiklen
 */

/**
 * Artikelgitter. Prosaspalten er 72ch og ikke en broekdel af bredden:
 * linjelaengden er det, der afgoer om lang tekst kan laeses, og den maa
 * ikke vokse, fordi skaermen goer.
 */
/**
 * Mobile first: én kolonne, og indholdsfortegnelsen FOER teksten.
 * I DOM-raekkefoelgen staar <aside> efter <article>, fordi den paa
 * desktop hoerer til i sidespalten. Uden order: -1 landede "Paa denne
 * side" 71 % nede paa telefonen, altsaa efter man var faerdig med at
 * laese.
 */
.l-article {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
.l-article > * { min-width: 0; }
.l-article__side { order: -1; }

/* Prosaspalten maa aldrig blive bredere end skaermen. */
.c-article { max-width: min(var(--container-prose), 100%); }
.c-article,
.c-article__body { min-width: 0; }
.c-prose :is(table, pre, img, iframe) { max-width: 100%; }


/**
 * Ankermaal. Uden den lander en overskrift bag den klaebende header,
 * naar man klikker i indholdsfortegnelsen, og afsnittet ser ud til at
 * mangle sin titel.
 */
.c-article__body :is(h2, h3)[id] {
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}

/**
 * Indholdsfortegnelse. Paa desktop en stille kolonne med en enkelt
 * lodret streg — ikke et kort. Et kort ville konkurrere med artiklen
 * om opmaerksomheden, og det er artiklen, folk kom efter.
 *
 * Under lg bliver den et sammenklappeligt felt over teksten, hvor den
 * kan lukkes. En liste paa otte punkter oeverst paa en telefon skubber
 * indholdet under folden.
 */
.c-toc {
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-glass);
}
.c-toc__title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.c-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Tallene kommer fra taelleren, ikke fra <ol>'s egne markoerer:
     de skal staa i mono og i samme farve som resten af sitets tal. */
  counter-reset: toc;
}
.c-toc__item { counter-increment: toc; }
.c-toc__link {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: var(--s2);
  align-items: center;
  min-height: 44px;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: color var(--t-fast);
}
.c-toc__link::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.c-toc__link:hover,
.c-toc__link:focus-visible {
  color: var(--text);
  text-decoration: none;
}
.c-toc__link[aria-current="true"] { color: var(--accent-2); }
.c-toc__link[aria-current="true"]::before { color: var(--accent-2); }


/**
 * Afsnit efter broedteksten — FAQ, kilder. Egen luft, saa de ikke
 * klistrer op ad det sidste afsnit i .c-prose.
 */
.c-article__section {
  margin-top: clamp(var(--s6), 5vw, var(--s7));
}

/**
 * Diagram. Ligger uden for .c-prose, saa den kan bryde prosaspaltens
 * bredde uden at arve afsnitsmargener.
 */
.c-figure {
  margin-block: clamp(var(--s6), 5vw, var(--s7));
}
.c-figure__media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
.c-figure__caption {
  margin: var(--s3) 0 0;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/**
 * Vurderingsboks. Samme ramme som .c-callout, men med portraet, saa det
 * fremgaar at afsnittet er skrevet af et menneske med et navn og ikke
 * er endnu et generisk raad.
 */
.c-callout--me {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: start;
}
.c-callout__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-sunken);
}
.c-callout__by {
  margin: var(--s3) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

/**
 * Kildeliste. Haarfine linjer frem for kort: kilderne skal kunne
 * kontrolleres, ikke klikkes paa som produkter.
 */
.c-sources {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-sources__item {
  padding-block: var(--s3);
  border-top: 1px solid var(--border-faint);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.c-sources__item:first-child {
  padding-top: 0;
  border-top: 0;
}
.c-sources__item cite {
  display: block;
  margin-top: var(--s1);
  font-style: normal;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

/**
 * Forfatterkort. Sidste ting foer laeseren forlader artiklen, og det
 * eneste sted paa siden hvor et ansigt hoerer hjemme.
 */
.c-author {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: clamp(var(--s6), 5vw, var(--s7));
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.c-author__photo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-sunken);
}
.c-author__name {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}
.c-author__role {
  margin: var(--s1) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}


/* 4.23 Bricks-rettelser --------------------------------------------------- */

/**
 * Bricks' frontend.css saetter fire egenskaber direkte paa pre:
 * color: #fc1f49, font-family: monospace, font-size: 13px og margin: 0.
 * Designsystemets pre-regel satte kun baggrund, ramme og polstring, saa
 * de fire slap igennem. Resultatet var roede kodeblokke i systemfont.
 */
pre {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9em;
  margin: 0 0 var(--s5);
}

/**
 * Kodeblokke i prosa ombrydes ikke. En DNS-record eller en SPF-streng
 * hoerer til paa én linje; braekkes den midt i en vaerdi, ligner det en
 * syntaksfejl, og folk kopierer den forkert.
 */
/**
 * Mobile first: koden ombryder som udgangspunkt. Foerst naar der er
 * plads til prosaspalten i fuld bredde, faar den én linje med vandret
 * scroll.
 *
 * Den omvendte raekkefoelge kostede 267 px vandret overloeb paa telefon:
 * white-space: pre goer blokkens mindstebredde lig med hele linjens
 * laengde, og et grid-spor kan ikke skrumpe under sit indhold.
 */
.c-prose pre,
.c-article__body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/**
 * Bricks efterlader et tomt element efter hvert query loop. Staar loopet
 * i en <ul> eller <ol>, er det et tomt listepunkt. Usynligt, men en
 * skaermlaeser taeller det med og siger "5 elementer" om fire.
 */
.brx-query-trail {
  display: none;
}


/* 4.24 Dokumentvifte ------------------------------------------------------ */

/**
 * En stak dokumentsider lagt som en vifte. Klik aabner siden i fuld
 * stoerrelse i en <dialog>.
 *
 * Hvorfor <dialog> og ikke en div med position: fixed:
 * Browseren haandterer selv fokusfaelde, Escape, inert baggrund og
 * top-layer. Det er tre stykker JavaScript, vi slipper for at skrive
 * og vedligeholde, og adfaerden er den, folk kender.
 *
 *   .c-docfan          figuren omkring det hele
 *   .c-docfan__stack   selve viften, alle sider i samme gittercelle
 *   .c-docfan__open    klikfladen, én pr. side
 *   .c-lightbox        <dialog> med den store side
 */

.c-docfan {
  margin: clamp(var(--s6), 5vw, var(--s7)) 0;
}

/* Alle sider ligger i samme celle. Rotationen goer stakken til en vifte. */
.c-docfan__stack {
  display: grid;
  grid-template-areas: "ark";
  place-items: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1.16;
}

.c-docfan__item {
  grid-area: ark;
  width: 52%;
  transition: transform var(--t-med, .28s) ease, filter var(--t-med, .28s) ease;
}

/* Bagest til forrest. Sidste barn ligger oeverst og staar naesten lige.
   Vaerdierne er sat til syv kort. Skifter rapporten sidetal, skal
   spredningen justeres, ellers bliver stakken enten for tynd eller
   for bred. */
.c-docfan__item:nth-child(1) { transform: rotate(-12deg)   translate(-21%, 4%);  filter: brightness(.70); }
.c-docfan__item:nth-child(2) { transform: rotate(-8deg)    translate(-14%, 2.5%); filter: brightness(.77); }
.c-docfan__item:nth-child(3) { transform: rotate(-4deg)    translate(-7%, 1.5%); filter: brightness(.84); }
.c-docfan__item:nth-child(4) { transform: rotate(0deg)     translate(0, 1%);     filter: brightness(.90); }
.c-docfan__item:nth-child(5) { transform: rotate(4deg)     translate(7%, 1.5%);  filter: brightness(.94); }
.c-docfan__item:nth-child(6) { transform: rotate(8deg)     translate(14%, 2.5%); filter: brightness(.97); }
.c-docfan__item:nth-child(7) { transform: rotate(12deg)    translate(21%, 4%); }

/* Viften spreder sig, naar man naermer sig den. */
.c-docfan__stack:hover .c-docfan__item:nth-child(1) { transform: rotate(-19deg) translate(-37%, 5%); }
.c-docfan__stack:hover .c-docfan__item:nth-child(2) { transform: rotate(-12.7deg) translate(-24%, 3%); }
.c-docfan__stack:hover .c-docfan__item:nth-child(3) { transform: rotate(-6.3deg) translate(-12%, 1.5%); }
.c-docfan__stack:hover .c-docfan__item:nth-child(4) { transform: rotate(0deg)    translate(0, 1%); }
.c-docfan__stack:hover .c-docfan__item:nth-child(5) { transform: rotate(6.3deg)  translate(12%, 1.5%); }
.c-docfan__stack:hover .c-docfan__item:nth-child(6) { transform: rotate(12.7deg) translate(24%, 3%); }
.c-docfan__stack:hover .c-docfan__item:nth-child(7) { transform: rotate(19deg)   translate(37%, 5%); }

.c-docfan__item:hover,
.c-docfan__item:focus-within {
  transform: translateY(-10px) scale(1.04) rotate(0deg) !important;
  filter: none;
  z-index: 2;
}

.c-docfan__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}
.c-docfan__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.c-docfan__thumb {
  display: block;
  width: 100%;
  height: auto;
}

.c-docfan__caption {
  margin: var(--s5) 0 0;
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}


/* --- Lightbox ----------------------------------------------------------- */

.c-lightbox {
  width: min(94vw, 940px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  color: var(--text);
  overflow: hidden;
}
.c-lightbox::backdrop {
  background: rgb(4 8 16 / .82);
}

.c-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-glass);
}
.c-lightbox__count {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.c-lightbox__nav {
  display: flex;
  gap: var(--s2);
}
.c-lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.c-lightbox__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.c-lightbox__btn:disabled { opacity: .4; cursor: default; }
.c-lightbox__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.c-lightbox__figure {
  margin: 0;
  overflow: auto;
  max-height: calc(92vh - 62px);
  background: var(--bg-page, #0B1220);
}
.c-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
}


/* 4.26 Kort i vidensarkivet ---------------------------------------------- */

/**
 * Kortene i /viden/ har en metalinje nederst med laesetiden.
 *
 * .c-card bruges paa hele sitet, saa den maa ikke laves om til flex
 * globalt. :has() begraenser det til de kort, der rent faktisk har en
 * metalinje. Uden :has-stoette falder linjen bare ind under teksten;
 * intet gaar i stykker.
 */
.c-card:has(.c-card__meta) {
  display: flex;
  flex-direction: column;
}

/**
 * margin-top: auto skubber linjen ned i bunden. Uden den staar den lige
 * under en beskrivelse, der er forskellig lang paa hvert kort, og de tre
 * kort i en raekke faar laesetiden i tre forskellige hoejder.
 */
.c-card__meta {
  margin-top: auto;
  padding-top: var(--s5);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.c-card__meta::after {
  content: " →";           /* pil, saa den ikke kan markeres som tekst */
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--t-fast);
}
.c-card:hover .c-card__meta::after,
.c-card:focus-within .c-card__meta::after {
  transform: translateX(3px);
}

/* Emnet staar over titlen, naar det er med. */
.c-card > .c-eyebrow {
  display: block;
  margin-bottom: var(--s3);
}


/* 4.27 Vaerktoej ---------------------------------------------------------- */

/**
 * DMARC- og DKIM-vaerktoejerne.
 *
 * Komponenten genbruger .c-card til lead-boksen og .c-callout til hvert
 * tjek i resultatlisten. Foerste udkast havde egne klasser til begge, og
 * det var forkert: en boks med ramme og polstring ER et kort, og en boks
 * med farvet venstrekant og en forklaring ER en callout. Nye klasser til
 * noget, der allerede findes, er dét, der faar en side til at falde uden
 * for den roede traad.
 *
 * Alle media queries ligger i sektion 8.
 */

.c-vt { margin: clamp(var(--s6), 5vw, var(--s7)) 0; }

.c-vt__label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-subtle);
}

/* Mobile first: felt over knap. Side om side fra 560 px, se sektion 8. */
.c-vt__row {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.c-vt__input {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;          /* under 16px zoomer iOS ved fokus */
  font-family: var(--font-mono);
}

.c-vt__note {
  margin: var(--s3) 0 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.c-vt__resultat { display: block; margin-top: var(--s6); }
.c-vt__resultat[hidden] { display: none; }

/* --- Score --- */

.c-vt__score {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
}
.c-vt__score-tal {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}
.c-vt__score--advarsel .c-vt__score-tal { color: var(--sev-high); }
.c-vt__score--fejl     .c-vt__score-tal { color: var(--sev-critical); }
.c-vt__score-tekst { margin: 0; color: var(--text-subtle); }

/* --- Tjekliste ---
   Hvert tjek er en .c-callout. Kun vaerdien og opstillingen er ny. */

.c-vt__liste {
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.c-vt__tjek {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s4);
}
.c-vt__tjek-vaerdi {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  text-align: right;
}
.c-vt__tjek-tekst {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* --- Lead ---
   Boksen er et .c-card. Her saettes kun afstanden til resultatet. */

.c-vt__lead { margin-top: var(--s6); }

.c-vt__felter {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s5);
}
.c-vt__felter label {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-subtle);
}
.c-vt__felter input { min-height: 48px; font-size: 1rem; }
.c-vt__valgfri { font-weight: 400; color: var(--text-faint); }

.c-vt__samtykke {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  cursor: pointer;
}
.c-vt__samtykke input { width: 20px; height: 20px; margin-top: 2px; }

/**
 * Honningkrukke. Skjules med position frem for display: none, fordi
 * nogle robotter springer display: none over, og det er netop dem, vi
 * gerne vil fange.
 */
.c-vt__honning {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.c-vt__kvittering {
  margin: var(--s4) 0 0;
  color: var(--accent-2);
  font-size: var(--fs-sm);
}
.c-vt__kvittering[hidden] { display: none; }

/* --- Selector-felt (1.7.0) ---
   Staar fremme paa DKIM-siden og ligger foldet ind paa de andre. */

.c-vt__selector { margin-top: var(--s4); }
.c-vt__selector > summary {
  cursor: pointer;
  width: fit-content;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.c-vt__selector[open] > summary { margin-bottom: var(--s3); }
.c-vt__input--lille { max-width: 22rem; min-height: 44px; }

/* --- Naeste skridt (1.7.0) ---
   Staar oeverst i resultatet, foer scoren. Et .c-card med en nummereret
   liste. Records staar i monospace og kan kopieres. */

.c-vt__naeste { margin-bottom: var(--s5); }

.c-vt__skridt-liste {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.c-vt__skridt::marker { color: var(--accent-2); font-weight: 700; }
.c-vt__skridt-titel { margin: 0 0 var(--s2); font-weight: 700; color: var(--text); }
.c-vt__skridt-tekst {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.c-vt__record {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.c-vt__record-navn {
  margin: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
/* Records kan vaere lange og har ingen mellemrum at bryde ved. anywhere
 * holder dem inden for kortet paa en telefon i stedet for at lave
 * vandret overloeb. */
.c-vt__record-vaerdi {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  overflow-wrap: anywhere;
  user-select: all;
}
.c-vt__kopier { justify-self: start; }

.c-vt__skjold { color: var(--text-subtle); }


/* 4.28 Pris (ydelser) ------------------------------------------------------ */

/**
 * Priskort og hovedpris paa ydelsessider.
 *
 * Kortene arver flade, kant, radius, skygge og hover fra .c-card og
 * .c-card--glass. Her saettes kun det, der er saerligt for en pris:
 * lodret opstilling med lille afstand, etiket som eyebrow, beloebet stort.
 *
 *   .c-pris__grid            gitter af kort, mobile first én kolonne
 *   .c-pris__kort            ét kort (oven paa .c-card .c-card--glass)
 *   .c-pris__kort--primary   hovedprisen, blaa kant og svagt skaer
 *   .c-pris__kort--ekstra    tillaeg, uden glas saa hovedprisen staar frem
 *   .c-pris__label           etiket (Abonnement, Onboarding, tillaeggets navn)
 *   .c-pris__beloeb          "799 kr. pr. domaene pr. maaned"
 *   .c-pris__note            omfang eller minimum under beloebet
 *   .c-pris__vilkaar         moms og opsigelse under gitteret
 *   .c-pris__hero            hovedprisen i heroens glaspanel
 */

.c-pris__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin: var(--s5) 0;
}

.c-pris__kort {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}

/* Samme accent som procestrinnets perle (4.8), saa hovedprisen og
   forloebet laeses som det samme sprog. */
.c-pris__kort--primary {
  border-color: rgba(47 107 255 / .45);
  background-image:
    radial-gradient(420px 200px at 20% 0%, rgba(47 107 255 / .16), transparent 60%),
    linear-gradient(152deg, rgba(255 255 255 / .055), rgba(255 255 255 / .012) 46%),
    var(--bg-glass);
}

/* Tillaeg er sekundaere: ingen glas og ingen skygge, kun en haarfin kant.
   Hover-loeftet fra .c-card--glass beholdes, saa de stadig foeles som
   det samme kortsystem. */
.c-pris__kort--ekstra {
  background: transparent;
  box-shadow: none;
  border-color: var(--border-faint);
}

/* Etiketten er en eyebrow uden streg: stregen (4.1) hoerer til over
   overskrifter, ikke inde i et kort. */
.c-pris__label {
  margin: 0;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-pris__beloeb {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.c-pris__beloeb--sm {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.c-pris__note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.c-pris__vilkaar {
  margin: var(--s4) 0 0;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}

/**
 * Hovedprisen i heroens glaspanel. Tallet alene, stort og i mono som
 * .c-panel-stat__value (4.21), saa 799 og 14.500 flugter under hinanden
 * paa tvaers af ydelser. Enheden staar paa linjen under i daempet tekst.
 */
.c-pris__hero {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--border-faint);
}
.c-pris__hero-tal {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* "Efter tilbud" er ord, ikke et tal: sans-serif og mindre. */
.c-pris__hero-tal--sm {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.c-pris__hero-note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Fakta-listen i panelet (4.8 .c-bullet-list). Etiketten foran hvert
   punkt i --text, saa "Maalgruppe:" kan skelnes fra vaerdien. */
.c-bullet-list--facts .c-bullet-list__item strong { color: var(--text); }


/* =========================================================
   8. RESPONSIVE
   Mobile-first: base styles assume narrow viewport.
   Each breakpoint progressively enhances the layout.

   Breakpoints:
     sm:  >=480px   small phone landscape, large phone portrait
     md:  >=768px   tablet portrait
     lg:  >=1024px  small laptop / tablet landscape
     xl:  >=1280px  desktop
     2xl: >=1536px  large desktop (rare)

   v9.65: alle media queries er samlet her. Tidligere baar 4.3b
   Mega menu, 4.11 Indsigter og 4.14 Pagination deres egne lokale
   queries "by design", og med tiden fulgte 18 andre efter. Der var
   derfor intet sted at slaa op, hvad der sker ved hvilken braedde.
   Hver blok har en linje om, hvilken sektion den kom fra.
========================================================= */


/* ---------- sm: >=480px ---------- */

/* fra 8. RESPONSIVE */
@media (min-width: 480px) {
  /* Form submit button regains auto width */
  .c-form :is(button[type="submit"], input[type="submit"], .bricks-button) {
    align-self: flex-start;
  }
}


/* ---------- md: >=768px ---------- */

/* fra 4.28 Pris (ydelser): kort side om side, tillaeg fylder resten */
@media (min-width: 768px) {
  .c-pris__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

  /* Footer (md): to kolonner, brand oeverst */
  .c-footer__col--brand { grid-column: 1 / -1; }
}

/* fra 4.27 Vaerktoej: record og kopier-knap side om side */
@media (min-width: 768px) {
  .c-vt__record {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .c-vt__record-navn { grid-column: 1 / -1; }
}

/* fra 2. BASE: orddeling kun paa smalle skaerme */
@media (min-width: 768px) {
  :is(h1, h2, h3, h4, h5, h6) {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}


/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (min-width: 768px) {
  .c-megamenu__cases {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--s5);
  }
}

/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (min-width: 768px) {
  .c-megamenu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}

/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (min-width: 768px) {
  .c-megamenu-panel {
    max-height: min(78vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (min-width: 768px) {
  .c-megamenu--1col { grid-template-columns: 1fr; }
}

/* fra 4.3b Mega menu: panel med promokort til venstre (v9.72) */
@media (min-width: 768px) {
  .c-megamenu--promo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* fra 4.17 Diagram — farve pr. alvorlighedsniveau */
@media (min-width: 768px) {
  .c-services-grid { grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s4); }
  .c-services-card--tall { grid-row: span 2; justify-content: space-between; }
}

/* fra 4.17 Diagram — farve pr. alvorlighedsniveau */
@media (min-width: 768px) {
  .c-process-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }

  .c-process-grid::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform-origin: left;
    transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
  }
  /* Se v9.32: stregen er tegnet med mindre JavaScript beder om andet. */
  .c-process-grid.is-anim::before { transform: scaleX(0); }
  .c-process-grid.is-anim.is-inview::before { transform: scaleX(1); }
}

/* fra 4.17 Diagram — farve pr. alvorlighedsniveau */
@media (min-width: 768px) {
  .c-panel--overlap {
    margin-top: calc(var(--s9) * -1);
    position: relative;
    z-index: var(--z-raised);
  }
}

/* fra 4.12c Emneliste — redaktionel variant */
@media (min-width: 768px) {
  .c-item-list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--s6), 6vw, 88px);
    row-gap: 0;
  }

  /* Hoejre spalte forskydes, saa skillelinjerne ikke flugter vandret.
     Uden det laeses listen som et skema. Se v9.41. */
  .c-item-list--2 > .c-item-list__item:nth-child(even) {
    margin-top: clamp(36px, 4vw, 68px);
  }

  /* Ingen streg lige under sektionsoverskriften. */
  .c-item-list--divided.c-item-list--2 > .c-item-list__item:nth-child(1),
  .c-item-list--divided.c-item-list--2 > .c-item-list__item:nth-child(2) {
    border-top: 0;
    padding-top: 0;
  }
  .c-item-list--divided.c-item-list--2 > .c-item-list__item:nth-child(1)::after,
  .c-item-list--divided.c-item-list--2 > .c-item-list__item:nth-child(2)::after {
    top: 0;
  }
}

/* fra 8. RESPONSIVE */
@media (min-width: 768px) {
  /* Layout: 2-column grid activates */
  .l-grid--2,
  .l-grid--3,
  .l-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Layout: split begins asymmetric */
  .l-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s7); }
  .l-split--hero      { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .l-split--narrow-l  { grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr); }

  /* Hero: side-by-side */
  .c-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: clamp(var(--s6), 5vw, 74px); }

  /* Footer: 2 columns */
  .c-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
  .c-footer__col--brand { grid-column: 1 / -1; max-width: 560px; }

  /* Footer bottom: horizontal */
  .c-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Article meta: more spacing */
  .c-article__meta { gap: var(--s5); }

  /* CVE list item: header row inline */
  .c-cve-list__item { padding: var(--s5) var(--s6); }

  /* CTA actions: row */
  .c-cta__actions { gap: var(--s4); }

  /* Related: 2 columns */
  .c-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Filter bar: row with search + facets */
  .c-filter-bar {
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
    gap: var(--s4);
  }

  /* v9.24 --- */

  /* Featured article: image beside body */
  .c-featured { grid-template-columns: 1.15fr .85fr; }
  .c-featured__media { min-height: 290px; }

  /* Article rows: title, topic and reading time on one line */
  .c-vrow {
    grid-template-columns: 1fr auto auto;
    gap: var(--s5);
    align-items: center;
  }

  /* CVE row: title left, badges right */
  .c-cve-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
  }

  /* Steps: number column gets room */
  .c-step { padding: var(--s6); }

  /* Service grid: two columns before the uneven three at lg */
  .l-grid--svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Team: two abreast */
  .c-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- lg: >=1024px ---------- */

/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (min-width: 1024px) {
  .c-megamenu { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Footer (lg): bundlinje paa én raekke */
  .c-footer__bottom { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s5); }
  .c-footer__bottom-links { min-width: 0; justify-self: stretch; justify-content: flex-end; column-gap: var(--s3); font-size: 0.92em; }
  .c-footer__bottom-links a[href^="mailto:"], .c-footer__bottom-links a[href^="tel:"] { display: none; }
}

/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (min-width: 1024px) {
  .c-megamenu--1col { grid-template-columns: 1fr; }

  /* Gentages fra 768-blokken (v9.73). .c-megamenu skifter til tre
   * kolonner her, og den vandt over --promo, saa panelet stod med
   * promo, gruppe og kortliste i hver sin lige brede kolonne. Samme
   * moenster som --1col, der ogsaa staar i begge blokke. */
  .c-megamenu--promo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

  .c-megamenu--4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s5);
  }

  /* Feedet er ikke en femte emnekolonne, men en rail under de fire. */
  .c-megamenu--4col .c-megamenu__group--feed {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: var(--s4);
    border-left: 0;
    border-top: 1px solid var(--border-faint);
  }

  .c-megamenu--4col .c-megamenu__feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--s4);
  }
}

/* fra 4.21 Undersider — hero og panel-noegletal */
@media (min-width: 1024px) {
  .c-hero--page .c-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  }
}

/* fra 4.21c Sektionen efter en underside-hero */
@media (min-width: 1024px) {
  .c-hero--page + .l-section {
    /* margin, ikke position: top ville lade pladsen staa tilbage og
       flytte hullet ned under sektionen. */
    margin-top: clamp(-200px, -14vw, -80px);
  }
}

/* fra 4.12b Relaterede kort — to spalter */
@media (min-width: 1024px) {
  /* Hoejere specificitet end .c-related's egen tre-spalte-regel, som
     staar senere i filen. Se v9.38. */
  .c-related.c-related--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* fra 8. RESPONSIVE */
@media (min-width: 1024px) {
  /* Layout: 3-column grids activate */
  .l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Footer: 5 columns (brand + 4 link cols). v9.83: fjerde linkkolonne
     "Viden & vaerktoejer", saa Auroa-kolonnen ikke bliver ti links lang. */
  .c-footer__grid {
    grid-template-columns: minmax(300px, 1.3fr) repeat(4, minmax(160px, 1fr));
    gap: var(--s6);
  }
  .c-footer__col--brand { grid-column: auto; max-width: 420px; padding-right: var(--s5); }

  /* CTA: horizontal action layout maintained */
  .c-cta__actions { flex-direction: row; }

  /* Related: 3 columns at desktop */
  .c-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* v9.24 --- */

  /* Hero: fixed height and vertical centring. Only from lg — on a
     phone the columns stack and a locked height would leave a gap
     or clip the content. */
  .c-hero {
    /* Luft over og under, ogsaa naar min-height styrer hoejden. Uden
       den kan heroen moede headeren uden mellemrum. Se v9.28. */
    padding-block: clamp(var(--s7), 5vw, 72px) clamp(var(--s8), 6vw, 88px);
    min-height: var(--hero-h);
    display: flex;
    align-items: center;
  }
  .c-hero > .l-container { width: 100%; }
  .c-hero__grid--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }

  /* Overlap: panel breaks the section boundary */
  .l-overlap { margin-top: -120px; }

  /* Service grid: uneven by design — one tall card plus two columns */
  .l-grid--svc { grid-template-columns: 1.25fr 1fr 1fr; }
  .l-grid--svc > .is-tall { grid-row: span 2; }

  /* Team: three abreast */
  .c-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Shield: larger and pulled clear of the hero panel */
  .c-shield {
    right: clamp(-30px, 2vw, 40px);
    bottom: clamp(-40px, 1vw, 20px);
    width: clamp(300px, 32vw, 470px);
  }
}

/* fra 8. RESPONSIVE */
@media (min-width: 1024px) {
  .l-article {
    display: grid;
    grid-template-columns: minmax(0, var(--container-prose)) minmax(200px, 240px);
    gap: clamp(var(--s6), 5vw, var(--s8));
    justify-content: center;
    align-items: start;
  }
  .l-article__side { order: 0; }
}

/* fra 8. RESPONSIVE */
@media (min-width: 1024px) {
  /* Med mus er 44 px unoedvendigt hoejt; her raekker linjehoejden. */
  .c-toc__link { min-height: 0; }

  /* Klaebningen ligger paa gitterets barn, ikke paa .c-toc. En sticky
     boks inde i en beholder, der kun er lige saa hoej som boksen selv,
     har ingen strækning at glide i og staar stille. */
  .l-article__side {
    position: sticky;
    top: calc(var(--header-h) + var(--s5));
    align-self: start;
  }
  .c-toc {
    padding: 0 0 0 var(--s5);
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: none;
  }
}

/* fra 8. RESPONSIVE */
@media (min-width: 1024px) {
  .c-prose pre,
  .c-article__body pre {
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}


/* ---------- xl: >=1280px ---------- */

/* fra 8. RESPONSIVE */
@media (min-width: 1280px) {
  /* Layout: 4-column grids stay at 4 */
  .l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Hero keeps its fixed height from lg; no extra padding here.
     v9.24 replaced the padding-based hero with min-height. */

  /* Section: full breathing */
  .l-section--loose { padding-block: var(--s10); }

}


/* ---------- 2xl: >=1536px ---------- */

/* fra 8. RESPONSIVE */
@media (min-width: 1536px) {
  /* Hold container at 1180px max — don't grow into oversized layouts */
  .l-container { max-width: var(--container); }
  .l-container--wide { max-width: var(--container-wide); }
}


/* ---------- Uden for stigen ----------------------------------------------
   Disse breakpoints staar ikke i trappen ovenfor. De virker, men de er
   en afvigelse: 560, 720 og 900 px er valgt til én komponent hver, og
   max-width-blokkene er skrevet desktop-first.
   De bevares uaendret her frem for at blive flyttet til naermeste trin,
   fordi det ville aendre, hvornaar de traeder i kraft. Naar de enkelte
   komponenter alligevel skal efterses, hoerer de hjemme paa stigen.
------------------------------------------------------------------------- */


/* ---------- min-width: 560px ---------- */

/* fra 8. RESPONSIVE */
@media (min-width: 560px) {
  .c-vt__row { flex-direction: row; }
  .c-vt__input { flex: 1 1 auto; }
}


/* ---------- min-width: 720px ---------- */

/* fra 8. RESPONSIVE */
@media (min-width: 720px) {
  .c-vt__felter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- min-width: 900px ---------- */

/* fra 4.20 Kundeudsagn */
@media (min-width: 900px) {
  .c-voice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--s6), 6vw, 80px);
    row-gap: clamp(var(--s7), 6vw, 84px);
  }
  /* Hoejre spalte forskydes, saa raekkerne ikke flugter. */
  .c-voice__item:nth-child(even) { margin-top: clamp(28px, 4vw, 56px); }
}


/* ---------- prefers-reduced-motion: reduce ---------- */

/* fra 8. RESPONSIVE */
@media (prefers-reduced-motion: reduce) {
  /* Ingen trinvis animation: hele forloebet ses med det samme. */
  .c-process-grid.is-anim :is(.c-process-step__number, .c-process-step__title, .c-process-step__text) {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Uden animation for dem, der har bedt om det. */
  .c-docfan__item,
  .c-docfan__stack:hover .c-docfan__item { transition: none; }

  /* v9.24: de animerede backdrop-lag skjules frem for at fryse.
     18 frosne prikker midt i luften ligner en fejl; ingen prikker
     ligner et bevidst valg. Grafikken fungerer uden dem. */
  .c-shield__packet { stroke-opacity: 0; }
  .c-shield__halo   { stroke-opacity: .16; transform: scale(1); }

  /* Reveal og diagram skal vises i sluttilstand, ikke i starttilstand */
  .u-reveal      { opacity: 1; transform: none; }
  .c-chart__fill { transform: scaleY(1); }
}


/* ---------- Print ---------- */

/* fra 8. RESPONSIVE */
@media print {
  body { background: white; color: black; }
  .c-header, .c-footer, .c-cta, .c-btn { display: none; }
  a { color: black; text-decoration: underline; }
  .c-prose { max-width: none; }
}


/* ---------- max-width: 559.98px ---------- */

/* fra 4.3b Header og footer paa telefoner */
@media (max-width: 559.98px) {
  /* CTA'en skal dele bredden med logo og burgermenu. Uden loftet her
     skubber knappen sig ud over hoejre skaermkant. */
  .c-header__cta .c-btn {
    padding-inline: var(--s3);
    font-size: var(--fs-xs);
    line-height: 1.25;
    text-align: center;
    min-width: 0;
  }

  .c-header__logo img { max-width: 116px; }
  .c-header__inner { gap: var(--s2); }
}


/* ---------- max-width: 767.98px ---------- */

/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (max-width: 767.98px) {
  /* Inline in mobile menu: drop the panel chrome */
  .c-megamenu-panel {
    width: 100%;
    margin-inline: 0;
    padding: var(--s3) 0 var(--s4) var(--s4);
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .c-megamenu__desc { display: none; }
}

/* fra 4.3b Header og footer paa telefoner */
@media (max-width: 767.98px) {
  /* Brandlogoet fyldte hele bredden og blev skaaret af til hoejre.
     Selektoren peger bevidst paa .c-footer__col og ikke paa --brand:
     modifieren staar ikke i skabelonen. Se v9.43. */
  .c-footer__col img { max-width: 180px; }

  /* Cookiebot ligger nederst til venstre, chatknappen nederst til
     hoejre. Uden plads her daekker de footerens links. */
  .c-footer { padding-bottom: calc(var(--s8) + 76px); }
  .c-footer__bottom { gap: var(--s3); }
}

/* fra 0. These add the explanatory label and t */
@media (max-width: 767.98px) {
  .c-indsigt-sidebar { position: static; }
  .c-timeline__item { grid-template-columns: 6rem 1fr; gap: var(--s3); }
}

/* fra 5. PROSE */
@media (max-width: 767.98px) {
  .c-prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ---------- max-width: 1279.98px ---------- */

/* fra 4.3 Header: menuen foldes sammen under 1280 (v9.71)
   Foer v9.71 skiftede menuen til burger under 992, som Bricks' Nav Menu
   er sat til (tablet_portrait). Mellem 992 og 1180 laa menuen op til
   132 px inde under "Book gratis samtale", og med et sjette punkt,
   Vaerktoejer, var der heller ikke plads ved 1280.

   Sammenfoldningen sker her i CSS'en med samme to deklarationer, som
   Bricks selv genererer for sit breakpoint. Bricks' Nav Menu staar
   stadig til tablet_portrait og skal ikke aendres; reglen herunder
   daekker baandet 992-1279 oven i Bricks' egen.

   Omrokeringen: logo til venstre, knap i midten, burger til hoejre hvor
   tommelfingeren naar. Kun visuel; DOM-ordenen er uroert, saa
   tastaturets raekkefoelge foelger stadig laeseretningen. Den skal ske
   ved samme graense som sammenfoldningen, ellers opstaar der et baelte
   med fuld menu OG byttede kolonner (se v9.66). */
@media (max-width: 1279.98px) {
  .c-header__nav .bricks-nav-menu-wrapper { display: none; }
  .c-header__nav .bricks-mobile-menu-toggle { display: block; }

  .c-header__logo { order: 1; }
  .c-header__cta  { order: 2; margin-inline: auto; }
  .c-header__nav  { order: 3; }
}


/* ---------- max-width: 1023.98px ---------- */

/* fra 4.3b Mega menu (Bricks Menu Builder) */
@media (max-width: 1023.98px) {
  .c-megamenu__group--feed {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border-faint);
    padding-top: var(--s4);
  }
}