/* ========================================================================
   SKIN: HANDBOEK SCENARIOPLANNING
   ------------------------------------------------------------------------
   Geïnspireerd op de boek-eigen visuele identiteit:
   - Nacht-blauw (#0a1a3a) als primaire ink, iets dieper dan IVTO-ink
   - Horizon-blauw (#6ba8e8) als blauwe schijnsel/glow
   - Rood (#c92a3a) als spaarzaam Management-Impact-accent
   - Barlow voor display (sans-serif chunky)
   - Source Serif 4 voor body (serif, leesbaar)
   ======================================================================== */

body.skin-handboek {
    /* Override IVTO-tokens met boek-eigen palet */
    --ink:          #0a1a3a;
    --ink-deep:     #050d23;
    --ink-soft:     #1a2d56;
    --ink-dim:      #4a6a9c;

    --paper:        #f5f5f0;
    --paper-bright: #ffffff;
    --paper-edge:   #d9d6cb;

    --text:         #0a1a3a;
    --text-soft:    #2c3e60;
    --text-muted:   #5d6b85;

    /* Boek-eigen accenten */
    --skin-horizon: #6ba8e8;
    --skin-horizon-warm: #d9e8fa;
    --skin-sun: #ffffff;
    --skin-accent: #c92a3a;     /* Het rood, sparingly */
    --skin-accent-soft: rgba(201, 42, 58, 0.10);

    /* Boek-eigen typografie */
    --skin-font-display: "Barlow", "Helvetica Neue", "Arial", sans-serif;
    --skin-font-body: "Source Serif 4", Georgia, serif;
}

