/* ==========================================================================
   Studio Filmkids — Filmkits sectie
   Zelfstandig design-system (fk-*) binnen het bestaande brandpalet.
   Fonts: Londrina Solid (koppen) + Quattrocento Sans (tekst), net als de site.
   ========================================================================== */

:root {
  --fk-purple: #5c3f92;
  --fk-purple-ink: #2e2050;
  --fk-purple-deep: #241a40;
  --fk-purple-mid: #4a3277;   /* = --sfk-paars-diep van de site */
  --fk-green: #00b295;
  --fk-green-dark: #008f78;
  --fk-tint: #ccf0ea;
  --fk-tint-soft: #e9f8f5;
  --fk-violet: #aa8cc0;
  --fk-warm: #faebe3;
  --fk-ala: #ebe4d9;
  --fk-sienna: #ee7252;
  --fk-ink: #131313;
  --fk-white: #fff;
  --fk-grad: linear-gradient(135deg, #ff7448, #ff4848 50%, #6248ff);
  --fk-shadow: 0 10px 30px rgba(46, 32, 80, .18);
  --fk-radius: 16px;
  --fk-font-head: "Londrina Solid", sans-serif;
  --fk-font-body: "Quattrocento Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fk-reveal, .fk-card, .fk-btn, .fk-poster-fan figure { transition: none !important; animation: none !important; }
}

body.fk-body {
  margin: 0;
  /* De meelopende grond van /js/sfk.js. De donkere kop en de
     filmklapperstreep liggen erboven en blijven dus donker paars;
     het verloop begint pas daaronder. */
  background-color: var(--sfk-grond);
  transition: background-color .9s ease;
  color: var(--fk-ink);
  font-family: var(--fk-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Op de smalste telefoon minstens 20px, net als de rest van de site. */
.fk-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 24px); }
.fk-container--narrow { max-width: 860px; }

h1, h2, h3, .fk-h {
  font-family: var(--fk-font-head);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .5em;
  /* Dieper dan haar #5C3F92 (wens Tes 2026-09-22). Die haalde op de lila
     grond maar 2.8:1 en bleef daarmee onder de norm voor grote tekst; op
     #2E2050 is dat 5.0:1, en op de turquoise en koraal grond 9.3 en 6.3. */
  color: var(--fk-purple-ink);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
h3 { font-size: 1.45rem; }

p { margin: 0 0 1em; }
.fk-lead { font-size: 1.2rem; }
.fk-center { text-align: center; }
.fk-muted { opacity: .82; }

/* --- Kicker / chips ------------------------------------------------------ */
/* Regelval (opmerking Tes 2026-09-23: "de onderbrekingen staan niet netjes").
   Koppen en korte inleidingen kregen regels van heel ongelijke lengte, met
   soms een enkel woord dat op de vorige regel achterbleef. balance verdeelt
   de woorden over de regels, pretty houdt in lopende tekst het laatste woord
   van een alinea gezelschap. Browsers die het niet kennen breken zoals nu. */
p, li, dd, figcaption, summary, blockquote { text-wrap: pretty; }
h1, h2, h3, h4, .fk-h, .fk-lead, .fk-section__head p, .fk-hero p, .fk-ticket p { text-wrap: balance; }

.fk-kicker {
  display: inline-block;
  font-family: var(--fk-font-head);
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fk-white);
  background: var(--fk-green);
  border-radius: 999px;
  padding: .35rem 1rem .3rem;
  margin-bottom: 1rem;
}
.fk-kicker--light { background: var(--fk-white); color: var(--fk-purple); }

.fk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1.2rem; list-style: none; }
.fk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fk-white);
  border: 2px solid var(--fk-ala);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .95rem;
  white-space: nowrap;
}
.fk-chip--dark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }

/* --- Buttons ------------------------------------------------------------- */
.fk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--fk-font-head);
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: #00695C;                 /* verdiepte turquoise op wit = 6,6:1 */
  background: #fff;               /* wit knopvlak, net als op de rest van de site */
  border: none;
  border-radius: 14px;
  padding: .85rem 1.8rem .75rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(36, 26, 64, .28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fk-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(36, 26, 64, .32); }
.fk-btn:active { transform: translateY(1px); box-shadow: 0 5px 14px rgba(36, 26, 64, .3); }
.fk-btn--ghost {
  background: #fff;
  color: var(--fk-purple-deep);
  border: none;
}
.fk-btn--purple { background: #fff; color: var(--fk-purple); }
/* Gevuld diep paars: voor bestelknoppen die op een WIT vlak staan (de
   prijskaartjes en het bestelformulier). Beige op wit heeft daar nauwelijks
   vorm; op een gekleurde grond blijft de beige knop staan. Keuze Tes
   2026-09-22. Wit op #4a3277 = 9,9:1. */
.fk-btn--diep { background: var(--fk-purple-mid); color: #fff; }
.fk-btn--diep:hover { background: #3b2760; }
.fk-btn--big { font-size: 1.5rem; padding: 1rem 2.4rem .85rem; border-radius: 18px; }
.fk-btn:focus-visible { outline: 3px solid #4d65ff; outline-offset: 3px; }

.fk-btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- Navbar (statisch, spiegelt navbar3 van de site) --------------------- */
.fk-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--fk-violet);
  border-bottom: 2px solid var(--fk-ala);
}
.fk-nav__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 5%;
  display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; gap: 16px;
  min-height: 100px;
}
.fk-nav__menu { display: flex; align-items: center; gap: 6px; font-size: .95rem; }
.fk-nav__menu--right { justify-content: flex-end; }
.fk-nav__link {
  background: var(--fk-ala);
  color: var(--fk-ink);
  border-radius: 10px;
  padding: .5rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.fk-nav__link:hover { background: var(--fk-white); }
.fk-nav__link--active { background: var(--fk-purple); color: var(--fk-white); }
.fk-nav__logo { height: 80px; margin: 10px 0; }
.fk-nav__drop { position: relative; }
.fk-nav__droptoggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--fk-ala);
  border-radius: 10px;
  padding: .5rem 1rem;
  margin-left: 6px;
  white-space: nowrap;
  cursor: default;
}
.fk-nav__droplist {
  display: none;
  position: absolute; top: 100%; left: 6px;
  background: var(--fk-violet);
  border: 2px solid var(--fk-ala);
  border-radius: 10px;
  padding: 6px;
  min-width: 150px;
  z-index: 80;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.fk-nav__drop:hover .fk-nav__droplist,
.fk-nav__drop:focus-within .fk-nav__droplist { display: block; }
.fk-nav__droplist a {
  display: block;
  background: var(--fk-ala);
  border-radius: 8px;
  padding: .45rem .9rem;
  margin: 4px 0;
  text-decoration: none;
  white-space: nowrap;
}
.fk-nav__droplist a:hover { background: var(--fk-white); }
@media (max-width: 991px) { .fk-nav__drop { display: none; } }

.fk-nav__burger {
  display: none;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.fk-nav__burger span { display: block; width: 26px; height: 3px; background: var(--fk-ink); margin: 5px 0; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 991px) {
  .fk-nav__inner { grid-template-columns: max-content 1fr max-content; min-height: 84px; }
  .fk-nav__menu { display: none; }
  .fk-nav__logo { height: 64px; justify-self: center; }
  .fk-nav__burger { display: block; }
  .fk-nav--open .fk-nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .fk-nav--open .fk-nav__burger span:nth-child(2) { opacity: 0; }
  .fk-nav--open .fk-nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

.fk-nav__panel {
  display: none;
  background: var(--fk-violet);
  border-bottom: 2px solid var(--fk-ala);
  padding: 12px 24px 24px;
}
.fk-nav--open .fk-nav__panel { display: block; }
.fk-nav__panel a {
  display: block;
  background: var(--fk-ala);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin-bottom: 8px;
  text-decoration: none;
  font-size: 1.05rem;
}
.fk-nav__panel a.fk-nav__link--active { background: var(--fk-purple); color: #fff; }
@media (min-width: 992px) { .fk-nav__panel { display: none !important; } }

/* Actieve menupill, zelfde look als Webflow's w--current (die klasse wordt
   door webflow.js herberekend op exacte URL-match en valt daardoor weg op
   /filmkits/ en de themapagina's). */
.navbar3_link.fk-current { background-color: var(--fk-sienna); color: var(--fk-ala); border-radius: 10px; }

/* --- Hero ---------------------------------------------------------------- */
.fk-hero {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.07) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.05) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.06) 0 2px, transparent 3px),
    radial-gradient(120% 90% at 50% 10%, #4a3277 0%, var(--fk-purple-ink) 55%, var(--fk-purple-deep) 100%);
  color: var(--fk-white);
  overflow: hidden;
}
.fk-hero__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  /* Alleen boven en onder: dit element IS de .fk-container, en een
     padding-korting met een 0 erin wist de zijmarge. Op de telefoon liep de
     kop daardoor tot tegen de rand (gemeld door Tes 2026-09-26). */
  padding-top: 84px;
  padding-bottom: 96px;
}
.fk-hero h1 { color: var(--fk-white); font-size: clamp(2.5rem, 5.2vw, 3.9rem); }
.fk-hero .fk-display {
  display: block;
  font-size: clamp(3.6rem, 9vw, 6.2rem);
  line-height: 1;
  background: var(--fk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.25));
  margin-bottom: .1em;
}
.fk-hero__sub { font-size: 1.25rem; max-width: 34em; opacity: .95; }

