:root{
    /* Thema */
    --wv-kleur-primair:           #f3c95f;
    --wv-kleur-primair-hover:     #19080a;
    --wv-kleur-secundair:         #1e2330;
    --wv-kleur-tekst:             #f5f5fb;
    --wv-kleur-muted:             #a8b0bd;
    --wv-kleur-achtergrond-kaart: #171b23;
    --wv-knop-radius:             10px;
    --wv-knop-padding:            10px 16px;

    /* Basis tokens */
    --bg: #05060a;
    --fg: #f5f5fb;
    --muted: #a8b0bd;
    --card: #171b23;
    --line: #262d39;

    --accent-red: #f3c95f;
    --accent-red-dark: #19080a;
    --accent-gold: #f3c95f;
    --accent-gold-soft: #f3e3a2;
    --focus: #f3c95f;

    --rad: 12px;
    --pad: 16px;
    --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-size-base: 14px;
    --heading-scale: 1;
    --surface-dark-top: #20242d;
    --surface-dark-bottom: #12151e;
    --surface-dark-text: #f7f1e6;
    --surface-dark-muted: #d4ccbd;
    --surface-light-top: #ffffff;
    --surface-light-bottom: #f6f1eb;
    --surface-light-text: #2b1a12;
    --surface-light-muted: #6f5f55;
    --pearl-highlight: #ffffff;
    --section-radius: 16px;
    --card-radius: 14px;
    --section-opacity: 0.98;
    --background-mode: gradient;

    --knop-tekst-goud: #ffd766;
    --footer-bg: #101118;

    /* Nav eindkleuren */
    --nav-bg-eind: #19080a;
    --nav-bg-eind-hover: #21090c;

    /* Knoppen defaults (zwart → goud) */
    --knop-bg:        #000000;
    --knop-fg:        var(--knop-tekst-goud, #ffd766);
    --knop-bg-hover:  var(--accent-gold);
    --knop-fg-hover:  #000000;
    --knop-border:    #d4af37;
    --knop-padding:   var(--wv-knop-padding);
    --knop-radius:    var(--wv-knop-radius);
    --knop-font:      14px;
    --knop-weight:    600;
    --knop-transform: none;

    /* Legacy gradients */
    --knop-actie-van: var(--wv-kleur-primair);
    --knop-actie-tot: var(--wv-kleur-primair-hover);

    --knop-overzicht-van: #1e2330;
    --knop-overzicht-tot: #151821;

    --knop-positief-van: #15803d;
    --knop-positief-tot: #166534;

    --knop-negatief-van: #b91c1c;
    --knop-negatief-tot: #7f1010;

    --knop-pdf-van: #991b1b;
    --knop-pdf-tot: #451010;

    --knop-nieuw-van: #8b5cf6;
    --knop-nieuw-tot: #d4af37;

    /* Meldingen */
    --alert-error-bg:      rgba(179, 38, 30, .14);
    --alert-error-border:  rgba(234, 67, 53, .7);
    --alert-error-text:    #ffd0c8;

    --alert-ok-bg:         rgba(52, 168, 83, .12);
    --alert-ok-border:     rgba(52, 168, 83, .75);
    --alert-ok-text:       #b9f8cb;

    --alert-warn-bg:       rgba(251, 188, 5, .10);
    --alert-warn-border:   rgba(251, 188, 5, .7);
    --alert-warn-text:     #ffeaa5;

    --alert-info-bg:       rgba(37, 99, 235, 0.18);
    --alert-info-border:   rgba(59, 130, 246, 0.7);
    --alert-info-text:     #dbeafe;
}

/* ========================================================================== */
/* BASISLAYOUT                                                                */
/* ========================================================================== */

*{box-sizing:border-box}
html{min-height:100%;overflow-y:scroll}

body{
    margin:0;
    min-height:100vh;

    /* Fallback effen kleur */
    background-color: #05060a;

        /* Gradient body_bg_top/mid/bottom */
    background-image:
        radial-gradient(120% 200% at 50% 0%, #f3e3a2 0%, transparent 55%),
        radial-gradient(120% 200% at 50% 100%, #050609 0%, transparent 55%),
        linear-gradient(180deg, #f3e3a2 0%, #0b0d12 45%, #050609 100%);
    
    color:var(--fg);
    font-family: var(--font);
    font-size:var(--font-size-base, 14px);
    -webkit-font-smoothing:antialiased;
}

a{color:var(--accent-gold-soft);text-decoration:none}
a:hover{text-decoration:underline}

/* ========================================================================== */
/* HEADER / NAV                                                               */
/* ========================================================================== */

.site-header{
    background:transparent;
    box-shadow:none;
    border-bottom:0;
    position:relative;
    z-index:1000;
    isolation:isolate;
}

.header{
    border-bottom:0;
    backdrop-filter:none;
    text-align:center;
    padding:8px 0 10px;
    background:transparent;
    position:relative;
    z-index:1000;
}

.header img.logo{
    max-height:124px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto 6px;
}

.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:0;
}

.nav-left,.nav-right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

/* Navigatieknoppen */

.nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:600;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(135deg,var(--wv-kleur-secundair),var(--nav-bg-eind));
    color:var(--accent-gold-soft);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.7),
        0 6px 14px rgba(0,0,0,.55);
    transition: background .15s ease, transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}

.nav-link:hover{
    text-decoration:none;
    background:linear-gradient(135deg,var(--wv-kleur-secundair),var(--nav-bg-eind-hover));
    border-color:rgba(244,202,103,.7);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.8),
        0 8px 18px rgba(0,0,0,.6);
    transform:translateY(-1px);
}

.nav-link.is-active{
    background:linear-gradient(135deg,var(--wv-kleur-primair),var(--wv-kleur-primair-hover));
    color:#fffbe7;
    border-color:var(--accent-gold);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.85),
        0 10px 20px rgba(0,0,0,.75);
}

/* Account / login */

.nav-account{position:relative}
.nav-account-toggle{appearance:none;border:0;padding:0;background:none}
.nav-link-account{cursor:pointer}
.nav-account-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account-caret{margin-left:4px;font-size:11px;opacity:.8}

/* Dropdown-menu */

.nav-account-menu{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(180deg, rgba(26,29,38,.98), rgba(16,19,27,.98));
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 36px rgba(0,0,0,.78);
    min-width:200px;
    padding:6px 0;
    display:none;
    z-index:2000;
}
.nav-account.is-open .nav-account-menu{display:block}

.nav-account-menu a{
    display:block;
    padding:7px 14px;
    font-size:13px;
    color:#f4f1e7;
    text-align:left;
}
.nav-account-menu a:visited{color:#f4f1e7}
.nav-account-menu a:hover{background:rgba(255,255,255,.04);text-decoration:none}
.nav-account-menu-sep{height:1px;margin:4px 0;background:rgba(255,255,255,.10)}

/* ========================================================================== */
/* LAYOUT / KAARTEN / TYPOGRAFIE                                             */
/* ========================================================================== */

/* Portaal dashboard-tegels */
.portaal-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
  margin-top:10px;
}
.portaal-tile h2{ margin:0 0 6px 0; }
.portaal-tile .actions{ margin-top:10px; }

.portaal-hero{
    display:grid;
    gap:10px;
    padding:16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(199,154,45,.08), transparent 24%),
        linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .96));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(2, 6, 23, .30);
}
.portaal-hero h1{
    margin:0;
    font-size:clamp(1.45rem, 2.4vw, 2rem);
    line-height:1.08;
}
.portaal-hero .klein{
    color:#cbd5e1;
    line-height:1.55;
}
.portaal-hero .actions{
    margin-top:6px;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
main{padding:16px 0 18px}

.kaart{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.18), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(255,255,255,.08), transparent 24%),
        linear-gradient(180deg, rgba(31, 36, 46, .98), rgba(18, 21, 30, .97));
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--rad);
    padding:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.65);
}
.kaart + .kaart{margin-top:12px}
.kaart h2:first-child{margin-top:0}

h1{margin:0 0 10px}
h2{margin:0 0 8px}
h3{margin:8px 0 5px}

.klein{font-size:13px;color:var(--muted)}
.klein--mt{margin-top:8px}

.tag{
    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    border-radius:999px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(180deg, rgba(247,208,88,.14), rgba(247,208,88,.08));
    color:var(--accent-gold-soft);
    font-size:11px;
    border:1px solid rgba(245,211,117,.4);
}

.kaart--center{text-align:center}

/* ========================================================================== */
/* LANDINGPAGINA / VOORWAARDEN                                               */
/* ========================================================================== */

.landing-hero,
.voorwaarden-hero{
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--pearl-highlight) 14%, transparent), transparent 36%),
        radial-gradient(circle at 100% 0%, rgba(236, 106, 106, .08), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-dark-top) calc(var(--section-opacity) * 100%), transparent), color-mix(in srgb, var(--surface-dark-bottom) calc(var(--section-opacity) * 100%), transparent));
    color: var(--surface-dark-text);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}

.landing-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(280px, .9fr);
    gap:14px;
    padding:16px;
}

.landing-hero__copy{
    display:grid;
    gap:10px;
}

.landing-kicker,
.voorwaarden-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:4px 10px;
    border-radius:999px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .05));
    border:1px solid rgba(255, 255, 255, .09);
    color:rgba(247, 241, 230, .88);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.74rem;
    font-weight:800;
}

.landing-title{
    margin:0;
    font-size:clamp(calc(1.55rem * var(--heading-scale)), 2.6vw, calc(2.55rem * var(--heading-scale)));
    line-height:1.06;
    letter-spacing:-.03em;
    color:var(--surface-dark-text);
}

