/* Redder Management — design-tokens uit my-brand/brand.json.
   Kleuren = canon van reddermanagement.nl. Fonts: Syne (kop) + DM Sans (body),
   zelf-gehost via fonts.css (geen Google-CDN, AVG). */

:root {
    /* Kern-kleuren */
    --rm-teal: #1a9ba1;
    --rm-teal-light: #7fd4d8;
    --rm-teal-dark: #0f6e74;
    --rm-teal-deep: #0d3d40;
    --rm-teal-darkest: #082a2c;
    --rm-mint: #e1f5ee;
    --rm-amber: #d4890a;
    --rm-amber-bright: #e5a400;
    --rm-amber-dark: #854f0b;
    --rm-slate: #3d5a6b;
    --rm-slate-light: #8ba0ad;
    --rm-off-white: #f7f5f0;
    --rm-border-warm: #e2e0da;
    --rm-ink: #1a1a1a;
    --rm-white: #ffffff;

    /* Rollen */
    --color-bg: var(--rm-off-white);
    --color-bg-alt: var(--rm-white);
    --color-text: var(--rm-ink);
    --color-text-light: var(--rm-slate);
    --color-primary: var(--rm-teal);
    --color-accent: var(--rm-amber);

    --font-heading: "Syne", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, sans-serif;

    --container-max: 1280px;
    --space: 1rem;

    /* ---- Live-bewerkbare knoppen (overschreven in base.html vanuit het CMS,
       Instellingen > Vormgeving). Waarden hier zijn de fallback-defaults. ---- */
    --base-font-size: 1.125rem;   /* bodytekst */
    --h1-scale: 1;                /* basisgrootte hero-/paginatitels (Vormgeving) */
    --h2-scale: 1;                /* basisgrootte sectiekoppen (Vormgeving) */
    --h3-scale: 1;                /* basisgrootte subkoppen (Vormgeving) */
    --content-max: 1280px;        /* contentbreedte hele site (admin-instelling) */
    --space-scale: 1;             /* multiplier op de ruimte tussen blokken */
    --content-align: left;        /* tekstuitlijning content (admin-instelling) */

    --header-bg: var(--rm-teal-darkest);
    --header-text: var(--rm-white);
    --header-accent: var(--rm-teal-light);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.65;
    font-size: var(--base-font-size);
}

/* Globale tekstuitlijning voor alle pagina- en blogcontent (admin > Vormgeving).
   Alleen de content in <main>; header en footer blijven ongewijzigd. */
#content {
    text-align: var(--content-align, left);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.15;
    color: var(--rm-teal-deep);
    font-weight: 700;
}

a {
    color: var(--color-primary);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ---------- Skip-link ---------- */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 200;
    background: var(--rm-white);
    color: var(--rm-teal-deep);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.16s ease;
}

.skip-link:focus {
    top: 0.5rem;
}

/* ---------- Header (diep-teal bookend) ---------- */
/* Header net iets donkerder dan de hero, met een lichtgroene scheidingsrand. */
.site-header {
    background: var(--header-bg);
    color: var(--header-text);
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 2px solid var(--header-accent);
    transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 6px 24px rgba(8, 42, 44, 0.35);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
}

/* Woordmerk als tekst (geen logo-plaat op de balk). */
.site-header__brand {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__brand-name {
    color: var(--header-text);
}

.site-header__brand-accent {
    color: var(--header-accent);
    margin-left: 0.32em;
}

.site-header__collapse {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-nav__list {
    list-style: none;
    display: flex;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.site-nav__link,
.site-nav__sublink {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 500;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    transition: color 0.14s ease, background 0.14s ease;
}

/* Iets lichtere hover: subtiel oplichtend vlak achter de menuknop. */
.site-nav__list > .site-nav__item > .site-nav__link {
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
}

.site-nav__link:hover,
.site-nav__sublink:hover {
    color: var(--header-text);
}

.site-nav__list > .site-nav__item > .site-nav__link:hover {
    background: rgba(127, 212, 216, 0.16);
}

.site-nav__link.is-active,
.site-nav__sublink.is-active {
    color: var(--header-accent);
}

/* Submenu — dropdown-kaart op desktop. */
.site-nav__item {
    position: relative;
}

.site-nav__item > .site-nav__link {
    display: inline-flex;
    align-items: center;
    padding-block: 0.35rem;
}

.site-nav__subtoggle {
    display: none;
}

.site-nav__sub {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: -0.5rem;
    min-width: 16rem;
    background: var(--header-bg);
    border: 1px solid rgba(127, 212, 216, 0.2);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(6, 30, 32, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 70;
}

.site-nav__item--has-sub:hover > .site-nav__sub,
.site-nav__item--has-sub:focus-within > .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav__sub .site-nav__sublink {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.95rem;
}

.site-nav__sub .site-nav__sublink:hover {
    background: rgba(127, 212, 216, 0.16);
    color: var(--header-text);
}

.site-nav__sub .site-nav__sublink.is-active {
    color: var(--header-accent);
}

.site-header__cta {
    white-space: nowrap;
}

/* ---------- Hamburger ---------- */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--rm-white);
}

.nav-toggle__box {
    position: relative;
    display: block;
    width: 24px;
    height: 16px;
}

.nav-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease, top 0.22s ease;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

.site-header.is-open .nav-toggle__bar:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.site-header.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.site-header.is-open .nav-toggle__bar:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

/* ---------- Mobiele navigatie (paneel) ---------- */
@media (max-width: 859px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-header__collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.75rem 1.25rem 1.5rem;
        background: var(--rm-teal-deep);
        border-bottom: 1px solid rgba(127, 212, 216, 0.18);
        box-shadow: 0 20px 40px rgba(13, 61, 64, 0.35);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .site-header.is-open .site-header__collapse {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav,
    .site-nav__list {
        display: block;
        width: 100%;
    }

    .site-nav__item {
        border-bottom: 1px solid rgba(127, 212, 216, 0.14);
    }

    .site-nav__link {
        display: block;
        padding: 0.9rem 0;
        font-size: 1.05rem;
    }

    /* Item met submenu: link links, caret-knop rechts op dezelfde regel. */
    .site-nav__item--has-sub {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .site-nav__item--has-sub > .site-nav__link {
        grid-column: 1;
    }

    .site-nav__subtoggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-column: 2;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--rm-teal-light);
        cursor: pointer;
    }

    .site-nav__subtoggle svg {
        transition: transform 0.2s ease;
    }

    .site-nav__item.is-sub-open .site-nav__subtoggle svg {
        transform: rotate(180deg);
    }

    .site-nav__sub {
        grid-column: 1 / -1;
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0.5rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.24s ease;
    }

    .site-nav__item.is-sub-open .site-nav__sub {
        max-height: 20rem;
    }

    .site-nav__sub .site-nav__sublink {
        color: rgba(255, 255, 255, 0.82);
        padding: 0.6rem 0.75rem;
    }

    .site-nav__sub .site-nav__sublink:hover {
        background: rgba(127, 212, 216, 0.12);
        color: var(--rm-white);
    }

    .site-header__cta {
        display: block;
        text-align: center;
        margin-top: 0.85rem;
    }
}

/* ---------- Hero (diep-teal, sluit aan op de header) ---------- */
.hero {
    position: relative;
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    padding-block: clamp(1.25rem, 2.5vw, 2.25rem);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Tekst zit boven de decoratieve groeicurve. */
.hero__inner {
    position: relative;
    z-index: 1;
}

/* Breadcrumb / kicker: links bovenaan verankerd. */
.hero__eyebrow {
    text-transform: uppercase;
    font-size: var(--hero-label-size, 0.9rem);
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--hero-label-color, var(--rm-amber-bright));
    text-align: var(--hero-label-align, left);
    /* Krappere spatiëring en zwaarder gewicht: leest scherper op de donkere hero. */
    letter-spacing: 0.05em;
    margin: var(--hero-label-space-top, 0) 0 var(--hero-label-space-bottom, clamp(1.5rem, 4vw, 2.5rem));
}

/* Hero volgt de globale uitlijning (Instellingen > Vormgeving): standaard links,
   scherp aanslaand; center/rechts kan Bart in de settings zetten. */
.hero__body {
    max-width: var(--content-max);
    margin-inline: auto;
    text-align: var(--content-align, left);
}

.hero__heading {
    color: var(--rm-white);
    font-size: calc(clamp(2.1rem, 4.6vw, 3.2rem) * var(--h1-scale));
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0 0 0.6rem;
    max-width: none;
}

/* Groene subtitel direct onder de witte titel. */
.hero__subheading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    color: var(--rm-teal-light);
    margin: 0 0 1.1rem;
}

.hero__intro {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: rgba(255, 255, 255, 0.88);
    max-width: 56ch;
    margin: 0 0 1.75rem;
    line-height: 1.55;
}

.hero__actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin: 0;
    justify-content: var(--content-justify, flex-start);
}

/* Uitlijning center/rechts (Instellingen > Vormgeving): verplaats ook de
   begrensde tekstblokken in de hero mee, niet alleen de tekst erin. */
.align-center .hero__heading,
.align-center .hero__subheading,
.align-center .hero__intro { margin-inline: auto; }

.align-right .hero__heading,
.align-right .hero__subheading,
.align-right .hero__intro {
    margin-left: auto;
    margin-right: 0;
}

