/* Kennisbank van booka.be: gidsen, functies en vergelijkingen die tonen wat ze uitleggen.
   Bovenop s-1k6k7sp.css (kop, voet, knoppen, vragen). Elke illustratie is HTML en schaalt mee
   met haar kader (container queries), zodat ze op een gsm even scherp is als op een groot scherm. */

:root {
  --k-inkt: #141414;
  --k-zacht: #5a5a5a;
  --k-flauw: #8a8984;
  --k-lijn: rgba(20, 20, 20, .08);
  --k-kaart: #ffffff;
  --k-tint: #F4F2EC;
  --k-roze: #F8BCD8; --k-roze-z: #FDE6F1;
  --k-blauw: #A8C6F0; --k-blauw-z: #E3ECFA;
  --k-groen: #B7C98C; --k-groen-z: #ECF1DE;
  --k-geel: #F4D34E; --k-geel-z: #FBF0C4;
  --k-code: #17181D;
  --k-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --k-schaduw: 0 1px 1px rgba(20, 20, 20, .04), 0 18px 40px -22px rgba(20, 20, 20, .28);
}

.k { display: grid; gap: clamp(72px, 10vw, 128px); padding-bottom: 8px; }
.k h1, .k h2, .k h3 { text-wrap: balance; }
.k p { margin: 0; }
.k-zacht { color: var(--k-zacht); }

/* ---------------------------------------------------------------- */
/* Opening                                                           */
/* ---------------------------------------------------------------- */

.k-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-top: clamp(20px, 3vw, 36px); }
.k-hero h1 { margin: 20px 0 0; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; }
.k-hero .k-lead { margin-top: 20px; font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; color: #3d3d3d; max-width: 36em; }
.k-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.k-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--k-zacht); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--k-lijn); }
.k-meta svg { width: 14px; height: 14px; }
.k-hero .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* De opening staat er meteen: geen invloeianimatie zoals elders op de site, ook niet voor een
   schermafbeelding, een deelvoorbeeld of een zoekmachine die geen animaties afspeelt. */
.k-hero h1, .k-hero .eyebrow, .k-hero .k-lead, .k-hero .row { animation: none; }

/* Het kader waarin een illustratie leeft. */
.k-scene {
  container-type: inline-size; position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1 / .86; border-radius: clamp(24px, 3vw, 36px); border: 1px solid var(--k-lijn);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--acc) 55%, white) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, var(--k-tint) 0%, transparent 60%),
    linear-gradient(160deg, #fff, #F7F5F0);
  box-shadow: var(--k-schaduw);
}
.k-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(20, 20, 20, .07) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(180deg, #000, transparent 75%); }
.k-scene .k-voorbeeld { position: absolute; left: 4cqw; bottom: 3.6cqw; font-size: max(10px, 2.3cqw); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-flauw); }
.k-laag { position: absolute; }

/* ---------------------------------------------------------------- */
/* Kort antwoord en inhoud                                           */
/* ---------------------------------------------------------------- */

.k-kort { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); background: var(--k-kaart); border: 1px solid var(--k-lijn); border-radius: 28px; padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--k-schaduw); }
.k-kort h2 { align-self: start; margin: 4px 0 0; font-size: 15px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--k-zacht); display: flex; align-items: center; gap: 10px; }
.k-kort h2::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--acc); }
.k-kort ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.k-kort li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 17px; line-height: 1.5; }
.k-kort li .k-v { width: 26px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 45%, white); display: grid; place-items: center; margin-top: 1px; }
.k-kort li .k-v svg { width: 14px; height: 14px; }

