/* Hours — fælles scene-lag for undersider (Forhandling, Jura, ...).
   Indlæses efter site-2026.css. Alle klasser er præfikset sc- og scopet til
   body.fg2, så intet slår igennem på sider uden klassen.
   Målene er forsidens og kæde-sidens (godkendt 2/9 2026): DM Sans 500 til
   overskrifter, kicker i stille grå, sektionsluft clamp(88px,11vw,158px),
   split-modul 44fr/56fr, scene 560 x 560, radius 24, kort med bløde skygger
   og ingen 1px-kanter, status-piller med ikon, flueben i mint + mørkegrøn.
   Bevægelse: kurven --sc-ud, ind med 14px + blur(8px), forskudt 70 ms,
   scener i loop der står stille indtil .visible, fuld reduced-motion. */
body.fg2 {
  --sc-ud: cubic-bezier(.16, 1, .3, 1);
  --sc-1: 8px; --sc-2: 12px; --sc-3: 16px; --sc-4: 24px; --sc-5: 32px; --sc-6: 48px; --sc-7: 64px;
  --sc-sek: clamp(88px, 11vw, 158px);
  --sc-flade: #eef8f3;
  --sc-mint-graa: #8fd3b1;
}

/* ── Sektioner og hoveder ─────────────────────────────────────────────── */
body.fg2 .sc-sek { padding: var(--sc-sek) 0 0; background: #fff; }
body.fg2 .sc-sek-slut { padding-bottom: var(--sc-sek); }
body.fg2 .sc-sek-luft { padding-top: calc(var(--sc-sek) + clamp(24px, 3vw, 48px)); }
/* Afstanden under sektionsoverskriften foelger forsidens rytme: 44 px ved
   1440. Var clamp(36px, 4.4vw, 56px) og gav 56 px, saa teksten og boksen
   laa laengere fra hinanden her end paa forsiden. */
body.fg2 .sc-hoved { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 3.4vw, 44px); }
body.fg2 .sc-hoved-venstre { text-align: left; margin-left: 0; }
body.fg2 .sc-kick { font-size: .8rem; font-weight: 700; letter-spacing: .01em; color: var(--t2); }
body.fg2 .sc-h2 {
  font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 500;
  font-size: clamp(1.65rem, 2.7vw, 2.5rem); line-height: 1.06; letter-spacing: -.02em;
  color: var(--t1); margin: var(--sc-2) 0 0; text-align: inherit;
}
body.fg2 .sc-h2-lg { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; }
body.fg2 .sc-sub { color: var(--prose); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; margin: var(--sc-3) auto 0; max-width: 56ch; }
body.fg2 .sc-hoved-venstre .sc-sub { margin-left: 0; }
/* Det store udsagn midt paa siden. Samme maal som forsidens .fg-manifest
   (28,8 px / 500 / 1,4 / 900 px), saa en underside kan saette den samme
   type saetning uden at den laeses mindre end paa forsiden. */