/* Optionele afbeelding als gecentreerde media onder de tekst. */
.hero__image {
    margin: 2rem auto 0;
    max-width: 44rem;
}

.hero__image img {
    border-radius: 16px;
    display: block;
    margin-inline: auto;
}

/* Groeicurve: duidelijk zichtbaar accent, uitgelijnd op de rechterrand van de
   container (dus binnen de contentbreedte, niet tot de schermrand) en in de vrije
   hoek naast de gecentreerde, smallere tekstkolom. */
.hero__chart {
    position: absolute;
    right: max(1.25rem, (100% - var(--content-max)) / 2 + 1.25rem);
    bottom: 1rem;
    z-index: 0;
    width: min(22rem, 34%);
    height: auto;
    opacity: 0.6;
    pointer-events: none;
}

/* Onder de contentbreedte + wat marge kan de curve tegen de tekst aanlopen. */
@media (max-width: 1024px) {
    .hero__chart {
        display: none;
    }
}

/* Lijn tekent zichzelf bij het laden; teruggedraaid bij reduced-motion. */
.hero__chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: hero-draw 1.6s ease-out 0.2s forwards;
}

.hero__chart-fill,
.hero__chart-dots,
.hero__chart-tip {
    opacity: 0;
    animation: hero-fade 0.8s ease-out 1.4s forwards;
}

@keyframes hero-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes hero-fade {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__chart-line,
    .hero__chart-fill,
    .hero__chart-dots,
    .hero__chart-tip {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}


/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-heading);
    border: 2px solid transparent;
    cursor: pointer;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--rm-white);
}

.btn--primary:hover {
    background: var(--rm-teal-dark);
}

.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--ghost:hover {
    background: var(--rm-mint);
}

.btn--ghost-light {
    color: var(--rm-white);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost-light:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn--amber {
    background: var(--color-accent);
    color: var(--rm-ink);
    transition: background 0.16s ease, color 0.16s ease;
}

/* Groene hover maakt duidelijk dat de amber-knop klikbaar is. */
.btn--amber:hover {
    background: var(--rm-teal);
    color: var(--rm-white);
}

/* Compacte knop voor de header-CTA. */
.site-header__cta.btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    border-radius: 8px;
}

/* ---------- Sections (blokken-container) ---------- */
.section {
    padding-block: calc(clamp(2.5rem, 6vw, 4.5rem) * var(--space-scale));
}

.section--white {
    background: var(--color-bg-alt);
}

.section--offwhite {
    background: var(--color-bg);
}

.section--teal-deep {
    background: var(--rm-teal-deep);
    color: var(--rm-mint);
}

.section--teal-deep h1,
.section--teal-deep h2,
.section--teal-deep h3,
.section--teal-deep h4,
.section--teal-deep .block__heading {
    color: var(--rm-white);
}

.section--teal-deep a {
    color: var(--rm-teal-light);
}

/* Verticale ritme tussen gestapelde blokken binnen één sectie. */
.section > * + * {
    margin-top: calc(clamp(1.75rem, 4vw, 2.75rem) * var(--space-scale));
}

/* Content-blokken op paginaniveau (buiten een sectie) krijgen eigen ritme. */
.block-label-heading,
.block-results,
.block-uitres,
.block-problems,
.block-framework,
.block-cards,
.block-quote,
.block-columns,
.block-rich-text,
.block-steps {
    padding-block: calc(clamp(2.5rem, 6vw, 4.5rem) * var(--space-scale));
}

/* Binnen een sectie draagt de sectie de padding. */
.section .block-label-heading,
.section .block-results,
.section .block-uitres,
.section .block-problems,
.section .block-framework,
.section .block-cards,
.section .block-quote,
.section .block-columns,
.section .block-rich-text,
.section .block-steps {
    padding-block: 0;
}

/* Tekst benut de volle paginabreedte (container begrenst tot --container-max). */
.prose {
    max-width: none;
}

.prose > * + * {
    margin-top: 1.1rem;
}

/* ---------- Gedeelde blok-onderdelen ---------- */
.block__label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
    /* De eyebrow hoort bij de kop en volgt dus "Uitlijning kop". */
    text-align: var(--align-heading, inherit);
}

.block__heading {
    font-size: calc(clamp(1.7rem, 4vw, 2.5rem) * var(--h2-scale) * var(--block-heading-scale, 1));
    margin: 0 0 0.75rem;
    /* Per-veld uitlijning (blok > Opmaak) overschrijft de globale; leeg = erven. */
    text-align: var(--align-heading, inherit);
}

/* Optioneel portret links van een sectiekop (Label / kop, Problemen + quotes).
   Zonder foto blijft de rij een gewone wrapper zonder effect op de opmaak. */
.heading-row--portrait {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.heading-row--portrait .heading-row__body {
    flex: 1;
    min-width: 0;
}

.heading-row__portrait {
    flex: 0 0 auto;
}

.heading-row__portrait img {
    width: clamp(96px, 12vw, 140px);
    height: clamp(96px, 12vw, 140px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--rm-teal-light);
}

/* Een flexrij laat de ondermarge van de laatste tekstregel niet doorlopen, dus
   die verhuist naar de rij zelf. Anders staat de tekst scheef naast het portret
   en verdwijnt de afstand tot het blok eronder. */
.heading-row--portrait .block__heading:last-child,
.heading-row--portrait .block__intro:last-child {
    margin-bottom: 0;
}

.heading-row--portrait:not(:last-child) {
    margin-bottom: 1.5rem;
}

@media (max-width: 560px) {
    .heading-row--portrait {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Uitlijning inhoud (blok > Opmaak): de items binnen een blok, los van kop en
   intro. Leeg = erven, dus de globale instelling uit Vormgeving blijft gelden. */
.cards__grid,
.steps,
.results__grid,
.problems__list,
.framework__columns,
.framework__foundation,
.columns__grid,
.quote,
.ref-chips {
    text-align: var(--align-content, inherit);
}

/* Chips staan in een flexrij; daar bepaalt justify-content de uitlijning. */
.ref-chips {
    justify-content: var(--justify-content, flex-start);
}

.block__intro {
    text-align: var(--align-intro, inherit);
    font-size: 1.25rem;
    color: var(--color-text-light);
    max-width: none;
    line-height: 1.55;
    margin: 0 0 1.5rem;
}

.section--teal-deep .block__intro {
    color: var(--rm-teal-light);
}

/* ---------- 3-resultaten ---------- */
.results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.results__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.results__number {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: var(--color-accent);
    line-height: 1;
}

.results__label {
    font-weight: 600;
}

.results__desc {
    color: var(--color-text-light);
    margin: 0.25rem 0 0;
}

.section--teal-deep .results__desc {
    color: var(--rm-teal-light);
}

/* ---------- Problemen + quotes ---------- */
.problems__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.problems__item {
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.5rem 3.4rem;
}

.problems__problem {
    position: relative;
    font-weight: 600;
    margin: 0;
}

/* Teal check-badge: markeert elk item als herkenbaar knelpunt. */
.problems__problem::before {
    content: "";
    position: absolute;
    left: -1.9rem;
    top: 0.05em;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--rm-mint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230d3d40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.9rem;
}

/* Alleen ruimte onder de kop wanneer er een quote onder staat. */
.problems__item:has(.problems__quote) .problems__problem {
    margin-bottom: 0.75rem;
}

.problems__quote {
    margin: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-light);
}

.problems__quote p {
    margin: 0 0 0.35rem;
    font-style: italic;
}

.problems__author {
    font-size: 0.85rem;
    font-style: normal;
    color: var(--color-primary);
}

/* ---------- Uitdaging -> resultaat-matrix ---------- */
.uitres {
    display: flex;
    flex-direction: column;
}

/* Accent + badge-tinten per impactcategorie (canon-kleuren live-site). */
.uitres__group--bedrijf,
.uitres__row--bedrijf {
    --uitres-accent: var(--rm-teal);
    --uitres-badge-bg: #e8f6f7;
    --uitres-badge-fg: var(--rm-teal-dark);
    --uitres-badge-bd: #b3dfe1;
}

.uitres__group--ops,
.uitres__row--ops {
    --uitres-accent: var(--rm-amber);
    --uitres-badge-bg: #fef3e2;
    --uitres-badge-fg: var(--rm-amber);
    --uitres-badge-bd: #f5d9a8;
}

.uitres__group--klant,
.uitres__row--klant {
    --uitres-accent: var(--rm-slate);
    --uitres-badge-bg: #edf2f5;
    --uitres-badge-fg: var(--rm-slate);
    --uitres-badge-bd: #cdd8df;
}

.uitres__group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1.4rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--uitres-accent);
}

.uitres > .uitres__group:first-child {
    margin-top: 0;
}

.uitres__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--uitres-accent);
    flex: none;
}

.uitres__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.uitres__cell {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    background: var(--rm-white);
    border: 1px solid var(--rm-border-warm);
    border-left: 4px solid var(--uitres-accent);
    border-radius: 4px;
}

.uitres__arrow {
    color: var(--uitres-accent);
    font-size: 0.62rem;
    line-height: 1;
    margin-top: 0.4em;
    flex: none;
}