.k-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -40px; }
.k-toc b { font-size: 13px; color: var(--k-flauw); font-weight: 700; margin-right: 6px; }
.k-toc a { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid var(--k-lijn); transition: background .2s, transform .2s; }
.k-toc a:hover { background: #fff; transform: translateY(-1px); }

.k-kop { display: grid; gap: 14px; max-width: 760px; }
.k-kop h2 { margin: 0; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.06; letter-spacing: -.04em; font-weight: 750; }
.k-kop p { font-size: 18px; line-height: 1.6; color: #444; }
.k-tekst { display: grid; gap: 16px; font-size: 17.5px; line-height: 1.65; color: #2c2c2c; max-width: 680px; }
.k-tekst strong { color: var(--k-inkt); }

.k-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.k-duo.omgekeerd > :first-child { order: 2; }
.k-duo h3 { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; line-height: 1.12; font-weight: 750; }
.k-duo .k-tekst { font-size: 17px; }
.k-beeld { container-type: inline-size; position: relative; border-radius: 28px; padding: clamp(18px, 3vw, 32px); background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 22%, white), #fff 70%); border: 1px solid var(--k-lijn); box-shadow: var(--k-schaduw); overflow: hidden; }
.k-beeld.rustig { background: linear-gradient(160deg, var(--k-tint), #fff 75%); }
.k-beeld > .m { font-size: max(10.5px, 3.1cqw); }
.k-beeld figcaption { margin-top: 14px; font-size: 13.5px; color: var(--k-flauw); }
.k-beeld img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 50px -28px rgba(20, 20, 20, .45); }

/* Stappen: een echte volgorde, dus genummerd. */
.k-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 44px); counter-reset: stap; }
.k-stap { counter-increment: stap; display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; position: relative; }
.k-stap::before { content: counter(stap); width: 52px; height: 52px; border-radius: 999px; background: var(--k-inkt); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.k-stap:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 60px; bottom: calc(-1 * clamp(28px, 4vw, 44px) + 8px); width: 2px; background: repeating-linear-gradient(180deg, rgba(20, 20, 20, .16) 0 6px, transparent 6px 12px); }
.k-stap h3 { margin: 10px 0 10px; font-size: 21px; letter-spacing: -.02em; font-weight: 750; }
.k-stap .k-tekst { font-size: 16.5px; }
.k-stap .k-beeld { padding: clamp(14px, 2.4vw, 22px); }

/* Waarschuwing en tip. */
.k-let { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; border-radius: 22px; padding: 20px 22px; background: var(--k-geel-z); border: 1px solid rgba(180, 140, 0, .18); max-width: 820px; }
.k-let.tip { background: var(--k-groen-z); border-color: rgba(90, 120, 40, .18); }
.k-let .k-ico { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.k-let .k-ico svg { width: 20px; height: 20px; }
.k-let b { display: block; font-size: 16px; margin-bottom: 4px; }
.k-let p { font-size: 16px; line-height: 1.55; color: #3a3a3a; }

/* Tabel. */
.k-tabel { overflow-x: auto; border-radius: 22px; border: 1px solid var(--k-lijn); background: var(--k-kaart); box-shadow: var(--k-schaduw); }
.k-tabel table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 560px; }
.k-tabel th, .k-tabel td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--k-lijn); vertical-align: top; }
.k-tabel tr:last-child td, .k-tabel tr:last-child th { border-bottom: 0; }
.k-tabel thead th { font-size: 13px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--k-zacht); background: #FAF9F6; }
.k-tabel tbody th { font-weight: 650; color: var(--k-inkt); width: 32%; }
.k-tabel td.booka { background: color-mix(in srgb, var(--acc) 14%, white); font-weight: 600; }
.k-ja, .k-nee { display: inline-flex; align-items: center; gap: 6px; }
.k-ja svg, .k-nee svg { width: 16px; height: 16px; flex: none; }

/* Kosten per teamgrootte, op schaal. */
.k-kosten { display: grid; gap: 22px; background: var(--k-kaart); border: 1px solid var(--k-lijn); border-radius: 26px; padding: clamp(20px, 3vw, 34px); box-shadow: var(--k-schaduw); }
.k-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--k-zacht); }
.k-legende span { display: inline-flex; align-items: center; gap: 8px; }
.k-legende i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.k-rij { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.k-rij > b { font-size: 14.5px; font-weight: 700; }
.k-balken { display: grid; gap: 6px; }
.k-balk { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--k-zacht); }
.k-balk i { display: block; height: 18px; border-radius: 6px; min-width: 6px; }
.k-balk strong { color: var(--k-inkt); font-weight: 700; white-space: nowrap; }
.k-noot { font-size: 13.5px; color: var(--k-flauw); line-height: 1.5; }

/* Kaartjes naast elkaar. */
.k-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.k-tegel { container-type: inline-size; background: var(--k-kaart); border: 1px solid var(--k-lijn); border-radius: 22px; padding: 18px; display: grid; gap: 12px; align-content: start; box-shadow: var(--k-schaduw); }
.k-tegel h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; font-weight: 750; }
.k-tegel p { font-size: 15px; line-height: 1.55; color: var(--k-zacht); }
.k-tegel .k-mini { border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 20%, white), var(--k-tint)); padding: 14px; min-height: 160px; display: grid; place-items: center; overflow: hidden; }
.k-tegel .k-mini .m { font-size: max(10px, 4.4cqw); }
.k-pakket { display: inline-block; justify-self: start; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--k-tint); color: #3a3a3a; }

.k-bronnen { display: grid; gap: 8px; font-size: 14px; color: var(--k-zacht); max-width: 820px; }
.k-bronnen ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.k-bronnen a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- */
/* Bouwstenen voor illustraties. Maten in em: het kader zet de grootte. */
/* ---------------------------------------------------------------- */

