/* FAKTIVE sektion 9 2026: "Integrationer" som et løbende bånd af logoer og det, der hentes.
   Hører sammen med assets/sektion9-2026.js. Al tekst er originalens; uden JavaScript
   står sektionen, som den gjorde før.

   Båndet ligger som afslutning på "Sådan virker det": systemernes egne logoer kører forbi i
   fuld bredde og toner ud i kanterne, og under dem står i to rolige linjer, hvad der hentes,
   og de tre løfter.
   Farver fra huset: aubergine #3C2A44, brødtekst #5C4F48, dæmpet #7A6B63 (til småtekst),
   kobber #B23F14 til fluebenene. Reglerne beskriver det færdige billede; GSAP spiller hen til det. */

.s9-koda{--s9-aub:#3C2A44; --s9-tekst:#5C4F48; --s9-daemp:#7A6B63; --s9-kobber:#B23F14;
  --s9-streg:rgba(60,42,68,.14)}

/* ---------- integreret udgave: båndet som afslutning på "Sådan virker det" ---------- */
.s9-koda{margin-top:clamp(48px,5vw,76px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--s9-streg)}
.s9-koda .s9-maerke{margin:0}
.s9-koda .s9-baand{margin-top:clamp(20px,2.4vw,30px)}
.s9-note{margin:clamp(40px,4.4vw,64px) 0 0;max-width:60em;font-size:16px;line-height:1.6;font-weight:300;color:var(--s9-tekst)}
.s9-note.s9-svag{margin-top:8px;font-size:14.5px;color:var(--s9-daemp)}

/* ---------- båndet: ens spor efter hinanden, der glider til venstre og starter forfra, så det
   ser ud til at løbe i ring. Positionen sættes af JS, så båndet både kan køre selv og trækkes.
   Fuld bredde, blødt udtonet i kanterne ---------- */
.s9-baand{overflow:hidden;width:100vw;margin:clamp(34px,3.8vw,54px) 0 0 calc(50% - 50vw);padding:10px 0;
  cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.s9-baand.traekker{cursor:grabbing}
.s9-baand:focus-visible{outline:2px solid var(--s9-kobber);outline-offset:6px;border-radius:4px}
.s9-bane{display:flex;will-change:transform}
.s9-spor{flex:none;display:flex;align-items:center;gap:clamp(56px,6vw,96px);margin:0;padding:0 clamp(56px,6vw,96px) 0 0;
  list-style:none}
.s9-spor li{flex:none;display:flex;align-items:center;gap:10px;height:60px}
.s9-spor img{display:block;width:auto}
/* Microsoft 365: ikonet og navnet, som Microsoft selv viser det; Salary.dk som navn, indtil der er et logo */
.s9-spor li span,.s9-navn{font-family:var(--font-text);font-weight:600;font-size:19px;letter-spacing:-.01em;color:#2B2B2B;white-space:nowrap}
.s9-navn{font-size:20px;color:#3C2A44}

/* ---------- under 900 px ---------- */
@media (max-width:899px){
  .s9-koda{margin-top:clamp(36px,5vw,56px)}
}
/* ---------- under 560 px: mindre logoer og kortere afstand ---------- */
@media (max-width:560px){
  .s9-spor{gap:44px;padding-right:44px}
  .s9-spor img{height:auto !important;max-height:31px}
  /* Shine Salary står i to linjer og skal derfor være højere for at kunne læses */
  .s9-spor img[src*="shine-salary"]{max-height:46px}
  .s9-spor li{height:48px}
  .s9-spor li span{font-size:16px}
  .s9-navn{font-size:17px}
}
/* ---------- reduceret bevægelse: logoerne står stille i rækker ---------- */
@media (prefers-reduced-motion:reduce){
  .s9-baand{width:auto;margin-left:0;cursor:auto;-webkit-mask-image:none;mask-image:none}
  .s9-bane{display:block}
  .s9-spor{flex-wrap:wrap;justify-content:center;gap:28px 56px;padding:0}
  .s9-spor[aria-hidden]{display:none}
}