/* ============================================================================
   wf-footer.css — de sitefooter, 1:1 naar het ontwerp uit Claude Design
   (claude-design/webfix-ai-buttons-ontwerp/project/Webfix Footer.dc.html).

   Dit bestand mag bewust afwijken van wf-2026-system.css: de footer is alleen
   voor de verkoopwebsite en heeft een eigen, rijkere vormtaal. De merkkleuren
   en woordmerken komen wel gewoon uit de huisstijl.

   Opbouw
     desktop   merkbalk · verlooplijn · vier kolommen · gegevensbalk · onderbalk
     mobiel    logo · contact · merken · inklapbare kolommen · socials · score
               · gegevens · onderbalk

   E&eacute;n set markup voor alle breedtes: de kolommen zijn <details> die op
   desktop opengeklapt blijven en onder 768px inklapbaar worden (wf-sales.js).
   ========================================================================== */

.wf-footer {
   background: #f0f1f5;
   font-family: 'Plus Jakarta Sans', 'Quicksand', sans-serif;
}
.wf-footer-in {
   max-width: 1240px;
   margin: 0 auto;
}

/* ------------------------------------------------------------- merkbalk --- */

.wf-ft-merken {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 44px;
   padding: 26px 56px 22px;
}
.wf-ft-merk {
   display: flex;
   align-items: center;
   gap: 12px;
}
.wf-ft-merk-div {
   width: 1px;
   height: 15px;
   background: rgba(1, 16, 61, .2);
}
.wf-ft-merk-slogan {
   font-size: 13px;
   font-weight: 600;
   color: #8a93a3;
}
.wf-ft-wm-flows {
   font-size: 21px;
}
.wf-ft-wm-ai {
   font-size: 20px;
}

/* Verlooplijn die aan beide kanten uitdooft. */
.wf-ft-lijn {
   height: 1px;
   margin: 0 56px;
   background: linear-gradient(90deg,
      rgba(1, 16, 61, 0) 0%,
      rgba(176, 209, 54, .35) 18%,
      rgba(218, 23, 108, .35) 50%,
      rgba(50, 188, 238, .35) 82%,
      rgba(1, 16, 61, 0) 100%);
}

/* -------------------------------------------------------------- kolommen -- */

.wf-ft-kolommen {
   display: grid;
   grid-template-columns: 1.35fr 1fr 1fr 1fr;
   gap: 44px;
   padding: 44px 56px 30px;
}

.wf-ft-logo {
   height: 52px;
   width: auto;
   display: block;
   margin-bottom: 18px;
}
.wf-ft-pitch {
   margin: 0 0 22px;
   max-width: 270px;
   font-size: 14.5px;
   font-weight: 700;
   line-height: 1.72;
   color: #a12359;
}
.wf-ft-pitch-kort {
   display: none;
}

/* Contactregels met gekleurde icoontegel. */
.wf-ft-contact-lijst {
   display: flex;
   flex-direction: column;
   gap: 7px;
}
.wf-ft-contact {
   display: inline-flex;
   align-items: center;
   gap: 11px;
   padding: 0;
   border: 0;
   background: none;
   font-family: inherit;
   font-size: 14.5px;
   font-weight: 600;
   color: #000229;
   text-decoration: none;
   text-align: left;
   cursor: pointer;
   transition: color .2s;
}
.wf-ft-contact:hover {
   color: #da176c;
}
.wf-ft-ico {
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 10px;
   font-size: 12.5px;
   transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.wf-ft-contact:hover .wf-ft-ico {
   transform: translateY(-2px);
}

/* Socialtegels; de merkkleur bij hover komt uit wf-sales.js. */
.wf-ft-socials {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 14px;
}
.wf-ft-soc {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 11px;
   background: #fff;
   border: 1px solid rgba(1, 16, 61, .09);
   color: #8a93a3;
   font-size: 12.5px;
   transition: color .22s, border-color .22s, transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s;
}
.wf-ft-soc:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 18px rgba(1, 16, 61, .10);
}