.uitres__challenge-text {
    margin: 0;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text);
}

.uitres__result-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uitres__result-text {
    margin: 0;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
}

.uitres__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.uitres__euro {
    padding: 0.2rem 0.7rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--uitres-badge-bg);
    color: var(--uitres-badge-fg);
    border: 1px solid var(--uitres-badge-bd);
}

.uitres__tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-slate-light);
}

@media (max-width: 640px) {
    .uitres__row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* ---------- Framework ---------- */
.framework__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.framework__column {
    position: relative;
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-top: 3px solid var(--rm-teal);
    border-radius: 3px 3px 0 0;
    padding: 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Genummerde badge: de kolommen vormen een reeks (1, 2, 3). */
.framework__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid var(--rm-teal);
    background: var(--rm-white);
    color: var(--rm-teal-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}

.framework__column-title {
    margin: 0;
    font-size: 1.2rem;
}

.framework__column-desc {
    margin: 0;
    color: var(--color-text-light);
}

.framework__foundation {
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    border-radius: 0 0 14px 14px;
    padding: 1.5rem;
    text-align: center;
}

.framework__foundation-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rm-amber-bright);
}

.framework__foundation-text {
    margin: 0.5rem 0 0;
    font-size: 1.1rem;
    color: var(--rm-white);
    max-width: 46rem;
    margin-inline: auto;
}

/* ---------- Cards ---------- */
.cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
}

.card {
    position: relative;
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-radius: 14px;
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Teal accent-streep bovenaan; wordt amber bij hover. */
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--rm-teal);
    transition: background 0.18s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(13, 61, 64, 0.12);
    border-color: var(--rm-teal-light);
}

.card:hover::before {
    background: var(--color-accent);
}

/* Uitgelichte kaart: amber accentstreep en mint vlak, zodat hij uit de reeks
   springt. Gebruikt op de framework-pagina's voor het eigen framework. */
.card--highlight {
    background: var(--rm-mint);
    border-color: var(--rm-teal-light);
}

.card--highlight::before {
    background: var(--color-accent);
    height: 4px;
}

.card__media {
    margin: -1.75rem -1.5rem 0.5rem;
}

.card__media img {
    display: block;
    width: 100%;
}

/* Vaste maximale breedte: afbeelding gecentreerd binnen de kaartpadding. */
.card__media--large,
.card__media--medium,
.card__media--small {
    margin: 0 auto 0.75rem;
}

.card__media--large img {
    max-width: 260px;
    margin: 0 auto;
}

.card__media--medium img {
    max-width: 180px;
    margin: 0 auto;
}

.card__media--small img {
    max-width: 120px;
    margin: 0 auto;
}

.card__title {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
}

.card__desc {
    margin: 0;
    color: var(--color-text-light);
    flex: 1;
}

/* Eyebrow: kleine teal bovenkop boven de kaarttitel (bijv. B2B strategie). */
.card__eyebrow {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rm-teal-dark);
}

/* Tag/pill onderaan de kaart (bijv. 30 min · telefonisch of video). */
.card__tag {
    align-self: flex-start;
    margin-top: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--rm-teal-dark);
    background: var(--rm-mint);
}

/* Cirkel-badge voor genummerde stappenreeksen. */
.card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--rm-teal);
    background: var(--rm-white);
    color: var(--rm-teal-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
}

.card__link {
    font-weight: 600;
    font-family: var(--font-heading);
    text-decoration: none;
    color: var(--rm-amber-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.card__link::after {
    content: "\2192";
    transition: transform 0.16s ease;
}

.card:hover .card__link::after {
    transform: translateX(3px);
}

/* ---------- Quote ---------- */
/* Beslaat de volle leesbreedte (niet meer een smalle kolom links). */
.quote {
    position: relative;
    margin: 0;
    max-width: var(--content-max);
    padding-left: 2rem;
    border-left: 4px solid var(--color-accent);
}

.quote__text {
    font-family: var(--font-heading);
    font-size: calc(clamp(1.35rem, 3vw, 1.9rem) * var(--h2-scale) * var(--block-heading-scale, 1));
    line-height: 1.28;
    color: var(--rm-teal-deep);
    margin: 0 0 1rem;
}

.quote__source {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.quote__author {
    font-style: normal;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--color-primary);
    display: block;
}

.section--teal-deep .quote__text {
    color: var(--rm-white);
}

.section--teal-deep .quote__source {
    color: var(--rm-teal-light);
}

.section--teal-deep .quote__author {
    color: var(--rm-teal-light);
}

/* ---------- CTA-strook ---------- */
.block-cta-strip {
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.cta-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Met portret: grote, vierkante foto met ronde hoeken links van de tekst en de
   knoppen (zoals de 'Aan de slag'-sectie op de live-site). */
.cta-strip__inner--photo {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "photo body"
        "photo actions";
    align-items: center;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
}

.cta-strip__inner--photo .cta-strip__photo { grid-area: photo; align-self: center; }
.cta-strip__inner--photo .cta-strip__body { grid-area: body; }
.cta-strip__inner--photo .cta-strip__actions { grid-area: actions; align-self: start; }

@media (max-width: 640px) {
    .cta-strip__inner--photo {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "body"
            "actions";
        justify-items: start;
        row-gap: 1.25rem;
    }
}

.cta-strip__heading {
    color: var(--rm-white);
    margin: 0 0 0.35rem;
    font-size: calc(clamp(1.5rem, 3.5vw, 2.1rem) * var(--h2-scale) * var(--block-heading-scale, 1));
    text-align: var(--align-heading, inherit);
}

.cta-strip__text {
    margin: 0;
    color: var(--rm-teal-light);
    text-align: var(--align-intro, inherit);
}

.cta-strip__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
}

/* ---------- Kolommen ---------- */
.columns__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}

/* Verticale uitlijning per kolom (keuze in het blok). Alleen zichtbaar als de
   kolommen verschillend hoog zijn, bijv. tekst naast een afbeelding. */
.columns__col--top { align-self: start; }
.columns__col--center { align-self: center; }
.columns__col--bottom { align-self: end; }
.columns__col--stretch { align-self: stretch; }

/* Kop binnen een kolom als eyebrow-achtige sectielabel. */
.columns__col :is(h2, h3, h4):first-child {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rm-border-warm);
}

/* Lijsten met een teal marker i.p.v. standaard bullets. */
.columns__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.columns__col ul li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.55rem;
    font-weight: 500;
}

.columns__col ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ---------- Stappen-sequence (genummerd + pill) ---------- */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
}

.steps__item {
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-top: 3px solid var(--rm-teal);
    border-radius: 0 0 12px 12px;
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.steps__num {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--rm-teal);
    color: var(--rm-teal-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35rem;
}

.steps__title {
    margin: 0;
    font-size: 1.15rem;
}

.steps__desc {
    margin: 0;
    color: var(--color-text-light);
    flex: 1;
}

.steps__pill {
    align-self: flex-start;
    margin-top: 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--rm-teal-dark);
    background: var(--rm-mint);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
}

/* ---------- Impact-secties (interactief) ---------- */
.block-impact {
    padding-top: clamp(1.25rem, 3vw, 2rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.block-impact--offwhite { background: var(--color-bg); }
.block-impact--white { background: var(--color-bg-alt); }

.impact__heading {
    text-align: center;
    font-size: calc(clamp(1.5rem, 2.8vw, 2.1rem) * var(--h2-scale));
    /* Volgt de leesbreedte uit Instellingen > Vormgeving; anders brak de kop al
       na 26 tekens af terwijl er ruimte over was. */
    max-width: var(--content-max);
    margin-inline: auto;
    margin-bottom: 0.4rem;
}

.impact__hint {
    text-align: center;
    color: var(--color-text-light);
    margin: 0 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.impact__hint::before {
    content: "\2193";
    color: var(--rm-teal);
}

.impact__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}

.impact__area {
    --k: var(--rm-teal);
    background: var(--rm-white);
    border: 1.5px solid var(--rm-border-warm);
    border-radius: 12px;
    padding: 1.4rem 1.35rem 1.15rem;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(13, 61, 64, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Vast accentrandje bovenaan (in de gebiedskleur), net als de kaarten. */
.impact__area::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--k);
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.impact__area:hover::before,
.impact__area.is-active::before { opacity: 1; }

.impact__area--teal { --k: var(--rm-teal); }
.impact__area--amber { --k: var(--rm-amber); }
.impact__area--slate { --k: var(--rm-slate); }

.impact__area::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--k);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.impact__area:hover { border-color: var(--k); }
.impact__area:hover::after,
.impact__area.is-active::after { transform: scaleX(1); }

.impact__area.is-active {
    border-color: var(--k);
    box-shadow: 0 8px 22px rgba(13, 61, 64, 0.12);
    transform: translateY(-2px);
}

.impact__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    min-height: 1.2rem;
}

.impact__icon {
    color: var(--k);
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--k) 12%, transparent);
}

.impact__badge {
    text-align: right;
    flex-shrink: 0;
}

.impact__badge-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--k);
    line-height: 1.05;
}

.impact__badge-label {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-light);
    margin-top: 2px;
}

.impact__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--rm-teal-deep);
    line-height: 1.25;
}

.impact__sub {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 0.15rem;
}

.impact__count {
    margin-top: 0.7rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--k);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
}