/* Body in skin-handboek krijgt boek-eigen body-font */
body.skin-handboek main,
body.skin-handboek main p,
body.skin-handboek main li {
    font-family: var(--skin-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-optical-sizing: auto;
}

/* ========================================================================
   SKIN: FORESIGHT CARDS
   ------------------------------------------------------------------------
   Speels-bordspelig met STEEP-kleurcodering en crème-papier:
   - Crème-papier achtergrond (#faf6ed)
   - 5 STEEP-kleuren voor categorieën (S, T, E, E, P)
   - Quasi-monospace mono-display
   - Speels grid van kaart-componenten
   ======================================================================== */

body.skin-foresight-cards {
    --ink:          #1a2f3f;       /* Iets warmer ink dan IVTO */
    --ink-deep:     #0f1c26;
    --ink-soft:     #2c4658;

    --paper:        #faf6ed;        /* Crème-papier */
    --paper-bright: #ffffff;
    --paper-warm:   #f5efe0;
    --paper-edge:   #ebe4d2;

    --text:         #1a2f3f;
    --text-soft:    #4a5f70;
    --text-muted:   #7a8a96;

    /* STEEP kleurcodering — geen kinderachtige primaries, wel onderscheidend */
    --steep-s: #f3923a;     /* Social — brand oranje */
    --steep-t: #ed4b3f;     /* Technological — brand rood */
    --steep-e1: #305cab;    /* Economic — brand blauw */
    --steep-e2: #289659;    /* Environmental/Ecological — brand groen */
    --steep-p: #f3cf2d;     /* Political — brand geel */

    --skin-accent: var(--steep-s);
    --skin-font-display: "Barlow", "Helvetica Neue", sans-serif;
    --skin-font-body: "Manrope", system-ui, sans-serif;
}

body.skin-foresight-cards main {
    background: var(--paper);
}

/* STEEP-kaart-fan rechts in hero */
body.skin-foresight-cards .skin-cards-fan {
    position: relative;
    height: 420px;
    perspective: 1200px;
}
body.skin-foresight-cards .skin-card {
    position: absolute;
    width: 180px;
    height: 280px;
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(26, 47, 63, 0.18);
    background: var(--paper-bright);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
    border: 1px solid var(--paper-edge);
}
body.skin-foresight-cards .skin-card:hover {
    transform: translateY(-12px) scale(1.02);
}
body.skin-foresight-cards .skin-card__letter {
    font-family: var(--skin-font-display);
    font-weight: 800;
    font-size: 84px;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
}
body.skin-foresight-cards .skin-card__label {
    font-family: var(--skin-font-display);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
}
body.skin-foresight-cards .skin-card__corner {
    font-family: var(--skin-font-display);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Z-index symmetrisch: middelste kaart vooraan, buitenkaarten erachter,
   maar elke kaart heeft een eigen index zodat hovering werkt en letters niet
   onder buurkaarten verdwijnen. */
body.skin-foresight-cards .skin-card--s {
    left: 0%; top: 5%;
    transform: rotate(-15deg);
    border-top: 4px solid var(--steep-s);
    z-index: 1;
}
body.skin-foresight-cards .skin-card--s:hover { transform: rotate(-15deg) translateY(-12px) scale(1.02); z-index: 10; }
body.skin-foresight-cards .skin-card--s .skin-card__letter { color: var(--steep-s); }

body.skin-foresight-cards .skin-card--t {
    left: 18%; top: 0%;
    transform: rotate(-8deg);
    border-top: 4px solid var(--steep-t);
    z-index: 2;
}
body.skin-foresight-cards .skin-card--t:hover { transform: rotate(-8deg) translateY(-12px) scale(1.02); z-index: 10; }
body.skin-foresight-cards .skin-card--t .skin-card__letter { color: var(--steep-t); }

body.skin-foresight-cards .skin-card--e1 {
    left: 36%; top: -3%;
    transform: rotate(0deg);
    border-top: 4px solid var(--steep-e1);
    z-index: 3;
}
body.skin-foresight-cards .skin-card--e1:hover { transform: rotate(0deg) translateY(-12px) scale(1.02); z-index: 10; }
body.skin-foresight-cards .skin-card--e1 .skin-card__letter { color: var(--steep-e1); }

body.skin-foresight-cards .skin-card--e2 {
    left: 54%; top: 0%;
    transform: rotate(8deg);
    border-top: 4px solid var(--steep-e2);
    z-index: 4;
}
body.skin-foresight-cards .skin-card--e2:hover { transform: rotate(8deg) translateY(-12px) scale(1.02); z-index: 10; }
body.skin-foresight-cards .skin-card--e2 .skin-card__letter { color: var(--steep-e2); }

body.skin-foresight-cards .skin-card--p {
    left: 72%; top: 5%;
    transform: rotate(15deg);
    border-top: 4px solid var(--steep-p);
    z-index: 5;
}
body.skin-foresight-cards .skin-card--p:hover { transform: rotate(15deg) translateY(-12px) scale(1.02); z-index: 10; }
body.skin-foresight-cards .skin-card--p .skin-card__letter { color: var(--steep-p); }

@media (max-width: 900px) {
    body.skin-foresight-cards .skin-cards-fan { height: 320px; max-width: 480px; margin: 0 auto; }
}

/* ========================================================================
   SKIN: KANTELPUNT
   ------------------------------------------------------------------------
   Subtiele variant van IVTO-stijl met expliciet kantelpunt-motief:
   - Diepere midnight + warmer paper
   - Het kantelmotief: kleurzweem die "kantelt" van koel naar warm
   - Speelt qua typografie meer met Fraunces in italic
   - Geen totaal andere fonts; behoudt IVTO-DNA
   ======================================================================== */

body.skin-kantelpunt {
    --ink:          #0a1d3a;       /* Iets dieper dan IVTO */
    --ink-deep:     #04122a;
    --ink-soft:     #1a2f56;

    --paper:        #f8f3e8;        /* Warmer dan IVTO-paper */
    --paper-bright: #fcf8ee;
    --paper-edge:   #e8dec5;

    --signal:       #d4985a;        /* Iets warmer goud */
    --signal-soft:  #ecc789;

    --skin-koud:    #6ba8e8;        /* Het 'voor'-kantelpunt: koel blauw */
    --skin-warm:    #d97757;        /* Het 'na'-kantelpunt: warm terracotta */
    --skin-grens:   #d4985a;        /* Op het kantelpunt zelf: goud */
}

/* STEEP-kaartwaaier teruggebracht op de Foresight Cards-pagina
   (gecentreerd, vaste ontwerpbreedte, site-fonts, en nette schaling op mobiel) */
body.skin-foresight-cards .fan-wrap { display: flex; justify-content: center; margin: var(--sp-7) 0 var(--sp-8); }
body.skin-foresight-cards .fan-wrap .skin-cards-fan { width: 640px; max-width: none; height: 360px; flex: 0 0 auto; }
body.skin-foresight-cards .skin-card__letter { font-family: var(--font-display); font-weight: 600; }
body.skin-foresight-cards .skin-card__label,
body.skin-foresight-cards .skin-card__corner { font-family: var(--font-mono); letter-spacing: .1em; }
@media (max-width: 720px) {
  body.skin-foresight-cards .fan-wrap { overflow: hidden; height: 250px; }
  body.skin-foresight-cards .fan-wrap .skin-cards-fan { transform: scale(.62); transform-origin: center top; }
}
@media (max-width: 480px) {
  body.skin-foresight-cards .fan-wrap { height: 196px; }
  body.skin-foresight-cards .fan-wrap .skin-cards-fan { transform: scale(.5); }
}

/* STEEP-categorie-iconen op de Foresight Cards-waaier (i.p.v. kaartsymbolen) */
body.skin-foresight-cards .skin-card__icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
body.skin-foresight-cards .skin-card--s  .skin-card__icon { color: var(--steep-s); }
body.skin-foresight-cards .skin-card--t  .skin-card__icon { color: var(--steep-t); }
body.skin-foresight-cards .skin-card--e1 .skin-card__icon { color: var(--steep-e1); }
body.skin-foresight-cards .skin-card--e2 .skin-card__icon { color: var(--steep-e2); }
body.skin-foresight-cards .skin-card--p  .skin-card__icon { color: var(--steep-p); }

/* ========================================================================
   SKIN: KANTELPUNT-BOEK  →  deelpagina's per kracht
   ------------------------------------------------------------------------
   Visuele identiteit van boek-kantelpunt.nl:
   - Cremepapier (#f7ede3) + navy ink (#0e2540) + titel-rood spaarzaam
   - Palatino (boekletter) voor body, Archivo (coverletter) voor display
   - Krachtkleuren uit de covergolven (--kp-*), horizon-goud als accent
   ======================================================================== */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* Barlow (display in skin-handboek en skin-explore) */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* Source Serif 4 (body in skin-handboek) — variabel, dekt alle gewichten */
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

body.skin-kantelpunt-boek {
  --ink: #0e2540; --ink-deep: #0a1c33; --ink-soft: #1a3554;
  --paper: #f7ede3; --paper-bright: #faf6ee; --paper-2: #f1ece1;
  --paper-warm: #faf6ee; --paper-3: #e8e1d2; --paper-edge: #e2d8c8;
  --text: #2c3a48; --text-soft: #45525f; --text-muted: #6a6a64;
  --ink-2: #1a3554; --ink-body: #2c3a48;
  --signal: #e9a841; --signal-deep: #c88828; --signal-soft: #f3d8a0;
  --line: #d9d2c2; --line-strong: #b7ad97;
  --title-red: #e41326;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-prose: "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-book: "Palatino", "Palatino Linotype", "Book Antiqua", "URW Palladio L", Georgia, serif;
}

/* Layout helpers */
body.skin-kantelpunt-boek .container--narrow { max-width: 760px; }
body.skin-kantelpunt-boek .section--band { background: var(--paper-2); }
body.skin-kantelpunt-boek .section--warm { background: var(--paper-warm); }
body.skin-kantelpunt-boek .section--airy { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
body.skin-kantelpunt-boek .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.skin-kantelpunt-boek .section__h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5vw, 40px); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 var(--sp-5); color: var(--ink); }
body.skin-kantelpunt-boek .section__lead { font-family: var(--font-book); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--ink-2); margin: 0 0 var(--sp-4); max-width: 60ch; }
body.skin-kantelpunt-boek .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-deep); }