.landing-lead,
.voorwaarden-lead{
    margin:0;
    max-width:68ch;
    color:color-mix(in srgb, var(--surface-dark-text) 88%, transparent);
    font-size:.94rem;
    line-height:1.56;
}

.landing-chips,
.voorwaarden-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.landing-chip,
.voorwaarden-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 12px;
    border-radius:999px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
    border:1px solid rgba(255, 255, 255, .09);
    color:color-mix(in srgb, var(--surface-dark-text) 90%, transparent);
    font-size:.82rem;
    font-weight:700;
}

.landing-hero__aside,
.voorwaarden-aside{
    display:grid;
    gap:10px;
    padding:14px;
    border-radius:16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04)),
        color-mix(in srgb, var(--surface-dark-bottom) 88%, transparent);
    border:1px solid rgba(255, 255, 255, .07);
}

.landing-hero__aside h2,
.voorwaarden-aside h2{
    margin:0;
    font-size:1.05rem;
    color:var(--surface-dark-text);
}

.landing-aside-grid,
.voorwaarden-summary{
    display:grid;
    gap:10px;
}

.landing-aside-item,
.voorwaarden-summary li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:baseline;
    padding:9px 11px;
    border-radius:12px;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--pearl-highlight) 36%, transparent), transparent 31%),
        linear-gradient(145deg, var(--surface-light-top), var(--surface-light-bottom));
    border:1px solid rgba(75, 58, 42, .10);
}

.landing-aside-item strong,
.voorwaarden-summary strong{
    color:var(--surface-light-text);
}

.landing-aside-item span,
.voorwaarden-summary span{
    color:var(--surface-light-muted);
    text-align:right;
}

.landing-section{
    padding:18px 18px 20px;
    color:color-mix(in srgb, var(--surface-dark-text) 90%, transparent);
    border-radius:var(--section-radius);
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--pearl-highlight) 14%, transparent), transparent 32%),
        radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--accent-gold) 10%, transparent), transparent 26%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-dark-top) calc(var(--section-opacity) * 100%), transparent), color-mix(in srgb, var(--surface-dark-bottom) calc(var(--section-opacity) * 100%), transparent));
}

.landing-section h2,
.landing-section h3{
    margin-top:0;
}

.landing-section + .landing-section{
    margin-top:14px;
}

.landing-section__intro{
    margin:0 0 14px;
    color:color-mix(in srgb, var(--surface-dark-muted) 92%, transparent);
}

.landing-section > p:not([class]),
.landing-section > .landing-note{
    color:color-mix(in srgb, var(--surface-dark-muted) 94%, transparent);
}

.landing-grid-steps,
.landing-feature-grid,
.landing-price-grid,
.landing-link-grid,
.landing-contact-grid,
.voorwaarden-shell{
    display:grid;
    gap:12px;
}

.landing-grid-steps{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.landing-step,
.landing-feature,
.landing-price-card,
.landing-link-card,
.landing-contact-card,
.voorwaarden-panel,
.voorwaarden-download-card{
    border-radius:var(--card-radius);
    padding:16px;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--pearl-highlight) 34%, transparent), transparent 32%),
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.14), transparent 24%),
        linear-gradient(180deg, var(--surface-light-top), var(--surface-light-bottom));
    border:1px solid rgba(86, 42, 18, .08);
    box-shadow:0 14px 28px rgba(35, 18, 9, .08);
    color:color-mix(in srgb, var(--surface-light-text) 92%, transparent);
}

.landing-step{
    display:grid;
    gap:10px;
}

.landing-step__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2rem;
    height:2rem;
    border-radius:999px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.34), transparent 34%),
        linear-gradient(180deg, #e3c66a, #ad811b);
    color:#3c1800;
    font-size:.9rem;
    font-weight:900;
    box-shadow:0 10px 18px rgba(199, 154, 45, .2);
}

.landing-step__title,
.landing-feature h3,
.landing-price-card h3,
.landing-link-card h3,
.landing-contact-card h3{
    margin:0;
}

.landing-step p,
.landing-feature p,
.landing-price-card p,
.landing-link-card p,
.landing-contact-card p{
    margin:0;
    color:color-mix(in srgb, var(--surface-light-text) 86%, transparent);
}

.landing-feature-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.landing-feature{
    position:relative;
    overflow:hidden;
}

.landing-feature__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.2rem;
    height:2.2rem;
    border-radius:999px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.2), transparent 34%),
        rgba(143, 15, 15, .1);
    color:rgba(143, 15, 15, .95);
    margin-bottom:10px;
}

.landing-price-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.landing-price-card__price{
    margin:8px 0 0;
    font-size:1.6rem;
    font-weight:900;
    color:var(--accent-gold);
}

.landing-table-wrap{
    overflow-x:auto;
    border-radius:16px;
    border:1px solid rgba(86, 42, 18, .08);
}

.landing-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,243,236,.92));
}

.landing-table th,
.landing-table td{
    padding:10px 12px;
    border-bottom:1px solid rgba(86, 42, 18, .08);
    color:color-mix(in srgb, var(--surface-light-text) 92%, transparent);
}

.landing-table th{
    text-transform:uppercase;
    letter-spacing:.04em;
    font-size:.76rem;
    color:rgba(43, 26, 18, .92);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.2), transparent 28%),
        linear-gradient(180deg, rgba(250,244,236,.86), rgba(238,229,218,.78));
}

.landing-table tbody tr:last-child td{
    border-bottom:none;
}

.landing-note{
    margin:10px 0 0;
    color:rgba(43, 26, 18, .84);
    font-size:.92rem;
}

.landing-link-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.landing-link-card{
    display:grid;
    gap:10px;
    text-decoration:none;
    color:rgba(43, 26, 18, .92);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.landing-link-card:hover{
    transform:translateY(-2px);
    border-color:rgba(199, 154, 45, .34);
    box-shadow:0 18px 34px rgba(35, 18, 9, .12);
    text-decoration:none;
}

.landing-link-card__icon{
    width:2.3rem;
    height:2.3rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.24), transparent 34%),
        linear-gradient(180deg, rgba(143, 15, 15, .11), rgba(199, 154, 45, .12));
    color:rgba(143, 15, 15, .95);
}

.landing-contact-grid{
    grid-template-columns:minmax(0, 1.05fr) minmax(280px, .95fr);
}

.landing-contact-card{
    display:grid;
    gap:12px;
    align-content:start;
}

.landing-contact-meta{
    display:grid;
    gap:8px;
}

.landing-contact-card .logo-klein{
    display:block;
    max-width:320px;
    width:100%;
    height:auto;
    max-height:170px;
    object-fit:contain;
    margin:0 auto 4px;
}

.landing-contact-card strong,
.landing-contact-card span,
.landing-mail-card,
.landing-mail-card p,
.landing-mail-card__title{
    color:rgba(43, 26, 18, .92);
}

.landing-contact-meta .rij{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,243,236,.92));
    border:1px solid rgba(86, 42, 18, .08);
    box-shadow:0 8px 18px rgba(35,18,9,.06);
}

.landing-mail-grid{
    display:grid;
    gap:10px;
}

.landing-mail-card{
    padding:14px;
    border-radius:16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 243, 236, .94));
    border:1px solid rgba(86, 42, 18, .08);
    box-shadow:0 12px 24px rgba(35,18,9,.08);
}

.landing-mail-card__title{
    margin:0 0 6px;
    font-weight:800;
}

.landing-mail-button{
    width:100%;
    justify-content:center;
    margin-top:8px;
}

.landing-mail-result{
    display:grid;
    gap:8px;
    margin-top:10px;
}

.landing-mail-result a{
    justify-self:start;
}

.landing-mail-card p{
    color:rgba(43, 26, 18, .78);
}

.landing-mail-card .knop-secundair{
    background:
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(180deg, #2d2722, #4b3f37);
    color:#fff8ee;
    border-color:rgba(199,154,45,.55);
}

.landing-mail-card .knop-link_knop{
    color:rgba(143,15,15,.95);
    background:rgba(143,15,15,.08);
    border:1px solid rgba(143,15,15,.16);
    border-radius:999px;
    padding:10px 14px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    margin-top:8px;
}

.landing-mail-card .knop-link_knop:hover{
    background:rgba(143,15,15,.12);
}

.landing-legal{
    display:grid;
    gap:10px;
}

.landing-legal p{
    margin:0;
    color:rgba(43, 26, 18, .76);
}

.landing-hero .landing-legal p{
    color:rgba(247, 241, 230, .84);
}

.landing-contact-grid{
    align-items:start;
}

.voorwaarden-shell{
    grid-template-columns:minmax(0, 1fr) 320px;
    align-items:start;
}

.voorwaarden-shell.landing-section,
.voorwaarden-samenvatting.landing-section{
    color:rgba(247, 241, 230, .9);
}

.voorwaarden-hero{
    padding:22px;
    margin-bottom:14px;
}

.voorwaarden-hero .landing-title{
    font-size:clamp(1.8rem, 3.2vw, 2.8rem);
}

.voorwaarden-panel{
    padding:22px;
    color:rgba(43, 26, 18, .92);
}

.voorwaarden-panel h3{
    margin-top:1.4rem;
}

.voorwaarden-tekst{
    display:grid;
    gap:8px;
}

.voorwaarden-tekst p,
.voorwaarden-tekst li{
    line-height:1.75;
    color:rgba(43, 26, 18, .9);
}

.voorwaarden-tekst h3{
    color:#2a120c;
}

.voorwaarden-download-card{
    position:sticky;
    top:18px;
    display:grid;
    gap:12px;
    color:rgba(43, 26, 18, .92);
}

.voorwaarden-download-card h2{
    color:rgba(43, 26, 18, .96);
}

.voorwaarden-download-card .landing-legal p{
    color:rgba(43, 26, 18, .78);
}

.voorwaarden-download-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.voorwaarden-download-actions .knop{
    width:100%;
    justify-content:center;
}

.voorwaarden-summary-box{
    display:grid;
    gap:8px;
}

.voorwaarden-summary-box .landing-aside-item{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.08), transparent 28%),
        linear-gradient(180deg, rgba(31, 36, 46, .92), rgba(18, 21, 30, .88));
}