.impact__caret {
    display: inline-block;
    transition: transform 0.2s ease;
}

.impact__area.is-active .impact__caret { transform: rotate(180deg); }

.impact__panel {
    grid-column: 1 / -1;
    padding-top: 0.85rem;
    animation: impactIn 0.22s ease;
    /* Gestructureerde kaarten lezen links-uitgelijnd, los van de globale
       tekstuitlijning (de sectiekop hierboven blijft wel gecentreerd). */
    text-align: left;
}

@keyframes impactIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.impact__panel-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin: 0 0 0.7rem;
}

/* Resultaten/symptomen onder elkaar op volle breedte: de dikgedrukte zin krijgt
   zo de volledige kolombreedte en blijft goed leesbaar (niet in smalle kolommen). */
.impact__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.impact__item {
    --k: var(--rm-teal);
    background: var(--rm-white);
    border: 1.5px solid var(--rm-border-warm);
    border-left: 4px solid var(--k);
    border-radius: 8px;
    padding: 1.3rem 1.5rem;
    box-shadow: 0 2px 10px rgba(13, 61, 64, 0.05);
}

.impact__item--teal { --k: var(--rm-teal); }
.impact__item--amber { --k: var(--rm-amber); }
.impact__item--slate { --k: var(--rm-slate); }

.impact__quote {
    margin: 0 0 0.7rem;
    font-style: italic;
    color: var(--rm-teal-deep);
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Symptoom-item: quote links, tags rechts ernaast (beter leesbaar, zoals live). */
.impact__item--quote {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.impact__item--quote .impact__quote {
    margin: 0;
    flex: 1;
}

.impact__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.impact__item--quote .impact__tags {
    flex-shrink: 0;
    justify-content: flex-end;
}

.impact__tag {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-light);
    background: var(--color-bg);
    border-radius: 5px;
    padding: 0.25rem 0.6rem;
}

/* Kop links, het bedrag-pil rechts op dezelfde rij (zoals de live-site). */
.impact__item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.impact__item-headline {
    margin: 0;
    flex: 1;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--rm-teal-deep);
    line-height: 1.45;
}

.impact__figure {
    flex-shrink: 0;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--k);
    background: color-mix(in srgb, var(--k) 12%, transparent);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    line-height: 1.2;
}

.impact__bullets {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-light);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Eigen marker in de kaartkleur, strak naast de tekst uitgelijnd. */
.impact__bullets li {
    position: relative;
    padding-left: 1.35rem;
}

.impact__bullets li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--k);
}

@media (max-width: 640px) {
    .impact__grid { grid-template-columns: 1fr; }
    /* Op smalle schermen tags weer onder de quote (rij wordt anders te krap). */
    .impact__item--quote {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }
    .impact__item--quote .impact__tags { justify-content: flex-start; }
    /* Op smalle schermen het bedrag-pil boven de kop. */
    .impact__item-head {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0.4rem;
    }
    /* In één kolom valt het paneel direct onder de knop waar het bij hoort:
       knop en paneel krijgen dezelfde order-waarde, de bronvolgorde zet de knop
       net boven zijn paneel (zoals de live-site). */
    .impact__area,
    .impact__panel { order: var(--impact-order); }
}

/* ---------- Klantreismatrix ---------- */
.block-krm {
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.krm__heading { text-align: center; }

.krm__intro {
    text-align: center;
    margin-inline: auto;
}

.krm__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rm-border-warm);
    border-radius: 10px;
}

.krm {
    border-collapse: collapse;
    width: 100%;
    min-width: 62rem;
    font-size: 0.8rem;
}

.krm th,
.krm td {
    border: 1px solid var(--rm-border-warm);
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    text-align: left;
    line-height: 1.35;
}

.krm__corner { background: var(--rm-white); border: none; }

.krm__phase {
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    text-align: center;
    white-space: nowrap;
}

.krm__phase--customer { background: var(--rm-teal-dark); }

.krm__journey {
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rm-teal-dark);
    font-weight: 700;
    background: rgba(26, 155, 161, 0.12);
}

.krm__journey--customer { background: rgba(26, 155, 161, 0.22); }

.krm__group {
    background: #f0eeea;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rm-slate);
    font-weight: 700;
    text-align: left;
}

.krm__rowlabel {
    background: #fafaf8;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--rm-teal-deep);
    white-space: nowrap;
}

.krm__rowlabel--slate { background: rgba(61, 90, 107, 0.05); }
.krm__rowlabel--klant { background: rgba(26, 155, 161, 0.06); }
.krm__rowlabel--partner { background: rgba(212, 137, 10, 0.06); }

.krm__rownote {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.68rem;
    color: var(--color-text-light);
    white-space: normal;
}

.krm__cell { color: var(--color-text-light); }

.krm__cell--teal { background: rgba(26, 155, 161, 0.1); color: var(--rm-teal-deep); }
.krm__cell--amber { background: rgba(212, 137, 10, 0.1); color: var(--rm-amber-dark); }
.krm__cell--slate { background: rgba(61, 90, 107, 0.06); color: var(--rm-slate); }
.krm__cell--klant { background: rgba(26, 155, 161, 0.05); color: var(--rm-teal-deep); }
.krm__cell--partner { background: rgba(212, 137, 10, 0.05); color: var(--rm-amber-dark); }

.krm__legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    padding: 0;
    margin: 1.1rem 0 0;
    font-size: 0.8rem;
}

.krm__legend-item {
    --l: var(--rm-teal);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text-light);
}

.krm__legend-item::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    background: var(--l);
}

.krm__legend-item--teal { --l: var(--rm-teal); }
.krm__legend-item--amber { --l: var(--rm-amber); }
.krm__legend-item--slate { --l: var(--rm-slate); }
.krm__legend-item--klant { --l: rgba(26, 155, 161, 0.45); }
.krm__legend-item--partner { --l: rgba(212, 137, 10, 0.45); }

/* ---------- Commercieel IT-fundament (keten) ---------- */
.block-cif {
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.cif__heading { text-align: center; }

.cif__intro {
    text-align: center;
    margin-inline: auto;
}

.cif__chain {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1.75rem;
}

.cif__phase {
    --pk: var(--rm-teal);
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-radius: 12px;
    overflow: hidden;
}

.cif__phase--data { --pk: var(--rm-slate); }
.cif__phase--info { --pk: var(--rm-teal); }
.cif__phase--insight { --pk: var(--rm-teal-dark); }
.cif__phase--action { --pk: var(--rm-amber); }

.cif__phase-head {
    display: block;
    background: var(--pk);
    color: var(--rm-white);
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
    padding: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

.cif__steps {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cif__step {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.cif__num {
    flex-shrink: 0;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    border: 2px solid var(--pk);
    color: var(--pk);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cif__step-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cif__step-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--rm-teal-deep);
    font-size: 0.98rem;
    line-height: 1.2;
}

.cif__step-desc {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

.cif__foundation {
    margin-top: 1rem;
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    text-align: center;
}

.cif__foundation-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    color: var(--rm-teal-light);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.cif__foundation-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 820px) {
    .cif__chain { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .cif__chain { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--rm-teal-deep);
    color: var(--rm-off-white);
    padding-block: 3.5rem 1.75rem;
    margin-top: 4rem;
}

.site-footer a {
    color: var(--rm-teal-light);
    text-decoration: none;
    display: block;
    transition: color 0.14s ease;
}

.site-footer a:hover {
    color: var(--rm-white);
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.site-footer__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
}

.site-footer__name span {
    color: var(--rm-teal-light);
}

.site-footer__tagline {
    color: var(--rm-slate-light, #8ba0ad);
    margin: 0.35rem 0 0;
}

.site-footer__col-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rm-slate-light, #8ba0ad);
    margin-bottom: 0.75rem;
}

.site-footer__contact a + a {
    margin-top: 0.4rem;
}

.site-footer__legal {
    display: flex;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    color: var(--rm-slate-light, #8ba0ad);
    flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .site-footer__inner {
        flex-direction: column;
    }
}

/* ---------- Blog (Inspiratie) ---------- */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.blog-filter__item {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-text-light);
    border: 1px solid var(--rm-border-warm);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    transition: background 0.16s ease, color 0.16s ease;
}

.blog-filter__item:hover {
    color: var(--color-primary);
    border-color: var(--rm-teal-light);
}

.blog-filter__item.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--rm-white);
}

/* ---------- Filter + zoekbalk in de blog-hero ---------- */
.blog-hero-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
}

.blog-hero-tools .blog-filter {
    margin-bottom: 0;
}

/* Pills leesbaar op de diep-teal hero. */
.page-header .blog-filter__item {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.28);
}

.page-header .blog-filter__item:hover {
    color: var(--rm-white);
    border-color: var(--rm-teal-light);
}

.page-header .blog-filter__item.is-active {
    background: var(--rm-white);
    border-color: var(--rm-white);
    color: var(--rm-teal-deep);
}

