/* Hours undersider — faelles designlag 2026-09.
   Aktiveres af body.fg2 (+ body.fg2-center for sider med centreret hero).
   Indlaeses EFTER style.css paa: pricing, Platform-siderne, Ressource-siderne
   (undtagen API-dokumentation) og Virksomheds-siderne.
   Ét sted, ingen side-kopier: header/footer kommer fortsat fra components.js,
   dette lag aendrer kun bredde, skrift og hero-fladen, saa de matcher forsiden. */

/* ── Skrift: DM Sans paa hele siden via de to faelles font-variabler ────── */
body.fg2 {
  /* Én faelles kortflade paa tvaers af siderne — samme lette tone som
     affiliate-kortene, saa felterne laeses som et svagt loeft, ikke som
     solide graa bokse. */
  --fg-kort: #f9f9f9;
  font-family: 'DM Sans', 'Inter', sans-serif;
  --body: 'DM Sans', 'Inter', sans-serif;
  --display: 'DM Sans', 'Inter', sans-serif;
  background: #FFFFFF;
}
/* Overskrifterne beholder deres fede vaegt, men saettes i sentence case som
   forsiden — DM Sans i versaler bliver for bredt og knaekker linjerne. */
body.fg2 .display { text-transform: none; letter-spacing: -0.02em; }

/* ── Bredde: samme grid som forsiden (1200 -> 1440) ────────────────────── */
body.fg2 .container,
body.fg2 .container-sm { max-width: min(1440px, 100%); padding-left: clamp(20px, 3.2vw, 44px); padding-right: clamp(20px, 3.2vw, 44px); }
body.fg2 .container-sm { max-width: min(860px, 100%); }
body.fg2 .header-inner { max-width: min(1440px, 100%); }
body.fg2 .header-bar   { padding-left: clamp(20px, 3.2vw, 44px); padding-right: clamp(20px, 3.2vw, 44px); }
body.fg2 .nav-logo-svg { height: 26px; }
/* Lidt mere luft over headeren, saa den staar friere paa den groenne flade */
body.fg2 .site-header { top: 22px; }

/* ── Hero: faelles flade, ingen overlays (samme logik som forsiden) ─────
   Grundfarven bag hero-billedet saetter kun ind, hvis billedet af en eller
   anden grund ikke daekker fladen 100 % (maalt paa fem nye hero-billeder
   med naesten ingen lodret spillerum ved cover-skalering: en aegte, men
   haarfin renderingsrest kan vise grundfarven som en tydelig kant foroven
   ved hoej-DPI. Selve billedet er UAENDRET - stadig fuld cover, ingen zoom.
   Hvid, saa en evt. rest laeses som luft over billedet, ikke som en fejl. */