.voorwaarden-summary-box .landing-aside-item strong{
    color:#fffaf2;
}

.voorwaarden-summary-box .landing-aside-item span{
    color:rgba(240, 232, 216, .84);
}

@media (max-width: 900px){
    .landing-contact-card .logo-klein{
        max-width:260px;
        max-height:140px;
    }
}

@media (max-width: 1100px){
    .landing-grid-steps,
    .landing-feature-grid,
    .landing-link-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .landing-contact-grid,
    .voorwaarden-shell,
    .landing-hero{
        grid-template-columns:1fr;
    }
}

@media (max-width: 700px){
    .landing-grid-steps,
    .landing-feature-grid,
    .landing-price-grid,
    .landing-link-grid{
        grid-template-columns:1fr;
    }

    .landing-hero,
    .landing-section,
    .voorwaarden-panel,
    .voorwaarden-hero{
        padding:16px;
    }
}

/* Tabellen – uitlijning prijzen & compacte weergave */
.tabel td.right,
.tabel th.right {
    text-align: right;
    white-space: nowrap;
}

.tabel--compact td,
.tabel--compact th {
    padding: 8px 10px;
}

.tabel caption {
    text-align: left;
    font-weight: 700;
    margin: 8px 0 6px;
}

/* Stap 3 layout */
.stap3-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.stap3-main{min-width:0}
.stap3-side .sticky{position:sticky;top:16px}

@media (max-width: 980px){
  .stap3-layout{grid-template-columns:1fr}
  .stap3-side{order:2}
}

/* Hero */
.stap3-hero{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.stap3-hero__h{margin:0 0 6px 0}
.stap3-hero__sub{margin:0}
.stap3-hero__meta{min-width:280px}
.wizard-progress{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 10px;
}
.wizard-progress__step{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    color:var(--fg);
    text-decoration:none;
    font-size:12.5px;
    font:inherit;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wizard-progress__step:hover{text-decoration:none;transform:translateY(-1px)}
.wizard-progress__step:focus-visible{outline:2px solid rgba(244,197,66,.75);outline-offset:2px}
.wizard-progress__step.is-active{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
    border-color:rgba(244,197,66,.42);
    box-shadow:0 0 0 1px rgba(244,197,66,.15) inset;
}
.wizard-progress__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#8b8f98;
    box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
.wizard-progress__badge{
    display:inline-flex;
    min-width:22px;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    align-items:center;
    justify-content:center;
    font-size:12px;
    line-height:1;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.12);
}
.wizard-progress__step.is-active .wizard-progress__badge{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.20), transparent 30%),
        linear-gradient(180deg, rgba(244,197,66,.18), rgba(244,197,66,.10));
    border-color:rgba(244,197,66,.28);
}
.wizard-progress__step.is-done .wizard-progress__dot{background:#38d973}
.wizard-progress__step.is-current .wizard-progress__dot{background:#f4c542}
.wizard-progress__step.is-todo .wizard-progress__dot{background:#a23b3b}
.wizard-progress__step.is-done{border-color:rgba(56,217,115,.35)}
.wizard-progress__step.is-current{border-color:rgba(244,197,66,.38)}
.wizard-progress__step.is-todo{border-color:rgba(162,59,59,.35)}
.meta-row{display:flex;gap:8px;align-items:baseline;margin:2px 0}
.meta-label{opacity:.8}

/* Tabs (nieuw: .tabs__*) */
.tabs{margin:10px 0 14px 0}

.tabs__bar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tabs__tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  color:var(--fg);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.tabs__tab.is-active{
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.20);
}

.tabs__badge{
  display:inline-flex;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
}

/* CRUCIAAL: panels verbergen/tonen */
.tabs__panel{display:none}
.tabs__panel.is-active{display:block}

/* USP row */
.usp-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.10);font-size:.85em}
.badge--sub{font-size:.78em;opacity:.9}

/* Kostuum cards */
.kostuum-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
@media (max-width: 1100px){.kostuum-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 620px){.kostuum-grid{grid-template-columns:1fr}}

.kostuum-card{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);cursor:pointer}
.kostuum-card input{position:absolute;opacity:0;pointer-events:none}
.kostuum-card:has(input:checked){outline:2px solid rgba(255,215,0,.65);border-color:rgba(255,215,0,.45);background:rgba(255,215,0,.06)}
.kostuum-card__media{display:block;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.25);min-height:160px}
.kostuum-card__media img{width:100%;height:180px;object-fit:contain;display:block}
.kostuum-card__placeholder{display:flex;align-items:center;justify-content:center;height:180px;opacity:.75}
.kostuum-card__body{display:flex;flex-direction:column;gap:6px}
.kostuum-card__title{font-weight:700}
.kostuum-card__tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.82em}
.kostuum-card__price{margin-top:auto;font-weight:700;text-align:right}
.kostuum-card.is-neutral{grid-template-rows:1fr}
.kostuum-card.is-neutral .kostuum-card__price{text-align:left}

	/* Stap 3 (nieuwe markup): keuze-grid + cards */
	.keuze-grid{
		display:grid;
		grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
		gap:10px;
		margin-top:10px;
	}

	.keuze-card{
		display:grid;
		grid-template-rows:auto 1fr;
		gap:10px;
		padding:12px;
		border-radius:14px;
		background:rgba(255,255,255,.03);
		border:1px solid rgba(255,255,255,.10);
		cursor:pointer;
	}

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

	.keuze-card.is-selected{
		outline:2px solid rgba(255,215,0,.65);
		border-color:rgba(255,215,0,.45);
		background:rgba(255,215,0,.06);
	}

	.keuze-card__media{
		display:block;
		border-radius:12px;
		overflow:hidden;
		background:rgba(0,0,0,.25);
		min-height:160px;
	}

	.keuze-card__img{
		width:100%;
		height:180px;
		object-fit:contain;
		display:block;
	}

	.keuze-card__img.is-empty{
		height:180px;
	}

	.keuze-card__body{
		display:flex;
		flex-direction:column;
		gap:6px;
	}

	.keuze-card__title{font-weight:800}
	.keuze-card__pill{opacity:.9}
	.keuze-card__price{margin-top:auto;font-weight:800}

.keuze-card__status--bezet { color: #e53935; }
.keuze-card__status { margin-right: .4rem; }

/* Diensten rows */
.diensten-lijst{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.dienst-row{display:grid;grid-template-columns:1fr 140px 220px;gap:12px;align-items:center;
  padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10)}
@media (max-width: 820px){
  .dienst-row{grid-template-columns:1fr}
  .dienst-row__price{display:flex;justify-content:space-between}
}
.dienst-row__title{font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dienst-row__price{text-align:right;font-weight:800}
.dienst-row__qty{text-align:right}

/* Optie kaart */
.optie-kaart{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);cursor:pointer}
.optie-kaart__title{font-weight:800;display:block;margin-bottom:4px}

/* Sticky */
.sticky{padding:12px;border-radius:14px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.12)}
.sticky__h{font-weight:900;margin-bottom:10px}
.sticky__row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sticky__row:last-of-type{border-bottom:none}
.sticky__note{margin-top:10px;opacity:.85}
.sticky__cta{margin-top:12px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,215,0,.45);
  background:rgba(255,215,0,.10);cursor:pointer;font-weight:900}

.kostuum-bezet-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    color: #c0392b; /* rood */
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    padding: 6px;
    z-index: 5;
}

/* ========================================================================== */
/* KNOPPEN                                                                    */
/* ========================================================================== */