/* Force hero */
body.skin-kantelpunt-boek .force-hero { position: relative; padding: var(--sp-9) 0 var(--sp-8); background: var(--fh-tint, var(--paper-2)); overflow: hidden; }
body.skin-kantelpunt-boek .force-hero--technologie { --fh-tint: var(--kp-tech-tint);   --fc: var(--kp-tech);    --fci: var(--kp-tech-vivid); }
body.skin-kantelpunt-boek .force-hero--planeet     { --fh-tint: var(--kp-planet-tint); --fc: var(--kp-planet);  --fci: var(--kp-planet-vivid); }
body.skin-kantelpunt-boek .force-hero--samenleving { --fh-tint: var(--kp-society-tint);--fc: var(--kp-society); --fci: var(--kp-society-vivid); }
body.skin-kantelpunt-boek .force-hero--macht       { --fh-tint: var(--kp-power-tint);  --fc: var(--kp-power);   --fci: var(--kp-power-vivid); }
body.skin-kantelpunt-boek .force-hero--ruimte      { --fh-tint: var(--kp-space); --fc: var(--signal); --fci: var(--signal); color: var(--paper-bright); }
body.skin-kantelpunt-boek .force-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--fc); margin: 0 0 var(--sp-4); }
body.skin-kantelpunt-boek .force-hero__icon { display: inline-flex; color: var(--fci, var(--fc)); }
body.skin-kantelpunt-boek .force-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 7vw, 52px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 var(--sp-5); max-width: 18ch; color: var(--ink); }
body.skin-kantelpunt-boek .force-hero__intro { font-family: var(--font-book); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 54ch; margin: 0; }
body.skin-kantelpunt-boek .force-hero--ruimte .force-hero__eyebrow,
body.skin-kantelpunt-boek .force-hero--ruimte .force-hero__icon { color: var(--signal); }
body.skin-kantelpunt-boek .force-hero--ruimte .force-hero__h1 { color: var(--paper-bright); }
body.skin-kantelpunt-boek .force-hero--ruimte .force-hero__intro { color: color-mix(in srgb, var(--paper-bright) 86%, var(--kp-space)); }
body.skin-kantelpunt-boek .force-hero .container { position: relative; z-index: 1; }
body.skin-kantelpunt-boek .force-breadcrumb { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .03em; margin: 0 0 var(--sp-4); }
body.skin-kantelpunt-boek .force-breadcrumb a { color: var(--signal-deep); text-decoration: none; }
body.skin-kantelpunt-boek .force-breadcrumb a:hover { text-decoration: underline; }
body.skin-kantelpunt-boek .force-hero--ruimte .force-breadcrumb a { color: var(--signal); }

/* Ruimte cosmos */
body.skin-kantelpunt-boek .force-hero__cosmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
body.skin-kantelpunt-boek .star { position: absolute; width: 2px; height: 2px; background: var(--paper-bright); border-radius: 50%; opacity: .7; box-shadow: 0 0 4px 1px color-mix(in srgb, var(--paper-bright) 60%, transparent); animation: kpb-twinkle 4s ease-in-out infinite; }
body.skin-kantelpunt-boek .star--1 { top: 18%; left: 12%; animation-delay: .2s; }
body.skin-kantelpunt-boek .star--2 { top: 30%; left: 78%; animation-delay: 1.1s; width: 3px; height: 3px; }
body.skin-kantelpunt-boek .star--3 { top: 12%; left: 55%; animation-delay: .6s; }
body.skin-kantelpunt-boek .star--4 { top: 60%; left: 22%; animation-delay: 1.7s; }
body.skin-kantelpunt-boek .star--5 { top: 70%; left: 88%; animation-delay: .9s; }
body.skin-kantelpunt-boek .star--6 { top: 45%; left: 40%; animation-delay: 2.3s; width: 1px; height: 1px; }
body.skin-kantelpunt-boek .star--7 { top: 80%; left: 60%; animation-delay: 1.4s; }
body.skin-kantelpunt-boek .star--8 { top: 25%; left: 33%; animation-delay: 3s; }
body.skin-kantelpunt-boek .star--9 { top: 52%; left: 67%; animation-delay: .4s; width: 3px; height: 3px; }
@keyframes kpb-twinkle { 0%,100% { opacity: .25; } 50% { opacity: .9; } }
body.skin-kantelpunt-boek .force-hero__earth { position: absolute; bottom: -60%; left: 50%; transform: translateX(-50%); width: 160%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--signal) 40%, transparent), transparent 38%), linear-gradient(180deg, #2a4a72 0%, #16273f 60%); box-shadow: 0 -10px 60px -10px color-mix(in srgb, var(--signal) 50%, transparent); }

/* Force fragment ("uit het boek") */
body.skin-kantelpunt-boek .force-fragment__body { max-width: 62ch; }
body.skin-kantelpunt-boek .force-fragment__body p { font-family: var(--font-book); font-size: clamp(18px, 2.4vw, 21px); line-height: 1.62; color: var(--ink-2); margin: 0 0 var(--sp-4); }
body.skin-kantelpunt-boek .force-fragment__close { font-style: italic; color: var(--ink); }
body.skin-kantelpunt-boek .force-fragment--climax { background: var(--kp-space); color: var(--paper-bright); }
body.skin-kantelpunt-boek .force-fragment--climax .eyebrow { color: var(--signal); }
body.skin-kantelpunt-boek .force-fragment__body--blue p { color: color-mix(in srgb, var(--paper-bright) 88%, var(--kp-space)); }
body.skin-kantelpunt-boek .force-fragment__body--blue .force-fragment__close { color: var(--paper-bright); }
body.skin-kantelpunt-boek .force-fragment--confront .force-fragment__sharp { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 4vw, 30px); color: var(--ink); margin: var(--sp-5) 0; }
body.skin-kantelpunt-boek .force-fragment--cosmic .force-fragment__body p:first-child { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 4vw, 30px); color: var(--ink); }