.blog-search {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.15rem 0.15rem 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.blog-search:focus-within {
    border-color: var(--rm-teal-light);
    background: rgba(255, 255, 255, 0.16);
}

.blog-search__input {
    border: none;
    background: transparent;
    color: var(--rm-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.35rem 0.3rem;
    min-width: 12rem;
}

.blog-search__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.blog-search__input:focus {
    outline: none;
}

.blog-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    border: none;
    border-radius: 50%;
    background: var(--rm-amber);
    color: var(--rm-teal-deep);
    cursor: pointer;
    transition: background 0.16s ease;
}

.blog-search__btn:hover {
    background: var(--rm-amber-bright);
}

@media (max-width: 560px) {
    .blog-hero-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search {
        justify-content: space-between;
    }

    .blog-search__input {
        min-width: 0;
        flex: 1;
    }
}

.blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.5rem;
}

.blog-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-radius: 16px;
    padding: 1.5rem;
}

/* Thumbnail onder de titel, binnen de kaart, met ronde hoeken. */
.blog-list__thumb {
    display: block;
    margin: 0.35rem 0 0.5rem;
    border-radius: 12px;
    overflow: hidden;
}

.blog-list__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.blog-list__cat {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
}

.blog-list__title {
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0;
}

.blog-list__title a {
    text-decoration: none;
}

.blog-list__intro {
    color: var(--color-text-light);
    margin: 0;
}

.blog-list__date {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* Blogpost-kop: tekst links, uitgelichte afbeelding klein rechts. De rij volgt
   de leesbreedte (admin-instelling) en staat links uitgelijnd binnen de
   sitebrede container, zodat het beeld op de rechterrand van de tekstkolom valt. */
.page-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: var(--content-max);
}

.page-header__text {
    flex: 1 1 auto;
    min-width: 0;
}

.page-header__media {
    flex: 0 0 auto;
    width: clamp(120px, 22vw, 200px);
}

.page-header__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}


@media (max-width: 640px) {
    .page-header__row {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header__media {
        width: 150px;
    }
}

/* Categorie-link in de kop-band toont als de amber eyebrow. */
.page-header__eyebrow a {
    color: inherit;
    text-decoration: none;
}

.page-header__eyebrow a:hover {
    text-decoration: underline;
}

.page-header__meta {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    margin: 0.85rem 0 0;
}

/* Leesritme voor de post-body binnen .prose. De body volgt de leesbreedte
   (admin-instelling) en staat links uitgelijnd, net als de titel erboven. */
.template-blogpost .prose {
    max-width: var(--content-max);
    font-size: 1.2rem;
    line-height: 1.75;
}

.template-blogpost .prose > p,
.template-blogpost .prose > ul,
.template-blogpost .prose > ol {
    margin: 0 0 calc(1.35rem * var(--space-scale));
}

/* Rich text kan zwevende afbeeldingen (rt-img--left/right) bevatten; sluit de
   floats binnen de tekstkolom af zodat wat erna komt eronder valt. Geldt voor
   alle prosevelden (blog, rich-text-blok, kolommen). */
.prose::after {
    content: "";
    display: block;
    clear: both;
}

/* Een nieuwe kop begint onder een zwevende afbeelding, niet ernaast. */
.prose > h2 {
    clear: both;
}

.template-blogpost .prose > ul,
.template-blogpost .prose > ol {
    padding-left: 1.4rem;
}

.template-blogpost .prose li {
    margin-bottom: 0.5rem;
}

.template-blogpost .prose > h2 {
    font-size: calc(clamp(1.5rem, 3vw, 1.9rem) * var(--h2-scale));
    margin: 2.25rem 0 0.75rem;
}

.template-blogpost .prose > h3 {
    font-size: calc(clamp(1.25rem, 2.5vw, 1.5rem) * var(--h3-scale));
    margin: 2rem 0 0.6rem;
}

/* ---------- Formulieren (fase 6) ---------- */
.rm-form {
    max-width: 40rem;
    display: grid;
    gap: 1.25rem;
}

.rm-form__field {
    display: grid;
    gap: 0.35rem;
}

.rm-form__field label {
    font-weight: 600;
    font-family: var(--font-heading);
}

.rm-form__help {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.rm-form input,
.rm-form textarea,
.rm-form select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--rm-slate);
    border-radius: 8px;
    font: inherit;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.rm-form input:focus,
.rm-form textarea:focus,
.rm-form select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.rm-form textarea {
    min-height: 9rem;
    resize: vertical;
}

.rm-form__error {
    color: #b3261e;
    font-size: 0.85rem;
}

/* Honeypot: buiten beeld voor mensen, wel invulbaar voor bots. */
.rm-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* ---------- Cookie-consent-banner (fase 7) ---------- */
.consent-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 100;
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
}

.consent-banner[hidden] {
    display: none;
}

.consent-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
}

.consent-banner__text {
    margin: 0;
    max-width: 60ch;
    font-size: 0.95rem;
}

.consent-banner__link {
    color: var(--rm-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent-banner__link:hover {
    color: var(--rm-teal-light);
}

.consent-banner__actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.consent-banner .btn--ghost {
    color: var(--rm-white);
    border-color: rgba(255, 255, 255, 0.6);
}

.consent-banner .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
    .consent-banner__actions {
        width: 100%;
    }

    .consent-banner__actions .btn {
        flex: 1;
        text-align: center;
    }
}

/* ---------- Paginakop (blog-index / categorie) ---------- */
.page-header {
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-bottom: 2px solid var(--rm-teal-light);
}

.page-header__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--hero-label-size, 0.9rem);
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--hero-label-color, var(--rm-amber-bright));
    text-align: var(--hero-label-align, left);
    margin: var(--hero-label-space-top, 0) 0 var(--hero-label-space-bottom, 0.75rem);
}

.page-header__title {
    color: var(--rm-white);
    font-size: calc(clamp(2.1rem, 4.4vw, 3rem) * var(--h1-scale));
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0;
}

.page-header__intro {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    line-height: 1.55;
    margin-top: 0.9rem;
}

.page-header__intro p {
    margin: 0;
}

/* ---------- CTA-strook: optioneel portret ----------
   Groot, vierkant met ronde hoeken, links van de tekst en de knoppen. */
.cta-strip__photo img {
    width: clamp(150px, 20vw, 220px);
    height: clamp(150px, 20vw, 220px);
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 16px 36px rgba(6, 30, 32, 0.35);
}

/* ---------- Praktijkvoorbeeld (volle-breedte paneel) ---------- */
.block-case {
    padding-block: clamp(0.75rem, 2vw, 1.25rem);
}

.case {
    display: grid;
    /* Quote-kolom meebewegend breed (40%): de quote wordt dan niet veel hoger
       dan de uitleg ernaast. */
    grid-template-columns: minmax(0, 40%) 1fr;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--rm-border-warm);
    box-shadow: 0 12px 32px rgba(13, 61, 64, 0.08);
}

.case__aside {
    background: var(--rm-teal-deep);
    color: var(--rm-white);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
}

.case__client {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--rm-amber-bright);
}

.case__quote {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    line-height: 1.25;
    color: var(--rm-white);
}

.case__body {
    background: var(--color-bg-alt);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    align-self: center;
}

@media (max-width: 760px) {
    .case {
        grid-template-columns: 1fr;
    }
}

/* ---------- Persoonskaart ---------- */
.person-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-left: 4px solid var(--rm-teal);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
}

.person-card__photo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--rm-teal-light);
}

.person-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--rm-teal-deep);
    margin: 0;
}

.person-card__role {
    color: var(--color-text-light);
    margin: 0.15rem 0 0;
}

.person-card__text {
    margin-top: 0.6rem;
}

@media (max-width: 560px) {
    .person-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ---------- Contactpagina-layout ---------- */
.form-layout--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 860px) {
    .form-layout--split {
        grid-template-columns: 1.35fr 1fr;
    }
}

.form-layout--split .rm-form {
    max-width: none;
}

.rm-form__submit {
    justify-self: start;
}

.contact-aside {
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-top: 4px solid var(--rm-teal);
    border-radius: 14px;
    padding: 1.75rem;
}

.contact-aside__title {
    margin: 0 0 0.35rem;
    font-size: 1.3rem;
}

.contact-aside__text {
    margin: 0 0 1.25rem;
    color: var(--color-text-light);
}

.contact-aside .contact-buttons {
    margin-top: 0;
    flex-direction: column;
}

.contact-aside .contact-buttons .btn {
    text-align: center;
}

/* ---------- Afbeeldingsblok (instelbare grootte + uitlijning) ---------- */
.block-image {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block: clamp(1.25rem, 3vw, 2rem);
}