.knop--icoon-groot{
    width:90px;height:90px;padding:0;border-radius:18px;
    background:linear-gradient(145deg,var(--accent-gold),var(--accent-gold-soft));
    color:#111;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    cursor:pointer;border:1px solid rgba(0,0,0,.4);
    transition: transform .1s ease, box-shadow .1s ease, background .12s ease, border-color .12s ease;
}
.knop--icoon-groot i{font-size:56px;line-height:1;display:block;color:#111}
.knop--icoon-groot:hover{
    background:linear-gradient(145deg,#f5d45a,#ffeaa5);
    border-color:rgba(255,239,170,.9);
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(0,0,0,.6);
}
.knop--icoon-groot:hover i{color:#402000}
.knop--icoon-groot:active{transform:translateY(1px);box-shadow:0 6px 20px rgba(0,0,0,.45)}

.knop,.knop-sec{
    appearance:none;border:0;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    text-decoration:none;
    padding:var(--knop-padding, var(--wv-knop-padding));
    border-radius:var(--knop-radius, var(--wv-knop-radius));
    font-size:var(--knop-font, 14px);
    font-weight:var(--knop-weight, 600);
    text-transform:var(--knop-transform, none);
    background:var(--knop-bg, var(--wv-kleur-primair));
    color:var(--knop-fg, #ffffff);
    box-shadow:0 10px 24px rgba(0,0,0,.65);
    border:1px solid var(--knop-border, rgba(0,0,0,.7));
    transition: filter .12s ease, box-shadow .12s ease, transform .05s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.knop:hover,.knop-sec:hover{
    text-decoration:none;
    filter:brightness(1.02);
    box-shadow:0 12px 28px rgba(0,0,0,.75);
    background:var(--knop-bg-hover, var(--knop-bg, var(--wv-kleur-primair-hover)));
    color:var(--knop-fg-hover, var(--knop-fg, #ffffff));
}
.knop:active,.knop-sec:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(0,0,0,.7)}

/* Knopgroepen + per-knop overrides */
.knop-variant-volgende {
    --knop-bg: #15803d;
    --knop-fg: #ecfdf5;
    --knop-bg-hover: #166534;
    --knop-fg-hover: #dcfce7;
    --knop-border: rgba(34,197,94,0.8);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-vorige {
    --knop-bg: #374151;
    --knop-fg: #e5e7eb;
    --knop-bg-hover: #111827;
    --knop-fg-hover: #f9fafb;
    --knop-border: rgba(31,41,55,0.9);
    --knop-padding: 8px 16px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 500;
    --knop-transform: none;
}
.knop-variant-login {
    --knop-bg: #92400e;
    --knop-fg: #fff7ed;
    --knop-bg-hover: #b45309;
    --knop-fg-hover: #fffbeb;
    --knop-border: rgba(245,158,11,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-bevestig {
    --knop-bg: #b31919;
    --knop-fg: #fff1f2;
    --knop-bg-hover: #7f1010;
    --knop-fg-hover: #fee2e2;
    --knop-border: rgba(248,113,113,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-download_pdf {
    --knop-bg: #991b1b;
    --knop-fg: #ffe4e6;
    --knop-bg-hover: #451010;
    --knop-fg-hover: #fee2e2;
    --knop-border: rgba(248,113,113,0.9);
    --knop-padding: 8px 16px;
    --knop-radius: 10px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: none;
}
.knop-variant-profiel {
    --knop-bg: #1d4ed8;
    --knop-fg: #e0f2fe;
    --knop-bg-hover: #1e40af;
    --knop-fg-hover: #dbeafe;
    --knop-border: rgba(59,130,246,0.9);
    --knop-padding: 8px 16px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: none;
}
.knop-variant-portaal {
    --knop-bg: #000000;
    --knop-fg: #f3e3a2;
    --knop-bg-hover: #111827;
    --knop-fg-hover: #fef9c3;
    --knop-border: rgba(244,202,103,0.7);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: none;
}
.knop-variant-annuleren {
    --knop-bg: #b91c1c;
    --knop-fg: #ffe4e0;
    --knop-bg-hover: #7f1010;
    --knop-fg-hover: #fee2e2;
    --knop-border: rgba(255,255,255,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-nieuw {
    --knop-bg: #9a8c47;
    --knop-fg: #000000;
    --knop-bg-hover: #f3dd6d;
    --knop-fg-hover: #000000;
    --knop-border: rgba(000,000,000,0.9);
    --knop-padding: 8px 18px;
    --knop-radius: 999px;
    --knop-font: 14px;
    --knop-weight: 600;
    --knop-transform: uppercase;
}
.knop-variant-oud {
    --knop-bg: #4b5563;
    --knop-fg: #e5e7eb;
    --knop-bg-hover: #374151;
    --knop-fg-hover: #f9fafb;
    --knop-border: rgba(55,65,81,0.9);
    --knop-padding: 6px 14px;
    --knop-radius: 999px;
    --knop-font: 13px;
    --knop-weight: 500;
    --knop-transform: none;
}
.knop-portaal_terug_portaal {
    --knop-bg: #1e293b;
    --knop-fg: #e5e7eb;
    --knop-bg-hover: #111827;
    --knop-fg-hover: #f9fafb;
    --knop-border: #0f172a;
}
.knop-portaal_nieuwe_reservering {
    --knop-bg: #d4af37;
    --knop-fg: #111111;
    --knop-bg-hover: #f3c95f;
    --knop-fg-hover: #000000;
    --knop-border: #b8860b;
}
.knop-bestel_annuleren {
    --knop-bg: #b91c1c;
    --knop-fg: #ffe4e0;
    --knop-bg-hover: #7f1010;
    --knop-fg-hover: #ffe4e0;
    --knop-border: #7f1010;
}

.knop:not(.knop--icoon-groot) i,.knop-sec i{font-size:14px;line-height:1}

.knop-help{
    display:none;
    align-items:center;
    justify-content:center;
    width:1.2rem;
    height:1.2rem;
    margin-left:.15rem;
    border-radius:999px;
    background:linear-gradient(180deg,#fff6cd,#e8c964);
    color:#5b4000;
    border:1px solid rgba(91,64,0,.24);
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    flex:0 0 auto;
}
.knop-help i{
    font-size:.72em;
    line-height:1;
}
.knop-met-hulp{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}

html.show-tooltips .knop-help,
html.show-tooltips .knop-met-hulp .knop-help{
    display:inline-flex;
}

.help-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    min-height:32px;
    padding:0 10px;
    border-radius:999px;
    appearance:none;
    border:1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    color:var(--accent-gold-soft);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.7),
        0 6px 14px rgba(0,0,0,.55);
    cursor:pointer;
    font:inherit;
    font-weight:700;
    text-decoration:none;
}
.help-toggle.is-active{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.36), transparent 32%),
        linear-gradient(180deg, var(--wv-kleur-primair), var(--wv-kleur-primair-hover));
    color:#fffbe7;
    border-color:var(--accent-gold);
}
.help-toggle i{
    font-size:.95rem;
}

.knop--secundair,.knop--overzicht{
    background:linear-gradient(145deg,var(--knop-overzicht-van),var(--knop-overzicht-tot));
    color:var(--fg);
    border-color:rgba(255,255,255,.12);
    box-shadow:0 8px 20px rgba(0,0,0,.55);
}
.knop--secundair:hover,.knop--overzicht:hover{border-color:var(--accent-gold)}

.knop--positief{
    background:linear-gradient(145deg,var(--knop-positief-van),var(--knop-positief-tot));
    color:#ecfdf5;
    border-color:rgba(34,197,94,.7);
}

.knop--gevaar,.knop--negatief{
    background:linear-gradient(145deg,var(--knop-negatief-van),var(--knop-negatief-tot));
    color:#ffe4e0;
    border-color:rgba(248,113,113,.7);
}

.knop-beheer-danger{
    background:linear-gradient(145deg,var(--knop-negatief-van),var(--knop-negatief-tot));
    color:#ffe4e0;
    border-color:rgba(248,113,113,.9);
}

.knop--pdf{
    background:linear-gradient(145deg,var(--knop-pdf-van),var(--knop-pdf-tot));
    color:#ffe4e6;
    border-color:rgba(248,113,113,.9);
}

.knop--nieuw{
    background:#000;
    color:var(--knop-tekst-goud, #ffd766);
    border-color:#d4af37;
}

/* Legacy .knop--* uit kleur_knop_* */
.knop.knop--vraag-code {
    background: #d4af37;
    border-color: #b8860b;
    color: #000000;
}
.knop.knop--vraag-code:hover {
    filter: brightness(1.05);
}
.knop.knop--vraag-code:active {
    filter: brightness(0.95);
}

.knop--groot{padding:12px 20px;font-size:15px}
.knop--klein{padding:6px 10px;font-size:13px;box-shadow:0 6px 14px rgba(0,0,0,.55)}
.knop--volledige-breedte{width:100%;justify-content:center}

.knop--vlak,.knop-link{
    background:transparent;
    box-shadow:none;
    border-color:transparent;
    padding:0;
    font-size:13px;
}

.knop--icoon-klein,.knop-icon-sm{padding:0 10px;min-width:40px}

.actions,.knoppen,.knoppen-flex,.knoppen-rij{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}
.knoppen-rij--links{justify-content:flex-start}
.knoppen-rij--midden{justify-content:center}
.knoppen-rij--rechts{justify-content:flex-end}

/* ========================================================================== */
/* FORMULIEREN                                                                */
/* ========================================================================== */

form label{display:block;margin:0 0 10px;font-size:14px}
form label span.lbl{display:block;margin-bottom:3px}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, #ffffff 10%), var(--card));
    border-radius:8px;
    border:1px solid var(--line);
    padding:8px 10px;
    color:var(--fg);
    font:inherit;
}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{
    outline:2px solid var(--focus);
    outline-offset:1px;
    border-color:var(--focus);
}

/* ========================================================================== */
/* TABELLEN                                                                   */
/* ========================================================================== */

.tabel{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.06), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    overflow:hidden;
}
.tabel th,.tabel td{padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.tabel th{
    font-weight:600;
    font-size:13px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, #ffffff 10%), var(--card));
    color:var(--fg);
}
.tabel tbody tr:last-child td,
.tabel tbody tr:last-child th{
    border-bottom:none;
}
.tabel tbody tr:hover td{
    background:rgba(255,255,255,.02);
}

.knop-met-checkbox{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--fg);
    font-weight:600;
}

.knop-met-checkbox input[type="checkbox"]{
    width:auto;
    margin:0;
    accent-color:var(--accent-gold);
}
.geannuleerd{text-decoration:line-through;opacity:.6}

/* ========================================================================== */
/* MELDINGEN                                                                  */
/* ========================================================================== */

.fout,.waarschuwing,.ok,.melding{
    border-radius:10px;
    padding:10px 12px;
    margin:8px 0 12px;
    font-size:14px;
}

.fout{
    background:var(--alert-error-bg, rgba(179, 38, 30, .14));
    border:1px solid var(--alert-error-border, rgba(234, 67, 53, .7));
    color:var(--alert-error-text, #ffd0c8);
}
.ok{
    background:var(--alert-ok-bg, rgba(52, 168, 83, .12));
    border:1px solid var(--alert-ok-border, rgba(52, 168, 83, .75));
    color:var(--alert-ok-text, #b9f8cb);
}
.waarschuwing{
    background:var(--alert-warn-bg, rgba(251, 188, 5, .10));
    border:1px solid var(--alert-warn-border, rgba(251, 188, 5, .7));
    color:var(--alert-warn-text, #ffeaa5);
}
.melding{
    background:var(--alert-info-bg, rgba(37, 99, 235, 0.18));
    border:1px solid var(--alert-info-border, rgba(59, 130, 246, 0.7));
    color:var(--alert-info-text, #dbeafe);
}

/* ========================================================================== */
/* FOOTER                                                                     */
/* ========================================================================== */

.site-footer{
    color:var(--muted);
    font-size:13px;
    padding:12px 0;
    border-top:1px solid var(--line);
    text-align:center;
    margin-top:24px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--footer-bg, var(--card)) 90%, #ffffff 10%), var(--footer-bg, var(--card)));
}

/* ========================================================================== */
/* RESPONSIVE                                                                 */
/* ========================================================================== */

@media (max-width:640px){
    .header{padding:4px 0 8px}
    .header img.logo{max-height:104px;margin:0 auto}

    .nav{
        flex-direction:column;
        align-items:stretch;
        max-width:100%;
        margin:0 auto;
        padding:0 10px 8px;
    }
    .nav-left,.nav-right{justify-content:center}

    .wrap{padding:0 12px}
    main{padding:14px 0 18px}
    .kaart{padding:12px}

    .actions,.knoppen,.knoppen-rij{
        flex-direction:column;
        width:100%;
        gap:6px;
        margin-top:10px;
    }
    .actions .knop,
    .actions .knop-sec,
    .knoppen .knop,
    .knoppen .knop-sec{
        width:100%;
        justify-content:center;
    }
}
/* =========================================================
   Bestelwizard layout
   ========================================================= */

.wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: start;
}

.wizard-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.wizard-sidebar {
    position: sticky;
    top: 24px;
    color: rgba(244, 241, 230, 0.94);
}

.kaart--sidebar {
    padding: 18px 18px 20px;
}

.wizard-progress-wrap {
    display: grid;
    gap: 10px;
}

.wizard-progress__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: start;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,236,.86));
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: rgba(43, 26, 18, 0.9);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(35, 18, 9, 0.08);
}

.wizard-progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
    gap: 0.65rem;
}

.wizard-progress__step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.25rem;
    padding: 0.8rem 0.95rem;
    border-radius: 16px;
    text-decoration: none;
    color: rgba(43, 26, 18, 0.92);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.26), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,243,236,.88));
    border: 1px solid rgba(86, 42, 18, 0.1);
    box-shadow: 0 12px 22px rgba(35, 18, 9, 0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.wizard-progress__step:hover {
    transform: translateY(-1px);
    border-color: rgba(143, 15, 15, 0.24);
    box-shadow: 0 14px 24px rgba(35, 18, 9, 0.1);
}

.wizard-progress__step.is-current {
    border-color: rgba(143, 15, 15, 0.38);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.3), transparent 30%),
        linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(246, 233, 219, 0.94));
    box-shadow: 0 14px 28px rgba(143, 15, 15, 0.12);
}

.wizard-progress__step.is-done {
    opacity: 0.96;
}

.wizard-progress__index {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(143, 15, 15, 0.96), rgba(109, 17, 17, 0.96));
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 8px 14px rgba(143, 15, 15, 0.22);
}

.wizard-progress__step.is-done .wizard-progress__index {
    background: linear-gradient(180deg, rgba(199, 154, 45, 0.98), rgba(166, 126, 28, 0.98));
}

.wizard-progress__step.is-todo .wizard-progress__index {
    background: linear-gradient(180deg, rgba(86, 42, 18, 0.86), rgba(86, 42, 18, 0.76));
}

.wizard-progress__dot {
    display: none;
}

.wizard-progress__label {
    display: grid;
    line-height: 1.1;
}

.wizard-progress__title {
    font-size: 0.92rem;
    font-weight: 800;
}

.wizard-progress__subtitle {
    font-size: 0.8rem;
    color: rgba(43, 26, 18, 0.7);
}

.wizard-progress__badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(143, 15, 15, 0.1);
    color: rgba(143, 15, 15, 0.95);
    font-size: 0.75rem;
    font-weight: 800;
}

