/* ============================================================
       CLEEFIO — VEELGESTELDE VRAGEN
       Losse pagina, net als 404.html: eigen, beperkte stijl in
       plaats van de volledige CSS van de homepage. Zelfde fonts,
       kleuren en maatvoering, zodat het één geheel blijft.
       ============================================================ */
    @font-face { font-family: "Google Sans"; src: url("fonts/google-sans.woff2") format("woff2");
      font-weight: 400 700; font-style: normal; font-display: swap; }

    :root {
      --inkt:   #12100E;                 /* warm bijna-zwart, zoals op de homepage */
      --bone:   #f1f0ed;                 /* site-achtergrond */
      --royal:  #1F4FD8;                 /* accentblauw */
      --grad:   linear-gradient(95deg, #6D3DD9 0%, #1F4FD8 48%, #35A0F5 100%);
      --donker: 18,16,14;
    }
    * { box-sizing: border-box; }
    html { background: var(--bone); scroll-behavior: smooth; }
    body { margin: 0; background: var(--bone); color: var(--inkt);
      font-family: "Google Sans", -apple-system, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased; }
    a { color: inherit; }
    :focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 4px; }

    /* ---------- menu: zelfde transparante balk als op de homepage ---------- */
    .nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50;
      width: min(1200px, calc(100% - 28px));
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
      padding: 12px 10px 12px 22px; }
    .nav a { text-decoration: none; color: var(--inkt); }
    .nav__logo { font-weight: 700; font-size: 1.35rem; letter-spacing: -.03em; }
    .nav nav { display: flex; gap: clamp(18px, 3vw, 44px); font-size: .95rem; }
    /* ---------- menu op de telefoon: zelfde glazen vorm als op de homepage ----------
       Dicht een rondje met drie streepjes linksboven; na een tik rekt de vorm uit tot de
       pil met de knoppen. Het blokje staat hier vast op 'Vragen', want dit IS die pagina. */
    .menuGlas { display: none; }
    @media (max-width: 1024px) {
      .nav { display: none; }
      .menuGlas { display: flex; position: fixed; z-index: 60; top: 14px; left: 16px;
        align-items: center; overflow: hidden; width: 46px; height: 46px;
        border-radius: 999px; background: rgba(18, 18, 20, .42);
        backdrop-filter: blur(14px) saturate(170%);
        -webkit-backdrop-filter: blur(14px) saturate(170%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 20px -8px rgba(0,0,0,.45);
        transition: width .52s cubic-bezier(.3, .8, .3, 1); }
      .menuknop { flex: none; display: flex; width: 46px; height: 46px; padding: 0;
        border: 0; cursor: pointer; background: none;
        flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
      .menuknop__streep { display: block; width: 17px; height: 1.7px; border-radius: 2px;
        background: #fff;
        transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
      .menuGlas.open .menuknop__streep:nth-child(1) { transform: translateY(6.7px) rotate(45deg); }
      .menuGlas.open .menuknop__streep:nth-child(2) { opacity: 0; }
      .menuGlas.open .menuknop__streep:nth-child(3) { transform: translateY(-6.7px) rotate(-45deg); }
      .menuGlas ul { position: relative; flex: none; display: flex; align-items: center;
        margin: 0; padding: 0 8px 0 0; list-style: none; }
      .menuGlas ul a { position: relative; z-index: 1; display: block;
        padding: 8px clamp(8px, 2.6vw, 13px); border-radius: 999px;
        font-family: "Google Sans", sans-serif; font-size: .66rem; font-weight: 500;
        letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
        white-space: nowrap; color: rgba(255,255,255,.72);
        opacity: 0; transform: translateX(-8px);
        transition: opacity .3s ease, transform .3s ease; }
      .menuGlas.open ul a { opacity: 1; transform: none; }
      .menuGlas.open ul li:nth-child(1) a { transition-delay: .12s; }
      .menuGlas.open ul li:nth-child(2) a { transition-delay: .18s; }
      .menuGlas.open ul li:nth-child(3) a { transition-delay: .24s; }
      .menuGlas.open ul li:nth-child(4) a { transition-delay: .30s; }
      .menuGlas ul a[aria-current] { color: #12100E; }
      .menuGlas .blok { position: absolute; z-index: 0; top: 0; left: 0; width: 0;
        height: 100%; border-radius: 999px; background: #fff; opacity: 0;
        transition: opacity .25s ease .12s; }
      .menuGlas.open .blok { opacity: 1; }
      @media (prefers-reduced-motion: reduce) {
        .menuGlas, .menuknop__streep, .menuGlas ul a, .menuGlas .blok { transition: none; }
      }
    }

    /* ---------- kop ---------- */
    .kop { max-width: 1140px; margin: 0 auto; padding: clamp(120px, 18vh, 200px) clamp(20px, 5vw, 40px) clamp(30px, 6vh, 60px); }
    .kop__label { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; background: var(--grad); -webkit-background-clip: text;
      background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: clamp(12px, 2vh, 20px); }
    .kop h1 { margin: 0; font-weight: 700; letter-spacing: -.04em; line-height: 1.02;
      font-size: clamp(2.4rem, 6.5vw, 5.4rem); text-transform: uppercase;
      -webkit-text-stroke: 1.5px var(--inkt); max-width: 14ch; }
    .kop p { margin: clamp(18px, 3vh, 30px) 0 0; max-width: 52ch; line-height: 1.65;
      font-size: clamp(1rem, 1.15vw, 1.12rem); color: rgba(var(--donker), .62); }

    /* ---------- de vragen ---------- */
    .vragen { max-width: 1140px; margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 40px) clamp(70px, 14vh, 150px); }
    .vraag { border-top: 1px solid rgba(var(--donker), .13); }
    .vraag:last-child { border-bottom: 1px solid rgba(var(--donker), .13); }
    .vraag__kop { width: 100%; display: flex; align-items: center; justify-content: space-between;
      gap: 24px; background: none; border: 0; cursor: pointer; text-align: left;
      font-family: inherit; color: var(--inkt);
      padding: clamp(22px, 3.4vh, 34px) 0;
      font-weight: 700; letter-spacing: -.02em; text-transform: uppercase;
      font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.2; }
    .vraag__ic { flex: none; width: 34px; height: 34px; border-radius: 50%;
      background: var(--royal); color: #fff; display: grid; place-items: center; }
    .vraag__ic svg { width: 17px; height: 17px; display: block; }
    /* het plusje wordt een minnetje zodra de vraag openstaat */
    .vraag__streep { transform-origin: 12px 12px; transition: transform .3s ease; }
    .vraag__kop[aria-expanded="true"] .vraag__streep { transform: rotate(90deg) scaleX(0); }
    /* dichtklappen zonder een vaste hoogte te hoeven rekenen */
    .vraag__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s ease; }
    .vraag__kop[aria-expanded="true"] + .vraag__wrap { grid-template-rows: 1fr; }
    .vraag__wrap > div { overflow: hidden; }
    .vraag__wrap p { margin: 0 0 clamp(24px, 3.6vh, 36px); max-width: 60ch;
      line-height: 1.7; font-size: clamp(.95rem, 1.1vw, 1.08rem); color: rgba(var(--donker), .66); }
    @media (prefers-reduced-motion: reduce) {
      .vraag__wrap, .vraag__streep { transition: none; }
    }

    /* ---------- afsluiter ---------- */
    .slot { max-width: 1140px; margin: 0 auto clamp(70px, 12vh, 130px);
      padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 48px);
      background: #F7F6F4; }
    .slot h2 { margin: 0 0 10px; font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 700;
      letter-spacing: -.025em; text-transform: uppercase; }
    .slot p { margin: 0 0 clamp(20px, 3vh, 28px); color: rgba(var(--donker), .62); line-height: 1.6; }
    .slot__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
    .knop { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
      padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
    .knop--vol { background: var(--inkt); color: #fff; }
    .knop--rand { border: 1.5px solid rgba(var(--donker), .2); }
  
    /* ===== Footer: exact dezelfde als op de homepage ===== */

    /* ===================== VOETTEKST =====================
       Licht vlak dat met een schaduw over de vorige sectie omhoog komt. Bovenaan een
       doorlopende naamband, daaronder links een claim met knop en rechts drie
       linkkolommen, en onderaan een dunne streep met de kleine lettertjes. */
    .voet { position: relative; z-index: 13; background: var(--vlak); color: var(--inkt);
      /* de schaduw langs de bovenrand geeft het 'eroverheen schuiven' */
      box-shadow: 0 -34px 80px rgba(var(--donker), .30);
      padding-bottom: clamp(24px, 3vw, 40px); overflow: hidden;
      /* Precies één scherm hoog: dan eindigt de pagina exact op de bovenrand van de
         footer. Eerder bleef er 50px van de sectie erboven in beeld hangen op het
         scroll-einde -- die net-niet-stop voelde als een haper. */
      min-height: 100svh; box-sizing: border-box;
      display: flex; flex-direction: column; justify-content: space-between; }

    /* --- doorlopende naamband --- */
    .voet__band { overflow: hidden; contain: paint; padding: clamp(18px, 2.4vw, 34px) 0 clamp(10px, 1.4vw, 20px);
      border-bottom: 1px solid rgba(var(--donker), .1); }
    /* Zelfde maatvoering en schrijfwijze als de 'Over Cleefio'-band: Google Sans op 700,
       geen hoofdletters, en het accentblauw van de hero. */
    .voet__spoor { display: flex; width: max-content; white-space: nowrap;
      font-family: "Google Sans", sans-serif; font-weight: 700;
      font-size: clamp(4rem, 16.5vw, 19rem); line-height: .92; letter-spacing: -.04em;
      color: var(--inkt);                    /* de naam in zwart; alleen de wolk is blauw */
      /* Op een eigen laag zetten: zonder will-change tekent de browser deze enorme letters
         elke frame opnieuw, en dat is wat je als haperen ziet. */
      will-change: transform; backface-visibility: hidden;
      animation: voetBand 42s linear infinite; }
    .voet__eenheid { display: inline-flex; align-items: center; flex: none;
      gap: .28em; padding-right: .28em; }
    /* de wolk uit de hero, in dezelfde kleur; hoogte volgt de letters */
    .voet__wolk { flex: none; height: .62em; width: auto; fill: var(--royal); display: block; }

    /* --- inhoud --- */
    .voet__binnen { max-width: 1500px; margin: 0 auto;
      padding: clamp(40px, 6vw, 90px) clamp(20px, 4vw, 60px) 0; }
    .voet__boven { display: grid; grid-template-columns: 1.1fr 1fr;
      gap: clamp(30px, 5vw, 80px); align-items: start; }

    .voet__claim p { margin: 0; max-width: 18ch;
      font-family: "Google Sans", sans-serif; font-weight: 400;
      font-size: clamp(1.6rem, 3.4vw, 3.1rem); line-height: 1.12; letter-spacing: -.035em; }
    /* onderstreepte link met een pijl, zoals in het voorbeeld */
    .voet__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(22px, 3vw, 38px);
      text-decoration: none; color: var(--inkt); font-size: clamp(1rem, 1.15vw, 1.15rem);
      padding-bottom: 8px; border-bottom: 1.5px solid var(--inkt); }
    .voet__cta svg { width: 20px; height: 20px; transition: transform .3s ease; }
    .voet__cta:hover svg { transform: translateX(5px); }

    .voet__kolommen { display: grid; grid-template-columns: repeat(4, 1fr);
      gap: clamp(16px, 2vw, 34px); }
    .voet__kolommen nav { display: grid; gap: clamp(10px, 1.2vw, 15px); align-content: start; }
    .voet__kolommen a { text-decoration: none; color: var(--inkt);
      font-size: clamp(.92rem, 1.02vw, 1.02rem); width: fit-content;
      border-bottom: 1px solid transparent; transition: border-color .22s ease; }
    .voet__kolommen a:hover { border-bottom-color: var(--inkt); }

    .voet__omhoog { display: inline-flex; align-items: center; gap: 10px;
      margin-top: clamp(40px, 6vw, 80px); text-decoration: none; color: var(--inkt);
      font-size: clamp(.95rem, 1.08vw, 1.08rem);
      padding-bottom: 7px; border-bottom: 1.5px solid var(--inkt); }
    .voet__omhoog svg { width: 18px; height: 18px; transition: transform .3s ease; }
    .voet__omhoog:hover svg { transform: translateY(-4px); }

    .voet__streep { height: 1px; background: rgba(var(--donker), .13);
      margin: clamp(34px, 5vw, 64px) 0 clamp(18px, 2.4vw, 28px); }
    .voet__onder { display: flex; flex-wrap: wrap; gap: 10px 40px; justify-content: space-between;
      font-size: clamp(.8rem, .9vw, .9rem); color: rgba(var(--donker), .55); }

    /* ===== De footer schuift over 'Over Cleefio' heen =====
       Zelfde opzet als bij de prijzen: het blauwe vlak blijft staan, de footer komt er met
       een schaduw overheen. Zonder deze stapel volgde de footer er gewoon op en zag je de
       schaduw dus nooit. */
    .voet-stapel { position: relative; }
  

    /* ===== Letterwissel bij hover (naar het 21st.dev 'random letter swap'-effect) =====
       Elke letter zit in een venstertje (overflow hidden) met een tweede exemplaar erboven.
       Bij hover schuiven beide één letterhoogte omlaag: de zichtbare valt eruit, de kopie
       valt erin -- per letter met een eigen vertraging in willekeurige volgorde. */
    .ls-w { display: inline-block; white-space: nowrap; }   /* woorden breken niet middenin */
    .ls-l { position: relative; display: inline-block; overflow: hidden;
      margin-bottom: -.16em; }
    .ls-l > span { display: inline-block; transform: translateY(0);
      /* kleine doorschieter in de curve geeft het veer-gevoel van het origineel */
      transition: transform .6s cubic-bezier(.34, 1.2, .4, 1);
      transition-delay: var(--ls-v, 0s);
      /* ademruimte voor staartletters (g, j, p): anders knipt het venstertje ze af */
      padding-bottom: .16em; }
    /* de kopie die binnenrolt is blauw; rolt de muis weg, dan komt het origineel
       gewoon terug */
    .ls-l > .ls-b { position: absolute; left: 0; top: -100%; color: var(--royal); }
    /* op de blauwe preview-knoppen zou blauw wegvallen: daar rolt de kopie in wit */
    .pf-knop .ls-b { color: #fff; }
    /* menu op een donker vlak: royal blauw valt daar weg, dus een tint lichter blauw */
    .nav:not(.op-licht) .ls-b { color: #7B97FF; }
    .ls.ls-aan .ls-l > span { transform: translateY(100%); }
    @media (prefers-reduced-motion: reduce) { .ls-l > span { transition: none; } }
  
    /* responsieve regels van de footer, zelfde als op de homepage */
    @media (prefers-reduced-motion: reduce) { .voet__spoor { animation: none; } }
    @media (max-width: 900px) { .voet__boven { grid-template-columns: 1fr; } }
    @media (max-width: 900px) { .voet__kolommen { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .voet__kolommen { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 1024px) { .voet__onder { justify-content: flex-start; } }
  
    /* de doorlopende beweging van de naamband; zonder deze regel stond hij stil */
    @keyframes voetBand { to { transform: translate3d(-50%, 0, 0); } }

/* ======================================================================
   Juridische pagina's — documenttypografie
   Alleen leesstijl voor lopende tekst. Nav, voettekst, kleuren en fonts
   komen ongewijzigd uit de bestaande site-CSS hierboven.
   ====================================================================== */
.jur { max-width: 46rem; margin: 0 auto; padding: 0 24px 96px; overflow-wrap: break-word; }
.jur__kop { padding: clamp(124px, 16vh, 168px) 0 0; }
.jur__kop h1 { font-size: clamp(1.75rem, 6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.jur__datum { font-size: .875rem; color: rgba(var(--donker), .55); margin: 0; }
.jur__intro { font-size: 1.05rem; line-height: 1.65; color: rgba(var(--donker), .78); margin: 18px 0 0; }
.jur__streep { height: 1px; background: rgba(var(--donker), .12); margin: 30px 0 30px; border: 0; }
.jur__streep + p { margin-top: 0; }
.jur h2 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.015em; margin: 44px 0 12px; text-wrap: balance; }
.jur h3 { font-size: 1.05rem; line-height: 1.35; margin: 28px 0 8px; }
.jur p { font-size: 1rem; line-height: 1.7; margin: 0 0 14px; color: rgba(var(--donker), .84); }
.jur ul, .jur ol { margin: 0 0 16px; padding-left: 1.35rem; }
.jur li { font-size: 1rem; line-height: 1.65; margin-bottom: 7px; color: rgba(var(--donker), .84); }
.jur li::marker { color: rgba(var(--donker), .4); }
.jur strong { font-weight: 600; color: var(--inkt); }
.jur a { color: var(--royal); text-underline-offset: 3px; }
.jur blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--royal); background: rgba(var(--donker), .04); border-radius: 0 8px 8px 0; }
.jur blockquote p:last-child { margin-bottom: 0; }
.jur__tabelhoes { overflow-x: auto; margin: 0 0 20px; border: 1px solid rgba(var(--donker), .14); border-radius: 10px; }
.jur table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9rem; }
.jur th, .jur td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(var(--donker), .1); vertical-align: top; line-height: 1.5; }
.jur tr:last-child td { border-bottom: 0; }
.jur th { font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--donker), .55); background: rgba(var(--donker), .035); }
@media (max-width: 640px) { .jur { padding-bottom: 72px; } .jur h2 { margin-top: 36px; } }