.fk-poster-fan { position: relative; display: grid; place-items: center; min-height: 480px; }
.fk-poster-fan::before {
  content: "";
  position: absolute; inset: 10% 5%;
  background: radial-gradient(closest-side, rgba(0,178,149,.35), transparent 70%);
  filter: blur(10px);
}
.fk-poster-fan figure {
  margin: 0; position: absolute; width: min(48%, 235px);
  border: 6px solid #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transition: transform .25s ease;
}
.fk-poster-fan figure:nth-child(1) { transform: rotate(-9deg) translate(-58%, 2%); }
.fk-poster-fan figure:nth-child(2) { transform: rotate(8deg) translate(58%, 6%); }
.fk-poster-fan figure:nth-child(3) { transform: rotate(-1deg) translateY(-2%); z-index: 2; }
.fk-poster-fan:hover figure:nth-child(3) { transform: rotate(-1deg) translateY(-5%) scale(1.03); }

/* --- Filmklapper-divider (schuine zwart-witte strepen) -------------------- */
.fk-filmstrip {
  height: 34px;
  background: repeating-linear-gradient(-55deg, var(--fk-ink) 0 26px, #f6f1e7 26px 52px);
  border-top: 3px solid var(--fk-ink);
  border-bottom: 3px solid var(--fk-ink);
}

/* --- Secties ------------------------------------------------------------- */
/* Was 88px; dat gaf op /kinderfeestje te veel lege grond tussen de blokken. */
.fk-section { padding: 62px 0; }
.fk-section--warm { background: transparent; }  /* was #faebe3, nu de meelopende grond */
.fk-section--tint { background: transparent; }  /* was #e9f8f5, nu de meelopende grond */
.fk-section--purple {
  border-radius: clamp(20px, 2.4vw, 34px);
  margin: clamp(18px, 3vw, 40px) clamp(12px, 3vw, 34px);
  overflow: hidden;
  /* Getekende popcorn rondom, met het midden vrij (idee Tes 2026-09-22).
     Geen foto en geen sluier: de tekst staat in het open midden op schoon
     diep paars (14.6:1) en de popcorn mag daarnaast op volle kracht staan.
     Een eerdere poging legde de popcorn ACHTER de tekst; daar was een sluier
     voor nodig en werd de popcorn grijzig.

     De tekening staat op de verhouding van dit blok (1200x315, gemeten
     1212x318). Wijkt dat af, dan snijdt background-size:cover juist de randen
     weg waar de popcorn zit. Opnieuw tekenen: python3 bron/popcorn.py */
  background-color: var(--fk-purple-ink);
  background-image: url("/images/popcorn.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--fk-white);
}
/* Het bestelblok is staand (gemeten 963x1156) in plaats van liggend, dus daar
   schaalde cover de liggende tekening 3,7x op: reuzepopcorn (opmerking Tes
   2026-09-22). Eigen staande tekening, zodat de pitten even groot zijn als op
   de andere blokken:
   python3 bron/popcorn.py pages/images/popcorn-staand.svg 150 1200 1100 11 */
#bestellen { background-image: url("/images/popcorn-staand.svg"); }
.fk-section--purple h2, .fk-section--purple h3 { color: var(--fk-white); }
.fk-section__head { max-width: 760px; margin: 0 auto 44px; text-align: center; }

/* --- USP-kaarten ---------------------------------------------------------- */
.fk-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Wit met een gekleurde bovenrand (keuze Tes 2026-09-22). De pagina had
   veertien witte kaartjes onder elkaar; de kleurstreep geeft ze onderscheid
   zonder dat er iets wegvalt. Zelfde patroon als de keuzekaarten op de
   hoofdpagina. De kleuren lopen rond per rij, zie .fk-accentrij hieronder. */
.fk-usp {
  background: var(--fk-white);
  border: 0;
  border-top: 5px solid var(--fk-violet);
  border-radius: var(--fk-radius);
  padding: 22px 20px;
  box-shadow: 0 6px 16px rgba(46, 32, 80, .10);
}
.fk-usp__emoji { font-size: 1.9rem; line-height: 1; margin-bottom: 10px; }
.fk-usp h3 { font-size: 1.25rem; margin-bottom: .3em; }
.fk-usp p { margin: 0; font-size: .98rem; }

/* --- Stappen -------------------------------------------------------------- */
.fk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: fkstep; }
/* "Hoe het werkt" is een VOLGORDE, geen opsomming. Daarom hier een tijdlijn
   in plaats van kaartjes: genummerde bollen op een lijn, tekst eronder. Stond
   het als kaartjes, dan waren dit en "Wat zit er in de kit?" twee identieke
   rijen onder elkaar (wens Tes 2026-09-22). */
.fk-steps { position: relative; }

.fk-steps::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: rgba(36, 26, 64, .28);
}