.wizard-progress--tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.15rem 0 1rem;
}

.wizard-progress--tabs .wizard-progress__step {
    justify-content: space-between;
    min-height: 3rem;
}

.wizard-progress--tabs .wizard-progress__badge {
    background: rgba(143, 15, 15, 0.08);
}

.wizard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.9fr);
    gap: 16px;
    align-items: stretch;
}

.wizard-hero__panel,
.wizard-summary-card,
.wizard-journey-card {
    border-radius: 18px;
    padding: 1rem 1.05rem;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 32%),
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.12), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 243, 236, 0.94));
    border: 1px solid rgba(86, 42, 18, 0.08);
    box-shadow: 0 16px 34px rgba(35, 18, 9, 0.08);
    color: rgba(43, 26, 18, 0.92);
}

.wizard-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #ff6666;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.38), 0 0 10px rgba(255, 102, 102, 0.18);
}

.wizard-hero h1,
.wizard-hero h2 {
    margin-top: 0;
    color: #1f130d;
}

.wizard-highlights,
.wizard-checklist {
    display: grid;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.wizard-highlight,
.wizard-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(250, 246, 240, 0.68));
    border: 1px solid rgba(86, 42, 18, 0.08);
    color: rgba(43, 26, 18, 0.92);
}

.wizard-highlight::before,
.wizard-checklist li::before {
    content: "•";
    color: rgba(143, 15, 15, 0.95);
    font-weight: 900;
    flex-shrink: 0;
}

.wizard-summary-grid {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.wizard-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 246, 240, 0.70));
    border: 1px solid rgba(86, 42, 18, 0.08);
    color: rgba(43, 26, 18, 0.92);
}

.wizard-summary-item strong {
    font-size: 0.95rem;
}

.wizard-overzicht {
    font-size: 0.95em;
}

.wizard-rij {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0;
}

.wizard-label {
    opacity: 0.9;
    color: rgba(43, 26, 18, 0.86);
}

.wizard-waarde {
    font-weight: 600;
    text-align: right;
    color: rgba(43, 26, 18, 0.96);
}

.wizard-blok + .wizard-blok {
    margin-top: 0.2rem;
}

.wizard-detail {
    margin-top: 0.35rem;
}

.wizard-acties {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.wizard-acties--vertical {
    gap: 12px;
}

.wizard-extra-acties {
    display: grid;
    gap: 8px;
}

.wizard-voorwaarden {
    padding: 0.8rem 0.85rem;
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.20), transparent 30%),
        linear-gradient(180deg, rgba(143, 15, 15, 0.08), rgba(199, 154, 45, 0.05));
    border: 1px solid rgba(143, 15, 15, 0.12);
}

.wizard-codeblok {
    margin: 0;
    min-inline-size: 0;
    padding: 1rem 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(86, 42, 18, 0.12);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.26), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 243, 236, 0.94));
}

.wizard-code-titel {
    float: left;
    width: 100%;
    margin: 0 0 0.7rem;
    padding: 0;
    font-weight: 800;
    line-height: 1.2;
    color: rgba(43, 26, 18, 0.95);
}

.wizard-codeblok::after {
    content: "";
    display: table;
    clear: both;
}