body.fg2 .media-hero { background: var(--fg-hero-flade, #fff); }
body.fg2 .media-hero::after { content: none; }
/* Hero som forsiden: indfaeldet panel med tynd hvid ramme hele vejen rundt.
   Hoejden traekker rammens 2x12px fra, saa panelets BUND (med runding og gap)
   er synlig i foerste viewport - praecis som paa forsiden. */
/* Samme formel som forsidens .fg-hero-panel: calc(100svh - 24px), uden loft.
   Stod foer med et loft paa 905px, saa panelet blev lavere end forsidens paa
   hoeje skaerme - kompositionen blev derfor beskaaret oppe eller nede,
   afhaengig af hver sides --hero-position-y. */
body.fg2 .hero.media-hero {
  margin: 12px;
  border-radius: 7px;
  overflow: hidden;
  min-height: calc(100svh - 24px);
  /* ÉN ensartet tekstplacering paa alle undersider: overskriften staar nede
     til venstre som paa forsidens panel. Bundpolstringen holder den fri af
     scroll-indikatoren (28px fra bunden) og af figurernes fodfaeste.
     Heroen indeholder kun overskriften; underteksten er fjernet. */
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding-bottom: clamp(100px, 11vh, 150px);
}
@media (max-width: 900px) {
  body.fg2 .hero.media-hero { margin: 8px; border-radius: 7px; min-height: calc(100svh - 16px); }
}

/* De smaa kategori-etiketter over hero-overskrifterne fjernes (som forsiden) */
body.fg2 .hero .section-label { display: none; }

/* Venstrestillet hero som forsiden (standarden for de omfattede sider) */
body.fg2 .hero { text-align: left; }
body.fg2 .hero h1 { margin-left: 0; margin-right: auto; }
body.fg2 .hero .hero-sub { margin-left: 0; margin-right: auto; }
body.fg2 .hero .hero-actions { justify-content: flex-start; }
body.fg2 .hero .section-label { justify-content: flex-start; }

/* Undtagelsen: Priser, Blog og Jura beholder centreret hero-tekst */
body.fg2.fg2-center .hero { text-align: center; }
body.fg2.fg2-center .hero h1 { margin-left: auto; margin-right: auto; }
body.fg2.fg2-center .hero .hero-sub { margin-left: auto; margin-right: auto; }
body.fg2.fg2-center .hero .hero-actions { justify-content: center; }
body.fg2.fg2-center .hero .section-label { justify-content: center; }

/* Selve billed-heroen foelger den faelles venstrestillede placering, ogsaa
   paa de sider der ellers centrerer deres indhold (Priser, Blog, Jura).
   Kun heroen - resten af siden beholder sin centrering. */
body.fg2.fg2-center .hero.media-hero { text-align: left; }
body.fg2.fg2-center .hero.media-hero h1 { margin-left: 0; margin-right: auto; }
body.fg2.fg2-center .hero.media-hero .hero-sub { margin-left: 0; margin-right: auto; }
body.fg2.fg2-center .hero.media-hero .section-label { justify-content: flex-start; }

/* ── Hero-toner: diskret moerk overgang i toppen ───────────────────────
   Nogle af figurbillederne har saa kraftigt lysindfald i toppen, at den
   hvide navigation forsvinder i det. Baandet ligger KUN i toppen bag
   headeren og fader helt ud, saa selve motivet er uroert derunder.
   Staar efter "body.fg2 .media-hero::after { content: none }", som den
   bevidst ophaever for netop disse sider. */
/* ── Laesbarhed under overskriften ────────────────────────────────────
   ::after blev slaaet fra ovenfor, saa det faelles scrim forsvandt paa alle
   fg2-sider. Maalt i browseren stod overskriften paa fjorten sider med hvid
   tekst paa billedomraader med luminans 178-215 og op til 100 % lyse pixels.
   Scrimmet laegges derfor som et lag OVEN PAA billedet i ::before (::after er
   optaget af .hero-toner) og er gennemsigtigt i den oeverste tredjedel, saa
   motivet er uroert dér, hvor der ikke staar tekst. Forsiden bruger ikke
   .media-hero og er ikke beroert. */
body.fg2 .hero.media-hero::before {
  background-image:
    linear-gradient(180deg, rgba(26,25,22,0) 30%, rgba(26,25,22,.22) 55%, rgba(26,25,22,.50) 80%, rgba(26,25,22,.66) 100%),
    var(--hero-img);
  background-size: cover, cover;
  background-position: center, var(--hero-position-x, center) var(--hero-position-y, center);
  background-repeat: no-repeat, no-repeat;
}

body.fg2 .media-hero.hero-toner::after {
  content: "";
  inset: 0 0 auto;
  height: clamp(190px, 24vh, 280px);
  background: linear-gradient(180deg,
    rgba(26, 25, 22, .58) 0%,
    rgba(26, 25, 22, .38) 42%,
    rgba(26, 25, 22, 0) 100%);
  pointer-events: none;
}

/* Amber-motivet har kraftigt lysindfald fra siden, ikke kun fra toppen.
   Samme baand som ovenfor plus en svag daempning ind fra venstre, saa
   baggrunden bag overskriften bliver mere ensartet. */
body.fg2 .mint-amber-hero.hero-toner::after {
  inset: 0;
  height: auto;
  background:
    linear-gradient(180deg,
      rgba(26, 25, 22, .60) 0%,
      rgba(26, 25, 22, .40) 20%,
      rgba(26, 25, 22, 0) 34%),
    linear-gradient(90deg,
      rgba(26, 25, 22, .34) 0%,
      rgba(26, 25, 22, .18) 38%,
      rgba(26, 25, 22, 0) 66%);
}

/* ── Faelles tekst-CTA med pil ─────────────────────────────────────────
   Samme enkle udtryk som kaedesidens .km-tekstlink og jurasidens .sc-link:
   ren tekst med en pil, der glider frem ved hover. Ingen knapflade. */
body.fg2 .fg-tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 560;
  font-size: 1.05rem;
  color: var(--t1);
  text-decoration: none;
}
body.fg2 .fg-tekstlink span { transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
body.fg2 .fg-tekstlink:hover span { transform: translateX(5px); }
body.fg2 .fg-tekstlink:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 5px; border-radius: 4px; }

/* ── Integrationssiden: firkantede kort som referencen — fire pr. raekke,
   kun logo og tre linjers tekst, alle kort lige store ─────────────────── */
body.fg2 .int-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.fg2 .int-card {
  background: var(--fg-kort);
  border: none;
  border-radius: 7px;
  padding: 20px;
  text-align: left;
  box-shadow: none;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
body.fg2 .int-card:hover { transform: none; box-shadow: 0 10px 26px rgba(17,24,20,.08); }
body.fg2 .int-card-logo { justify-content: flex-start; height: 40px; margin-top: 6px; }
body.fg2 .int-card-logo img { max-height: 32px; max-width: 110px; }
body.fg2 .int-card-logo--icon img { max-height: 36px; max-width: 36px; }
body.fg2 .int-card-name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; color: var(--t1); margin: 0 0 4px; }
body.fg2 .int-card-body { opacity: 1 !important; max-height: none !important; margin-top: 0 !important; overflow: visible; text-align: left; }
body.fg2 .int-card-desc {
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.55em);
}
@media (max-width: 1100px) { body.fg2 .int-grid { grid-template-columns: repeat(2, 1fr); } body.fg2 .int-card { aspect-ratio: auto; } }
@media (max-width: 640px)  { body.fg2 .int-grid { grid-template-columns: 1fr; } }
/* Kategoribjaelken: graa i stedet for sort, saa den matcher siden */
body.fg2 .int-cat.is-active { background: var(--fg-kort); color: var(--t1); }