/* Force verdieping */
body.skin-kantelpunt-boek .force-verdieping p { font-family: var(--font-book); font-size: 18px; line-height: 1.65; color: var(--ink-body); margin: 0 0 var(--sp-4); max-width: 62ch; }
body.skin-kantelpunt-boek .force-verdieping__close { font-style: italic; color: var(--ink); border-left: 2px solid var(--signal); padding-left: var(--sp-5); }
body.skin-kantelpunt-boek .force-emphasis { font-family: var(--font-display); font-weight: 700; font-style: normal; font-size: clamp(19px, 3vw, 24px); color: var(--ink); }

/* Hoofd / hart / handen */
body.skin-kantelpunt-boek .hhh__grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
body.skin-kantelpunt-boek .hhh__card { padding: var(--sp-6) var(--sp-5); background: var(--paper-warm); border: 1px solid var(--line); border-top: 3px solid var(--hc, var(--ink)); border-radius: 10px; }
body.skin-kantelpunt-boek .hhh__card--hoofd  { --hc: var(--kp-tech); }
body.skin-kantelpunt-boek .hhh__card--hart   { --hc: var(--kp-power); }
body.skin-kantelpunt-boek .hhh__card--handen { --hc: var(--kp-planet); }
body.skin-kantelpunt-boek .hhh__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--hc); margin: 0 0 var(--sp-3); }
body.skin-kantelpunt-boek .hhh__card p { margin: 0; font-family: var(--font-book); color: var(--ink-body); }
@media (min-width: 720px) { body.skin-kantelpunt-boek .hhh__grid { grid-template-columns: repeat(3, 1fr); } }

/* Force scene (samenleving: ontbijttafel) */
body.skin-kantelpunt-boek .force-scene__body { border-left: 3px solid var(--kp-society); padding-left: var(--sp-5); margin-bottom: var(--sp-6); max-width: 62ch; }
body.skin-kantelpunt-boek .force-scene__body p { font-family: var(--font-book); font-size: clamp(18px, 2.4vw, 21px); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--sp-4); }
body.skin-kantelpunt-boek .force-scene__opener { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
body.skin-kantelpunt-boek .force-scene__after { font-family: var(--font-book); font-size: 18px; color: var(--ink-body); max-width: 62ch; margin: 0 0 var(--sp-4); }
body.skin-kantelpunt-boek .force-scene__close { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 3vw, 24px); color: var(--ink); }

/* Force brug (naar de andere krachten) */
body.skin-kantelpunt-boek .force-brug__close { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 3vw, 23px); color: var(--ink); margin: var(--sp-5) 0 var(--sp-6); }
body.skin-kantelpunt-boek .force-brug__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
body.skin-kantelpunt-boek .force-brug__nav a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 15px; text-decoration: none; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); transition: background .2s, border-color .2s; }
body.skin-kantelpunt-boek .force-brug__nav a:hover { background: var(--paper-3); border-color: var(--ink); }

/* Force CTA */
body.skin-kantelpunt-boek .force-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* Knoppen in de boekstijl (navy primair, outline secundair) */
body.skin-kantelpunt-boek .kp-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.2; padding: var(--sp-3) var(--sp-5); border-radius: 8px; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
body.skin-kantelpunt-boek .kp-btn:hover { transform: translateY(-1px); }
body.skin-kantelpunt-boek .kp-btn--primary { background: var(--ink); color: var(--paper-bright); border: 1px solid var(--ink); }
body.skin-kantelpunt-boek .kp-btn--primary:hover { background: var(--ink-deep); }
body.skin-kantelpunt-boek .kp-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
body.skin-kantelpunt-boek .kp-btn--ghost:hover { border-color: var(--ink); background: var(--paper-3); }

/* ==========================================================================
   skin-kantelpunt-kompas  -> /aanbod/het-kantelpunt-kompas/
   Modelpagina met interactief kompas (hover) en ingebouwde interactie.
   Alleen pagina-eigen componenten; tokens, secties, knoppen, reveal en
   cta-band komen uit main.css.
   ========================================================================== */