.wizard-code-label {
    display: block;
    margin-top: 0;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.wizard-code-input,
.wizard-main .kaart fieldset input[type="text"],
.wizard-main .kaart fieldset input[type="email"],
.wizard-main .kaart fieldset input[type="number"],
.wizard-main .kaart fieldset select,
.wizard-main .kaart fieldset textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(86, 42, 18, 0.16);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(180deg, #ffffff, #fff9f2);
    padding: 0.72rem 0.85rem;
    color: inherit;
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.wizard-main .kaart fieldset input:focus,
.wizard-main .kaart fieldset select:focus,
.wizard-main .kaart fieldset textarea:focus,
.wizard-code-input:focus {
    outline: none;
    border-color: rgba(199, 154, 45, 0.8);
    box-shadow: 0 0 0 3px rgba(199, 154, 45, 0.16);
}

.wizard-code-hint {
    margin-top: 0.55rem;
}

.wizard-sidebar__intro {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.wizard-sidebar__title {
    margin: 0;
    font-size: 1.05rem;
    color: #f7f1e7;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.wizard-sidebar__subtitle {
    margin: 0;
    color: rgba(244, 241, 230, 0.82);
    font-size: 0.9rem;
}

.wizard-sidebar__summary {
    display: grid;
    gap: 0.7rem;
    color: rgba(244, 241, 230, 0.94);
}

.wizard-sidebar .wizard-rij {
    color: inherit;
}

.wizard-sidebar .wizard-label {
    color: rgba(244, 241, 230, 0.74);
}

.wizard-sidebar .wizard-waarde {
    color: #ffffff;
}

.wizard-sidebar .klein,
.wizard-sidebar .wizard-detail {
    color: rgba(244, 241, 230, 0.8);
}

.wizard-sidebar .melding {
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(180deg, rgba(59, 130, 246, 0.20), rgba(37, 99, 235, 0.14));
    border-color: rgba(96, 165, 250, 0.4);
    color: #e9f2ff;
}

.wizard-sidebar .wizard-codeblok {
    color: rgba(43, 26, 18, 0.94);
}

.wizard-sidebar .wizard-codeblok .wizard-code-titel,
.wizard-sidebar .wizard-codeblok .wizard-code-label {
    color: rgba(43, 26, 18, 0.95);
}

.wizard-sidebar .wizard-codeblok .klein,
.wizard-sidebar .wizard-codeblok .wizard-code-hint {
    color: rgba(43, 26, 18, 0.76);
}

.wizard-meldingen {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.wizard-meldingen .melding {
    margin: 0;
}

/* Stap 1 / algemene form helper */
.form-inline-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.form-inline-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.dagdeel-optie {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,243,236,.88));
    border: 1px solid rgba(86, 42, 18, 0.1);
    margin-bottom: 0.65rem;
}

.dagdeel-optie input {
    margin: 0;
}

/* Staples in de wizard */
.tabs {
    margin-top: 0.8rem;
}

.tabs__panel {
    padding-top: 0.2rem;
}

.tabs__panel h2 {
    margin-top: 0.35rem;
}

/* Cards / selecties */
.kostuum-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .kostuum-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.kostuum-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.26), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,241,235,.9));
    border: 1px solid rgba(86, 42, 18, 0.1);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    color: rgba(43, 26, 18, 0.94);
}

.kostuum-card:hover,
.keuze-card:hover,
.optie-kaart:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 28px rgba(35, 18, 9, 0.08);
}

.kostuum-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kostuum-card:has(input:checked) {
    outline: 2px solid rgba(199, 154, 45, 0.78);
    border-color: rgba(199, 154, 45, 0.5);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(180deg, rgba(252,245,225,.96), rgba(238,225,190,.9));
}

.kostuum-card__media {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.03);
    min-height: 160px;
}

.kostuum-card__media img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    display: block;
}

.kostuum-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    opacity: 0.75;
}

.kostuum-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kostuum-card__title {
    font-weight: 800;
    color: rgba(43, 26, 18, 0.96);
}

.kostuum-card__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(180deg, rgba(199, 154, 45, 0.10), rgba(199, 154, 45, 0.06));
    border: 1px solid rgba(199, 154, 45, 0.14);
    font-size: 0.82em;
    color: rgba(43, 26, 18, 0.9);
}

.kostuum-card__price {
    margin-top: auto;
    font-weight: 800;
    text-align: right;
    color: rgba(43, 26, 18, 0.96);
}

.kostuum-card.is-neutral {
    grid-template-rows: 1fr;
}

.kostuum-card.is-neutral .kostuum-card__price {
    text-align: left;
}

.keuze-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.keuze-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.26), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,241,235,.9));
    border: 1px solid rgba(86, 42, 18, 0.1);
    cursor: pointer;
    position: relative;
    color: rgba(43, 26, 18, 0.94);
}

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

.keuze-card.is-selected,
.keuze-card:has(input:checked) {
    outline: 2px solid rgba(199, 154, 45, 0.78);
    border-color: rgba(199, 154, 45, 0.5);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(180deg, rgba(252,245,225,.96), rgba(238,225,190,.9));
}

.keuze-card.is-selected:not(.is-disabled),
.keuze-card:has(input:checked):not(.is-disabled) {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(34, 126, 78, 0.2), 0 18px 34px rgba(18, 38, 28, 0.18);
}

@keyframes kaartKeuzePulse {
    0% { transform: scale(.985); }
    42% { transform: translateY(-5px) scale(1.025); box-shadow: 0 0 0 3px rgba(199,154,45,.22), 0 20px 42px rgba(18,38,28,.22); }
    100% { transform: translateY(-3px) scale(1); }
}

.keuze-card.is-keuze-flash,
.kostuum-card.is-keuze-flash {
    animation: kaartKeuzePulse .42s ease;
}

.keuze-card.is-disabled {
    opacity: 0.78;
    cursor: not-allowed;
    border-color: rgba(176, 41, 41, 0.34);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 30%),
        linear-gradient(180deg, rgba(249,242,239,.94), rgba(229,219,214,.9));
}

.keuze-card.is-disabled .keuze-card__media {
    filter: grayscale(0.28);
    opacity: 0.76;
}

.keuze-card__media {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.03);
    min-height: 160px;
}

.keuze-card__img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    display: block;
}

.keuze-card__img.is-empty {
    height: 180px;
}

.keuze-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.keuze-card__title {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(43, 26, 18, 0.96);
}

.keuze-card__pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 0.18rem 0.52rem;
    border-radius: 999px;
    opacity: 0.98;
    font-weight: 800;
    color: rgba(43, 26, 18, 0.82);
}

.keuze-card__pill--selected {
    color: #14532d;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 126, 78, 0.28);
}

.keuze-card__pill--available {
    color: #4f3b16;
    background: rgba(201, 154, 45, 0.13);
    border: 1px solid rgba(201, 154, 45, 0.22);
}

.keuze-card__pill--unavailable {
    color: #8a1f1f;
    background: rgba(185, 28, 28, 0.12);
    border: 1px solid rgba(185, 28, 28, 0.24);
}

.keuze-card__price {
    margin-top: auto;
    font-weight: 800;
    color: rgba(43, 26, 18, 0.96);
}

.keuze-card__status--bezet {
    color: #b02929;
}

.keuze-card__status {
    margin-right: 0.4rem;
}

.diensten-lijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.dienst-row {
    display: grid;
    grid-template-columns: 1fr 140px 220px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,241,235,.9));
    border: 1px solid rgba(86, 42, 18, 0.1);
    color: rgba(43, 26, 18, 0.94);
}

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

    .dienst-row__price {
        display: flex;
        justify-content: space-between;
    }
}

.dienst-row__title {
    font-weight: 800;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    color: rgba(43, 26, 18, 0.96);
}

.dienst-row__price {
    text-align: right;
    font-weight: 800;
    color: rgba(43, 26, 18, 0.96);
}

.dienst-row__qty {
    text-align: right;
    color: rgba(43, 26, 18, 0.94);
}

.optie-kaart {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,241,235,.9));
    border: 1px solid rgba(86, 42, 18, 0.1);
    cursor: pointer;
    color: rgba(43, 26, 18, 0.94);
}

.optie-kaart__title {
    font-weight: 800;
    display: block;
    margin-bottom: 4px;
    color: rgba(43, 26, 18, 0.96);
}

.sticky {
    padding: 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,241,235,.9));
    border: 1px solid rgba(86, 42, 18, 0.1);
    color: rgba(43, 26, 18, 0.94);
}

.sticky__h {
    font-weight: 900;
    margin-bottom: 10px;
    color: rgba(43, 26, 18, 0.97);
}

.sticky__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(86, 42, 18, 0.08);
    color: rgba(43, 26, 18, 0.93);
}

.sticky__row:last-of-type {
    border-bottom: none;
}

.sticky__note {
    margin-top: 10px;
    opacity: 0.9;
    color: rgba(43, 26, 18, 0.84);
}

.sticky__cta {
    margin-top: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(199, 154, 45, 0.45);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(180deg, rgba(199, 154, 45, 0.14), rgba(199, 154, 45, 0.08));
    cursor: pointer;
    font-weight: 900;
}

.kostuum-bezet-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    color: #c0392b;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.14), transparent 30%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.58));
    border-radius: 50%;
    padding: 6px;
    z-index: 5;
}

.list-errors {
    margin: 0;
    padding-left: 1.1rem;
}

.list-errors li + li {
    margin-top: 0.35rem;
}

.knop--blok {
    width: 100%;
}

/* =========================================================
   Premium compacte schaal
   ========================================================= */

:root {
    --rad: 10px;
    --pad: 14px;
    --knop-font: 13px;
}

[hidden] {
    display: none !important;
}

body {
    font-size: var(--font-size-base, 14px);
    background: transparent;
}

html {
    min-height: 100%;
    background:
        radial-gradient(circle at 15% 0%, rgba(199, 154, 45, 0.12), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(143, 15, 15, 0.08), transparent 28%),
        linear-gradient(180deg, #fffaf5 0%, #f7efe6 42%, #f2e6da 100%);
}

main {
    padding: 12px 0 14px;
}

.kaart {
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.48);
}

.kaart + .kaart {
    margin-top: 10px;
}

h1 {
    margin-bottom: 8px;
}

h2 {
    margin-bottom: 6px;
}

.landing-hero,
.voorwaarden-hero {
    padding: 16px;
    gap: 14px;
}

.landing-title {
    font-size: clamp(1.45rem, 2.35vw, 2.35rem);
    line-height: 1.07;
}

.voorwaarden-hero .landing-title {
    font-size: clamp(1.55rem, 2.5vw, 2.3rem);
}

.landing-lead,
.voorwaarden-lead {
    font-size: .95rem;
    line-height: 1.58;
}

.landing-hero__copy {
    gap: 8px;
}

.landing-hero__aside,
.voorwaarden-aside,
.landing-price-card,
.landing-link-card,
.landing-contact-card,
.voorwaarden-panel,
.voorwaarden-download-card {
    padding: 12px;
    border-radius: 14px;
}