/* Kolomkop met verloopstreepje eronder. */
.wf-ft-kop {
   display: flex;
   align-items: center;
   gap: 9px;
   margin: 0 0 4px;
   font-family: inherit;
   font-weight: 800;
   font-size: 17px;
   letter-spacing: -.01em;
   color: #000229;
}
/* Het blok krimpt naar de titel, zodat het streepje eronder even breed is. */
.wf-ft-kopblok { display: inline-block; }
.wf-ft-kop-lijn {
   display: block;
   width: 100%;
   height: 2.5px;
   border-radius: 2px;
   margin-bottom: 16px;
}
/* De merkregel bovenaan is een link geworden; verder verandert er niets aan. */
.wf-ft-merk { text-decoration: none; transition: opacity .22s; }
.wf-ft-merk:hover { opacity: .8; }

.wf-ft-links {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px;
}

/* Kolomlink met een diamant die bij hover inschuift. */
.wf-ft-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   font-family: inherit;
   font-size: 14.5px;
   font-weight: 500;
   color: #5F6368;
   text-decoration: none;
   transition: color .22s;
}
/* De diamant staat rechts van de link, op 5px, en schuift bij hover naar
   rechts uit. */
.wf-ft-link::before {
   content: "";
   position: absolute;
   left: 100%;
   margin-left: 5px;
   top: 50%;
   width: 18px;
   height: 15.9px;
   margin-top: -7.95px;
   background: url("../img/logo/webfix-diamond.png") center/contain no-repeat;
   opacity: 0;
   transform: translateX(3px) scale(.7);
   transition: opacity .22s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.wf-ft-link:hover {
   color: #da176c;
}
.wf-ft-link:hover::before {
   opacity: 1;
   transform: translateX(0) scale(1);
}
.wf-ft-link.is-nieuw::after {
   content: "Nieuw";
   margin-left: 8px;
   padding: 2px 7px;
   border-radius: 9999px;
   background: rgba(176, 209, 54, .2);
   font-size: 9.5px;
   font-weight: 800;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: #5f7a12;
}

/* ------------------------------------------------------- gegevensbalk ---- */

/* ── De onderste footerband ────────────────────────────────────────────────
   Uit "Webfix Footer v3": de gegevensbalk en de onderbalk zitten samen in één
   band met de bewegende merkgradient, precies zoals de Flows-header in het CMS
   -- groen-roze-blauw op 200% breedte, 11s heen en weer, met een glans-overlay
   erboven. Alle tekst erin is wit met dezelfde tekstschaduw; die schaduw doet
   het werk dat de kleur eerst deed en houdt de kleine regels leesbaar op elke
   stand van het verloop. */
@keyframes wf-ft-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.wf-ft-band {
   position: relative;
   overflow: hidden;
   background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
   background-size: 200% 100%;
   animation: wf-ft-drift 11s ease-in-out infinite;
}
.wf-ft-band::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%);
}
@media (prefers-reduced-motion: reduce) { .wf-ft-band { animation: none; } }
/* En op een aanraakscherm ook: de band is schermbreed en een bewegende
   background-position is elke frame opnieuw tekenen. Dat gaat daar ten koste van het
   scrollen zelf; de kleuren blijven hetzelfde. */
@media (pointer: coarse) { .wf-ft-band { animation: none; } }

/* De twee rijen staan boven de glans en dragen zelf geen vlak meer. */
.wf-ft-band > * { position: relative; z-index: 1; }

.wf-ft-gegevens {
   padding: 28px 0 24px;
   background: none;
   border-top: 0;
}
/* Exact hetzelfde raster als .wf-ft-kolommen hierboven — zelfde kolombreedtes,
   zelfde tussenruimte en zelfde zijmarge — zodat de cellen recht onder de
   linkkolommen uitlijnen. */