body.skin-kantelpunt-kompas .hero .breadcrumb { margin-bottom:var(--sp-6); }
body.skin-kantelpunt-kompas .hero .breadcrumb a:hover { color:var(--signal-soft); }
body.skin-kantelpunt-kompas .kk-hero__grid { display:grid;grid-template-columns:1fr;gap:40px;align-items:center; }
body.skin-kantelpunt-kompas .kk-hero__cap { font-size:.95rem;color:var(--text-inverse);opacity:.62;max-width:38ch;margin:18px 0 22px; }
body.skin-kantelpunt-kompas .kk-compass { width:100%; }
body.skin-kantelpunt-kompas .kk-compass__svg { width:100%;height:auto;display:block; }
body.skin-kantelpunt-kompas .kk-fg__spoke { stroke:var(--signal);stroke-width:1.3;stroke-opacity:0;transition:stroke-opacity .25s ease;pointer-events:none; }
body.skin-kantelpunt-kompas .kk-fg__halo { fill:var(--signal);fill-opacity:0;transition:fill-opacity .25s ease;pointer-events:none; }
body.skin-kantelpunt-kompas .kk-fg__node { fill:#0f2347;stroke:var(--signal);stroke-width:2;transition:fill .2s ease;pointer-events:auto;cursor:pointer; }
body.skin-kantelpunt-kompas .kk-fg__hit { fill:transparent;pointer-events:auto;cursor:pointer; }
body.skin-kantelpunt-kompas .kk-fg__label { fill:#f7f5f1;fill-opacity:.5;font-size:17px;font-weight:600;transition:fill-opacity .2s ease,fill .2s ease;pointer-events:auto;cursor:pointer; }
body.skin-kantelpunt-kompas .kk-fg:hover .kk-fg__spoke, .kk-fg:focus-visible .kk-fg__spoke { stroke-opacity:.85; }
body.skin-kantelpunt-kompas .kk-fg:hover .kk-fg__halo, .kk-fg:focus-visible .kk-fg__halo { fill-opacity:.16; }
body.skin-kantelpunt-kompas .kk-fg:hover .kk-fg__node, .kk-fg:focus-visible .kk-fg__node { fill:var(--signal); }
body.skin-kantelpunt-kompas .kk-fg:hover .kk-fg__label, .kk-fg:focus-visible .kk-fg__label { fill-opacity:1;fill:#e3c593; }
body.skin-kantelpunt-kompas .kk-fg:focus { outline:none; }
body.skin-kantelpunt-kompas .kk-fg:focus-visible { outline:none; }
body.skin-kantelpunt-kompas .kk-tabs { display:inline-flex;gap:4px;background:rgba(247,245,241,.08);border:1px solid rgba(247,245,241,.16);border-radius:999px;padding:4px;margin-top:6px; }
body.skin-kantelpunt-kompas .kk-tab { appearance:none;border:0;background:transparent;color:var(--text-inverse);opacity:.72;font-family:var(--font-body);font-weight:600;font-size:.92rem;padding:9px 20px;border-radius:999px;cursor:pointer;transition:background .2s,opacity .2s,color .2s; }
body.skin-kantelpunt-kompas .kk-tab:hover { opacity:1; }
body.skin-kantelpunt-kompas .kk-tab.is-active { background:var(--signal);color:var(--ink-deep);opacity:1; }
body.skin-kantelpunt-kompas .kk-tab:focus-visible { outline:2px solid var(--signal);outline-offset:3px; }
body.skin-kantelpunt-kompas .kk-view { scroll-margin-top:calc(var(--header-h) + 16px); }
body.skin-kantelpunt-kompas .kk-view--off { display:none; }
body.skin-kantelpunt-kompas .section--dark .section-head__lede { color:var(--text-inverse); }
body.skin-kantelpunt-kompas .kk-layers { display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px; }
body.skin-kantelpunt-kompas .kk-layer { background:var(--paper-bright);border:1px solid var(--paper-edge);border-radius:14px;padding:30px; }
body.skin-kantelpunt-kompas .kk-layer__tag { font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-deep);margin:0 0 12px; }
body.skin-kantelpunt-kompas .kk-layer h3 { font-size:1.4rem;margin:0 0 12px; }
body.skin-kantelpunt-kompas .kk-layer p { color:var(--text-soft);font-size:1.02rem;margin:0; }
body.skin-kantelpunt-kompas .kk-note { margin-top:26px;color:var(--text-muted);font-style:italic;font-family:var(--font-display);font-size:1.05rem;max-width:var(--max-w-text); }
body.skin-kantelpunt-kompas .kk-forces { display:grid;grid-template-columns:1fr;gap:1px;margin-top:8px;background:var(--paper-edge);border:1px solid var(--paper-edge);border-radius:14px;overflow:hidden; }
body.skin-kantelpunt-kompas .kk-force { background:var(--paper-bright);padding:28px 26px 30px; }
body.skin-kantelpunt-kompas .kk-force__name { display:flex;align-items:baseline;gap:12px;margin:0 0 12px; }
body.skin-kantelpunt-kompas .kk-force__dot { width:9px;height:9px;background:var(--signal);transform:rotate(45deg);flex:none; }
body.skin-kantelpunt-kompas .kk-force h3 { font-size:1.3rem;margin:0; }
body.skin-kantelpunt-kompas .kk-force p { color:var(--text-soft);font-size:1rem;margin:0;line-height:1.55; }
body.skin-kantelpunt-kompas .kk-force--accent { background:linear-gradient(165deg,#122a52 0%,var(--ink-deep) 100%); }
body.skin-kantelpunt-kompas .kk-force--accent h3 { color:var(--text-inverse); }
body.skin-kantelpunt-kompas .kk-force--accent p { color:var(--text-inverse);opacity:.8; }
body.skin-kantelpunt-kompas .kk-force--accent .kk-flag { display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-soft); }
body.skin-kantelpunt-kompas .kk-compare { margin-top:8px;border-top:1px solid rgba(247,245,241,.18); }
body.skin-kantelpunt-kompas .kk-row { display:grid;grid-template-columns:1fr;gap:4px 28px;padding:22px 0;border-bottom:1px solid rgba(247,245,241,.14); }
body.skin-kantelpunt-kompas .kk-row__key { font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-soft); }
body.skin-kantelpunt-kompas .kk-row__a { color:var(--text-inverse);opacity:.66;font-size:1.02rem; }
body.skin-kantelpunt-kompas .kk-row__b { color:var(--text-inverse);font-size:1.05rem;font-weight:500; }
body.skin-kantelpunt-kompas .kk-compare__head { display:none; }
body.skin-kantelpunt-kompas .kk-steps { display:grid;grid-template-columns:1fr;gap:2px;margin-top:8px; }
body.skin-kantelpunt-kompas .kk-step { display:grid;grid-template-columns:auto 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--paper-edge);align-items:start; }
body.skin-kantelpunt-kompas .kk-step:last-child { border-bottom:1px solid var(--paper-edge); }
body.skin-kantelpunt-kompas .kk-step__num { font-family:var(--font-mono);font-size:.95rem;color:var(--signal-deep);padding-top:6px;font-weight:500; }
body.skin-kantelpunt-kompas .kk-step h3 { font-size:1.35rem;margin:0 0 8px; }
body.skin-kantelpunt-kompas .kk-step p { color:var(--text-soft);font-size:1.03rem;margin:0;max-width:56ch; }
body.skin-kantelpunt-kompas .kk-steps__note { margin-top:30px;font-style:italic;font-family:var(--font-display);color:var(--text-muted); }
body.skin-kantelpunt-kompas .kk-chip { display:flex;align-items:flex-start;gap:7px;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:.78rem;line-height:1.25;color:var(--text);background:#fff;border:1px solid var(--paper-edge);border-radius:7px;padding:6px 9px;transition:box-shadow .18s,opacity .2s; }
body.skin-kantelpunt-kompas .kk-chip__dot { width:7px;height:7px;border-radius:2px;margin-top:4px;flex:none; }
body.skin-kantelpunt-kompas .kk-chip:hover { box-shadow:0 2px 9px rgba(15,35,71,.12); }
body.skin-kantelpunt-kompas .kk-chip:focus-visible { outline:2px solid var(--signal);outline-offset:2px; }
body.skin-kantelpunt-kompas .kk-chip.is-off { opacity:.4;text-decoration:line-through;text-decoration-color:rgba(15,35,71,.3); }
body.skin-kantelpunt-kompas .kk-c-sociaal { background:rgba(194,103,79,.10);border-color:rgba(194,103,79,.38); }
body.skin-kantelpunt-kompas .kk-c-sociaal .kk-chip__dot { background:#c2674f; }
body.skin-kantelpunt-kompas .kk-c-technologisch { background:rgba(63,110,165,.10);border-color:rgba(63,110,165,.38); }
body.skin-kantelpunt-kompas .kk-c-technologisch .kk-chip__dot { background:#3f6ea5; }
body.skin-kantelpunt-kompas .kk-c-economisch { background:rgba(184,146,63,.12);border-color:rgba(184,146,63,.42); }
body.skin-kantelpunt-kompas .kk-c-economisch .kk-chip__dot { background:#b8923f; }
body.skin-kantelpunt-kompas .kk-c-ecologisch { background:rgba(90,138,90,.11);border-color:rgba(90,138,90,.40); }
body.skin-kantelpunt-kompas .kk-c-ecologisch .kk-chip__dot { background:#5a8a5a; }
body.skin-kantelpunt-kompas .kk-c-politiek { background:rgba(125,90,147,.11);border-color:rgba(125,90,147,.40); }
body.skin-kantelpunt-kompas .kk-c-politiek .kk-chip__dot { background:#7d5a93; }
body.skin-kantelpunt-kompas .kk-tool { display:grid;grid-template-columns:1fr;gap:24px;margin-top:8px; }
body.skin-kantelpunt-kompas .kk-qs { display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px; }
body.skin-kantelpunt-kompas .kk-q { appearance:none;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:.85rem;font-weight:500;color:var(--text);background:var(--paper-bright);border:1px solid var(--paper-edge);border-radius:10px;padding:11px 13px;transition:border-color .18s,box-shadow .18s,background .18s;line-height:1.3; }
body.skin-kantelpunt-kompas .kk-q:hover { box-shadow:0 2px 9px rgba(15,35,71,.10); }
body.skin-kantelpunt-kompas .kk-q.is-active { border-color:var(--signal);box-shadow:0 0 0 2px var(--signal);background:var(--signal-bg);font-weight:600; }
body.skin-kantelpunt-kompas .kk-q:focus-visible { outline:2px solid var(--signal);outline-offset:2px; }
body.skin-kantelpunt-kompas .kk-q__type { display:block;font-family:var(--font-mono);font-size:.59rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:3px; }
body.skin-kantelpunt-kompas .kk-disclaimer { font-size:.8rem;color:var(--text-muted);border-left:3px solid var(--paper-edge);padding:4px 0 4px 12px;margin:0 0 22px;line-height:1.45; }
body.skin-kantelpunt-kompas .kk-rel__empty { font-size:.96rem;color:var(--text-muted);background:var(--paper-warm);border:1px solid var(--paper-edge);border-radius:10px;padding:14px 16px;margin:0; }
body.skin-kantelpunt-kompas .kk-rel__group { margin-bottom:16px; }
body.skin-kantelpunt-kompas .kk-rel__h { display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:.88rem;color:var(--text);margin:0 0 8px; }
body.skin-kantelpunt-kompas .kk-rel__dot { width:10px;height:10px;border-radius:3px;flex:none; }
body.skin-kantelpunt-kompas .kk-rel__chips { display:flex;flex-wrap:wrap;gap:7px; }
body.skin-kantelpunt-kompas .kk-nojs { display:block;background:var(--paper-warm);border:1px solid var(--paper-edge);border-radius:10px;padding:12px 16px;font-size:.9rem;color:var(--text-muted);margin-bottom:16px; }
body.skin-kantelpunt-kompas .kk-read { background:var(--paper-bright);border:1px solid var(--paper-edge);border-radius:16px;padding:22px 22px 24px; }
body.skin-kantelpunt-kompas .kk-read__tag { font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);margin:0 0 4px; }
body.skin-kantelpunt-kompas .kk-read h3 { font-size:1.3rem;margin:0 0 14px; }
body.skin-kantelpunt-kompas .kk-readcompass { background:linear-gradient(165deg,var(--ink) 0%,var(--ink-deep) 100%);border-radius:12px;padding:10px 6px;margin-bottom:18px; }
body.skin-kantelpunt-kompas .kk-readcompass svg { width:100%;height:auto;display:block; }
body.skin-kantelpunt-kompas .kk-readcompass circle[id^="kkRing-"] { transition:r .45s cubic-bezier(.22,.61,.36,1); }
body.skin-kantelpunt-kompas .kk-meters { display:flex;flex-direction:column;gap:9px;margin-bottom:16px; }
body.skin-kantelpunt-kompas .kk-meter-row { display:grid;grid-template-columns:6em 1fr 1.4em;gap:10px;align-items:center; }
body.skin-kantelpunt-kompas .kk-meter-row__lab { font-size:.82rem;color:var(--text-soft); }
body.skin-kantelpunt-kompas .kk-meter { height:8px;background:var(--paper-edge);border-radius:999px;overflow:hidden; }
body.skin-kantelpunt-kompas .kk-meter__fill { height:100%;width:0;background:var(--signal-deep);border-radius:999px;transition:width .45s cubic-bezier(.22,.61,.36,1); }
body.skin-kantelpunt-kompas .kk-meter-row.is-top .kk-meter__fill { background:var(--signal); }
body.skin-kantelpunt-kompas .kk-meter-row.is-top .kk-meter-row__lab { color:var(--text);font-weight:600; }
body.skin-kantelpunt-kompas .kk-meter-row__n { font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);text-align:right; }
body.skin-kantelpunt-kompas .kk-readtext { font-size:.97rem;color:var(--text-soft);line-height:1.55;margin-bottom:18px; }
body.skin-kantelpunt-kompas .kk-readtext strong { color:var(--text);font-weight:600; }
body.skin-kantelpunt-kompas .kk-read .btn { width:100%;justify-content:center; }
body.skin-kantelpunt-kompas .kk-read__hint { font-size:.84rem;color:var(--text-muted);margin:11px 0 0;text-align:center; }
body.skin-kantelpunt-kompas .kk-related { display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;padding-top:22px;border-top:1px solid var(--paper-edge); }
body.skin-kantelpunt-kompas .kk-related a { font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--signal-deep);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s; }
body.skin-kantelpunt-kompas .kk-related a:hover { border-bottom-color:var(--signal); }
@media (min-width:920px) {
  body.skin-kantelpunt-kompas .kk-hero__grid { grid-template-columns:.92fr 1.08fr;gap:56px; }
}
@media (min-width:760px) {
  body.skin-kantelpunt-kompas .kk-layers { grid-template-columns:1fr 1fr;gap:24px; }
  body.skin-kantelpunt-kompas .kk-row { grid-template-columns:.5fr 1fr 1fr;align-items:baseline; }
  body.skin-kantelpunt-kompas .kk-compare__head { display:grid;grid-template-columns:.5fr 1fr 1fr;gap:28px;padding:0 0 14px; }
  body.skin-kantelpunt-kompas .kk-compare__head span { font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-inverse);opacity:.5; }
  body.skin-kantelpunt-kompas .kk-compare__head span:last-child { color:var(--signal-soft);opacity:1; }
}
@media (min-width:720px) {
  body.skin-kantelpunt-kompas .kk-forces { grid-template-columns:1fr 1fr; }
}
@media (min-width:1040px) {
  body.skin-kantelpunt-kompas .kk-forces { grid-template-columns:1fr 1fr 1fr; }
}
@media (min-width:560px) {
  body.skin-kantelpunt-kompas .kk-qs { grid-template-columns:1fr 1fr; }
}
@media (min-width:960px) {
  body.skin-kantelpunt-kompas .kk-tool { grid-template-columns:1.2fr .95fr;gap:32px;align-items:start; }
  body.skin-kantelpunt-kompas .kk-read { position:sticky;top:calc(var(--header-h) + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  body.skin-kantelpunt-kompas .kk-meter__fill { transition:none; }
  body.skin-kantelpunt-kompas .kk-readcompass circle[id^="kkRing-"] { transition:none; }
  body.skin-kantelpunt-kompas .kk-chip { transition:none; }
  body.skin-kantelpunt-kompas .kk-fg__spoke { transition:none; }
  body.skin-kantelpunt-kompas .kk-fg__halo { transition:none; }
  body.skin-kantelpunt-kompas .kk-fg__node { transition:none; }
  body.skin-kantelpunt-kompas .kk-fg__label { transition:none; }
  body.skin-kantelpunt-kompas .kk-tab { transition:none; }
}

/* Kracht-iconen op de hoekpunten van het kompas (vervangen de stippen) */
body.skin-kantelpunt-kompas .kk-fg__node { display:none; }
body.skin-kantelpunt-kompas .kk-fg__icon { color:#c9a96a; opacity:.5; pointer-events:none; transition:opacity .2s ease, color .2s ease; }
body.skin-kantelpunt-kompas .kk-fg:hover .kk-fg__icon, body.skin-kantelpunt-kompas .kk-fg:focus-visible .kk-fg__icon { opacity:1; color:var(--signal); }
body.skin-kantelpunt-kompas .kk-fg.is-active .kk-fg__icon { opacity:1; color:var(--signal); }
body.skin-kantelpunt-kompas .kk-readicon { color:#c9a96a; opacity:.42; transition:opacity .4s ease, color .4s ease; }
body.skin-kantelpunt-kompas .kk-readicon.is-lit { opacity:1; color:var(--signal); }
@media (prefers-reduced-motion: reduce){ body.skin-kantelpunt-kompas .kk-fg__icon { transition:none; } }

/* ── readcompass (Probeer het zelf): web-lijnen reageren op gewicht. Dit kader draait NIET; het gaat om de functie. ── */
body.skin-kantelpunt-kompas .kk-readweb line { stroke:#c9a96a; stroke-width:1; }
body.skin-kantelpunt-kompas .kk-readweb > g { stroke-opacity:.18; transition:stroke-opacity .4s ease; }
body.skin-kantelpunt-kompas .kk-readweb > g.is-active { stroke-opacity:.7; }

/* Header-kompas: stapsgewijze rotatie (CCW), elke ~15s een nieuwe kracht bovenaan; iconen rond hun eigen punt (view-box, niet fill-box) zodat ze rechtop blijven en meedraaien */
body.skin-kantelpunt-kompas .kk-spin { transform-box:view-box; transform-origin:280px 220px; animation:kkSpin 75s ease-in-out infinite; }
body.skin-kantelpunt-kompas .kk-spin .kk-fg__label { transform-box:fill-box; transform-origin:center; animation:kkSpinCounter 75s ease-in-out infinite; }
body.skin-kantelpunt-kompas .kk-spin .kk-fg--technologie .kk-fg__icon { transform-box:view-box; transform-origin:280px 92px;  animation:kkSpinCounter 75s ease-in-out infinite; }
body.skin-kantelpunt-kompas .kk-spin .kk-fg--ruimte .kk-fg__icon      { transform-box:view-box; transform-origin:402px 180px; animation:kkSpinCounter 75s ease-in-out infinite; }
body.skin-kantelpunt-kompas .kk-spin .kk-fg--macht .kk-fg__icon       { transform-box:view-box; transform-origin:355px 324px; animation:kkSpinCounter 75s ease-in-out infinite; }
body.skin-kantelpunt-kompas .kk-spin .kk-fg--samenleving .kk-fg__icon { transform-box:view-box; transform-origin:205px 324px; animation:kkSpinCounter 75s ease-in-out infinite; }
body.skin-kantelpunt-kompas .kk-spin .kk-fg--planeet .kk-fg__icon     { transform-box:view-box; transform-origin:158px 180px; animation:kkSpinCounter 75s ease-in-out infinite; }
@keyframes kkSpin { 0%{transform:rotate(0)} 18%{transform:rotate(0)} 20%{transform:rotate(-72deg)} 38%{transform:rotate(-72deg)} 40%{transform:rotate(-144deg)} 58%{transform:rotate(-144deg)} 60%{transform:rotate(-216deg)} 78%{transform:rotate(-216deg)} 80%{transform:rotate(-288deg)} 98%{transform:rotate(-288deg)} 100%{transform:rotate(-360deg)} }
@keyframes kkSpinCounter { 0%{transform:rotate(0)} 18%{transform:rotate(0)} 20%{transform:rotate(72deg)} 38%{transform:rotate(72deg)} 40%{transform:rotate(144deg)} 58%{transform:rotate(144deg)} 60%{transform:rotate(216deg)} 78%{transform:rotate(216deg)} 80%{transform:rotate(288deg)} 98%{transform:rotate(288deg)} 100%{transform:rotate(360deg)} }
body.skin-kantelpunt-kompas .kk-compass:hover .kk-spin, body.skin-kantelpunt-kompas .kk-compass:focus-within .kk-spin,
body.skin-kantelpunt-kompas .kk-compass:hover .kk-spin .kk-fg__icon, body.skin-kantelpunt-kompas .kk-compass:focus-within .kk-spin .kk-fg__icon,
body.skin-kantelpunt-kompas .kk-compass:hover .kk-spin .kk-fg__label, body.skin-kantelpunt-kompas .kk-compass:focus-within .kk-spin .kk-fg__label { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ body.skin-kantelpunt-kompas .kk-spin, body.skin-kantelpunt-kompas .kk-spin .kk-fg__icon, body.skin-kantelpunt-kompas .kk-spin .kk-fg__label { animation:none; } }