.landing-aside-item,
.voorwaarden-summary li,
.landing-contact-meta .rij,
.landing-mail-card {
    padding: 7px 10px;
    border-radius: 12px;
}

.landing-price-card__price {
    font-size: 1.35rem;
}

.wizard-layout {
    gap: 16px;
}

.wizard-main {
    gap: 14px;
}

.kaart--sidebar {
    padding: 14px;
}

.wizard-progress {
    gap: .5rem;
}

.wizard-progress__step {
    min-height: 2.8rem;
    padding: .58rem .72rem;
    border-radius: 13px;
}

.wizard-progress__index {
    width: 1.55rem;
    height: 1.55rem;
    font-size: .72rem;
}

.wizard-progress__title {
    font-size: .84rem;
}

.wizard-progress__subtitle {
    font-size: .72rem;
}

.wizard-hero {
    gap: 12px;
}

.wizard-hero__panel,
.wizard-summary-card,
.wizard-journey-card {
    padding: .78rem .85rem;
    border-radius: 14px;
}

.wizard-hero h1,
.wizard-hero h2 {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.wizard-highlight,
.wizard-checklist li,
.wizard-summary-item {
    padding: .5rem .62rem;
    border-radius: 12px;
}

.wizard-acties {
    margin-top: 12px;
    gap: 8px;
}

.wizard-codeblok {
    padding: .82rem .78rem .82rem;
    border-radius: 14px;
}

#stap1 fieldset {
    padding: .58rem .68rem .68rem;
    border-radius: 12px;
}

#stap1 fieldset + fieldset {
    margin-top: 0;
}

.kaart--planning {
    padding: 10px 12px;
}

.kaart--planning h2 {
    margin-bottom: 8px;
    font-size: clamp(1.12rem, 1.55vw, 1.34rem);
}

#stap1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
}

#stap1 .form-inline-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 5px;
    align-items: center;
}

#datum_display {
    min-height: 34px;
    height: 34px;
    font-size: .86rem;
    border-radius: 11px;
    padding: .4rem .56rem;
    color: rgba(43, 26, 18, .94);
}

#datum_btn.knop--icoon-groot {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 11px;
    border: 1px solid rgba(108, 78, 10, .68);
    background:
        linear-gradient(180deg, rgba(245, 212, 118, .98), rgba(199, 154, 45, .92));
    box-shadow:
        0 8px 18px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.28);
}

#datum_btn.knop--icoon-groot i {
    font-size: 15px;
    color: rgba(35, 22, 13, .98);
    text-shadow: none;
}

#stap1 .klein {
    margin-top: .36rem;
    font-size: .82rem;
}

.dagdeel-optie {
    padding: .38rem .52rem;
    border-radius: 11px;
    margin-bottom: .34rem;
    min-height: 40px;
    color: rgba(43, 26, 18, .94);
}

.dagdeel-optie strong {
    color: rgba(43, 26, 18, .96);
}

.dagdeel-optie .klein {
    color: rgba(43, 26, 18, .72);
}

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

    #stap1 fieldset + fieldset {
        margin-top: .65rem;
    }
}

.flatpickr-calendar {
    width: 282px;
    border-radius: 14px;
    font-size: 13px;
    box-shadow: 0 18px 46px rgba(0,0,0,.28);
}

.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
    width: 282px;
    min-width: 282px;
    max-width: 282px;
}

.flatpickr-calendar .flatpickr-day {
    max-width: 40px;
    height: 34px;
    line-height: 34px;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    height: 34px;
}

.flatpickr-calendar .flatpickr-current-month {
    padding-top: 5px;
    font-size: 92%;
}

.flatpickr-calendar .flatpickr-weekday {
    font-size: 85%;
}

.wizard-sidebar__summary {
    gap: .55rem;
    padding: .84rem .9rem;
    border-radius: 14px;
    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,.72), transparent 32%),
        radial-gradient(circle at 88% 10%, rgba(199,154,45,.16), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,241,235,.92));
    border: 1px solid rgba(86, 42, 18, .12);
    color: rgba(43, 26, 18, .94);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 12px 28px rgba(0,0,0,.16);
}

.wizard-sidebar__summary .wizard-rij {
    color: rgba(43, 26, 18, .94);
}

.wizard-sidebar__summary .wizard-label {
    color: rgba(43, 26, 18, .72);
}

.wizard-sidebar__summary .wizard-waarde {
    color: rgba(43, 26, 18, .97);
}

.wizard-sidebar__summary .klein,
.wizard-sidebar__summary .wizard-detail {
    color: rgba(43, 26, 18, .76);
}

.wizard-sidebar__summary hr {
    border-color: rgba(86, 42, 18, .12);
}

.kostuum-grid,
.keuze-grid {
    gap: 9px;
}

.kostuum-card,
.keuze-card,
.dienst-row,
.optie-kaart,
.sticky {
    padding: 10px;
    border-radius: 13px;
}

.kostuum-card__media,
.keuze-card__media,
.kostuum-card__media img,
.keuze-card__img,
.keuze-card__img.is-empty,
.kostuum-card__placeholder {
    min-height: 135px;
    height: 150px;
}

.knop,
.knop-sec {
    min-height: 34px;
}

.knop--groot {
    padding: 10px 16px;
    font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    padding: 7px 9px;
}

/* =========================================================
   Thema-oppervlakken: publieke pagina's consistent aansturen
   ========================================================= */

.faq-hero,
.faq-section,
.faq-contact,
.contact-hero,
.contact-section,
.landing-section,
.voorwaarden-hero,
.voorwaarden-shell.landing-section,
.voorwaarden-samenvatting.landing-section {
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--pearl-highlight) 10%, transparent), transparent 32%),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent-gold) 12%, transparent), transparent 28%),
        linear-gradient(180deg, var(--surface-dark-top), var(--surface-dark-bottom)) !important;
    color: var(--surface-dark-text) !important;
    border-radius: var(--section-radius) !important;
}

.faq-hero p,
.faq-section__head p,
.faq-contact p,
.contact-hero p,
.contact-section > p,
.landing-section__intro,
.landing-section > p:not([class]),
.voorwaarden-lead {
    color: var(--surface-dark-muted) !important;
}

.faq-item,
.faq-metric,
.faq-contact__box,
.contact-panel,
.contact-form,
.contact-info__row,
.voorwaarden-panel,
.voorwaarden-download-card,
.voorwaarden-summary-box .landing-aside-item,
.landing-contact-card,
.dagdeel-optie,
.wizard-sidebar__summary,
.kostuum-card,
.keuze-card,
.dienst-row,
.optie-kaart {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--pearl-highlight) 42%, transparent), transparent 31%),
        linear-gradient(145deg, var(--surface-light-top), var(--surface-light-bottom)) !important;
    color: var(--surface-light-text) !important;
    border-radius: var(--card-radius) !important;
}

.faq-item *,
.faq-metric *,
.faq-contact__box *,
.contact-panel *,
.contact-form *,
.contact-info__row *,
.voorwaarden-panel *,
.voorwaarden-download-card *,
.voorwaarden-summary-box .landing-aside-item *,
.landing-contact-card *,
.dagdeel-optie *,
.wizard-sidebar__summary *,
.kostuum-card *,
.keuze-card *,
.dienst-row *,
.optie-kaart * {
    color: inherit;
}

.faq-item__summary-text span,
.faq-item__body,
.faq-item__note,
.faq-mini-table td,
.contact-note,
.contact-info__row span,
.landing-contact-card p,
.dagdeel-optie .klein,
.wizard-sidebar__summary .klein {
    color: var(--surface-light-muted) !important;
}

.faq-item__summary-text strong,
.faq-mini-table th,
.contact-info__row strong,
.kostuum-card strong,
.keuze-card strong,
.dienst-row strong,
.optie-kaart strong {
    color: var(--surface-light-text) !important;
}

.knop,
a.knop,
button.knop,
.knop-sec,
a.knop-sec,
button.knop-sec {
    color: var(--knop-fg) !important;
}

.knop:hover,
a.knop:hover,
button.knop:hover,
.knop-sec:hover,
a.knop-sec:hover,
button.knop-sec:hover {
    color: var(--knop-fg-hover) !important;
}

/* Stap 3: selectie compact en voorspelbaar op desktop */
.wizard-hero--stap3 {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .62fr);
    gap: 10px;
    padding: 10px;
}

.wizard-hero--stap3 .wizard-hero__panel,
.wizard-hero--stap3 .wizard-summary-card {
    padding: .62rem .72rem;
    border-radius: 12px;
}

.wizard-hero--stap3 .wizard-kicker {
    margin-bottom: .18rem;
    font-size: .68rem;
}

.wizard-hero--stap3 h1,
.wizard-hero--stap3 h2 {
    font-size: clamp(1.16rem, 1.45vw, 1.48rem);
    line-height: 1.08;
    margin-bottom: .36rem;
}

.wizard-hero--stap3 p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.42;
}

.wizard-hero--stap3 .wizard-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .38rem;
    margin-top: .55rem;
}

.wizard-hero--stap3 .wizard-highlight,
.wizard-hero--stap3 .wizard-summary-item {
    padding: .38rem .48rem;
    border-radius: 10px;
    font-size: .82rem;
}

.wizard-hero--stap3 .wizard-summary-grid {
    gap: .38rem;
}

.stap3-details {
    padding: 12px 14px;
}

.stap3-details > h2 {
    margin-bottom: .55rem;
    font-size: clamp(1.16rem, 1.55vw, 1.42rem);
}