.wf-ft-gegevens-grid {
   display: grid;
   grid-template-columns: 1.35fr 1fr 1fr 1fr;
   gap: 44px;
   align-items: start;
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 56px;
}
.wf-ft-lbl {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 9px;
   font-family: 'Quicksand', sans-serif;
   font-weight: 700;
   font-size: 10px;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #fff;
   text-shadow: 0 1px 2px rgba(1, 16, 61, .55), 0 2px 10px rgba(1, 16, 61, .4);
}
.wf-ft-lbl::after {
   content: "";
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
}
.wf-ft-lbl i {
   font-size: 11px;
   color: #fff;
}
.wf-ft-meta {
   font-size: 13px;
   line-height: 1.85;
   color: #fff;
   text-shadow: 0 1px 2px rgba(1, 16, 61, .55), 0 2px 10px rgba(1, 16, 61, .4);
}
.wf-ft-meta a {
   color: #fff;
   text-decoration: none;
   border-bottom: 1px solid rgba(255, 255, 255, .4);
   transition: border-color .2s;
}
.wf-ft-meta a:hover {
   border-color: #fff;
}
.wf-ft-meta-klein {
   font-size: 11.5px;
   color: #fff;
}
.wf-ft-nowrap {
   white-space: nowrap;
}

/* Beoordelingsbadge — staat in de eerste kolom, onder het logoblok. */
.wf-ft-score-cel {
   justify-self: start;
   align-self: start;
}
/* Glas op de gradient in plaats van een wit pilletje. */
.wf-ft-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 17px 8px 10px;
   border-radius: 9999px;
   background: rgba(255, 255, 255, .10);
   border: 1px solid rgba(255, 255, 255, .26);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   text-decoration: none;
   transition: background .25s cubic-bezier(.16, 1, .3, 1), border-color .25s cubic-bezier(.16, 1, .3, 1);
}
.wf-ft-badge:hover {
   background: rgba(255, 255, 255, .18);
   border-color: rgba(255, 255, 255, .4);
}
/* Zie de band hierboven: vervaging berekenen tijdens het scrollen is op een telefoon
   te duur. Het glas blijft, alleen de vervaging gaat eraf. */
@media (pointer: coarse) {
   .wf-ft-badge { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .16); }
}
.wf-ft-ster {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 9999px;
   background: linear-gradient(135deg, #b0d136, #6f8a1b);
   color: #fff;
   font-size: 11.5px;
}
.wf-ft-score {
   display: flex;
   align-items: baseline;
   gap: 9px;
}
.wf-ft-score-cijfer {
   font-weight: 800;
   font-size: 18px;
   line-height: 1;
   color: #fff;
   text-shadow: 0 1px 2px rgba(1, 16, 61, .55), 0 2px 10px rgba(1, 16, 61, .4);
}
.wf-ft-score-tekst {
   font-size: 12.5px;
   font-weight: 500;
   color: #fff;
   text-shadow: 0 1px 2px rgba(1, 16, 61, .55), 0 2px 10px rgba(1, 16, 61, .4);
}

/* ---------------------------------------------------------- onderbalk ---- */

.wf-ft-onder {
   padding: 18px 56px 24px;
   background: none;
   border-top: 0;
}
/* De scheidingslijn tussen de twee rijen loopt binnen dezelfde marge als de rijen. */
.wf-ft-onder-in::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -18px;
   height: 1px;
   background: rgba(255, 255, 255, .28);
}
.wf-ft-onder-in { position: relative; }
.wf-ft-onder-in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 26px;
   max-width: 1240px;
   margin: 0 auto;
}
.wf-ft-copy {
   font-size: 12.5px;
   font-weight: 500;
   color: #fff;
   text-shadow: 0 1px 2px rgba(1, 16, 61, .55), 0 2px 10px rgba(1, 16, 61, .4);
}
/* Hetzelfde bolletje als tussen de juridische links, in plaats van een punt. */
/* Zelfde bolletje als bij de copyrightregel en de juridische links. */
.wf-ft-pitch-dot {
   display: inline-block;
   width: 3px;
   height: 3px;
   margin: 0 4px;
   border-radius: 50%;
   background: currentColor;
   vertical-align: middle;
   opacity: .6;
}