.fk-step {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 60px 14px 0;
  box-shadow: none;
  text-align: center;
  counter-increment: fkstep;
}
.fk-step::before {
  content: counter(fkstep);
  /* Op de lijn gecentreerd. Diep paars, want de bol moet op elke grond
     zichtbaar blijven: 5.0:1 op lila, 9.3:1 op turquoise, 6.3:1 op koraal.
     Wit cijfer erop = 14.6:1. */
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--fk-purple-ink);
  color: var(--fk-white);
  font-family: var(--fk-font-head);
  font-size: 1.35rem;
  border-radius: 50%;
  border: 3px solid var(--fk-white);
}
.fk-step h3 { font-size: 1.25rem; margin: .4em 0 .3em; }
.fk-step p { margin: 0; font-size: .98rem; }

/* --- Kit-inhoud ----------------------------------------------------------- */
/* Zes onderdelen sinds de inktbesparende versie en de muzieklijst erbij zijn
   (2026-09-26): drie kolommen, twee rijen. Op vijf kolommen bleef er een
   losse kaart over. */
.fk-kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fk-kit-item {
  background: var(--fk-white);
  border: 0;
  border-top: 5px solid var(--fk-violet);
  border-radius: var(--fk-radius);
  padding: 20px 18px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(46, 32, 80, .10);
}

/* De kleurstreep loopt rond door haar palet, per rij opnieuw.

   Dit zijn de VERDIEPTE tonen, niet de merkkleuren zelf. Haar eigen lila is
   exact de kleur van de paginagrond, dus die streep werd onzichtbaar: het
   kaartje leek simpelweg lager te beginnen. Hetzelfde gold voor turquoise en
   koraal zodra de meelopende grond die kant op schoof.

   Verdiept is dat opgelost: de streep is nu donkerder dan zowel het witte
   kaartje eronder als elke grond erboven (tegen wit 4.8 tot 8.1:1). Een wit
   ringetje om het kaartje was daarmee overbodig; dat stond te hard. */
.fk-usps > :nth-child(4n+1), .fk-kit > :nth-child(4n+1) { border-top-color: #00695C; }
.fk-usps > :nth-child(4n+2), .fk-kit > :nth-child(4n+2) { border-top-color: var(--fk-purple); }
.fk-usps > :nth-child(4n+3), .fk-kit > :nth-child(4n+3) { border-top-color: #B33F22; }
.fk-usps > :nth-child(4n+4), .fk-kit > :nth-child(4n+4) { border-top-color: #806990; }
.fk-kit-item__emoji { font-size: 2rem; margin-bottom: 8px; }
.fk-kit-item h3 { font-size: 1.15rem; margin-bottom: .3em; }
.fk-kit-item p { margin: 0; font-size: .92rem; }

/* --- Themakaarten ---------------------------------------------------------- */
.fk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fk-card {
  --fk-accent: var(--fk-purple);
  position: relative;
  display: flex; flex-direction: column;
  background: var(--fk-white);
  border-radius: var(--fk-radius);
  overflow: hidden;
  box-shadow: var(--fk-shadow);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fk-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 18px 40px rgba(46,32,80,.28); }
.fk-card__imgwrap { position: relative; overflow: hidden; aspect-ratio: 2 / 3; }
.fk-card__imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.fk-card:hover .fk-card__imgwrap img { transform: scale(1.05); }
.fk-card__genre {
  position: absolute; top: 12px; left: 12px;
  background: var(--fk-accent);
  color: #fff;
  font-family: var(--fk-font-head);
  font-size: .9rem;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: .25rem .8rem .2rem;
}
.fk-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.fk-card__body h3 { margin: 0; font-size: 1.3rem; color: var(--fk-purple); }
.fk-card__body p {
  margin: 0; font-size: .95rem; flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fk-card__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; opacity: .8; }
.fk-card__cta {
  margin-top: 6px;
  font-family: var(--fk-font-head);
  font-size: 1.1rem;
  color: var(--fk-accent);
}
.fk-card__cta::after { content: " →"; }

/* --- Prijzen (tickets) ----------------------------------------------------- */
.fk-tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.fk-ticket {
  position: relative;
  background: var(--fk-white);
  border-radius: var(--fk-radius);
  padding: 30px 26px 26px;
  box-shadow: var(--fk-shadow);
  display: flex; flex-direction: column;
  border-top: 6px solid var(--fk-violet);
}
.fk-ticket--featured {
  border-top-color: var(--fk-green);
  outline: 3px solid var(--fk-green);
  transform: scale(1.03);
}
.fk-ticket__badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--fk-green);
  color: #fff;
  font-family: var(--fk-font-head);
  font-size: .95rem;
  white-space: nowrap;
  border-radius: 999px;
  padding: .3rem 1rem .25rem;
  box-shadow: 0 3px 0 var(--fk-green-dark);
}
.fk-ticket h3 { font-size: 1.35rem; }
.fk-ticket__price { font-family: var(--fk-font-head); font-size: 2.4rem; color: var(--fk-ink); line-height: 1; margin: 4px 0 12px; }
.fk-ticket__price small { font-size: 1rem; opacity: .6; font-family: var(--fk-font-body); }
.fk-ticket p, .fk-ticket ul { font-size: .97rem; margin: 0 0 14px; }
.fk-ticket ul { padding-left: 1.2em; }
.fk-ticket li { margin-bottom: 6px; }
.fk-ticket .fk-btn { margin-top: auto; }

/* --- Optie-kaarten (op locatie) -------------------------------------------- */
/* De blokken "film" en "videoclip" op /kinderfeestje. Vormgeving gekozen door
   Tes (2026-09-22): het filmklapperrandje van C bovenop, met de gekleurde
   titelbalk van B eronder. Twee witte rechthoeken met een opsomming lazen op
   het lila als blanco vlakken; nu is in één oogopslag te zien dat het twee
   verschillende keuzes zijn. Alleen hier gebruikt, nergens anders. */
.fk-ticket--media { padding: 0 0 26px; overflow: hidden; }

/* Klapperrandje, hetzelfde motief als onder de menubalk en boven de voet. */
.fk-ticket--media::before {
  content: "";
  display: block;
  height: 14px;
  background: repeating-linear-gradient(-55deg, #131313 0 12px, #F6F1E7 12px 24px);
  border-bottom: 2px solid #131313;
}

.fk-ticket--media .fk-ticket__media { margin: 0; }
.fk-ticket--media .fk-ticket__media img,
.fk-ticket--media .fk-ticket__media video {
  width: 100%; height: 265px; object-fit: cover; display: block; background: #0f141b;
}

/* Titelbalk. Film krijgt haar paars, de clip het diepere lila: zo zie je dat
   het twee keuzes zijn en niet twee keer hetzelfde.
   wit op #5c3f92 = 7.56:1, wit op #806990 = 4.84:1 — allebei AA. */
.fk-ticket--media h3 {
  margin: 0 0 18px;
  padding: 15px 26px 12px;
  background: var(--fk-purple);
  color: var(--fk-white);
  font-size: 1.45rem;
}

/* De clip krijgt haar oranje (#EE7252, hetzelfde als "Actie!" op de
   kopvlakken) met donkere tekst: 5.52:1. Wit erop zou 2.93:1 zijn. */
.fk-tickets--2 .fk-ticket--media:nth-child(2) h3 {
  background: var(--fk-sienna);
  color: var(--fk-purple-deep);
}

.fk-ticket--media p, .fk-ticket--media ul, .fk-ticket--media .fk-btn { margin-left: 26px; margin-right: 26px; }

/* Vinkjes in plaats van bolletjes. */
.fk-ticket--media ul { list-style: none; padding-left: 0; }
.fk-ticket--media ul li { position: relative; padding-left: 26px; }
.fk-ticket--media ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 12px;
  height: 7px;
  border-left: 3px solid #00695C;
  border-bottom: 3px solid #00695C;
  transform: rotate(-45deg);
}

/* Gevulde knop over de breedte van de kaart; beige op wit had nauwelijks vorm.
   Elke knop volgt de kleur van zijn eigen titelbalk, zodat de twee keuzes ook
   onderaan uit elkaar te houden zijn. */
/* De knop hugt zijn eigen tekst in plaats van de volle kaartbreedte te
   vullen: over de hele breedte werd hij een zware balk onder aan de kaart. */
.fk-ticket--media .fk-btn {
  display: inline-flex;
  align-self: flex-start;
  font-size: 1.12rem;
}

.fk-tickets--2 .fk-ticket--media:nth-child(1) .fk-btn {
  background: var(--fk-purple);
  color: var(--fk-white);          /* 7.56:1 — AA */
}

.fk-tickets--2 .fk-ticket--media:nth-child(2) .fk-btn {
  background: var(--fk-sienna);
  color: var(--fk-purple-deep);    /* 5.52:1 — AA */
}
.fk-tickets--2 { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
.fk-usps--2 { grid-template-columns: repeat(2, 1fr); }

/* --- "Goed om te weten" als één paneel ------------------------------------
   Stond als twee rijen witte kaartjes, en daardoor leek het blok precies op
   de reviewkaarten eronder (wens Tes 2026-09-22). Nu één wit vlak met de
   punten erin, gescheiden door dunne lijntjes. De reviews houden hun losse
   kaarten; zo zie je meteen dat het twee verschillende dingen zijn. */
.fk-weten {
  background: var(--fk-white);
  border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow);
  padding: 8px clamp(18px, 2.5vw, 30px) 22px;
}

.fk-weten .fk-usp {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fk-ala);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 14px;
}