.stap3-details .wizard-progress--tabs {
    gap: .46rem;
    margin-bottom: .62rem;
}

.stap3-details .wizard-progress--tabs .wizard-progress__step {
    min-height: 2.35rem;
    padding: .42rem .5rem;
    color: var(--surface-light-text) !important;
}

.stap3-details .tabs__panel h2 {
    font-size: clamp(1.18rem, 1.6vw, 1.45rem);
    margin-bottom: .25rem;
}

.stap3-details .tabs__panel > .klein {
    color: var(--surface-dark-muted) !important;
    margin-bottom: .65rem;
}

.stap3-details .keuze-grid {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 9px;
    margin-top: 8px;
}

.stap3-details .keuze-card,
.stap3-details .kostuum-card {
    min-height: 0;
    gap: 8px;
    padding: 9px;
    border-radius: 13px;
    color: var(--surface-light-text) !important;
}

.stap3-details .keuze-card__media,
.stap3-details .kostuum-card__media {
    min-height: 118px;
    height: 128px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 42%),
        rgba(255,255,255,.42);
}

.stap3-details .keuze-card__img,
.stap3-details .keuze-card__img.is-empty,
.stap3-details .kostuum-card__media img,
.stap3-details .kostuum-card__placeholder {
    height: 128px;
    min-height: 128px;
    object-fit: contain;
}

.stap3-details .keuze-card__body,
.stap3-details .kostuum-card__body {
    gap: 4px;
}

.stap3-details .keuze-card__title,
.stap3-details .kostuum-card__title {
    color: var(--surface-light-text) !important;
    font-size: .92rem;
    line-height: 1.22;
}

.stap3-details .keuze-card__meta,
.stap3-details .keuze-card__pill,
.stap3-details .kostuum-card__tags,
.stap3-details .tag {
    color: var(--surface-light-muted) !important;
}

.stap3-details .keuze-card__pill--selected {
    color: #14532d !important;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 126, 78, 0.28);
}

.stap3-details .keuze-card__pill--available {
    color: #4f3b16 !important;
    background: rgba(201, 154, 45, 0.13);
    border-color: rgba(201, 154, 45, 0.22);
}

.stap3-details .keuze-card__pill--unavailable {
    color: #8a1f1f !important;
    background: rgba(185, 28, 28, 0.12);
    border-color: rgba(185, 28, 28, 0.24);
}

.stap3-details .keuze-card__price,
.stap3-details .kostuum-card__price {
    color: var(--surface-light-text) !important;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .wizard-hero--stap3,
    .wizard-hero--stap3 .wizard-highlights {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Mobiel gedrag
   ========================================================= */

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

    .wizard-sidebar {
        position: static;
        order: 2;
    }

    .wizard-main {
        order: 1;
    }

    .wizard-hero {
        grid-template-columns: 1fr;
    }

    .wizard-progress {
        grid-template-columns: 1fr;
    }

    .wizard-progress--tabs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .form-inline-row {
        flex-direction: column;
    }
}

/* Verdere verfijning: compactere stap 1 en consistente premium pagina-opbouw */
#stap1 .form-inline-row {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 5px;
}

#datum_display {
    min-height: 34px;
    height: 34px;
    font-size: .86rem;
    padding: .4rem .56rem;
}

#datum_btn.knop--icoon-groot {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border: 1px solid rgba(108, 78, 10, .68);
    background:
        linear-gradient(180deg, rgba(245, 212, 118, .98), rgba(199, 154, 45, .92));
}

#datum_btn.knop--icoon-groot i {
    font-size: 15px;
    color: rgba(35, 22, 13, .98);
    text-shadow: none;
}

.dagdeel-optie {
    padding: .34rem .48rem;
    border-radius: 10px;
    margin-bottom: .3rem;
    min-height: 38px;
}

.dagdeel-optie strong {
    font-size: .9rem;
    line-height: 1.2;
}

.dagdeel-optie .klein {
    font-size: .79rem;
    line-height: 1.35;
}

.faq-page,
.contact-page {
    gap: .72rem;
}

.faq-hero,
.contact-hero,
.voorwaarden-hero,
.faq-section,
.contact-section,
.voorwaarden-shell.landing-section,
.voorwaarden-samenvatting.landing-section {
    border-radius: calc(var(--section-radius) - 1px);
    padding: .9rem .95rem;
}

.faq-item,
.faq-contact__box,
.contact-panel,
.contact-form,
.contact-info__row,
.voorwaarden-panel,
.voorwaarden-download-card {
    border-radius: calc(var(--card-radius) - 1px);
}

/* Dynamische dagdelen: compacte selectie in stap 1 */
.wizard-time-card .wizard-fieldset-compact {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(42, 31, 20, .18);
    background: rgba(255, 252, 247, .74);
}
.wizard-time-card .wizard-fieldset-compact legend {
    padding: 0 6px;
    font-weight: 800;
    color: #2a1f14;
}
.wizard-time-card .form-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wizard-time-card .form-inline-grow {
    min-width: 0;
    flex: 1;
}
.wizard-calendar-btn {
    width: 48px;
    min-width: 48px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd761;
    border-color: rgba(255, 215, 97, .88);
    background: radial-gradient(circle at 35% 30%, rgba(255, 230, 140, .18), rgba(0, 0, 0, .92));
    box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 0 1px rgba(255,215,97,.18) inset;
}
.dagdeel-list--compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.wizard-time-card .dagdeel-optie {
    min-height: 54px;
    padding: 10px 12px;
}
.wizard-custom-time-toggle {
    margin-bottom: 10px;
}
.wizard-custom-time {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.wizard-custom-time[hidden] {
    display: none !important;
}
@media (max-width: 720px) {
    .wizard-custom-time {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* EXTRA RESPONSIVE ALGEMEEN                                                  */
/* ========================================================================== */

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

@media (max-width: 980px) {
    .landing-hero,
    .voorwaarden-shell,
    .landing-contact-grid {
        grid-template-columns: 1fr;
    }

    .landing-grid-steps,
    .landing-feature-grid,
    .landing-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-price-grid {
        grid-template-columns: 1fr;
    }

    .landing-aside-item,
    .voorwaarden-summary li,
    .landing-contact-meta .rij,
    .contact-info__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-aside-item span,
    .voorwaarden-summary span,
    .landing-contact-meta .rij span,
    .contact-info__row span {
        text-align: left;
        width: 100%;
    }

    .contact-actions,
    .actions,
    .knoppen,
    .knoppen-rij {
        align-items: stretch;
    }

    .contact-actions .knop,
    .contact-actions .knop-sec {
        width: 100%;
        justify-content: center;
    }

    .portaal-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .header {
        padding: 6px 0 8px;
    }

    .header img.logo {
        max-height: 96px;
        margin-bottom: 4px;
    }

    .nav {
        flex-direction: column;
        align-items: stretch;
        padding: 0 10px 6px;
        gap: 6px;
    }

    .nav-left,
    .nav-right {
        width: 100%;
        justify-content: center;
    }

    .nav-link {
        width: 100%;
        min-height: 42px;
        padding: 9px 12px;
    }

    .nav-account {
        width: 100%;
    }

    .nav-account-toggle,
    .nav-link-account {
        width: 100%;
    }

    .nav-account-menu {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 6px;
        box-shadow: 0 12px 24px rgba(0,0,0,.45);
    }

    .wrap {
        padding: 0 12px;
    }

    main {
        padding: 12px 0 14px;
    }

    .kaart,
    .landing-hero,
    .landing-section,
    .voorwaarden-panel,
    .voorwaarden-hero,
    .contact-hero,
    .contact-section,
    .faq-hero,
    .faq-section,
    .faq-contact {
        padding: 12px;
    }

    .actions,
    .knoppen,
    .knoppen-rij {
        flex-direction: column;
        gap: 7px;
        width: 100%;
    }

    .actions .knop,
    .actions .knop-sec,
    .knoppen .knop,
    .knoppen .knop-sec,
    .knoppen-rij .knop,
    .knoppen-rij .knop-sec {
        width: 100%;
        justify-content: center;
    }

    .landing-chips,
    .voorwaarden-chips {
        width: 100%;
    }

    .landing-chip,
    .voorwaarden-chip {
        width: 100%;
        justify-content: center;
    }

    .landing-aside-item,
    .voorwaarden-summary li,
    .landing-contact-meta .rij,
    .contact-info__row {
        padding: 8px 10px;
    }

    .voorwaarden-summary-box {
        gap: 10px;
    }

    .voorwaarden-summary-box .landing-aside-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 12px;
    }

    .voorwaarden-summary-box .landing-aside-item strong,
    .voorwaarden-summary-box .landing-aside-item span {
        width: 100%;
        text-align: left;
        line-height: 1.35;
        white-space: normal;
    }

    .landing-grid-steps,
    .landing-feature-grid,
    .landing-price-grid,
    .landing-link-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .nav-link {
        min-height: 44px;
        font-size: 13px;
    }

    .nav-account-name {
        max-width: 100%;
    }

    .landing-table-wrap {
        margin-left: -2px;
        margin-right: -2px;
    }

    .landing-table {
        font-size: 13px;
    }

    .landing-table th,
    .landing-table td {
        padding: 8px 10px;
    }

    .tabel {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .portaal-tiles {
        grid-template-columns: 1fr;
    }

    .portaal-tiles .portaal-tile .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .portaal-tiles .portaal-tile .actions .knop,
    .portaal-tiles .portaal-tile .actions .knop-sec {
        width: 100%;
        justify-content: center;
    }
}