.wf-ft-copy-dot {
   display: inline-block;
   width: 3px;
   height: 3px;
   margin: 0 9px;
   border-radius: 50%;
   background: currentColor;
   vertical-align: middle;
   opacity: .75;
}

.wf-ft-copy strong {
   color: #000229;
   font-weight: 700;
}
.wf-ft-juridisch {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
}
.wf-ft-legal {
   position: relative;
   padding: 0;
   border: 0;
   background: none;
   font-family: inherit;
   font-size: 11.5px;
   font-weight: 400;
   color: #fff;
   text-shadow: 0 1px 2px rgba(1, 16, 61, .55), 0 2px 10px rgba(1, 16, 61, .4);
   text-decoration: none;
   cursor: pointer;
   transition: opacity .2s;
}
/* De korte schrijfwijze verschijnt pas op een telefoon; daar staan de links anders
   op twee rijen. */
.wf-ft-legal-kort { display: none; }
@media (max-width: 767.98px) {
   .wf-ft-legal-lang { display: none; }
   .wf-ft-legal-kort { display: inline; }
}
.wf-ft-legal:hover {
   opacity: .72;
}
/* Puntje tussen de links, nooit achter de laatste. */
.wf-ft-legal:not(:last-child)::after {
   content: "";
   position: absolute;
   right: -10px;
   top: 50%;
   width: 3px;
   height: 3px;
   margin-top: -1.5px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .5);
}
.wf-ft-juridisch .wf-ft-legal:not(:last-child) {
   margin-right: 12px;
}
.wf-ft-punt {
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: #c7cbd3;
}

/* -------------------------------------------------- inklapbare kolommen -- */

.wf-ft-groep {
   border-bottom: 0;
}
.wf-ft-sum {
   display: none;
}
.wf-ft-groep > /* De merkregel bovenaan is een link geworden; verder verandert er niets aan. */
.wf-ft-merk { text-decoration: none; transition: opacity .22s; }
.wf-ft-merk:hover { opacity: .8; }

.wf-ft-links {
   display: flex;
}

/* Blokken die alleen in de mobiele indeling voorkomen. */
.wf-ft-mobiel {
   display: none;
}

/* ============================================================ responsief == */

/* Tablet: twee kolommen naast elkaar, nog geen accordion. */
@media (max-width: 1023.98px) {
   .wf-ft-kolommen {
      grid-template-columns: 1fr 1fr;
      gap: 36px 40px;
      padding: 38px 34px 26px;
   }
   .wf-ft-merken {
      padding: 24px 34px 20px;
      gap: 32px;
   }
   .wf-ft-lijn {
      margin: 0 34px;
   }
   .wf-ft-gegevens {
      padding: 24px 0 26px;
   }
   /* Twee kolommen, gelijk aan de linkkolommen op deze breedte. */
   .wf-ft-gegevens-grid {
      grid-template-columns: 1fr 1fr;
      gap: 26px 40px;
      padding: 0 34px;
   }
   /* Op deze breedte vult de badge de vierde cel: rechtsonder, naast Bank en dus
      recht onder Algemeen. Hij stond eerst over de volle breedte gecentreerd, en dan
      hangt hij los onder de twee kolommen. */
   .wf-ft-score-cel {
      justify-self: start;
      align-self: start;
      order: 1;
   }
   .wf-ft-onder {
      padding: 18px 34px 22px;
   }
}

/* Mobiel: het ontwerp van 390px.
   De volgorde verschilt van desktop: eerst logo en contact, dan de lijn, dan de
   merken, dan de inklapbare kolommen. Met display:contents op .wf-ft-kolommen
   worden het introblok en de drie kolommen directe kinderen van de flexbox,
   zodat order werkt zonder de markup te verdubbelen. */
