.elementor-206 .elementor-element.elementor-element-ab46821{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-206 .elementor-element.elementor-element-ab46821:not(.elementor-motion-effects-element-type-background), .elementor-206 .elementor-element.elementor-element-ab46821 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://levels.be/wp-content/uploads/2026/08/LEVELS-WEB-8773.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-206 .elementor-element.elementor-element-ab46821::before, .elementor-206 .elementor-element.elementor-element-ab46821 > .elementor-background-video-container::before, .elementor-206 .elementor-element.elementor-element-ab46821 > .e-con-inner > .elementor-background-video-container::before, .elementor-206 .elementor-element.elementor-element-ab46821 > .elementor-background-slideshow::before, .elementor-206 .elementor-element.elementor-element-ab46821 > .e-con-inner > .elementor-background-slideshow::before, .elementor-206 .elementor-element.elementor-element-ab46821 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-206 .elementor-element.elementor-element-2723324{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-206 .elementor-element.elementor-element-83089e8 .elementor-heading-title{font-family:"termina", Sans-serif;font-size:60px;font-weight:600;text-transform:uppercase;color:var( --e-global-color-4af0f2b );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-206 .elementor-element.elementor-element-8c91f9b{font-family:"epilogue", Sans-serif;font-size:20px;font-weight:300;color:#FFFFFF;}.elementor-206 .elementor-element.elementor-element-9320a41{--display:flex;--min-height:80vh;--justify-content:flex-start;--padding-top:150px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-206 .elementor-element.elementor-element-9320a41:not(.elementor-motion-effects-element-type-background), .elementor-206 .elementor-element.elementor-element-9320a41 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-9e698b4 );}.elementor-206 .elementor-element.elementor-element-9320a41.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-206 .elementor-element.elementor-element-2723324{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-206 .elementor-element.elementor-element-83089e8 .elementor-heading-title{font-size:35px;}.elementor-206 .elementor-element.elementor-element-8c91f9b{font-size:18px;}.elementor-206 .elementor-element.elementor-element-b24d082{padding:0px 20px 0px 20px;}}@media(min-width:768px){.elementor-206 .elementor-element.elementor-element-2723324{--width:66%;}.elementor-206 .elementor-element.elementor-element-9320a41{--width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-b24d082 *//*
====================================================================
LEVELS INTAKE — FRONTEND CSS
Version 1.4

HOE GEBRUIKEN?
--------------------------------------------------------------------
In 95% van de gevallen hoef je ALLEEN SECTIE 01 hieronder aan te passen.
Alle kleuren, fonts, afmetingen, spacing, kaarten, velden en buttons
zijn daar als CSS-variabelen verzameld.

De plugin laadt GEEN fonts.
Zorg dat Termina en Epilogue via Elementor / je theme geladen zijn.

SHORTCODE
[levels_intake]

BELANGRIJK
--------------------------------------------------------------------
Deze CSS is volledig beperkt tot .levels-intake en beïnvloedt dus
de rest van de website niet.
====================================================================
*/


/* =================================================================
   01. EASY SETTINGS — PAS HIER DE FRONTEND AAN
   ================================================================= */

.levels-intake {

    /* -------------------------------------------------------------
       01A. KLEUREN
       ------------------------------------------------------------- */

    --li-color-primary: #291D18;         /* Umber / hoofdtekst / button */
    --li-color-accent: #ED6C49;          /* Carrot / actieve keuze / hover */
    --li-color-accent-soft: rgba(237, 108, 73, 0.055);
    --li-color-blue: #C6E4EE;            /* Focus accent */
    --li-color-stone: #BEB8AE;
    --li-color-marble: #E5E1DD;
    --li-color-white: #FFFFFF;

    --li-color-text: #291D18;
    --li-color-text-soft: rgba(41, 29, 24, 0.72);
    --li-color-text-muted: rgba(41, 29, 24, 0.56);
    --li-color-text-placeholder: rgba(41, 29, 24, 0.34);

    --li-color-border: rgba(41, 29, 24, 0.16);
    --li-color-border-hover: rgba(41, 29, 24, 0.42);
    --li-color-line: #E5E1DD;

    --li-color-error-bg: rgba(237, 108, 73, 0.055);


    /* -------------------------------------------------------------
       01B. TYPOGRAFIE
       ------------------------------------------------------------- */

    --li-font-heading: "Termina", sans-serif;
    --li-font-body: "Epilogue", sans-serif;

    /* Grote intro titel */
    --li-intro-title-size: clamp(42px, 7vw, 54px);
    --li-intro-title-weight: 600;
    --li-intro-title-line-height: 0.96;
    --li-intro-title-letter-spacing: -0.035em;
    --li-intro-title-uppercase: uppercase;

    /* Titel per stap */
    --li-step-title-size: clamp(30px, 4.7vw, 54px);
    --li-step-title-weight: 600;
    --li-step-title-line-height: 1.02;
    --li-step-title-letter-spacing: -0.025em;
    --li-step-title-uppercase: uppercase;

    /* Intro / gewone tekst */
    --li-body-size: 17px;
    --li-body-line-height: 1.60;
    --li-lead-size: clamp(16px, 1.7vw, 20px);
    --li-lead-line-height: 1.65;

    /* Kleine labels */
    --li-label-size: 11px;
    --li-label-weight: 600;
    --li-label-letter-spacing: 0.18em;
    --li-label-uppercase: uppercase;

    /* Keuzekaarten */
    --li-choice-font-size: 16px;
    --li-choice-line-height: 1.35;

    /* Formuliervelden */
    --li-input-font-size: 17px;


    /* -------------------------------------------------------------
       01C. ALGEMENE BREEDTE & LAYOUT
       ------------------------------------------------------------- */

    --li-max-width: 1350px;
    --li-content-padding-left: 0px;
    --li-content-padding-right: 0px;

    /* Intro & success */
    --li-intro-padding-top: clamp(42px, 7vw, 96px);
    --li-intro-padding-bottom: clamp(42px, 7vw, 96px);

    /* Formulier */
    --li-form-padding-top: clamp(34px, 5vw, 64px);
    --li-form-padding-bottom: clamp(52px, 7vw, 96px);

    /* Algemene radius */
    --li-radius: 0px;

    /* Animatie */
    --li-transition-speed: 240ms;
    --li-transition-easing: ease;
    --li-step-animation-duration: 380ms;


    /* -------------------------------------------------------------
       01D. INTRO
       ------------------------------------------------------------- */

    --li-intro-title-max-width: 900px;
    --li-intro-title-margin-top: 26px;

    --li-lead-max-width: 670px;
    --li-lead-margin-top: 30px;


    /* -------------------------------------------------------------
       01E. PROGRESSBAR
       ------------------------------------------------------------- */

    --li-progress-gap: 22px;
    --li-progress-margin-bottom: clamp(42px, 7vw, 72px);
    --li-progress-height: 1px;
    --li-progress-bg: var(--li-color-marble);
    --li-progress-active: var(--li-color-accent);


    /* -------------------------------------------------------------
       01F. STAPTITELS
       ------------------------------------------------------------- */

    --li-step-title-max-width: 820px;
    --li-step-title-margin-top: 18px;
    --li-step-intro-margin-top: 16px;


    /* -------------------------------------------------------------
       01G. KEUZEKAARTEN
       ------------------------------------------------------------- */

    --li-choice-columns: 2;
    --li-choice-gap: 12px;
    --li-choice-margin-top: 34px;

    --li-choice-min-height: 70px;
    --li-choice-padding-top: 18px;
    --li-choice-padding-right: 52px;
    --li-choice-padding-bottom: 18px;
    --li-choice-padding-left: 20px;

    --li-choice-border-width: 1px;
    --li-choice-border-color: var(--li-color-border);
    --li-choice-border-hover: var(--li-color-border-hover);
    --li-choice-radius: var(--li-radius);

    --li-choice-bg: transparent;
    --li-choice-bg-selected: var(--li-color-accent-soft);
    --li-choice-border-selected: var(--li-color-accent);

    --li-choice-dot-size: 8px;
    --li-choice-dot-right: 20px;
    --li-choice-dot-default: rgba(41, 29, 24, 0.16);
    --li-choice-dot-selected: var(--li-color-accent);


    /* -------------------------------------------------------------
       01H. INPUTS / SELECTS / TEXTAREA
       ------------------------------------------------------------- */

    --li-fields-columns: 2;
    --li-fields-column-gap: 38px;
    --li-fields-row-gap: 32px;
    --li-fields-margin-top: 36px;

    --li-input-margin-top: 10px;
    --li-input-padding-y: 12px;
    --li-input-border-width: 1px;
    --li-input-border-color: var(--li-color-border);
    --li-input-border-focus: var(--li-color-accent);

    --li-textarea-min-height: 130px;
    --li-textarea-padding: 18px;
    --li-textarea-radius: var(--li-radius);

    --li-textarea-block-margin-top: 38px;


    /* -------------------------------------------------------------
       01I. BUTTONS
       ------------------------------------------------------------- */

    --li-button-height: 52px;
    --li-button-padding-y: 15px;
    --li-button-padding-x: 22px;
    --li-button-gap: 14px;
    --li-button-radius: var(--li-radius);

    --li-button-bg: var(--li-color-primary);
    --li-button-color: var(--li-color-white);
    --li-button-border: var(--li-color-primary);

    --li-button-hover-bg: var(--li-color-accent);
    --li-button-hover-color: var(--li-color-white);
    --li-button-hover-border: var(--li-color-accent);

    --li-intro-button-margin-top: 38px;


    /* -------------------------------------------------------------
       01J. NAVIGATIE ONDERAAN FORMULIER
       ------------------------------------------------------------- */

    --li-nav-margin-top: 48px;
    --li-nav-padding-top: 28px;
    --li-nav-gap: 20px;
    --li-nav-border-color: var(--li-color-line);


    /* -------------------------------------------------------------
       01K. PRIVACY / ERROR / SUCCESS
       ------------------------------------------------------------- */

    --li-consent-margin-top: 34px;
    --li-consent-font-size: 13px;

    --li-error-margin-top: 24px;
    --li-error-padding-y: 12px;
    --li-error-padding-x: 14px;

    --li-success-next-margin-top: 36px;


    /* -------------------------------------------------------------
       01L. MOBILE SETTINGS
       ------------------------------------------------------------- */

    --li-mobile-breakpoint-note: 767px;

    --li-mobile-intro-padding-top: 34px;
    --li-mobile-intro-padding-bottom: 56px;

    --li-mobile-intro-title-size: clamp(38px, 12vw, 58px);
    --li-mobile-step-title-size: clamp(29px, 9vw, 42px);

    --li-mobile-choice-min-height: 62px;
    --li-mobile-choice-font-size: 15px;
    --li-mobile-choice-padding-y: 15px;
    --li-mobile-choice-padding-x: 16px;

    --li-mobile-form-padding-top: 30px;
    --li-mobile-progress-margin-bottom: 40px;
    --li-mobile-nav-margin-top: 36px;


    /* -------------------------------------------------------------
       BASIS
       ------------------------------------------------------------- */

    width: 100%;
    max-width: var(--li-max-width);
    margin: 0 auto;
    padding-left: var(--li-content-padding-left);
    padding-right: var(--li-content-padding-right);
    color: var(--li-color-text);
    font-family: var(--li-font-body);
}


/* =================================================================
   02. RESET & BASIS
   ================================================================= */

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

.levels-intake [hidden] {
    display: none !important;
}

.levels-intake button,
.levels-intake input,
.levels-intake select,
.levels-intake textarea {
    font-family: var(--li-font-body);
}


/* =================================================================
   03. INTRO & SUCCESS
   ================================================================= */

.levels-intake__intro,
.levels-intake__success {
    padding-top: var(--li-intro-padding-top);
    padding-bottom: var(--li-intro-padding-bottom);
}

.levels-intake__eyebrow,
.levels-intake__step-kicker,
.levels-intake__progress-label,
.levels-intake__field-label,
.levels-intake__back,
.levels-intake__primary {
    font-family: var(--li-font-body);
    font-size: var(--li-label-size);
    font-weight: var(--li-label-weight);
    line-height: 1.2;
    letter-spacing: var(--li-label-letter-spacing);
    text-transform: var(--li-label-uppercase);
}

.levels-intake__eyebrow,
.levels-intake__step-kicker,
.levels-intake__progress-label {
    color: var(--li-color-text-muted);
}

.levels-intake__title,
.levels-intake__step-title {
    margin: 0;
    color: var(--li-color-text);
    font-family: var(--li-font-heading);
}

.levels-intake__title {
    max-width: var(--li-intro-title-max-width);
    margin-top: var(--li-intro-title-margin-top);
    font-size: var(--li-intro-title-size);
    font-weight: var(--li-intro-title-weight);
    line-height: var(--li-intro-title-line-height);
    letter-spacing: var(--li-intro-title-letter-spacing);
    text-transform: var(--li-intro-title-uppercase);
}

.levels-intake__lead {
    max-width: var(--li-lead-max-width);
    margin: var(--li-lead-margin-top) 0 0;
    color: var(--li-color-text-soft);
    font-size: var(--li-lead-size);
    line-height: var(--li-lead-line-height);
}


/* =================================================================
   04. FORMULIER & PROGRESSBAR
   ================================================================= */

.levels-intake__form {
    padding-top: var(--li-form-padding-top);
    padding-bottom: var(--li-form-padding-bottom);
}

.levels-intake__progress {
    display: flex;
    align-items: center;
    gap: var(--li-progress-gap);
    margin-bottom: var(--li-progress-margin-bottom);
}

.levels-intake__progress-track {
    flex: 1;
    height: var(--li-progress-height);
    overflow: hidden;
    background: var(--li-progress-bg);
}

.levels-intake__progress-bar {
    display: block;
    width: 16.66%;
    height: 100%;
    background: var(--li-progress-active);
    transition: width 500ms cubic-bezier(.2, .7, .2, 1);
}


/* =================================================================
   05. STAPPEN & ANIMATIES
   ================================================================= */

.levels-intake__step {
    animation: levelsIntakeFadeUp var(--li-step-animation-duration) ease both;
}

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

.levels-intake__step-title {
    max-width: var(--li-step-title-max-width);
    margin-top: var(--li-step-title-margin-top);
    font-size: var(--li-step-title-size);
    font-weight: var(--li-step-title-weight);
    line-height: var(--li-step-title-line-height);
    letter-spacing: var(--li-step-title-letter-spacing);
    text-transform: var(--li-step-title-uppercase);
}

.levels-intake__step-intro {
    margin: var(--li-step-intro-margin-top) 0 0;
    color: var(--li-color-text-muted);
    font-size: var(--li-body-size);
    line-height: var(--li-body-line-height);
}


/* =================================================================
   06. KEUZEKAARTEN
   ================================================================= */

.levels-intake__choices {
    display: grid;
    gap: var(--li-choice-gap);
    margin-top: var(--li-choice-margin-top);
}

.levels-intake__choices--grid {
    grid-template-columns: repeat(var(--li-choice-columns), minmax(0, 1fr));
}

.levels-intake__choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.levels-intake__choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.levels-intake__choice > span {
    display: flex;
    min-height: var(--li-choice-min-height);
    align-items: center;
    padding:
        var(--li-choice-padding-top)
        var(--li-choice-padding-right)
        var(--li-choice-padding-bottom)
        var(--li-choice-padding-left);
    border: var(--li-choice-border-width) solid var(--li-choice-border-color);
    border-radius: var(--li-choice-radius);
    background: var(--li-choice-bg);
    color: var(--li-color-text-soft);
    font-size: var(--li-choice-font-size);
    line-height: var(--li-choice-line-height);
    transition:
        border-color var(--li-transition-speed) var(--li-transition-easing),
        background var(--li-transition-speed) var(--li-transition-easing),
        color var(--li-transition-speed) var(--li-transition-easing),
        transform var(--li-transition-speed) var(--li-transition-easing);
}

.levels-intake__choice > i {
    position: absolute;
    top: 50%;
    right: var(--li-choice-dot-right);
    width: var(--li-choice-dot-size);
    height: var(--li-choice-dot-size);
    border-radius: 50%;
    background: var(--li-choice-dot-default);
    transform: translateY(-50%);
    transition:
        background var(--li-transition-speed) var(--li-transition-easing),
        transform var(--li-transition-speed) var(--li-transition-easing);
}

.levels-intake__choice:hover > span {
    border-color: var(--li-choice-border-hover);
    color: var(--li-color-text);
}

.levels-intake__choice input:focus-visible + span {
    outline: 2px solid var(--li-color-blue);
    outline-offset: 2px;
}

.levels-intake__choice input:checked + span {
    border-color: var(--li-choice-border-selected);
    background: var(--li-choice-bg-selected);
    color: var(--li-color-text);
}

.levels-intake__choice input:checked ~ i {
    background: var(--li-choice-dot-selected);
    transform: translateY(-50%) scale(1.15);
}


/* Advies-keuze */

.levels-intake__choice--advice {
    grid-column: 1 / -1;
}

.levels-intake__choice--advice > span {
    display: block;
}

.levels-intake__choice--advice strong {
    display: block;
    font-weight: 600;
}

.levels-intake__choice--advice small {
    display: block;
    margin-top: 5px;
    color: var(--li-color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* Inline ja/nee keuzes */

.levels-intake__choices--inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
}


/* =================================================================
   07. CONDITIONELE VELDEN
   ================================================================= */

.levels-intake__conditional {
    max-width: 520px;
    margin-top: 28px;
}

.levels-intake__conditional.levels-intake__field--textarea {
    margin-top: 18px;
}


/* =================================================================
   08. VELDEN
   ================================================================= */

.levels-intake__fields-grid {
    display: grid;
    grid-template-columns: repeat(var(--li-fields-columns), minmax(0, 1fr));
    column-gap: var(--li-fields-column-gap);
    row-gap: var(--li-fields-row-gap);
    margin-top: var(--li-fields-margin-top);
}

.levels-intake__field {
    display: block;
}

.levels-intake__field--full {
    grid-column: 1 / -1;
}

.levels-intake__field--textarea {
    margin-top: var(--li-textarea-block-margin-top);
}

.levels-intake__field-label {
    display: block;
    color: var(--li-color-text-muted);
}

.levels-intake__field-label em {
    font-style: normal;
    opacity: 0.65;
}


/* Input / Select / Textarea */

.levels-intake__input,
.levels-intake__select,
.levels-intake__textarea {
    width: 100%;
    margin-top: var(--li-input-margin-top);
    border: 0;
    border-bottom: var(--li-input-border-width) solid var(--li-input-border-color);
    border-radius: 0;
    padding: var(--li-input-padding-y) 0;
    background: transparent;
    box-shadow: none;
    color: var(--li-color-text);
    font-family: var(--li-font-body);
    font-size: var(--li-input-font-size);
    line-height: 1.5;
    outline: none;
    transition: border-color var(--li-transition-speed) var(--li-transition-easing);
}

.levels-intake__textarea {
    min-height: var(--li-textarea-min-height);
    border: var(--li-input-border-width) solid var(--li-input-border-color);
    border-radius: var(--li-textarea-radius);
    padding: var(--li-textarea-padding);
    resize: vertical;
}

.levels-intake__input:focus,
.levels-intake__select:focus,
.levels-intake__textarea:focus {
    border-color: var(--li-input-border-focus);
}

.levels-intake__input::placeholder,
.levels-intake__textarea::placeholder {
    color: var(--li-color-text-placeholder);
}


/* =================================================================
   09. PRIVACY
   ================================================================= */

.levels-intake__consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: var(--li-consent-margin-top);
    color: var(--li-color-text-soft);
    font-size: var(--li-consent-font-size);
    line-height: 1.5;
    cursor: pointer;
}

.levels-intake__consent input {
    margin-top: 3px;
    accent-color: var(--li-color-accent);
}


/* =================================================================
   10. NAVIGATIE & BUTTONS
   ================================================================= */

.levels-intake__nav {
    display: flex;
    align-items: center;
    gap: var(--li-nav-gap);
    margin-top: var(--li-nav-margin-top);
    padding-top: var(--li-nav-padding-top);
    border-top: 1px solid var(--li-nav-border-color);
}

.levels-intake__back {
    border: 0;
    padding: 12px 0;
    background: transparent;
    color: var(--li-color-text-muted);
    cursor: pointer;
    transition: color var(--li-transition-speed) var(--li-transition-easing);
}

.levels-intake__back:hover {
    color: var(--li-color-text);
}

.levels-intake__next,
.levels-intake__submit {
    margin-left: auto;
}

.levels-intake__primary {
    display: inline-flex;
    min-height: var(--li-button-height);
    align-items: center;
    justify-content: center;
    gap: var(--li-button-gap);
    margin-top: var(--li-intro-button-margin-top);
    border: 1px solid var(--li-button-border);
    border-radius: var(--li-button-radius);
    padding: var(--li-button-padding-y) var(--li-button-padding-x);
    background: var(--li-button-bg);
    color: var(--li-button-color);
    cursor: pointer;
    transition:
        background var(--li-transition-speed) var(--li-transition-easing),
        color var(--li-transition-speed) var(--li-transition-easing),
        border-color var(--li-transition-speed) var(--li-transition-easing),
        transform var(--li-transition-speed) var(--li-transition-easing);
}

.levels-intake__nav .levels-intake__primary {
    margin-top: 0;
}

.levels-intake__primary:hover {
    border-color: var(--li-button-hover-border);
    background: var(--li-button-hover-bg);
    color: var(--li-button-hover-color);
}

.levels-intake__primary:active {
    transform: translateY(1px);
}

.levels-intake__primary:disabled {
    opacity: 0.55;
    cursor: wait;
}


/* =================================================================
   11. ERROR
   ================================================================= */

.levels-intake__error {
    margin-top: var(--li-error-margin-top);
    border-left: 2px solid var(--li-color-accent);
    padding: var(--li-error-padding-y) var(--li-error-padding-x);
    background: var(--li-color-error-bg);
    color: var(--li-color-text);
    font-size: 14px;
    line-height: 1.5;
}


/* =================================================================
   12. SUCCESS
   ================================================================= */

.levels-intake__success-next {
    margin-top: var(--li-success-next-margin-top);
    color: var(--li-color-text-muted);
    font-family: var(--li-font-body);
    font-size: var(--li-label-size);
    font-weight: var(--li-label-weight);
    letter-spacing: var(--li-label-letter-spacing);
    text-transform: var(--li-label-uppercase);
}


/* =================================================================
   13. TABLET
   ================================================================= */

@media (max-width: 1024px) {

    .levels-intake {
        --li-max-width: 880px;
    }
}


/* =================================================================
   14. MOBILE
   ================================================================= */

@media (max-width: 767px) {

    .levels-intake {
        --li-max-width: 100%;
        --li-content-padding-left: 0px;
        --li-content-padding-right: 0px;
    }

    .levels-intake__intro,
    .levels-intake__success {
        padding-top: var(--li-mobile-intro-padding-top);
        padding-bottom: var(--li-mobile-intro-padding-bottom);
    }

    .levels-intake__title {
        margin-top: 20px;
        font-size: var(--li-mobile-intro-title-size);
    }

    .levels-intake__lead {
        margin-top: 22px;
        font-size: 16px;
    }

    .levels-intake__form {
        padding-top: var(--li-mobile-form-padding-top);
    }

    .levels-intake__progress {
        gap: 14px;
        margin-bottom: var(--li-mobile-progress-margin-bottom);
    }

    .levels-intake__step-title {
        font-size: var(--li-mobile-step-title-size);
    }

    .levels-intake__choices--grid,
    .levels-intake__choices--inline,
    .levels-intake__fields-grid {
        grid-template-columns: 1fr;
    }

    .levels-intake__choice--advice {
        grid-column: auto;
    }

    .levels-intake__choice > span {
        min-height: var(--li-mobile-choice-min-height);
        padding:
            var(--li-mobile-choice-padding-y)
            45px
            var(--li-mobile-choice-padding-y)
            var(--li-mobile-choice-padding-x);
        font-size: var(--li-mobile-choice-font-size);
    }

    .levels-intake__nav {
        margin-top: var(--li-mobile-nav-margin-top);
    }

    .levels-intake__primary {
        width: 100%;
    }

    .levels-intake__nav .levels-intake__primary {
        width: auto;
        max-width: 72%;
    }
}


/* =================================================================
   15. ZEER KLEINE SCHERMEN
   ================================================================= */

@media (max-width: 480px) {

    .levels-intake__nav {
        flex-wrap: wrap;
    }

    .levels-intake__nav .levels-intake__primary {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    .levels-intake__back {
        width: 100%;
        text-align: left;
    }
}

/* ==========================================================
   LEVELS INTAKE — COMPACTERE WIZARD
   ========================================================== */

.levels-intake {

    /* Algemene breedte iets compacter */
    --li-max-width: 1350px;

    /* Titels */
    --li-step-title-size: clamp(26px, 3vw, 40px);
    --li-step-title-line-height: 1.02;

    /* Minder ruimte boven keuzes */
    --li-choice-margin-top: 24px;

    /* Compactere keuzeblokken */
    --li-choice-min-height: 58px;
    --li-choice-padding-top: 13px;
    --li-choice-padding-bottom: 13px;
    --li-choice-padding-left: 18px;
    --li-choice-padding-right: 46px;

    /* Iets kleinere tekst in de keuzes */
    --li-choice-font-size: 15px;

    /* Minder witruimte rond progressbar */
    --li-progress-margin-bottom: 32px;

    /* Minder ruimte in het formulier */
    --li-form-padding-top: 22px;
    --li-form-padding-bottom: 40px;

    /* Minder ruimte tussen velden */
    --li-fields-row-gap: 22px;
    --li-fields-margin-top: 26px;

    /* Navigatie dichter bij content */
    --li-nav-margin-top: 30px;
    --li-nav-padding-top: 20px;

    /* Buttons iets compacter */
    --li-button-height: 48px;
    --li-button-padding-y: 13px;
    --li-button-padding-x: 20px;
}


/* =================================================================
   16. VOORBEELDEN — UITGECOMMENTARIEERD
   =================================================================

   Wil je afgeronde keuzes?
   ------------------------
   .levels-intake {
       --li-choice-radius: 12px;
       --li-button-radius: 999px;
       --li-textarea-radius: 12px;
   }


   Wil je de keuzekaarten volledig oranje wanneer geselecteerd?
   -------------------------------------------------------------
   .levels-intake__choice input:checked + span {
       background: var(--li-color-accent);
       border-color: var(--li-color-accent);
       color: var(--li-color-white);
   }


   Wil je 1 kolom op desktop?
   --------------------------
   .levels-intake {
       --li-choice-columns: 1;
       --li-fields-columns: 1;
       --li-max-width: 760px;
   }


   Wil je compactere keuzes?
   -------------------------
   .levels-intake {
       --li-choice-min-height: 58px;
       --li-choice-padding-top: 13px;
       --li-choice-padding-bottom: 13px;
       --li-choice-margin-top: 24px;
   }


   Wil je een bredere intake?
   --------------------------
   .levels-intake {
       --li-max-width: 1180px;
   }


   Wil je geen uppercase titels?
   -----------------------------
   .levels-intake {
       --li-intro-title-uppercase: none;
       --li-step-title-uppercase: none;
   }

   ================================================================= *//* End custom CSS */