.block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.block-image__caption {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* Grootte begrenst de weergavebreedte van de afbeelding. */
.block-image--small { --img-w: 22rem; }
.block-image--medium { --img-w: 38rem; }
.block-image--large { --img-w: 58rem; }
.block-image--full { --img-w: 100%; }

.block-image--small img,
.block-image--medium img,
.block-image--large img,
.block-image--full img {
    max-width: var(--img-w);
}

/* Uitlijning van de afbeelding + bijschrift binnen de container. */
.block-image--left { align-items: flex-start; text-align: left; }
.block-image--center { align-items: center; text-align: center; }
.block-image--right { align-items: flex-end; text-align: right; }

/* ---------- Witruimte-blok (per-blok spacing-override) ----------
   Voegt vaste extra ruimte toe waar je het blok neerzet. De rhythm-marge van de
   sectie zetten we op nul zodat de hoogte de bepalende maat is. */
.block-spacer { margin: 0 !important; }
.block-spacer--s { height: 0.75rem; }
.block-spacer--m { height: 1.75rem; }
.block-spacer--l { height: 3.5rem; }
.block-spacer--xl { height: 6rem; }

/* ---------- Afbeeldingen binnen rich text (blog + rich-text-blok) ----------
   De formaatklassen komen uit pages/wagtail_hooks.py en combineren uitlijning
   (rechts/links zwevend of gecentreerd) met een grootte. Bij zwevend loopt de
   tekst er links/onder (rechts) resp. rechts/onder (links) langs. */
.rt-img {
    height: auto;
    border-radius: 10px;
}

/* Uitlijning */
.rt-img--right {
    float: right;
    margin: 0.4rem 0 1rem 1.75rem;
}

.rt-img--left {
    float: left;
    margin: 0.4rem 1.75rem 1rem 0;
}

.rt-img--center,
.rt-img--full {
    float: none;
    clear: both;
    display: block;
    margin: 1rem auto;
}

/* Staat de afbeelding vooraan of achteraan in een kolom/prosekolom, dan geen
   extra lucht: hij lijnt dan gelijk met de tekst ernaast. */
.rt-img:first-child { margin-top: 0; }
.rt-img:last-child { margin-bottom: 0; }

/* Grootte (gedeeld tussen de uitlijningen). */
.rt-img--small { max-width: 15rem; }
.rt-img--medium { max-width: 26rem; }
.rt-img--large { max-width: 100%; }
.rt-img--full { width: 100%; max-width: 100%; }

/* Op smalle schermen geen zwevende afbeeldingen: volle breedte, gecentreerd. */
@media (max-width: 640px) {
    .rt-img--right,
    .rt-img--left {
        float: none;
        display: block;
        max-width: 100%;
        margin: 1rem auto;
    }
}

/* ---------- Rich text binnen korte prosevelden (intro's, omschrijvingen) ----------
   De velden zijn nu rich text (bold/italic/returns/lijsten/kleur). Het blok zelf
   levert de kleur/lettergrootte; hier alleen het alinea-ritme netjes zetten. */
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt p { margin: 0 0 0.6rem; }
.rt ul,
.rt ol { margin: 0 0 0.6rem; padding-left: 1.25rem; }
.rt li { margin-bottom: 0.25rem; }

/* ---------- Tekstkleuren (rich-text feature, huisstijl) ---------- */
.text-teal { color: var(--rm-teal); }
.text-amber { color: var(--rm-amber); }
.text-slate { color: var(--rm-slate); }
.text-deepteal { color: var(--rm-teal-deep); }

/* ---------- Per-blok opmaak (OpmaakBlock) ----------
   .block-wrap laat de achtergrond over de volle breedte lopen; de inner
   .container houdt de contentbreedte. Ruimte-utilities passen de blok-padding aan. */

/* Achtergronden (volle breedte). */
.block-wrap.has-bg-white { background: var(--rm-white); }
.block-wrap.has-bg-offwhite { background: var(--rm-off-white); }
.block-wrap.has-bg-mint { background: var(--rm-mint); }
.block-wrap.has-bg-amber-soft { background: #fdf1dd; }
.block-wrap.has-bg-teal-deep { background: var(--rm-teal-deep); }
.block-wrap.has-bg-slate { background: var(--rm-slate); }

/* Donkere achtergronden: lichte tekst + witte koppen (een inline titelkleur wint). */
.block-wrap.has-bg-teal-deep,
.block-wrap.has-bg-slate { color: var(--rm-mint); }

.block-wrap.has-bg-teal-deep :is(h1, h2, h3, h4, .block__heading),
.block-wrap.has-bg-slate :is(h1, h2, h3, h4, .block__heading) { color: var(--rm-white); }

.block-wrap.has-bg-teal-deep .block__intro,
.block-wrap.has-bg-slate .block__intro,
.block-wrap.has-bg-teal-deep .results__desc,
.block-wrap.has-bg-slate .results__desc { color: var(--rm-teal-light); }

.block-wrap.has-bg-teal-deep a,
.block-wrap.has-bg-slate a { color: var(--rm-teal-light); }

/* Quote op een donkere blok-achtergrond: .quote__text staat standaard in
   diep-teal en zou anders wegvallen tegen de achtergrond. */
.block-wrap.has-bg-teal-deep .quote__text,
.block-wrap.has-bg-slate .quote__text { color: var(--rm-white); }

.block-wrap.has-bg-teal-deep .quote__source,
.block-wrap.has-bg-teal-deep .quote__author,
.block-wrap.has-bg-slate .quote__source,
.block-wrap.has-bg-slate .quote__author { color: var(--rm-teal-light); }

/* Ruimte boven/onder per blok (overschrijft de standaard blok-padding). */
.pt-none { padding-block-start: 0 !important; }
.pt-s  { padding-block-start: calc(clamp(1.25rem, 3vw, 2rem) * var(--space-scale)) !important; }
.pt-l  { padding-block-start: calc(clamp(3.5rem, 8vw, 6.5rem) * var(--space-scale)) !important; }
.pt-xl { padding-block-start: calc(clamp(5rem, 11vw, 9rem) * var(--space-scale)) !important; }
.pb-none { padding-block-end: 0 !important; }
.pb-s  { padding-block-end: calc(clamp(1.25rem, 3vw, 2rem) * var(--space-scale)) !important; }
.pb-l  { padding-block-end: calc(clamp(3.5rem, 8vw, 6.5rem) * var(--space-scale)) !important; }
.pb-xl { padding-block-end: calc(clamp(5rem, 11vw, 9rem) * var(--space-scale)) !important; }

/* CTA-strook met een lichte opmaak-achtergrond: donkere tekst i.p.v. wit. */
.block-cta-strip.has-bg-white { background: var(--rm-white); }
.block-cta-strip.has-bg-offwhite { background: var(--rm-off-white); }
.block-cta-strip.has-bg-mint { background: var(--rm-mint); }
.block-cta-strip.has-bg-amber-soft { background: #fdf1dd; }
.block-cta-strip.has-bg-slate { background: var(--rm-slate); }

.block-cta-strip.has-bg-white,
.block-cta-strip.has-bg-offwhite,
.block-cta-strip.has-bg-mint,
.block-cta-strip.has-bg-amber-soft { color: var(--color-text); }

.block-cta-strip.has-bg-white .cta-strip__heading,
.block-cta-strip.has-bg-offwhite .cta-strip__heading,
.block-cta-strip.has-bg-mint .cta-strip__heading,
.block-cta-strip.has-bg-amber-soft .cta-strip__heading { color: var(--rm-teal-deep); }

.block-cta-strip.has-bg-white .cta-strip__text,
.block-cta-strip.has-bg-offwhite .cta-strip__text,
.block-cta-strip.has-bg-mint .cta-strip__text,
.block-cta-strip.has-bg-amber-soft .cta-strip__text { color: var(--color-text-light); }

.block-cta-strip.has-bg-white .btn--ghost-light,
.block-cta-strip.has-bg-offwhite .btn--ghost-light,
.block-cta-strip.has-bg-mint .btn--ghost-light,
.block-cta-strip.has-bg-amber-soft .btn--ghost-light {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ---------- Referenties-blok (chips) ---------- */
.block-references {
    padding-block: calc(clamp(2.5rem, 6vw, 4.5rem) * var(--space-scale));
}

.section .block-references { padding-block: 0; }

.ref-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    margin: 1.25rem 0 0;
}

.ref-chips--sectors { margin-top: 0.7rem; }

.ref-chip {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rm-teal-deep);
    background: var(--rm-mint);
    border: 1px solid rgba(26, 155, 161, 0.25);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    line-height: 1.2;
}

.ref-chip--sector {
    color: var(--rm-slate);
    background: transparent;
    border-style: dashed;
}

/* Chips leesbaar houden op een donkere blok-achtergrond. */
.block-wrap.has-bg-teal-deep .ref-chip,
.block-wrap.has-bg-slate .ref-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(127, 212, 216, 0.28);
    color: var(--rm-white);
}

.block-wrap.has-bg-teal-deep .ref-chip--sector,
.block-wrap.has-bg-slate .ref-chip--sector {
    background: transparent;
    color: var(--rm-teal-light);
}


/* ---------- Account-omgeving (Academy, build 2) ---------- */

/* Header: inlog-/account-knop links van de Quick-Scan-knop. */
.site-header__account {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.site-header__login.btn,
.site-header__account-link.btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    white-space: nowrap;
}

.site-header__logout {
    margin: 0;
}

.site-header__logout-btn {
    background: none;
    border: none;
    padding: 0.3rem 0.2rem;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
}

.site-header__logout-btn:hover {
    color: var(--header-accent);
    text-decoration: underline;
}

/* Login-pagina: gecentreerde gebrande kaart(en), gestapeld (inlog + aanmelden). */
.account-login__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Op desktop staan de inlogkaart en de aanmeldkaart naast elkaar; ze beginnen
   allebei bovenaan, zodat een langere aanmeldkaart de inlogkaart niet uitrekt. */
@media (min-width: 900px) {
    .account-login__inner--split {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 2rem;
    }
}

.account-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--rm-border-warm);
    border-radius: 14px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    box-shadow: 0 12px 32px rgba(13, 61, 64, 0.08);
}