/* de bovenste rij heeft geen lijn nodig */
.fk-weten > .fk-usps:first-child > .fk-usp { border-top: 0; }
.fk-weten .fk-usps { gap: 0 clamp(14px, 2vw, 28px); }

/* --- Uitleg links, mockup rechts -----------------------------------------
   Wens Tes 2026-09-22: de vier info-stukjes onder elkaar links, en rechts
   ruimte voor een mockup van de kit. Het beeld levert ze later aan; tot die
   tijd staat er een duidelijk gemarkeerd leeg vak, zodat niemand denkt dat
   er een foto stuk is. */
.fk-kitintro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.fk-usps--lijst { grid-template-columns: 1fr; gap: 14px; }

/* Onder elkaar in een smalle kolom leest een liggende opzet beter: het icoon
   naast de tekst in plaats van erboven, en de kleurstreep links in plaats van
   bovenaan. */
.fk-usps--lijst .fk-usp {
  border-top: 0;
  border-left: 5px solid var(--fk-violet);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icoon kop" "icoon tekst";
  column-gap: 14px;
  padding: 16px 18px;
}

.fk-usps--lijst .fk-usp__emoji { grid-area: icoon; margin: 0; font-size: 1.7rem; }
.fk-usps--lijst .fk-usp h3 { grid-area: kop; margin: 0 0 .15em; }
.fk-usps--lijst .fk-usp p { grid-area: tekst; }