body.fg2 .sc-manifest {
  max-width: 900px; margin: 0 auto; text-align: center;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.4;
  color: var(--t1);
}
body.fg2 .sc-liste { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.fg2 .sc-liste li { font-size: 1.02rem; line-height: 1.55; color: #38342f; }

/* ── Split-modul og scene ─────────────────────────────────────────────── */
body.fg2 .sc-kol { display: grid; grid-template-columns: 44fr 56fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
body.fg2 .sc-kol:has(> .sc-scene:first-child) { grid-template-columns: 56fr 44fr; }
body.fg2 .sc-scene {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1;
  border-radius: 7px; background: var(--sc-flade);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 2.8vw, 40px); overflow: hidden; container-type: inline-size;
}
body.fg2 .sc-scene-mint { background: linear-gradient(160deg, #e3f4eb, #d3edde); }
body.fg2 .sc-scene-blaa { background: linear-gradient(160deg, #e4edf7, #d5e3f2); }
body.fg2 .sc-kol > .sc-scene:first-child { justify-self: start; }
body.fg2 .sc-kol > .sc-scene:last-child { justify-self: end; }
body.fg2 .sc-panel {
  position: relative; border-radius: 7px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 95% at 50% 18%, #e8f6ee 0%, #d6edde 55%, #c4e4d0 100%);
}
body.fg2 .sc-panel-blaa { background: radial-gradient(120% 95% at 50% 18%, #eaf1f9 0%, #dbe7f4 55%, #cbdcef 100%); }

/* ── Kort-anatomi (Garba-niveau): header med ikon + meta, pille, rækker ── */
body.fg2 .sc-kort {
  background: #fff; border-radius: 7px;
  box-shadow: 0 16px 40px rgba(26,25,22,.10), 0 2px 5px rgba(26,25,22,.04);
}
body.fg2 .sc-kort-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f2f0ec; }
body.fg2 .sc-kort-ik { flex: none; width: 22px; height: 22px; color: var(--t1); display: grid; place-items: center; }
body.fg2 .sc-kort-ik svg { width: 20px; height: 20px; }
body.fg2 .sc-kort-hdtx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
body.fg2 .sc-kort-hdtx b { display: block; font-size: .8rem; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fg2 .sc-kort-hdtx small { font-size: .58rem; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fg2 .sc-pille { margin-left: auto; flex: none; font-style: normal; font-size: .6rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
body.fg2 .sc-pille-graa { background: #f1efeb; color: var(--t2); }
body.fg2 .sc-pille-amber { background: var(--amber-bg); color: var(--amber-txt); }
body.fg2 .sc-pille-mint { background: var(--green-bg); color: var(--green-txt); }
body.fg2 .sc-pille-rosa { background: #fbe3ea; color: var(--red-txt); }
body.fg2 .sc-pille-blaa { background: #dfe9f5; color: var(--blue-txt); }
body.fg2 .sc-rk { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-top: 1px solid #f2f0ec; }
body.fg2 .sc-rk-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
body.fg2 .sc-rk-tx b { font-size: .8rem; font-weight: 600; color: var(--t1); }
body.fg2 .sc-rk-tx b i { font-style: normal; font-weight: 400; font-size: .68rem; color: var(--t3); margin-left: 4px; }
body.fg2 .sc-rk-tx small { font-size: .62rem; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fg2 .sc-ik { flex: none; width: 20px; height: 20px; color: var(--t2); display: grid; place-items: center; }
body.fg2 .sc-ik svg { width: 18px; height: 18px; }
/* Fluebenet: mint-cirkel + mørkegrønt hak. Aldrig rå --green. */
body.fg2 .sc-tjek { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-bg); color: var(--green-txt); display: grid; place-items: center; }
body.fg2 .sc-tjek svg { width: 11px; height: 11px; }
body.fg2 .sc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .6rem; font-weight: 500; color: var(--t2); background: #f4f2ee; border-radius: 999px; padding: 4px 9px 4px 7px; white-space: nowrap; }
body.fg2 .sc-chip svg { width: 11px; height: 11px; color: var(--t3); }
body.fg2 .sc-nr {
  position: absolute; left: 18px; top: 18px; z-index: 5;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; color: var(--t1); font-size: .82rem; font-weight: 600; box-shadow: 0 1px 3px rgba(17,24,20,.08);
}

/* ── Knapper ──────────────────────────────────────────────────────────── */
body.fg2 .sc-knap-moerk, body.fg2 .sc-knap-lys, body.fg2 .sc-knap-hvid {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px;
  border-radius: 999px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .95rem;
  text-decoration: none; white-space: nowrap; transition: translate .2s var(--sc-ud), background .2s var(--sc-ud);
  /* Klasserne bruges nu ogsaa paa <button> (anmod om adgang). Uden de to
     linjer arver knappen browserens kant og pilemarkoer, og de to
     knapper i samme raekke holder saa ikke samme form. */
  border: 0; cursor: pointer;
}
body.fg2 .sc-knap-moerk { background: var(--ink); color: #fff; }
body.fg2 .sc-knap-moerk:hover { background: #2c2a26; translate: 0 -1px; }
body.fg2 .sc-knap-lys { background: var(--green-bg); color: var(--green-txt); }
body.fg2 .sc-knap-lys:hover { background: #b3e5cf; translate: 0 -1px; }
body.fg2 .sc-knap-hvid { background: #fff; color: var(--t1); box-shadow: 0 1px 2px rgba(26,25,22,.06); }
body.fg2 .sc-knap-hvid:hover { translate: 0 -1px; }
body.fg2 :where(.sc-knap-moerk, .sc-knap-lys, .sc-knap-hvid):focus-visible { outline: 2px solid var(--green-txt); outline-offset: 3px; }
body.fg2 .sc-knapper { display: flex; gap: 12px; margin-top: clamp(24px, 3vw, 36px); flex-wrap: wrap; }
body.fg2 .sc-hoved .sc-knapper { justify-content: center; }

/* Tekstlink: sort tekst, pil, ingen boks. Den stille afslutning. */
body.fg2 .sc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sc-4); font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1rem; color: var(--t1); text-decoration: none;
  /* Klassen bruges nu ogsaa paa <button> (anmod om adgang), saa knappen ikke
     arver browserens kant, flade og markoer. */
  padding: 0; border: 0; background: none; cursor: pointer; }
body.fg2 .sc-link span { transition: translate .2s var(--sc-ud); }
body.fg2 .sc-link:hover span { translate: 4px 0; }
body.fg2 .sc-link:focus-visible { outline: 2px solid var(--green-txt); outline-offset: 4px; border-radius: 4px; }
body.fg2 .sc-hoved .sc-link { justify-content: center; }

/* ── Bevægelse ────────────────────────────────────────────────────────── */
@keyframes sc-rejs { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
body.fg2 .sc-ind.reveal { opacity: 1; transform: none; transition: none; animation: sc-rejs .9s var(--sc-ud) both; animation-play-state: paused; }
body.fg2 .sc-ind.reveal.visible { animation-play-state: running; }
body.fg2 .sc-t1.sc-ind { animation-delay: .07s; } body.fg2 .sc-t2.sc-ind { animation-delay: .14s; } body.fg2 .sc-t3.sc-ind { animation-delay: .21s; }
body.fg2 .sc-t4.sc-ind { animation-delay: .28s; } body.fg2 .sc-t5.sc-ind { animation-delay: .35s; } body.fg2 .sc-t6.sc-ind { animation-delay: .42s; }
body.fg2 .sc-flade.reveal { opacity: 0; transform: none; transition: opacity 1.1s var(--sc-ud); }
body.fg2 .sc-flade.reveal.visible { opacity: 1; }
/* Scener står stille indtil fladen er synlig: hver side lister sine elementer i .sc-loop */
body.fg2 .sc-flade .sc-loop { animation-play-state: paused; }
body.fg2 .sc-flade.visible .sc-loop { animation-play-state: running; }
body.fg2 .sc-pop { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  body.fg2 .sc-ind.reveal, body.fg2 .sc-flade.reveal { animation: none !important; opacity: 1; transition: none; }
  body.fg2 .sc-flade .sc-loop { animation: none !important; }
}
@media (max-width: 900px) {
  body.fg2 .sc-kol, body.fg2 .sc-kol:has(> .sc-scene:first-child) { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  body.fg2 .sc-scene { order: 2; justify-self: center; }
}
@media (max-width: 560px) {
  body.fg2 .sc-rk-tx small, body.fg2 .sc-kort-hdtx small { display: none; }
  body.fg2 .sc-nr { left: 12px; top: 12px; }
}