.account-login__card {
    width: 100%;
    max-width: 460px;
}

.account-login__title {
    margin-top: 0;
    color: var(--rm-teal-deep);
}

.account-login__intro {
    color: var(--color-text-light);
    margin-bottom: 1.75rem;
}

/* Scheiding tussen het wachtwoord-formulier en de LinkedIn-knop. */
.account-login__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.account-login__divider::before,
.account-login__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rm-line, rgba(0, 0, 0, 0.12));
}

.account-login__social {
    margin: 0;
}

/* Hint onder de route waarmee dit apparaat de vorige keer inlogde. */
.account-login__hint {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-align: center;
}

/* LinkedIn-knop in LinkedIn-blauw, met de bestaande knop-vorm. */
.btn--linkedin {
    width: 100%;
    background: #0a66c2;
    color: var(--rm-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.btn--linkedin:hover {
    background: #004182;
}

.btn--linkedin svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

/* In een CTA-strook staat de LinkedIn-knop naast de tekst, niet over de volle breedte. */
.cta-strip__actions .btn--linkedin {
    width: auto;
}

/* Aanmeldkaart (zelf-aanmelding met LinkedIn) + afrondstap. */
.account-signup__card,
.account-signup__complete {
    width: 100%;
    max-width: 460px;
}

.account-signup__intro {
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.account-signup__packages {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-signup__package {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rm-border-warm);
    border-radius: 8px;
}

.account-signup__package-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--rm-teal-deep);
}

.account-signup__package-desc {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

/* De aanmeldknop deelt de amber-CTA-vorm, maar vult de kaart net als LinkedIn. */
.account-signup__card .btn--amber,
.account-signup__complete .btn--amber {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.account-signup__card .btn--amber svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

/* Afrondstap: naam/e-mail (alleen-lezen), pakket-vinkjes, toestemming. */
.account-signup__identity {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: var(--rm-white);
    border: 1px solid var(--rm-border-warm);
    border-radius: 8px;
}

.account-signup__identity dt {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--rm-teal-deep);
}

.account-signup__identity dd {
    margin: 0;
    color: var(--color-text);
}

.account-signup__packages-field {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.account-signup__packages-field legend {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rm-teal-deep);
    padding: 0;
    margin-bottom: 0.6rem;
}

.account-signup__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text);
}

.account-signup__checkbox input {
    margin-top: 0.25rem;
}

.account-signup__consent {
    margin: 0.5rem 0 1.5rem;
}

.account-signup__consent .rich-text p {
    margin: 0;
}

.account-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.account-form__field label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rm-teal-deep);
}

.account-form__field input,
.account-form__field textarea {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--rm-border-warm);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--rm-white);
}

.account-form__field textarea {
    min-height: 9rem;
    resize: vertical;
}

.account-form__field input:focus,
.account-form__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 155, 161, 0.16);
}

.account-form__submit {
    width: 100%;
    margin-top: 0.25rem;
}

.account-form__errors {
    background: rgba(212, 137, 10, 0.12);
    border: 1px solid var(--rm-amber);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--rm-amber-dark);
}

.account-form__error {
    color: var(--rm-amber-dark);
    font-size: 0.9rem;
}

/* Account-basispagina: verticaal menu links, content rechts. */
.account-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.account-nav__list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.account-nav__link {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--rm-teal-deep);
    transition: background 0.14s ease, color 0.14s ease;
}

.account-nav__link:hover {
    background: var(--rm-mint);
}

.account-nav__link.is-active {
    background: var(--rm-teal-deep);
    color: var(--rm-white);
}

.account-nav__logout {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rm-border-warm);
}

.account-nav__logout-btn {
    background: none;
    border: none;
    padding: 0.3rem 0.9rem;
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
}

.account-nav__logout-btn:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.account-heading {
    margin-top: 0;
    color: var(--rm-teal-deep);
}

.account-placeholder,
.account-intro,
.account-form__note {
    color: var(--color-text-light);
}

.account-form__note {
    font-size: 0.9rem;
    margin-top: -0.5rem;
}

/* Gegevens die het lid niet zelf wijzigt (e-mailadres): label boven waarde. */
.account-details {
    margin: 0 0 0.75rem;
}

.account-details dt {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rm-teal-deep);
}

.account-details dd {
    margin: 0.15rem 0 0.9rem;
}

@media (max-width: 720px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Account: uitlijning + documentenlijst ---------- */

/* De account-omgeving leest altijd links uitgelijnd: menu-labels en content
   volgen elkaar, ook wanneer de globale uitlijning (Vormgeving) op midden staat. */
.account-page #content {
    text-align: left;
}

/* Menu-label begint op de linkerrand van de kolom; de actieve pil houdt zijn
   binnenruimte door de negatieve marge. */
.account-nav__link,
.account-nav__logout-btn {
    margin-left: -0.9rem;
}

.account-subheading {
    color: var(--rm-teal-deep);
    font-size: calc(1.25rem * var(--h3-scale));
    margin: 2rem 0 0.75rem;
}

.doc-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    border-top: 1px solid var(--rm-border-warm);
}

.doc-list__item {
    border-bottom: 1px solid var(--rm-border-warm);
}

.doc-list__link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.25rem;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.14s ease;
}

.doc-list__link:hover {
    background: var(--rm-mint);
}

/* Type-label: in één oogopslag zien wat voor bestand het is. */
.doc-list__type {
    flex: none;
    min-width: 3.4rem;
    text-align: center;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rm-white);
    background: var(--rm-slate);
}

.doc-list__type--pdf { background: #b3392f; }
.doc-list__type--doc,
.doc-list__type--docx { background: #2b579a; }
.doc-list__type--xls,
.doc-list__type--xlsx,
.doc-list__type--csv { background: #1e7145; }
.doc-list__type--ppt,
.doc-list__type--pptx { background: #c1440e; }
.doc-list__type--zip { background: #6b6357; }
.doc-list__type--png,
.doc-list__type--jpg,
.doc-list__type--jpeg { background: var(--rm-teal); }

.doc-list__title {
    font-weight: 600;
    color: var(--rm-teal-deep);
}

.doc-list__link:hover .doc-list__title {
    text-decoration: underline;
}

.doc-list__meta {
    margin-left: auto;
    flex: none;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

/* ---------- Content-overzicht: tabs per Ledengroep + voorbeeldweergave ---------- */

.content-browser {
    margin: 0 0 1.5rem;
}

.content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--rm-border-warm);
    margin-bottom: 1.25rem;
}

.content-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.55rem 0.9rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-light);
    cursor: pointer;
}

.content-tab:hover {
    color: var(--rm-teal-deep);
}

.content-tab.is-active {
    color: var(--rm-teal-deep);
    border-bottom-color: var(--color-primary);
}

.content-browser__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.content-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rm-border-warm);
}

.content-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--rm-border-warm);
}

.content-row.is-active {
    background: var(--rm-mint);
}

.content-row__open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.25rem;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
}

.content-row__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--rm-teal-deep);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-row__open:hover .content-row__title {
    text-decoration: underline;
}

.content-row__date {
    flex: none;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.content-row__size {
    flex: none;
    min-width: 4.5rem;
    text-align: right;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.content-row__download {
    flex: none;
    margin-right: 0.25rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rm-border-warm);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-primary);
    text-decoration: none;
}

.content-row__download:hover {
    background: var(--rm-mint);
    border-color: var(--color-primary);
}

.content-preview {
    /* Het voorbeeldvenster houdt altijd dezelfde hoogte: het schaalt niet mee
       met het scherm en groeit niet mee met het geopende bestand. */
    --preview-height: 20rem;
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--preview-height) + 2rem);
    padding: 1rem;
    border: 1px solid var(--rm-border-warm);
    border-radius: 8px;
    background: var(--color-bg-alt);
    overflow: hidden;
}

.content-preview__empty,
.content-preview__fallback {
    color: var(--color-text-light);
    text-align: center;
    margin: 0;
}

.content-preview__image {
    max-width: 100%;
    max-height: var(--preview-height);
    object-fit: contain;
}

.content-preview__frame {
    width: 100%;
    height: var(--preview-height);
    border: 0;
    background: var(--rm-white);
}

.content-preview__type {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rm-white);
    background: var(--rm-slate);
}

.content-preview__download {
    margin-top: 1rem;
}

@media (max-width: 720px) {
    .content-browser__body {
        grid-template-columns: 1fr;
    }

    /* Preview boven de lijst op een smal scherm. */
    .content-preview {
        order: -1;
        position: static;
    }

    /* De datumkolom vervalt onder 720 pixels. */
    .content-row__date {
        display: none;
    }
}

/* De inhoud van een blogpost leest altijd links uitgelijnd, ook wanneer de
   globale uitlijning op midden staat. */
.template-blogpost #content {
    text-align: left;
}

/* Een los rich-text-blok is lopende tekst (bijv. de privacyverklaring) en
   leest altijd links, net als een blogpost; kortere blokken houden de
   globale uitlijning via hun eigen Opmaak-paneel. */
.block-rich-text .prose {
    text-align: left;
}

/* Meldingen in de account-omgeving: groen bij gelukt, amber bij een fout. */
.account-messages {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.account-message {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--rm-border-warm);
    background: var(--color-bg);
}