@media (max-width: 767.98px) {
   /* Breedte van de gecentreerde kolom in de mobiele footer. Gelijk aan de
      natuurlijke breedte van de contactregels, zodat die en de uitklaprijen
      recht onder elkaar staan. */
   .wf-footer {
      --wf-ft-blok: 209px;
   }
   .wf-ft-boven {
      display: flex;
      flex-direction: column;
   }
   .wf-ft-boven > .wf-footer-in:first-child {
      order: 3;
   }
   .wf-ft-lijn {
      order: 2;
   }
   .wf-ft-kolommen {
      display: contents;
   }
   .wf-ft-intro {
      order: 1;
   }
   .wf-ft-groep:nth-of-type(1) { order: 4; }
   .wf-ft-groep:nth-of-type(2) { order: 5; }
   .wf-ft-groep:nth-of-type(3) { order: 6; }
   .wf-ft-socials-mobiel { order: 7; }
   .wf-ft-score-mobiel { order: 8; }

   .wf-ft-merken {
      padding: 0 22px 18px;
      gap: 14px;
   }
   .wf-ft-merk-slogan,
   .wf-ft-merk .wf-ft-merk-div {
      display: none;
   }
   .wf-ft-merken .wf-ft-merk + .wf-ft-merk::before {
      content: "";
      width: 1px;
      height: 17px;
      margin-right: 14px;
      background: rgba(1, 16, 61, .2);
   }

   /* Blok 1: logo, pitch en contact — gecentreerd. */
   .wf-ft-intro {
      padding: 26px 22px 6px;
      text-align: center;
   }
   .wf-ft-logo {
      height: 44px;
      margin: 0 auto 18px;
   }
   .wf-ft-pitch {
      display: none;
   }
   .wf-ft-pitch-kort {
      display: block;
      margin: 0 0 20px;
      font-size: clamp(11.5px, 3.6vw, 14px);
      font-weight: 700;
      line-height: 1.7;
      color: #a12359;
      white-space: nowrap;
   }
   .wf-ft-contact-lijst {
      display: inline-flex;
      align-items: flex-start;
      gap: 11px;
      margin-bottom: 22px;
   }
   .wf-ft-socials {
      display: none;
   }

   .wf-ft-lijn {
      margin: 4px 22px 18px;
   }

   /* Inklapbare kolommen. */
   .wf-ft-groep {
      margin: 0 22px;
      border-bottom: 1px solid rgba(1, 16, 61, .08);
   }
   .wf-ft-kopblok,
   .wf-ft-kop,
   .wf-ft-kop-lijn {
      display: none;
   }
   /* Label en gekleurd streepje gecentreerd; de scheidingslijn loopt gewoon door.
      De uitklaprij zelf blijft 270px breed en staat in het midden, zodat het pijltje
      naast het label staat in plaats van tegen de rand van het scherm. */
   .wf-ft-sum {
      position: relative;
      width: 270px;
      max-width: 100%;
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 15px 0;
      cursor: pointer;
      list-style: none;
      font-family: inherit;
      font-weight: 800;
      font-size: 15.5px;
      color: #000229;
   }
   .wf-ft-sum-label {
      justify-content: flex-start;
      width: var(--wf-ft-blok);
      max-width: 100%;
      margin: 0 auto;
   }
   .wf-ft-chev {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -6px;
   }
   .wf-ft-sum::-webkit-details-marker {
      display: none;
   }
   .wf-ft-sum-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
   }
   .wf-ft-sum-balk {
      width: 3px;
      height: 15px;
      border-radius: 2px;
   }
   .wf-ft-chev {
      color: #a12359;
      font-size: 12px;
      transition: transform .28s cubic-bezier(.16, 1, .3, 1);
   }
   .wf-ft-groep[open] .wf-ft-chev {
      transform: rotate(180deg);
   }
   .wf-ft-groep > /* De merkregel bovenaan is een link geworden; verder verandert er niets aan. */
.wf-ft-merk { text-decoration: none; transition: opacity .22s; }
.wf-ft-merk:hover { opacity: .8; }