.m { font-size: max(9px, 3.1cqw); line-height: 1.35; color: var(--k-inkt); }
.m-kaart { background: #fff; border-radius: 1.1em; border: 1px solid rgba(20, 20, 20, .06); box-shadow: 0 .1em .2em rgba(20, 20, 20, .04), 0 1.6em 3em -1.6em rgba(20, 20, 20, .35); }
.m-tel { width: 15em; border-radius: 2.6em; background: #fff; border: .55em solid #141414; box-shadow: 0 2.4em 4em -1.8em rgba(20, 20, 20, .5); overflow: hidden; position: relative; }
.m-tel::before { content: ""; position: absolute; top: .55em; left: 50%; translate: -50% 0; width: 4.6em; height: 1.2em; border-radius: 999px; background: #141414; z-index: 2; }
.m-tel .m-scherm { padding: 2.4em 1em 1.1em; display: grid; gap: .7em; }
.m-browser { border-radius: 1em; background: #fff; border: 1px solid rgba(20, 20, 20, .08); box-shadow: 0 2em 4em -2em rgba(20, 20, 20, .45); overflow: hidden; }
.m-balk { display: flex; align-items: center; gap: .45em; padding: .65em .9em; background: #F3F2EE; border-bottom: 1px solid rgba(20, 20, 20, .06); }
.m-balk i { width: .62em; height: .62em; border-radius: 999px; background: #D9D7D0; }
.m-balk span { margin-left: .6em; flex: 1; font-size: .78em; color: #7a7a7a; background: #fff; border-radius: 999px; padding: .2em .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-knop { display: inline-flex; align-items: center; justify-content: center; gap: .4em; background: #141414; color: #fff; font-weight: 700; border-radius: 999px; padding: .55em 1.1em; font-size: .9em; white-space: nowrap; }
.m-knop.licht { background: #fff; color: #141414; border: 1px solid rgba(20, 20, 20, .14); }
.m-knop.acc { background: var(--acc); color: #141414; }
.m-chip { display: inline-flex; align-items: center; gap: .35em; font-size: .8em; font-weight: 650; padding: .3em .75em; border-radius: 999px; background: #F2F1EC; white-space: nowrap; }
.m-chip.aan { background: #141414; color: #fff; }
.m-chip.acc { background: var(--acc); }
.m-label { font-size: .72em; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: #8a8984; }
.m-titel { font-weight: 750; letter-spacing: -.02em; }
.m-rij { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .6em .2em; border-bottom: 1px solid rgba(20, 20, 20, .06); }
.m-rij:last-child { border-bottom: 0; }
.m-stip { width: .7em; height: .7em; border-radius: 999px; background: var(--acc); flex: none; }
.m-pijl { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 999px; background: #141414; color: #fff; }
.m-pijl svg { width: 1.3em; height: 1.3em; }
.m-cursor { width: 1.8em; height: 1.8em; filter: drop-shadow(0 .2em .3em rgba(0, 0, 0, .25)); }

.m-code { background: var(--k-code); color: #E8E6E1; border-radius: 1em; padding: 1em 1.1em; font-family: var(--k-mono); font-size: .82em; line-height: 1.55; box-shadow: 0 2em 4em -2em rgba(20, 20, 20, .6); overflow: hidden; }
.m-code .t { color: #F8BCD8; } .m-code .a { color: #A8C6F0; } .m-code .s { color: #C9DC9E; } .m-code .c { color: #7d7f88; }
.k-code { background: var(--k-code); color: #E8E6E1; border-radius: 18px; padding: 18px 20px; font-family: var(--k-mono); font-size: 14px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.k-code .t { color: #F8BCD8; } .k-code .a { color: #A8C6F0; } .k-code .s { color: #C9DC9E; } .k-code .c { color: #7d7f88; }

.m-bestand { display: flex; align-items: center; gap: .8em; padding: .8em .9em; }
.m-bestand .m-type { width: 2.6em; height: 3.1em; border-radius: .45em; display: grid; place-items: end center; padding-bottom: .35em; font-size: .7em; font-weight: 800; color: #fff; background: #3E8E5E; position: relative; }
.m-bestand .m-type.csv { background: #4A7BC0; }
.m-bestand .m-type::before { content: ""; position: absolute; top: 0; right: 0; width: .9em; height: .9em; background: linear-gradient(225deg, #FBFAF7 50%, rgba(0, 0, 0, .18) 50%); border-bottom-left-radius: .25em; }

.m-bon { position: relative; border-radius: 1.3em; padding: 1.2em 1.3em; color: #141414; background:
  radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .7), transparent 50%),
  linear-gradient(135deg, var(--k-roze) 0%, #FBD3B8 60%, var(--k-geel) 130%);
  box-shadow: 0 2.2em 4em -2em rgba(160, 60, 100, .55); overflow: hidden; }
.m-bon::after { content: ""; position: absolute; right: -2.4em; bottom: -2.4em; width: 8em; height: 8em; border-radius: 999px; border: 1.1em solid rgba(255, 255, 255, .35); }
.m-bon .m-bedrag { font-size: 2.6em; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: .25em; }
.m-bon .m-codevak { display: inline-block; margin-top: .9em; font-family: var(--k-mono); font-size: .85em; letter-spacing: .12em; padding: .35em .7em; border-radius: .5em; border: 1.5px dashed rgba(20, 20, 20, .35); background: rgba(255, 255, 255, .45); }

.m-stempels { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55em; }
.m-stempels span { aspect-ratio: 1; border-radius: 999px; border: 2px dashed rgba(20, 20, 20, .2); display: grid; place-items: center; }
.m-stempels span.vol { border: 0; background: var(--acc); }
.m-stempels svg { width: 55%; height: 55%; }

.m-meter { height: .9em; border-radius: 999px; background: #EFEDE7; overflow: hidden; }
.m-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--k-groen), var(--acc)); }

.m-ster { color: #F2B201; letter-spacing: .05em; }
.m-google .m-acties { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin-top: .9em; }
.m-google .m-actie { display: grid; justify-items: center; gap: .3em; font-size: .72em; font-weight: 650; color: #1a5fd0; }
.m-google .m-actie i { width: 2.6em; height: 2.6em; border-radius: 999px; border: 1px solid rgba(20, 20, 20, .12); display: grid; place-items: center; }
.m-google .m-actie i svg { width: 1.2em; height: 1.2em; }
.m-google .m-actie.hier i { background: #1a5fd0; border-color: #1a5fd0; color: #fff; }
.m-google .m-actie.hier { color: #141414; }

.m-mail .m-van { display: flex; align-items: center; gap: .7em; }
.m-mail .m-avatar { width: 2.2em; height: 2.2em; border-radius: 999px; background: var(--acc); display: grid; place-items: center; font-weight: 800; font-size: .85em; }

.m-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5em; }
.m-tegels > div { border-radius: .8em; padding: .6em .7em; background: #F6F5F1; }
.m-tegels b { display: block; font-size: 1.5em; letter-spacing: -.03em; line-height: 1.1; }
.m-tegels span { font-size: .72em; color: #7a7a7a; font-weight: 650; }

.m-dag { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; text-align: center; font-size: .78em; font-variant-numeric: tabular-nums; }
.m-dag span { padding: .35em 0; border-radius: .45em; color: #6a6a6a; }
.m-dag span.kop { font-weight: 750; color: #9a9a96; font-size: .85em; }
.m-dag span.op { background: var(--acc); color: #141414; font-weight: 800; }
.m-dag span.tot { background: #141414; color: #fff; font-weight: 800; }
.m-dag span.tussen { background: color-mix(in srgb, var(--acc) 30%, white); }

/* ---------------------------------------------------------------- */
/* Klein scherm                                                      */
/* ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .k-hero { grid-template-columns: minmax(0, 1fr); }
  .k-duo { grid-template-columns: minmax(0, 1fr); }
  .k-duo.omgekeerd > :first-child { order: 0; }
  .k-stap { grid-template-columns: 44px minmax(0, 1fr); }
  .k-stap::before { width: 44px; height: 44px; font-size: 17px; }
  .k-stap:not(:last-child)::after { left: 21px; top: 52px; }
  .k-stap > .k-beeld { grid-column: 2; }
  .k-kort { grid-template-columns: minmax(0, 1fr); }
  .k-toc { margin-top: -24px; }
  .k-rij { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
/* Een tabel wordt op een gsm een kaartje per rij: zo staat het antwoord van Booka niet buiten beeld. */
@media (max-width: 640px) {
  .k-tabel { overflow: visible; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .k-tabel table, .k-tabel tbody, .k-tabel tr, .k-tabel th, .k-tabel td { display: block; min-width: 0; width: auto; }
  .k-tabel thead { display: none; }
  .k-tabel tr { background: #fff; border: 1px solid var(--k-lijn); border-radius: 18px; margin-bottom: 10px; box-shadow: var(--k-schaduw); overflow: hidden; }
  .k-tabel tbody th { width: auto; padding: 14px 16px 8px; border: 0; font-size: 16px; }
  .k-tabel td { border: 0; padding: 4px 16px 12px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .k-tabel td::before { content: attr(data-kop); font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--k-flauw); padding-top: 3px; }
  .k-tabel td.booka { margin: 0 8px 8px; border-radius: 12px; padding: 10px 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .k-scene .k-laag { animation: k-zweef 7s ease-in-out infinite; }
  .k-scene .k-laag:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2s; }
  @keyframes k-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
}