/* Kundehistoriernes egen hero-variant (kundehistorier.css centrerer selv
   copy-blokken og saetter fast 905px-hoejde) rettes ind efter de faelles
   regler: venstrestillet og med rammens hoejde-fradrag */
body.fg2 .stories-hero-v5::after { content: none; }
body.fg2 .stories-hero-v5::before { background: var(--fg-hero-flade, #cfe4d4); }
body.fg2 .stories-hero-v5 { text-align: left; min-height: max(656px, min(905px, calc(100svh - 24px))); }
body.fg2 .stories-hero-v5-copy { margin-left: 0; margin-right: auto; text-align: left; }
body.fg2 .stories-hero-v5-copy h1 { margin-left: 0; margin-right: auto; }
body.fg2 .stories-hero-v5-copy .hero-sub { margin-left: 0; margin-right: auto; }

/* Den moerke prefooter (indsat af components.js FOER footeren) haenger paa
   den groenne strimmel praecis som forsidens newsletter-sektion - vaerdierne
   er kopieret 1:1 fra .newsletter-section.pf-overlap. Footeren selv skal
   IKKE traekke op; det aad prefooterens bund og gjorde strimlen for hoej. */
body.fg2 .shared-prefooter,
body.fg2 .testimonial-section {
  position: relative; z-index: 1;
  margin-top: -28px;
  border-radius: 40px 40px 0 0;
}
@media (max-width: 760px) {
  body.fg2 .shared-prefooter,
  body.fg2 .testimonial-section { margin-top: -21px; border-radius: 28px 28px 0 0; }
}

/* ── Produktskabelonen (kaede, forhandling m.fl.): hvid side hele vejen
   igennem — de moerke odd-sektioner fra feature.css neutraliseres, og
   kortene faar forsidens rolige sprog (subtle flade, ingen haard kant) ── */
body.fg2 .prod-sec { padding: clamp(72px, 8vw, 120px) 0; }
body.fg2 .prod-sec:nth-of-type(odd) { background: var(--white); color: var(--t1); }
body.fg2 .prod-sec:nth-of-type(odd) .prod-h2 { color: var(--t1); }
body.fg2 .prod-sec:nth-of-type(odd) .prod-p { color: var(--t2); }
body.fg2 .prod-sec:nth-of-type(odd) .prod-eyebrow { color: var(--green-txt); }
body.fg2 .prod-sec:nth-of-type(odd) .prod-eyebrow::before { background: var(--green-txt); }
body.fg2 .prod-sec:nth-of-type(odd) .prod-hint { color: var(--t3); }
body.fg2 .prod-h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
body.fg2 .cta3d-copy h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
body.fg2 .prod-step, body.fg2 .term, body.fg2 .fact, body.fg2 .jura-step {
  background: var(--fg-kort); border-color: transparent; border-radius: 7px;
}
/* Trinoverskrifterne skal aldrig arve sektionsfarve (hvid-paa-hvid-faelden) */
body.fg2 .prod-step h3 { color: var(--t1); }

/* Ingen moerke indholdssektioner: sitet koerer hvidt hele vejen igennem.
   (Heroen og footer-stakken er undtaget - de styres andetsteds.) */
body.fg2 .feature-group--dark { background: var(--white); color: var(--t1); }
body.fg2 .feature-group--dark .feature-group-head h2 { color: var(--t1); }
body.fg2 .feature-group--dark .feature-group-index,
body.fg2 .feature-group--dark .feature-group-head p { color: var(--t2) !important; }

/* Om os og Presse har hver sin moerke sektion — samme behandling */
body.fg2 .about-principles,
body.fg2 .about-capability-tabs,
body.fg2 .press-mediakit { background: var(--white); color: var(--t1); }
body.fg2 .about-principles .section-label,
body.fg2 .about-principles-list span { color: var(--t3); }
body.fg2 .about-principles-list,
body.fg2 .about-principles-list article { border-color: var(--border); }
body.fg2 .about-principles-list p { color: var(--t2); }
body.fg2 .about-capability-tabs { background: var(--fg-kort); }
body.fg2 .about-capability-tabs button { color: var(--t2); border-bottom-color: var(--border); }
body.fg2 .about-capability-tabs button[aria-selected="true"],
body.fg2 .about-capability-tabs button.is-active { color: var(--t1); }
body.fg2 .press-mediakit .section-label { color: var(--green-txt); }
body.fg2 .press-mediakit h2 { color: var(--t1); }
body.fg2 .press-mediakit-copy { color: var(--t2) !important; }

/* E) Ingen fede overskrifter paa undersiderne (som forsiden: kun forsidens
   hero er fed) */
body.fg2 .display { font-weight: 500; }
/* Skriftstoerrelser maa maksimalt matche forsidens (hero/sektion) */
body.fg2 .display-xl { font-size: clamp(2.8rem, 6.6vw, 5.9rem); }
body.fg2 .display-lg { font-size: clamp(1.9rem, 3.4vw, 3rem); }
body.fg2 .display-md { font-size: clamp(1.65rem, 2.7vw, 2.5rem); }
/* Sideegne overskrifter (fx Amber-sidens .amber-title) foelger samme regel:
   ingen fed, og sektionsstoerrelse maa ikke overstige forsidens */
body.fg2 h1, body.fg2 h2, body.fg2 h1 b, body.fg2 h2 b { font-weight: 500; }

/* Sider hvor det bagte motiv laa i venstre side (bag teksten): billedet
   spejles, saa motivet staar til hoejre - rene objektmotiver, ingen tekst */
body.fg2 .fg2-spejl.media-hero::before { transform: scaleX(-1); }

/* Hero uden baggrundsbillede (de juridiske sider) laa flush til kanten og
   fyldte 905 px, hvoraf det meste var tom flade. Nu samme indfaeldning,
   runding og ramme som forsidens panel, og en hoejde der passer til én
   overskrift frem for en fuld viewport. */
body.fg2 .hero:not(.media-hero) {
  margin: 12px;
  border-radius: 7px;
  overflow: hidden;
  min-height: 0;
  padding: clamp(96px, 11vw, 150px) 0 clamp(56px, 6vw, 86px);
}
@media (max-width: 900px) {
  body.fg2 .hero:not(.media-hero) { margin: 8px; padding: 88px 0 48px; }
}

/* ══ Juridiske sider, FAQ og cookies: én faelles form ══
   Layoutet laa inline i hver enkelt side, saa der var 13 selvstaendige
   kopier med hver sin drift. Her ligger den faelles form ét sted. Reglerne
   er scopet paa body.fg2 for at slaa sidernes egne inline-regler, der
   ellers vinder paa raekkefoelge. */

/* Hero: samme indfaeldning og udtryk som de oevrige sider, og indholdet
   staar centreret som paa forsiden. Den var 905 px flad sort uden margen. */
body.fg2 .hero:not(.media-hero) {
  margin: 12px;
  border-radius: 7px;
  overflow: hidden;
  /* Samme formel som .hero.media-hero og forsidens .fg-hero-panel: uden
     loft. Var kappet til 905px, saa den blev lavere end forsidens panel
     paa hoeje skaerme - stod ikke paa linje endnu. */
  min-height: calc(100svh - 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(96px, 9vw, 140px) 0 clamp(56px, 6vw, 88px);
  text-align: center;
}
body.fg2 .hero:not(.media-hero) .container > * { margin-inline: auto; }
@media (max-width: 900px) {
  body.fg2 .hero:not(.media-hero) { margin: 8px; min-height: calc(100svh - 16px); padding: 88px 0 48px; }
}

/* Blokken centreres paa siden, men indholdsfortegnelsen bliver i venstre
   side af den. Var en vandret raekke over teksten - saa mistede man
   overblikket over, hvilken sektion man staar i. */
body.fg2 .legal-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 620px);
  gap: clamp(40px, 4.4vw, 64px);
  justify-content: center;
  align-items: start;
  max-width: none;
  margin-inline: 0;
}
body.fg2 .legal-nav {
  position: sticky; top: 104px;
  display: flex; flex-direction: column; gap: 3px;
  margin: 0; text-align: left;
}
body.fg2 .legal-nav a { padding: 8px 12px; border-radius: 7px; text-align: left; }
@media (max-width: 900px) {
  body.fg2 .legal-layout { grid-template-columns: minmax(0, 1fr); }
  body.fg2 .legal-nav { display: none; }
}
/* Vaelgeren var sort (--ink). Den skal baere den samme graa som resten. */
body.fg2 .legal-nav a.active,
body.fg2 .faq-nav-item.active {
  background: var(--subtle);
  color: var(--t1);
  font-weight: 600;
}
body.fg2 .legal-section h2 { text-align: left; }

/* FAQ: ikonet var et bogstaveligt "+" i en fyldt cirkel, der skiftede til
   sort og drejede 45 grader - to streger oven i hinanden. Nu en chevron,
   der vender opad, naar spoergsmaalet er aabent. Samme stregstil som
   ikonerne i "Fire lag" og paa jurasiden. */
body.fg2 .faq-icon {
  background: none; border: none; color: var(--t3);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  transition: color .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
/* Overriden erstattede kun cirklen, ikke tegnet: style.css saetter stadig
   .faq-icon::before { content: '+' }, saa baade plusset og chevronen blev
   tegnet oven i hinanden. */
body.fg2 .faq-icon::before { content: none; }
body.fg2 .faq-icon svg { width: 17px; height: 17px; display: block; }
body.fg2 .faq-q:hover .faq-icon { color: var(--t1); }
body.fg2 .faq-item.open .faq-icon { color: var(--green-txt); transform: rotate(180deg); }

/* Cookie-siden: knappen laa i den skarpe groenne. Den skal vaere mint. */
body.fg2 .cookie-side .btn-primary,
body.fg2 .legal-layout .btn-primary {
  background: var(--green-bg);
  color: var(--green-txt);
  border-color: transparent;
}
body.fg2 .cookie-side .btn-primary:hover,
body.fg2 .legal-layout .btn-primary:hover { background: var(--green-bg); filter: brightness(.97); }

/* Fladen var #1a1916 - sidens naesten-sorte. Nu en varm graa, saa den
   laeses som graa frem for sort, og headerens hvide tekst stadig holder.
   Overskriften koerte i systemskrift; den skal have sidens display-skrift
   i samme vaegt som de oevrige sider. */
/* Fladen skal vaere sort. Var #35322d. */
body.fg2 .hero:not(.media-hero) { background: #000; }
body.fg2 .hero:not(.media-hero) h1 {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
}
body.fg2 .hero:not(.media-hero) .section-label,
body.fg2 .hero:not(.media-hero) p { color: rgba(255,255,255,.62); }

/* "INDHOLD"-etiketten laa inde i den vandrette raekke. Den staar bedre
   som en linje over vaelgeren. */
body.fg2 .legal-layout > .legal-nav > .section-label,
body.fg2 .legal-nav .nav-label { flex-basis: 100%; text-align: center; margin-bottom: 6px; }

/* CTA i mint, ikke den skarpe groenne (#1f9d55). Gaelder cookie-seglet og
   de primaere knapper paa policy-siderne. */
body.fg2 .hc-seal-btn,
body.fg2 .cookie-action,
body.fg2 .hero .btn-primary,
body.fg2 .legal-layout .btn-primary,
body.fg2 .hero-actions .btn-primary {
  background: var(--green-bg);
  color: var(--green-txt);
  border-color: transparent;
}
body.fg2 .hc-seal-btn:hover,
body.fg2 .cookie-action:hover,
body.fg2 .hero .btn-primary:hover,
body.fg2 .legal-layout .btn-primary:hover { background: var(--green-bg); filter: brightness(.96); }

/* Knapperne skal foelge den centrerede tekst - de laa forskudt til venstre,
   mens overskrift og broedtekst stod midt. */
body.fg2 .hero:not(.media-hero) .hero-actions,
body.fg2 .hero:not(.media-hero) .cookie-action,
body.fg2 .hero:not(.media-hero) .hc-seal-btn {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-inline: auto;
}
body.fg2 .hero:not(.media-hero) .hc-seal-btn,
body.fg2 .hero:not(.media-hero) .cookie-action { display: inline-flex; }

/* Hovedsidernes indholdsgitter. Samme rolige kortstil som jurasidens
   "Sikker databehandling": graa flade, 7 px radius, ingen groenne accenter. */
body.fg2 .hs-gitter {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: clamp(8px, 1.4vw, 18px);
}
body.fg2 .hs-kort {
  padding: 22px 22px 24px; border-radius: 7px;
  background: var(--fg-kort, #f9f9f9);
}
body.fg2 .hs-kort h3 {
  font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--t1); margin: 0 0 6px;
}
body.fg2 .hs-kort p { font-size: .86rem; line-height: 1.55; color: var(--t2); margin: 0; }
@media (max-width: 1100px) { body.fg2 .hs-gitter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { body.fg2 .hs-gitter { grid-template-columns: 1fr; } }