.fk-usps--lijst > :nth-child(4n+1) { border-left-color: #00695C; }
.fk-usps--lijst > :nth-child(4n+2) { border-left-color: var(--fk-purple); }
.fk-usps--lijst > :nth-child(4n+3) { border-left-color: #B33F22; }
.fk-usps--lijst > :nth-child(4n+4) { border-left-color: #806990; }

.fk-mockup { margin: 0; }
/* De stapel geprinte kits. Doorzichtige grond, dus hij past op elke
   achtergrondkleur die onder hem door schuift. Maken: python3 bron/mockup.py */
/* De mockup is een foto, dus hij krijgt dezelfde afgeronde hoeken en schaduw
   als de kaarten op deze pagina. Met scherpe hoeken plakt de beige tafel er
   als een vreemde tegel op het lila (gezien 2026-09-23). */
.fk-mockup img {
  display: block; width: 100%; height: auto;
  border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow);
}


@media (max-width: 860px) {
  /* Op smal onder elkaar, met de tekst eerst: een leeg mockup-vak bovenaan
     zou raar staan zolang het beeld er nog niet is. */
  .fk-kitintro { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
  .fk-tickets--2 { grid-template-columns: 1fr; max-width: 540px; }
  .fk-usps--2 { grid-template-columns: 1fr; }
}

/* --- Verhaal / script ------------------------------------------------------ */
.fk-story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.fk-poster-frame {
  position: relative;
  border: 8px solid #fff;
  border-radius: 14px;
  box-shadow: var(--fk-shadow);
  overflow: hidden;
  transform: rotate(1.5deg);
}
.fk-poster-frame img { width: 100%; }
.fk-poster-frame__sticker {
  position: absolute; top: 14px; right: -34px;
  transform: rotate(38deg);
  background: var(--fk-sienna);
  color: #fff;
  font-family: var(--fk-font-head);
  font-size: .95rem;
  letter-spacing: .08em;
  padding: .3rem 3rem .25rem;
}

.fk-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fk-scene {
  background: #fffdf6;
  border: 1px solid #e6ddc9;
  border-radius: 10px;
  padding: 20px 20px 18px;
  font-family: "Courier New", Courier, monospace;
  font-size: .92rem;
  line-height: 1.5;
  box-shadow: 3px 4px 0 rgba(46,32,80,.12);
  transform: rotate(-.4deg);
}
.fk-scene:nth-child(2) { transform: rotate(.5deg); }
.fk-scene:nth-child(3) { transform: rotate(-.2deg); }
.fk-scene__head {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--fk-ala);
  padding-bottom: 6px;
  margin-bottom: 10px;
  color: var(--fk-purple);
}
.fk-scene p { margin: 0; }
/* De locatieregel: waar je deze scene thuis opneemt. Grijs 7,1:1 op #fffdf6. */
.fk-scene__loc { color: #5f5646; margin-bottom: .55em !important; }
/* De camerastandpunten van die scene, zoals ze in het draaiboek staan (idee
   Tes 2026-09-23). Staan onderaan het kaartje, klein, met een streepje erboven
   zodat ze los staan van de scriptregel. #5f5646 op #fffdf6 = 7,1:1. */
.fk-scene__cams {
  margin-top: .85em !important;
  padding-top: .6em;
  border-top: 1px dashed #ddd2b8;
  color: #5f5646;
  font-size: .78rem;
  line-height: 1.5;
}
.fk-scene__cams span {
  display: block;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  opacity: .75;
}

/* --- Bestelpagina --------------------------------------------------------- */
/* Korte kop zonder beeld: deze pagina komt na het bestellen, daar hoeft geen
   filmposter meer bij. */
.fk-hero--kort { padding: 64px 0 52px; }
.fk-hero--kort h1 { max-width: 16em; margin-left: auto; margin-right: auto; }
.fk-usps--3 { grid-template-columns: repeat(3, 1fr); }
.fk-spullen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 22px;
}
.fk-spullen li {
  background: var(--fk-white);
  border-radius: 12px;
  border-left: 5px solid var(--fk-violet);
  padding: 13px 18px;
  box-shadow: var(--fk-shadow);
}
@media (max-width: 860px) {
  .fk-usps--3 { grid-template-columns: 1fr; }
  .fk-spullen { grid-template-columns: 1fr; }
}

/* --- Synopsis: het verhaal in drie stukken -------------------------------- */
/* Eén scriptvel in plaats van een kop met een blok tekst eronder. Reden: de
   opbouw was op elke pagina dezelfde en daardoor saai (Tes 2026-09-22). De
   drie stukken staan binnen hetzelfde vel, zodat er geen vierde rij witte
   kaartjes bijkomt. Zelfde papier en letter als de scenekaartjes hieronder. */
.fk-synopsis {
  background: #fffdf6;
  border: 1px solid #e6ddc9;
  border-radius: 14px;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(36, 26, 64, .22);
}
.fk-synopsis__rand {
  height: 12px;
  background: repeating-linear-gradient(-55deg, #131313 0 10px, #F6F1E7 10px 20px);
}
.fk-synopsis__lijf { padding: 30px clamp(22px, 3vw, 38px) 34px; color: var(--fk-ink); }
.fk-synopsis__kop {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .82rem;
  color: #5f5646;                 /* 7,1:1 op #fffdf6 */
  border-bottom: 2px solid #d9cfb6;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.fk-synopsis__titel { text-align: left; margin: 20px 0 24px; }
.fk-beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.fk-beat p {
  font-family: "Courier New", Courier, monospace;
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}
.fk-beat h3 { font-size: 1.2rem; margin: 0 0 8px; }
.fk-beat__label {
  font-family: "Caveat Brush", cursive;
  font-size: 1.35rem;
  line-height: 1;
  color: #6f5a86;                 /* 5,3:1 op #fffdf6 */
  display: block;
  margin-bottom: 2px;
}
/* Dunne scheiding tussen de stukken, als de beeldjes op een filmstrook. */
.fk-beat + .fk-beat { border-left: 1px solid #e6ddc9; padding-left: 30px; }
@media (max-width: 860px) {
  .fk-beats { grid-template-columns: 1fr; gap: 22px; }
  .fk-beat + .fk-beat { border-left: 0; padding-left: 0; border-top: 1px solid #e6ddc9; padding-top: 22px; }
}

/* --- Rollen ---------------------------------------------------------------- */
.fk-roles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fk-role {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fk-white);
  border: 2px solid var(--fk-violet);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  font-size: 1rem;
  box-shadow: 0 3px 0 var(--fk-violet);
}
.fk-role__emoji { font-size: 1.15rem; }

/* --- FAQ ------------------------------------------------------------------- */
.fk-faq { max-width: 860px; margin: 0 auto; }
.fk-faq details {
  background: var(--fk-white);
  border: 2px solid var(--fk-ala);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.fk-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px;
  font-family: var(--fk-font-head);
  font-size: 1.15rem;
  color: var(--fk-purple);
}
.fk-faq summary::-webkit-details-marker { display: none; }
.fk-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--fk-green); flex-shrink: 0; }
.fk-faq details[open] summary::after { content: "–"; }
.fk-faq details > div { padding: 0 20px 18px; }
.fk-faq details > div p { margin: 0 0 .6em; }

/* --- Bestellen ------------------------------------------------------------- */
.fk-order {
  background: var(--fk-white);
  border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow);
  padding: 36px;
  max-width: 720px;
  margin: 0 auto;
  color: var(--fk-ink);
}
.fk-order label { display: block; font-weight: 700; margin-bottom: 6px; }
.fk-order input[type="text"], .fk-order input[type="email"], .fk-order textarea {
  width: 100%;
  font: inherit;
  border: 2px solid var(--fk-ala);
  border-radius: 10px;
  padding: .7rem .9rem;
  margin-bottom: 18px;
  background: #fff;
}
.fk-order input:focus-visible, .fk-order textarea:focus-visible { outline: 3px solid var(--fk-tint); border-color: var(--fk-green); }
/* Het pakket is een fieldset (schermlezers noemen de vraag bij elke keuze);
   rand en ruimte van de browser eraf, de legend oogt als de andere labels. */
.fk-pakket { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.fk-pakket legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.fk-pakket label {
  display: flex; align-items: flex-start; gap: 12px;
  border: 2px solid var(--fk-ala);
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 400;
  cursor: pointer;
  margin: 0;
}
.fk-pakket label:has(input:checked) { border-color: var(--fk-green); background: var(--fk-tint-soft); }
.fk-pakket input { margin-top: 5px; accent-color: var(--fk-green); }
.fk-pakket strong { font-family: var(--fk-font-head); font-weight: 400; font-size: 1.1rem; color: var(--fk-purple); }
.fk-pakket .fk-pakket__price { margin-left: auto; font-family: var(--fk-font-head); font-size: 1.15rem; white-space: nowrap; }
/* Zonder dit vinkje mag Studio Filmkids de download niet meteen leveren: het
   herroepingsrecht van een consument vervalt pas als hij daar uitdrukkelijk
   mee instemt (artikel 5 van de voorwaarden). */
.fk-akkoord {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 400 !important;
  font-size: .92rem;
  line-height: 1.5;
  background: var(--fk-tint-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.fk-akkoord input { margin-top: .25em; width: 18px; height: 18px; flex: none; }
.fk-akkoord a { color: var(--fk-purple); }

.fk-order__knop { text-align: center; margin-bottom: 10px; }
.fk-order__note { font-size: .92rem; opacity: .8; text-align: center; }
.fk-order__fail { display: none; background: #fdf0ee; border: 2px solid var(--fk-sienna); border-radius: 12px; padding: 20px; }
.fk-order input[type="date"] {
  font: inherit; border: 2px solid var(--fk-ala); border-radius: 10px;
  padding: .6rem .9rem; margin-bottom: 6px; background: #fff; max-width: 260px; width: 100%;
}
.fk-order__hint { font-size: .9rem; opacity: .75; margin: 0 0 18px; }
.fk-optioneel { font-weight: 400; opacity: .7; }
.fk-order__melding {
  background: #fdf0ee; border: 2px solid var(--fk-sienna); border-radius: 12px;
  padding: 12px 16px; margin: 0 0 16px; font-size: .95rem;
}
.fk-order [aria-invalid="true"] { border-color: var(--fk-sienna) !important; }
.fk-verborgen { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Sticky mobiele CTA ----------------------------------------------------- */
.fk-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none;
  background: var(--fk-purple-ink);
  color: #fff;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 -6px 20px rgba(0,0,0,.25);
}
.fk-sticky__label { font-family: var(--fk-font-head); font-size: 1.05rem; line-height: 1.2; }
.fk-sticky .fk-btn { font-size: 1.05rem; padding: .55rem 1.2rem .5rem; }
@media (max-width: 767px) {
  .fk-sticky { display: flex; }
  body.fk-has-sticky { padding-bottom: 74px; }
}

/* --- Breadcrumbs ------------------------------------------------------------ */

/* --- Reviews ---------------------------------------------------------------- */
.fk-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fk-review {
  background: var(--fk-white);
  border-radius: var(--fk-radius);
  padding: 26px 26px 22px;
  box-shadow: var(--fk-shadow);
  position: relative;
}
.fk-review::before {
  content: "“";
  position: absolute; top: 2px; left: 18px;
  font-family: var(--fk-font-head);
  font-size: 4rem;
  color: var(--fk-tint);
  line-height: 1;
}
.fk-review p { margin: 0 0 12px; position: relative; }
.fk-review__stars { color: #f4a158; letter-spacing: 2px; margin-bottom: 8px; }
.fk-review__name { font-family: var(--fk-font-head); color: var(--fk-purple); }

/* --- Footer (statisch, spiegelt waves-footer) -------------------------------- */
.fk-footer { background: var(--fk-violet); padding: 80px 0 64px; color: var(--fk-ink); }
.fk-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.fk-footer__logo { width: 130px; }
.fk-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fk-footer__links a { color: var(--fk-ala); text-decoration: none; }
.fk-footer__links a:hover { text-decoration: underline; }
.fk-footer__divider { background: var(--fk-ala); height: 1px; margin: 60px 0 32px; }
.fk-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--fk-ala); font-size: 16px; }
.fk-footer__bottom a { color: inherit; }
.fk-footer__socials { display: flex; gap: 14px; }
.fk-footer__socials svg { width: 26px; height: 26px; color: var(--fk-ala); }

/* --- Reveal ------------------------------------------------------------------ */
.fk-js .fk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.fk-js .fk-reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive --------------------------------------------------------------- */
@media (max-width: 991px) {
  .fk-section { padding: 64px 0; }
  .fk-hero__inner { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; padding-bottom: 72px; }
  .fk-poster-fan { min-height: 420px; }
  .fk-usps, .fk-steps { grid-template-columns: repeat(2, 1fr); }
  /* De verbindingslijn loopt over één rij; zodra de stappen afbreken naar
     meerdere rijen klopt hij niet meer. De genummerde bollen houden de
     volgorde dan zelf vast. */
  .fk-steps::before { display: none; }
  .fk-kit { grid-template-columns: repeat(3, 1fr); }
  .fk-grid, .fk-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .fk-tickets { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .fk-ticket--featured { transform: none; }
  .fk-story { grid-template-columns: 1fr; gap: 32px; }
  .fk-scenes { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .fk-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .fk-usps, .fk-steps, .fk-grid, .fk-grid--3 { grid-template-columns: 1fr; }
  .fk-kit { grid-template-columns: repeat(2, 1fr); }
  .fk-order { padding: 26px 20px; }
  .fk-hero .fk-display { font-size: clamp(3.2rem, 16vw, 4.6rem); }
}

/* --- Bestelpagina (/bestelling) --------------------------------------------- */
/* De persoonlijke pagina na het bestellen (bestelling.js tekent alles). Zelfde
   bouwstenen als de rest van /filmkits: witte kaarten met ronde hoeken op de
   meelopende grond, koppen in Londrina, de filmposter van het gekozen thema en
   het filmklapperrandje op de filmkaart. Contrast staat per kleur erbij. */
.fk-bestel { display: grid; gap: 24px; }
.fk-bestel-kaart {
  position: relative;
  background: var(--fk-white);
  border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow);
  padding: clamp(22px, 3.4vw, 36px);
  color: var(--fk-ink);
  min-width: 0;
}
.fk-bestel-kaart h2 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  line-height: 1.1;
  color: var(--fk-purple-ink);        /* 14,6:1 op wit */
}
.fk-bestel-kaart p { margin: 0 0 14px; }
.fk-bestel-kaart a:not(.fk-btn):not(.fk-bestel-download) { color: var(--fk-purple); text-underline-offset: 3px; }
.fk-bestel-kaart__lijf { min-width: 0; }
/* De Webflow-basis geeft elke li een marge en inspringing; hier niet. */
.fk-bestel li, .fk-voortgang li { margin: 0; padding-left: 0; }
.fk-bestel-kaart__lijf > :last-child, .fk-bestel-kaart > :last-child { margin-bottom: 0; }

/* Klein label boven een kaartkop, in de vorm van de kicker. #00695C op
   #e9f8f5 = 6,1:1. */
.fk-bestel-label {
  display: inline-block;
  font-family: var(--fk-font-head);
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #00695C;
  background: var(--fk-tint-soft);
  border-radius: 999px;
  padding: .28rem .85rem .22rem;
  margin-bottom: 12px;
}

.fk-icoon { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; flex: none; }
.fk-icoon svg { width: 100%; height: 100%; display: block; }

.fk-bestel-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.fk-bestel-acties__noot { font-size: .95rem; color: #5a5068; }   /* 6,9:1 op wit */
.fk-bestel .fk-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.fk-bestel .fk-btn .fk-icoon { width: 1.1em; height: 1.1em; }
/* Tweede knop op een wit vlak: wit met een lila rand, zodat hij vorm houdt.
   #4a3277 op wit = 9,9:1. */
.fk-btn--licht { background: #fff; color: var(--fk-purple-mid); box-shadow: inset 0 0 0 2px var(--fk-violet); }
.fk-btn--licht:hover { box-shadow: inset 0 0 0 2px var(--fk-purple-mid), 0 8px 18px rgba(36, 26, 64, .16); }

.fk-bestel-klein { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.fk-bestel-klein .fk-icoon { margin-top: .15em; }

/* De themaposter: een geprinte poster die schuin op de kaart ligt. */
.fk-bestel-poster {
  grid-area: poster;
  margin: 0;
  aspect-ratio: 2 / 3;
  border: 5px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fk-ala);
  box-shadow: 0 14px 30px rgba(36, 26, 64, .28), 0 0 0 1px rgba(36, 26, 64, .06);
  transform: rotate(-2.5deg);
}
.fk-bestel-poster img { width: 100%; height: 100%; object-fit: cover; }

/* Kaart met poster (betalen, betaalverzoek, controle, verlopen). */
/* Kop en tekst staan samen verticaal gecentreerd naast de poster; op de
   telefoon schuift de kop naast een kleine poster en loopt de tekst eronder. */
.fk-bestel-kaart--poster {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "poster ." "poster kop" "poster lijf" "poster .";
  column-gap: 34px;
}
.fk-bestel-kaart--poster .fk-bestel-kaart__kop { grid-area: kop; }
.fk-bestel-kaart--poster .fk-bestel-kaart__kop h2 { margin-bottom: 10px; }
.fk-bestel-kaart--poster .fk-bestel-kaart__lijf { grid-area: lijf; }
.fk-bestel-kaart--poster.zonder-poster { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "kop" "lijf"; }

/* --- De kit: poster links, de bestanden rechts -------------------------------- */
.fk-bestel-kaart--kit {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas: "poster kop" "poster lijst" "poster tip";
  grid-template-rows: auto auto 1fr;
  column-gap: 38px;
}
.fk-bestel-kaart--kit.zonder-poster { grid-template-columns: 1fr; grid-template-areas: "kop" "lijst" "tip"; }
.fk-bestel-kit__kop { grid-area: kop; }
.fk-bestel-kit__kop h2 { margin-bottom: 2px; }
.fk-bestel-kit__sub {
  font-family: var(--fk-font-head);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--fk-purple);            /* 7,6:1 op wit */
  margin: 0 !important;
}
.fk-bestel-kit__leeg, .fk-bestel-lijst { grid-area: lijst; margin: 20px 0 0 !important; }
.fk-bestel-tip {
  grid-area: tip;
  align-self: start;
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 0 !important;
  font-size: .95rem;
  color: #5a5068;
}
.fk-bestel-tip .fk-icoon { margin-top: .12em; color: var(--fk-purple); }

.fk-bestel-lijst { list-style: none; padding: 0; display: grid; gap: 10px; }
.fk-bestel-download {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 12px;
  border: 2px solid var(--fk-ala);
  border-radius: 14px;
  color: var(--fk-ink);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.fk-bestel-download:hover { border-color: var(--fk-green); background: var(--fk-tint-soft); transform: translateY(-1px); }
.fk-bestel-download:focus-visible { outline: 3px solid #4d65ff; outline-offset: 2px; }
/* Een blaadje met een omgevouwen hoek, met de bestandssoort erop. */
.fk-bestel-download__soort {
  position: relative;
  width: 40px; height: 50px;
  display: grid; place-items: end center;
  padding-bottom: 7px;
  font-family: var(--fk-font-head);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(225deg, transparent 11px, var(--fk-purple-mid) 11.5px);   /* wit op #4a3277 = 9,9:1 */
  border-radius: 5px;
}
.fk-bestel-download__soort::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 15px; height: 15px;
  background: linear-gradient(225deg, transparent 50%, var(--fk-violet) 50%);
  border-bottom-left-radius: 4px;
}
.fk-bestel-download__tekst { display: grid; min-width: 0; }
.fk-bestel-download__naam {
  font-family: var(--fk-font-head);
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--fk-purple-ink);
  overflow-wrap: anywhere;
}
.fk-bestel-download__info { font-size: .88rem; color: #5a5068; }
.fk-bestel-download__pijl {
  width: 42px; height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: var(--fk-tint-soft);
  color: #00695C;
  transition: background-color .15s ease, color .15s ease;
}
.fk-bestel-download:hover .fk-bestel-download__pijl { background: #00695C; color: #fff; }

/* --- De film ------------------------------------------------------------------ */
/* Donker als een zaal, met het filmklapperrandje van de optiekaarten bovenop. */
.fk-bestel-kaart--film {
  overflow: hidden;
  padding-top: calc(clamp(22px, 3.4vw, 36px) + 14px);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.07) 0 2px, transparent 3px),
    radial-gradient(120% 90% at 50% 0%, #4a3277 0%, var(--fk-purple-ink) 55%, var(--fk-purple-deep) 100%);
  color: var(--fk-white);
}
.fk-bestel-kaart--film::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 14px;
  background: repeating-linear-gradient(-55deg, #131313 0 12px, #F6F1E7 12px 24px);
  border-bottom: 2px solid #131313;
}
.fk-bestel-kaart--film h2 { color: var(--fk-white); }
.fk-bestel-film {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: 12px;
  margin: 8px 0 0;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
.fk-bestel-kaart--film .fk-bestel-klein { margin: 18px 0 0; color: rgba(255, 255, 255, .86); }   /* ruim 10:1 op de paarse grond */
.fk-bestel-kaart--film .fk-bestel-klein .fk-icoon { color: var(--fk-tint); }

/* --- Beelden uploaden ----------------------------------------------------------- */
.fk-upload__invoer {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip-path: inset(50%);
}
.fk-upload__zone {
  display: grid; justify-items: center; gap: 4px;
  text-align: center;
  padding: 30px 20px 28px;
  margin: 6px 0 16px;
  border: 3px dashed var(--fk-violet);
  border-radius: 16px;
  background: #f8f4fb;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.fk-upload__zone:hover, .fk-upload__zone.is-boven { border-color: var(--fk-green); background: var(--fk-tint-soft); }
.fk-upload__invoer:focus-visible + .fk-upload__zone { outline: 3px solid #4d65ff; outline-offset: 3px; }
.fk-upload__zone-icoon {
  width: 60px; height: 60px;
  padding: 15px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--fk-purple-mid);
  color: #fff;
  box-shadow: 0 8px 18px rgba(36, 26, 64, .25);
  transition: transform .2s ease;
}
.fk-upload__zone:hover .fk-upload__zone-icoon, .fk-upload__zone.is-boven .fk-upload__zone-icoon { transform: translateY(-3px) rotate(-6deg); }
.fk-upload__zone strong { font-family: var(--fk-font-head); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--fk-purple-ink); }
.fk-upload__zone span:last-child { font-size: .95rem; color: #5a5068; }

.fk-upload__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fk-upload__lijst:empty { display: none; }
.fk-upload__rij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icoon naam" "icoon info" "icoon balk";
  column-gap: 12px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: #f7f4ef;
}
.fk-upload__icoon {
  grid-area: icoon;
  align-self: start;
  width: 34px; height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--fk-ala);
  color: var(--fk-purple-mid);
}
.fk-upload__naam {
  grid-area: naam;
  display: flex;
  min-width: 0;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.35;
}
/* Te lang? Dan wordt de naam ingekort en blijft de extensie (.MOV) staan. */
.fk-upload__stam { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fk-upload__ext { flex: none; }
.fk-upload__info { grid-area: info; font-size: .88rem; line-height: 1.35; color: #5a5068; }
.fk-upload__rij progress {
  grid-area: balk;
  width: 100%; height: 8px;
  margin-top: 7px;
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 99px;
  background: var(--fk-ala);
  overflow: hidden;
  accent-color: var(--fk-green);
}
.fk-upload__rij progress::-webkit-progress-bar { background: var(--fk-ala); border-radius: 99px; }
.fk-upload__rij progress::-webkit-progress-value { background: var(--fk-green); border-radius: 99px; transition: width .3s ease; }
.fk-upload__rij progress::-moz-progress-bar { background: var(--fk-green); border-radius: 99px; }
.fk-upload__rij.is-klaar .fk-upload__icoon { background: var(--fk-green); color: #fff; }
.fk-upload__rij.is-klaar .fk-upload__info { color: #00695C; }                 /* 6,2:1 op #f7f4ef */
.fk-upload__rij.is-bezig { background: var(--fk-tint-soft); }
.fk-upload__rij.is-bezig .fk-upload__icoon { background: var(--fk-purple-mid); color: #fff; }
.fk-upload__rij.is-onderbroken .fk-upload__icoon { background: #fbe3d9; color: #B33F22; }
.fk-upload__rij.is-fout { background: #fdf0ee; }
.fk-upload__rij.is-fout .fk-upload__icoon { background: var(--fk-sienna); color: #fff; }
.fk-upload__rij.is-fout .fk-upload__info { color: #9c351c; }               /* 6,4:1 op #fdf0ee */

/* Na "Klaar met uploaden" is de zone alleen nog voor een vergeten filmpje: kleiner. */
.fk-upload__zone--klein {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icoon kop" "icoon tekst";
  justify-items: start;
  text-align: left;
  column-gap: 16px;
  padding: 16px 20px;
  border-width: 2px;
}
.fk-upload__zone--klein .fk-upload__zone-icoon { grid-area: icoon; width: 46px; height: 46px; padding: 11px; margin: 0; align-self: center; }
.fk-upload__zone--klein strong { grid-area: kop; font-size: 1.25rem; }
.fk-upload__zone--klein span:last-child { grid-area: tekst; }

/* --- Maak je feestje compleet ----------------------------------------------------- */
/* Hetzelfde lijstje als op de oude bedankpagina (.fk-spullen), maar binnen een
   witte kaart: zonder eigen schaduw, op warm papier, met de kleurstreep van
   de kitkaartjes die per rij doorloopt. */
.fk-bestel-kaart--spullen .fk-spullen { margin-top: 18px; }
.fk-bestel-kaart--spullen .fk-spullen li {
  background: #f7f4ef;
  box-shadow: none;
  border-left: 5px solid var(--fk-violet);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.4;
}
.fk-bestel-kaart--spullen .fk-spullen > :nth-child(4n+1) { border-left-color: #00695C; }
.fk-bestel-kaart--spullen .fk-spullen > :nth-child(4n+2) { border-left-color: var(--fk-purple); }
.fk-bestel-kaart--spullen .fk-spullen > :nth-child(4n+3) { border-left-color: #B33F22; }
.fk-bestel-kaart--spullen .fk-spullen > :nth-child(4n+4) { border-left-color: #806990; }
/* Een affiliate-link: de hele regel is klikbaar, met een pijltje naar de winkel. */
.fk-bestel-kaart--spullen .fk-spullen li:has(> a) { padding: 0; }
.fk-bestel-kaart--spullen .fk-spullen a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 12px 16px; color: var(--fk-purple); font-weight: 700;
  text-decoration: none; border-radius: 10px;
}
/* De streep op de tekst, niet op de link: een flexlink geeft hem anders door aan het pijltje. */
.fk-bestel-kaart--spullen .fk-spullen a span { text-decoration: underline; text-underline-offset: 3px; }
.fk-bestel-kaart--spullen .fk-spullen a::after { content: "\2197"; flex: none; }
.fk-bestel-kaart--spullen .fk-spullen a:hover { background: var(--fk-tint-soft); }
.fk-bestel-kaart--spullen .fk-spullen a:focus-visible { outline: 3px solid var(--fk-tint); outline-offset: 2px; }
.fk-bestel-kaart .fk-spullen__uitleg { font-size: .88rem; opacity: .8; margin: 16px 0 0; }

/* --- Montage toevoegen ------------------------------------------------------------ */
/* Een aanbod, geen opdracht: een lichtere kaart zonder schaduw, die op elke
   meelopende grond meekleurt. */
.fk-bestel-kaart--zacht {
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, .9);
}
.fk-bestel-montage {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.fk-bestel-montage__beeld { margin: 0; }
.fk-bestel-montage__beeld img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(36, 26, 64, .22);
}

/* --- Wachten, lege standen ---------------------------------------------------------- */
.fk-bestel-wacht { display: flex; align-items: center; gap: 16px; }
.fk-bestel-wacht p { margin: 0 !important; }
.fk-bestel-laden {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  border: 4px solid var(--fk-tint);
  border-top-color: var(--fk-green);
  animation: fk-draai 1s linear infinite;
}
@keyframes fk-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fk-bestel-laden { animation: none; } }

.fk-bestel-leeg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.fk-bestel-leeg__icoon {
  width: 58px; height: 58px;
  padding: 14px;
  border-radius: 50%;
  background: var(--fk-tint-soft);
  color: #00695C;
}

/* --- Voortgang in de kop (bestellingen met montage) --------------------------------- */
/* Dezelfde tijdlijn als "Hoe het werkt" op /filmkits, maar dan op de donkere kop:
   genummerde bollen op een lijn, de lijn kleurt mee tot de stap van nu. */
.fk-voortgang {
  --fk-voortgang: 0;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 640px;
  margin: 34px auto 0;
  padding: 0;
}
.fk-voortgang::before, .fk-voortgang::after {
  content: "";
  position: absolute;
  top: 17px; left: 12.5%;
  height: 3px;
  border-radius: 3px;
}
.fk-voortgang::before { right: 12.5%; background: rgba(255, 255, 255, .2); }
.fk-voortgang::after { width: calc(75% * var(--fk-voortgang)); background: var(--fk-green); }
.fk-voortgang li {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 8px;
  padding: 0 4px;
  font-size: .95rem;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, .72);    /* ruim 7:1 op de kop */
}
.fk-voortgang__bol {
  width: 37px; height: 37px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--fk-font-head);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .8);
  background: var(--fk-purple-ink);
  border: 3px solid rgba(255, 255, 255, .3);
}
.fk-voortgang__bol .fk-icoon { width: 18px; height: 18px; }
.fk-voortgang .is-klaar .fk-voortgang__bol { background: var(--fk-green); border-color: var(--fk-green); color: #fff; }
.fk-voortgang .is-nu { color: #fff; font-weight: 700; }
.fk-voortgang .is-nu .fk-voortgang__bol {
  background: #fff; border-color: #fff; color: var(--fk-purple-ink);
  box-shadow: 0 0 0 6px rgba(0, 178, 149, .35);
}

@media (max-width: 700px) {
  .fk-bestel { gap: 18px; }
  .fk-bestel-kaart--kit {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas: "poster kop" "lijst lijst" "tip tip";
    grid-template-rows: auto;
    column-gap: 20px;
    align-items: center;
  }
  .fk-bestel-kaart--kit .fk-bestel-poster { border-width: 3px; border-radius: 9px; }
  .fk-bestel-kaart--kit .fk-bestel-label { font-size: .82rem; margin-bottom: 8px; }
  .fk-bestel-kit__sub { font-size: 1.12rem; }
  .fk-bestel-kaart--poster {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "poster kop" "lijf lijf";
    gap: 18px 20px;
    align-items: center;
  }
  .fk-bestel-kaart--poster .fk-bestel-kaart__kop h2 { margin-bottom: 0; }
  .fk-bestel-kaart--poster .fk-bestel-label { font-size: .82rem; margin-bottom: 8px; }
  .fk-bestel-kaart--poster .fk-bestel-poster { border-width: 3px; border-radius: 9px; }
  .fk-bestel-download { gap: 12px; padding: 9px 10px; }
  .fk-bestel-download__naam { font-size: 1.12rem; }
  .fk-bestel-download__pijl { width: 38px; height: 38px; padding: 9px; }
  .fk-bestel-montage { grid-template-columns: 1fr; gap: 18px; }
  .fk-bestel-montage__beeld img { aspect-ratio: 16 / 9; }
  .fk-upload__zone { padding: 24px 16px 22px; }
  .fk-bestel-leeg { grid-template-columns: 1fr; gap: 14px; }
  .fk-voortgang { margin-top: 28px; }
  .fk-voortgang li { font-size: .82rem; }
  .fk-voortgang__bol { width: 33px; height: 33px; font-size: 1.05rem; }
  .fk-voortgang::before, .fk-voortgang::after { top: 15px; }
  .fk-bestel-acties .fk-btn { flex: 1 1 auto; }
  .fk-bestel-acties__noot { flex-basis: 100%; text-align: center; }
  .fk-upload__zone--klein { padding: 14px 16px; }
}