.wf-ft-links {
      width: var(--wf-ft-blok);
      max-width: 100%;
      margin: 0 auto;
      gap: 12px;
      /* 13px = breedte van het gekleurde streepje plus de tussenruimte, zodat
         de links precies onder de labeltekst beginnen. */
      padding: 2px 0 16px 13px;
   }

   /* Socials en score onderaan, gecentreerd. */
   .wf-ft-socials-mobiel {
      display: flex;
      justify-content: center;
      gap: 9px;
      padding: 20px 22px 6px;
   }
   .wf-ft-socials-mobiel .wf-ft-soc {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      font-size: 14px;
   }
   /* De losse badge boven de band vervalt hier. Hij is opgemaakt voor op het
      kleurverloop -- witte tekst met een schaduw -- en stond daar op het grijze vlak
      erboven, waar hij niet te lezen was. De badge in de band zelf komt ervoor terug. */
   .wf-ft-score-mobiel {
      display: none;
   }
   .wf-ft-score-mobiel .wf-ft-badge {
      padding: 6px 13px 6px 8px;
      gap: 8px;
   }
   .wf-ft-score-mobiel .wf-ft-ster {
      width: 24px;
      height: 24px;
      font-size: 10px;
   }
   .wf-ft-score-mobiel .wf-ft-score-cijfer {
      font-size: 15px;
   }
   .wf-ft-score-mobiel .wf-ft-score-tekst {
      font-size: 11.5px;
   }

   /* Gegevens onder elkaar, elk met een eigen scheidingslijn. */
   .wf-ft-gegevens {
      padding: 0;
   }
   .wf-ft-gegevens-grid {
      display: block;
   }
   .wf-ft-gegevens-grid > div {
      padding: 20px 22px;
      text-align: center;
      border-top: 1px solid rgba(1, 16, 61, .07);
   }
   .wf-ft-gegevens-grid > div:first-child {
      border-top: 0;
   }
   .wf-ft-lbl {
      justify-content: center;
   }
   .wf-ft-lbl::after {
      display: none;
   }
   .wf-ft-lbl i {
      font-size: 10px;
   }
   .wf-ft-meta {
      font-size: 12.5px;
   }
   .wf-ft-meta-klein {
      font-size: 11px;
   }
   .wf-ft-score-cel {
      justify-self: center;
      padding-bottom: 6px;
   }
   /* Zelfde compacte maat als de losse badge had. */
   .wf-ft-score-cel .wf-ft-badge { padding: 6px 13px 6px 8px; gap: 8px; }
   .wf-ft-score-cel .wf-ft-ster { width: 24px; height: 24px; font-size: 10px; }
   .wf-ft-score-cel .wf-ft-score-cijfer { font-size: 15px; }
   .wf-ft-score-cel .wf-ft-score-tekst { font-size: 11.5px; }

   /* Onderbalk gecentreerd, juridische links boven het copyright. */
   .wf-ft-onder {
      padding: 16px 22px 20px;
      text-align: center;
   }
   .wf-ft-onder-in {
      flex-direction: column-reverse;
      align-items: center;
      gap: 10px;
   }
   /* De drie links op een regel, gecentreerd. Dat kan sinds de korte schrijfwijze:
      met de volledige namen pasten ze niet en stonden ze twee aan twee onder elkaar. */
   .wf-ft-juridisch {
      justify-content: center;
      gap: 0;
   }
   .wf-ft-copy {
      font-size: 12px;
   }
   .wf-ft-copy-rest {
      display: block;
   }
}

@media (min-width: 768px) {
   .wf-ft-mobiel {
      display: none !important;
   }
   .wf-ft-copy-rest {
      display: inline;
   }
}

@media (prefers-reduced-motion: reduce) {
   .wf-ft-link::before,
   .wf-ft-ico,
   .wf-ft-soc,
   .wf-ft-badge,
   .wf-ft-chev {
      transition: none;
   }
}