.account-message--success {
    border-color: var(--rm-teal);
    background: var(--rm-mint);
}

.account-message--error {
    border-color: var(--rm-amber);
    background: rgba(212, 137, 10, 0.12);
    color: var(--rm-amber-dark);
}

/* ==========================================================================
   Blog-figuren (.bf-*)
   Visualisaties uit de oude WP-posts die nog geen eigen blok hebben: het
   knop-diagram, de telefoonschermen van de brandmonitor, de callout en het
   codefragment. De markup staat in een "Eigen HTML"-blok (blocks.HtmlBlock);
   deze regels geven het de huisstijl. Hergebruik: kopieer de markup uit een
   bestaande post en pas de teksten aan.
   ========================================================================== */

.bf-figure {
    margin: 0;
    border: 1px solid var(--rm-border-warm);
    border-radius: 20px;
    background: var(--rm-white);
    padding: clamp(16px, 3vw, 26px);
}

.bf-figure__cap {
    font-size: 0.9rem;
    color: var(--rm-slate);
    text-align: center;
    margin: 0.75rem 0 0;
}

/* ---------- Knop-diagram: een ingreep, twee uitkomsten ---------- */
.bf-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bf-knob__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 30px;
    border-radius: 16px;
    background: linear-gradient(180deg, #147e84, var(--rm-teal-deep) 95%);
    color: var(--rm-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(0.9rem, 0.5vw + 0.8rem, 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow:
        0 7px 0 var(--rm-teal-darkest),
        0 16px 26px -10px rgba(13, 61, 64, 0.55),
        inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.bf-knob__hint {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--rm-slate);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0.55rem 0 0.25rem;
}

.bf-knob__branch {
    width: 100%;
    max-width: 520px;
    height: 30px;
}

.bf-knob__branch svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bf-outcomes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 520px;
}

.bf-outcome {
    border-radius: 14px;
    padding: 14px 16px 16px;
    color: var(--rm-white);
}

.bf-outcome--bedrijf { background: linear-gradient(160deg, var(--rm-amber), var(--rm-amber-dark)); }
.bf-outcome--klant { background: linear-gradient(160deg, var(--rm-teal), var(--rm-teal-dark)); }

.bf-outcome h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 0.45rem;
    color: var(--rm-white);
}

.bf-outcome ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bf-outcome li {
    font-size: 0.9rem;
    line-height: 1.35;
    padding-left: 1.3rem;
    position: relative;
    color: #f4faf9;
}

.bf-outcome li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 520px) {
    .bf-outcomes { grid-template-columns: 1fr; }
    .bf-knob__branch { display: none; }
}

/* ---------- Twee schermafbeeldingen naast elkaar ---------- */
.bf-shots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bf-shots img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--rm-border-warm);
    display: block;
    background: var(--rm-white);
}

@media (max-width: 560px) {
    .bf-shots { grid-template-columns: 1fr; }
}

/* ---------- Callout: les of waarschuwing in mint ---------- */
.bf-callout {
    background: var(--rm-mint);
    border-left: 5px solid var(--rm-teal);
    border-radius: 0 12px 12px 0;
    padding: 22px 26px;
}

.bf-callout p { margin: 0; }
.bf-callout b { color: var(--rm-teal-deep); }

/* ---------- Telefoonschermen (app-mockup) ---------- */
.bf-phones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 26px 20px;
}

.bf-phone { margin: 0; }

.bf-phone figcaption {
    margin-top: 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--rm-slate);
}

.bf-phone figcaption b {
    color: var(--rm-teal-deep);
    font-family: var(--font-heading);
    display: block;
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.bf-device {
    background: #05191b;
    border-radius: 26px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(13, 61, 64, 0.18);
}

.bf-screen {
    background: #10161a;
    border-radius: 19px;
    overflow: hidden;
    color: #e8edf0;
    font-size: 11px;
    line-height: 1.4;
}

.bf-phdr {
    background: #7a4a12;
    padding: 8px 11px;
    border-bottom: 2px solid #f2a93b;
}

.bf-phdr__mono {
    font-family: ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: #f2a93b;
}

.bf-phdr__lvl {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 12.5px;
    color: var(--rm-white);
    margin-top: 2px;
}

.bf-pbody { padding: 10px 11px 12px; min-height: 270px; }

.bf-pill {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    padding: 6px 8px;
    font-family: ui-monospace, monospace;
    font-size: 9px;
    line-height: 1.4;
    margin-bottom: 9px;
}

.bf-pill b { color: var(--rm-white); }
.bf-pill--warn { background: #2a2112; border-color: #5a4a1e; color: #f2c98b; }
.bf-pill--warn b { color: #f2c98b; }
.bf-muted { opacity: 0.7; }

.bf-nood {
    display: block;
    background: #d9362b;
    color: var(--rm-white);
    text-align: center;
    border-radius: 8px;
    padding: 9px;
    font-weight: 800;
    font-size: 11px;
    margin-bottom: 10px;
}

.bf-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }

.bf-tile {
    background: #141c22;
    border: 1px solid #22303a;
    border-radius: 8px;
    padding: 8px 6px;
}

.bf-tile__big { font-weight: 800; font-size: 14px; color: #f2e9dc; line-height: 1.1; }

.bf-tile__lab {
    font-family: ui-monospace, monospace;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5c7180;
    margin-top: 3px;
}

.bf-sechead {
    font-family: ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #8fa3ae;
    text-transform: uppercase;
    margin: 2px 0 7px;
}

.bf-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.bf-chip {
    background: #2a1a16;
    border: 1px solid #5a342c;
    color: #ff9b82;
    border-radius: 5px;
    padding: 3px 6px;
    font-family: ui-monospace, monospace;
    font-size: 8px;
}

.bf-ncard {
    background: #141c22;
    border: 1px solid #22303a;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 7px;
}

.bf-ncard__t { color: #e8edf0; font-weight: 600; font-size: 10.5px; margin-bottom: 3px; }
.bf-ncard__src { color: #6fb7d9; font-family: ui-monospace, monospace; font-size: 8.5px; }

.bf-check { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 10.5px; color: #c9d6dd; }

.bf-box {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1.5px solid #3d4e58;
    flex: 0 0 auto;
    position: relative;
}

.bf-box--on { background: var(--rm-teal); border-color: var(--rm-teal); }

.bf-box--on::after {
    content: "\2713";
    color: var(--rm-white);
    font-size: 9px;
    position: absolute;
    top: -2px;
    left: 1px;
}

.bf-inst {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #22303a;
    font-size: 10px;
    color: #c9d6dd;
}

.bf-inst b { color: #f2e9dc; }

.bf-ptabs { display: flex; background: #0a1013; border-top: 1px solid #22303a; }

.bf-ptabs span {
    flex: 1;
    text-align: center;
    padding: 8px 2px;
    font-size: 8px;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.5px;
    color: #5c7180;
}

.bf-ptabs span.is-on { background: #f2e9dc; color: #0b1014; font-weight: 700; }

.bf-kompas { display: block; margin: 2px auto 6px; width: 100%; max-width: 150px; }

.bf-note { font-size: 10.5px; color: #c9d6dd; line-height: 1.5; margin-bottom: 9px; }
.bf-note b { color: #f2e9dc; }

/* ---------- Codefragment in een uitklapper ---------- */
.bf-code {
    background: var(--rm-teal-deep);
    border-radius: 12px;
    overflow: hidden;
    color: var(--rm-off-white);
}

.bf-code summary {
    cursor: pointer;
    padding: 16px 22px;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--rm-amber-bright);
    list-style: none;
}

.bf-code summary::-webkit-details-marker { display: none; }
.bf-code summary::before { content: "+ "; color: var(--rm-slate-light); }
.bf-code[open] summary::before { content: "\2013 "; }

.bf-code pre {
    background: #0a2b2d;
    border: 1px solid #1c4a4d;
    border-radius: 8px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0 22px 22px;
}

.bf-code code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: #d6e4e4;
}

/* ---------------------------------------------------------------------------
   Codeblok in een blogpost (.rm-code)
   Gegenereerd door de Markdown-publicatieroute: een codefence in het .md wordt
   een blok "Eigen HTML" met alleen de kale opbouw. Opmaak en kopieerknop staan
   hier en in static/js/code.js, zodat een stijlwijziging niet betekent dat elke
   post opnieuw gepubliceerd moet worden. Zie blog/markdown_content.py.
   --------------------------------------------------------------------------- */
.rm-code {
    position: relative;
    margin: 28px 0;
}

.rm-code pre {
    background: var(--rm-teal-darkest);
    border: 1px solid #1c4a4d;
    border-radius: 8px;
    padding: 18px 20px;
    overflow-x: auto;
    margin: 0;
}

.rm-code code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #d6e4e4;
    white-space: pre;
}

.rm-code-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--rm-teal-light);
    background: rgba(13, 61, 64, 0.85);
    border: 1px solid #1c4a4d;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.rm-code:hover .rm-code-copy,
.rm-code-copy:focus-visible {
    opacity: 1;
}

.rm-code-copy:hover {
    color: var(--rm-amber-bright);
}

/* Op aanraakschermen is er geen hover: knop altijd tonen. */
@media (hover: none) {
    .rm-code-copy { opacity: 1; }
}