/* ============================================================
   KANSŌ — aanvraagformulier
   Gebruikt de tokens uit kanso-home.css. Alles binnen .anfrage,
   zodat Flatsome's formulierstijl er niet doorheen komt.
   ============================================================ */

.anfrage{padding:var(--section-y-lg) 0;background:var(--surface-page);color:var(--text-primary);
     font:var(--type-body)}
.anfrage :where(h2,h3,p,ul,li,fieldset,legend,label,input,select,textarea){margin:0;padding:0}
.anfrage :where(button:not(.btn)){margin:0;padding:0}
.anfrage .btn{margin:0;text-decoration:none}
.anfrage :where(ul){list-style:none}
.anfrage :where(fieldset){border:0;min-width:0}
.anfrage :where(h3){font-weight:inherit}
.anfrage :where(a){color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.anfrage :where(input,select,textarea){font:inherit;color:inherit;background:none;border:0;
     border-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;max-width:100%}
.anfrage :where(button:not(.btn)){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* [hidden] moet altijd winnen van display:grid/inline-flex hieronder. */
.anfrage [hidden]{display:none!important}
.anfrage :where(input[type=date])::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}

/* ---------- Kop ---------- */
.anfrage__head{max-width:64ch;margin-bottom:var(--head-gap)}
.anfrage__head .eyebrow{display:block;margin-bottom:var(--space-4)}
.anfrage__head h2{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--kanso-ink);
     margin-bottom:var(--space-4);max-width:18ch}
.anfrage__head p{font:var(--type-body-lg);color:var(--text-body)}

/* Sneltoets onder de intro, voor wie al weet wat hij wil. */
.anfrage__kort{font:var(--type-body-sm);color:var(--text-soft);margin-top:var(--space-4)}
.anfrage__kort a{color:var(--text-link)}

/* ---------- Bedankt-scherm — vervangt het formulier ---------- */
.anfrage__danke{max-width:640px;background:var(--surface-card);border:1px solid var(--border-faint);
     border-radius:var(--radius-xl);padding:var(--space-8) var(--space-8) var(--space-7);
     box-shadow:var(--shadow-sm)}
.anfrage__vink{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
     background:var(--accent-signature);margin-bottom:var(--space-5);
     background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
     background-size:24px;background-position:center;background-repeat:no-repeat}
.anfrage__danke>p{font:var(--type-body);color:var(--text-body);margin-bottom:var(--space-6);max-width:56ch}
.anfrage__danach{display:grid;gap:var(--space-4);counter-reset:stap;
     padding:var(--space-5) 0;border-top:1px solid var(--border-faint);
     border-bottom:1px solid var(--border-faint);margin-bottom:var(--space-6)}
.anfrage__danach li{counter-increment:stap;display:grid;gap:2px;padding-left:38px;position:relative}
.anfrage__danach li::before{content:counter(stap);position:absolute;left:0;top:0;
     width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
     background:var(--kanso-sand);color:var(--kanso-ink);font:var(--type-body-sm);font-weight:500}
.anfrage__danach b{font-weight:500;color:var(--kanso-ink);font-size:var(--fs-300)}
.anfrage__danach span{font:var(--type-body-sm);color:var(--text-body)}
.anfrage__danke-kontakt{font:var(--type-body-sm);color:var(--text-body);margin-bottom:var(--space-6)}
.anfrage__danke .btn{cursor:pointer}

/* ---------- Melding na versturen ---------- */
.anfrage__note{display:grid;gap:6px;padding:var(--space-5) var(--space-6);border-radius:var(--radius-md);
     margin-bottom:var(--space-7);border:1px solid var(--border-subtle);background:var(--surface-card)}
.anfrage__note b{font-weight:600;color:var(--kanso-ink)}
.anfrage__note span{font:var(--type-body-sm);color:var(--text-body)}
.anfrage__note--ok{border-color:rgba(149,152,137,.5);background:rgba(149,152,137,.12)}
.anfrage__note--err{border-color:rgba(164,120,100,.5);background:rgba(164,120,100,.10)}

/* ---------- Verdeling ---------- */
.anfrage__layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-9);
     align-items:start}
.anfrage__form{min-width:0;display:grid;gap:var(--space-6)}

/* Honeypot — buiten beeld, maar niet display:none (bots kijken daarnaar). */
.anfrage__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Stappenbalk ---------- */
.anfrage__progress{display:flex;gap:var(--space-3);flex-wrap:wrap;padding:0 0 var(--space-2);
     border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-2)}
.anfrage__progress li{display:flex;align-items:center;gap:10px;font:var(--type-body-sm);
     color:var(--text-muted);padding:0 var(--space-4) var(--space-4) 0;cursor:pointer;
     transition:color var(--duration-base)}
.anfrage__progress li span{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
     border-radius:50%;border:1px solid var(--border-subtle);font-size:var(--fs-200);
     transition:background var(--duration-base),color var(--duration-base),border-color var(--duration-base)}
.anfrage__progress li.is-done{color:var(--text-secondary)}
.anfrage__progress li.is-done span{background:var(--kanso-sand);border-color:transparent;color:var(--kanso-ink)}
.anfrage__progress li.is-active{color:var(--kanso-ink);font-weight:500}
.anfrage__progress li.is-active span{background:var(--accent-signature);border-color:transparent;color:#fff}

/* ---------- Panelen ---------- */
.anfrage__panel{display:grid;gap:var(--space-6)}
.js-anfrage .anfrage__panel{display:none}
.js-anfrage .anfrage__panel.is-active{display:grid;animation:anfrageIn var(--duration-slow) var(--ease-standard)}
@keyframes anfrageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Blok ---------- */
.fset{background:var(--surface-card);border:1px solid var(--border-faint);border-radius:var(--radius-lg);
     padding:var(--space-6);box-shadow:var(--shadow-sm);display:grid;gap:var(--space-4)}
.fset--inset{background:var(--kanso-sand);border-color:transparent;box-shadow:none}
.fset--accent{background:var(--surface-dark);border-color:transparent;color:var(--text-on-dark)}
.fset--accent .fset__legend{color:var(--text-on-dark)}
.fset--accent .fset__hint{color:var(--text-on-dark-soft)}
.fset--accent .field__label{color:var(--text-on-dark)}
.fset--accent .field__hint{color:var(--text-on-dark-soft)}
.fset--accent select{background:rgba(243,239,231,.10);border-color:var(--border-on-dark);color:var(--text-on-dark)}
.fset--accent select option{color:var(--kanso-ink)}
.fset--accent .chip span{background:transparent;border-color:var(--border-on-dark);color:var(--text-on-dark)}
.fset--accent .chip:hover span{border-color:var(--kanso-sand)}
.fset--accent .chip input:checked+span{background:var(--kanso-sugar-swizzle);color:var(--kanso-ink);
     border-color:transparent;font-weight:500}
.fset--accent a{color:var(--kanso-sand)}

.fset__legend{font:var(--type-heading-4);letter-spacing:var(--ls-h4);color:var(--kanso-ink)}
.fset__hint{font:var(--type-body-sm);color:var(--text-body);max-width:70ch;margin-top:-6px}
/* Kleine illustratie naast de uitleg — niet groter dan nodig. */
.fset__intro{display:flex;gap:var(--space-5);align-items:flex-start}
.fset__intro .fset__hint{flex:1 1 auto}
.fset__mini{flex:0 0 148px;margin:0;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
     box-shadow:0 0 0 1px var(--border-faint)}
.fset__mini img{display:block;width:100%;height:100%;object-fit:cover}
.fset__foot{font:var(--type-caption);color:var(--text-muted);max-width:78ch;
     padding-top:var(--space-3);border-top:1px solid var(--border-faint)}

/* ---------- Keuzekaarten ---------- */
.opts{display:grid;gap:10px}
.opts--cards{gap:8px}
.opt{position:relative;display:flex;align-items:center;gap:var(--space-4);cursor:pointer;
     padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
     background:var(--kanso-white);transition:border-color var(--duration-base),
     background var(--duration-base),box-shadow var(--duration-base)}
.opt:hover{border-color:var(--kanso-simply-taupe)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt__mark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--kanso-simply-taupe);
     display:grid;place-items:center;transition:border-color var(--duration-base)}
.opt__mark--box{border-radius:6px}
.opt__mark::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent-signature);
     transform:scale(0);transition:transform var(--duration-base) var(--ease-standard)}
.opt__mark--box::after{border-radius:2px}
.opt__body{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.opt__body b{font-weight:500;color:var(--kanso-ink);font-size:var(--fs-400)}
.opt__body small{font:var(--type-body-sm);color:var(--text-body)}
.opt__price{flex:0 0 auto;font:var(--type-body-sm);font-weight:500;color:var(--kanso-mocha-mousse);
     white-space:nowrap}
.opt:has(input:checked){border-color:var(--accent-signature);background:var(--kanso-sugar-swizzle);
     box-shadow:var(--shadow-sm)}
.opt input:checked~.opt__mark,.opt:has(input:checked) .opt__mark{border-color:var(--accent-signature)}
.opt input:checked~.opt__mark::after{transform:scale(1)}
.opt input:focus-visible~.opt__mark{outline:2px solid var(--accent-primary);outline-offset:3px}

/* ---------- Chips ---------- */
.opts--chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;padding:10px var(--space-4);border-radius:var(--radius-pill);
     border:1px solid var(--border-subtle);background:var(--kanso-white);font:var(--type-body-sm);
     color:var(--text-secondary);transition:background var(--duration-base),color var(--duration-base),
     border-color var(--duration-base)}
.chip:hover span{border-color:var(--kanso-simply-taupe)}
.chip input:checked+span{background:var(--accent-signature);border-color:transparent;color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--accent-primary);outline-offset:3px}
.chip--wide span{width:100%;justify-content:center}
/* De uitweg ("noch offen") mag er zijn, maar hoeft niet te concurreren
   met de echte keuzes: rustiger, en achteraan in de rij. */
.chip--offen span{color:var(--text-muted);border-style:dashed}
.chip--offen:hover span{color:var(--text-secondary)}
.chip--offen input:checked+span{color:#fff;border-style:solid}
.fset--accent .chip--offen span{color:var(--text-on-dark-soft)}
.fset--accent .chip--offen input:checked+span{color:var(--kanso-ink)}

/* ---------- Velden ---------- */
.field{display:grid;gap:8px;min-width:0}
.field__label{font:var(--type-body-sm);font-weight:500;color:var(--kanso-ink)}
.field__label em{font-style:normal;font-weight:400;color:var(--text-muted)}
.field__hint{font:var(--type-caption);color:var(--text-muted)}
/* Flatsome legt element-selectors een vaste hoogte op (height:2.507em).
   Die knipt onze velden af, dus zetten we hem hier expliciet terug. */
.anfrage input[type=text],.anfrage input[type=email],.anfrage input[type=tel],
.anfrage input[type=url],.anfrage input[type=date],.anfrage input[type=number],
.anfrage select,.anfrage textarea{
     width:100%;height:auto;min-height:52px;padding:13px var(--space-4);
     border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
     background:var(--kanso-white);color:var(--kanso-ink);
     font:400 var(--fs-400)/1.35 var(--font-sans);margin:0;
     transition:border-color var(--duration-base),box-shadow var(--duration-base)}
.anfrage textarea{min-height:132px}
.anfrage textarea{resize:vertical;line-height:var(--lh-relaxed)}
.anfrage select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E514D' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
     background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
     padding-right:44px;cursor:pointer}
.anfrage :is(input,select,textarea):focus{outline:none;border-color:var(--accent-signature);
     box-shadow:0 0 0 3px rgba(76,79,71,.12)}
.anfrage :is(input,textarea)::placeholder{color:var(--kanso-muted)}
.anfrage :is(input,select,textarea):user-invalid{border-color:#B4674F;box-shadow:0 0 0 3px rgba(180,103,79,.12)}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}

/* ---------- Overzicht in stap 3 ---------- */
.anfrage__summary{background:var(--kanso-sand);border-radius:var(--radius-md);padding:var(--space-5)}
.anfrage__summary b{display:block;font:var(--type-body-sm);font-weight:600;color:var(--kanso-ink);
     margin-bottom:10px}
.anfrage__summary ul{display:grid;gap:6px}
.anfrage__summary li{font:var(--type-body-sm);color:var(--text-secondary);
     padding-left:16px;position:relative}
.anfrage__summary li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
     border-radius:50%;background:var(--kanso-mocha-mousse)}
.anfrage__summary li b{display:inline;font-weight:500;margin:0}

/* ---------- Toestemming ---------- */
.consent{display:flex;gap:12px;align-items:flex-start;font:var(--type-body-sm);color:var(--text-body);
     background:var(--surface-card);border:1px solid var(--border-faint);border-radius:var(--radius-md);
     padding:var(--space-4) var(--space-5);cursor:pointer}
.consent input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;border:1.5px solid var(--kanso-simply-taupe);
     border-radius:5px;cursor:pointer;background-repeat:no-repeat;background-position:center;
     background-size:12px;transition:background-color var(--duration-base),border-color var(--duration-base)}
.consent input:checked{background-color:var(--accent-signature);border-color:var(--accent-signature);
     background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.consent input:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px}

/* ---------- Knoppenrij ---------- */
.anfrage__nav{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
     padding-top:var(--space-2)}
.anfrage__nav .btn{cursor:pointer}
.anfrage__nav-note{font:var(--type-caption);color:var(--text-muted);flex:1 1 200px}

/* ---------- Zijkolom ---------- */
.anfrage__aside{position:sticky;top:110px;display:grid;gap:var(--space-5)}
.aside-card{background:var(--surface-dark);color:var(--text-on-dark);border-radius:var(--radius-lg);
     padding:var(--space-6);display:grid;gap:10px}
.aside-card .eyebrow{color:var(--kanso-sand)}
.aside-card__lead{font:var(--type-body-sm);color:var(--text-on-dark-soft);margin-bottom:6px}
.aside-card__big{font:var(--type-body-lg);color:var(--text-on-dark)!important;text-decoration:none!important;
     transition:color var(--duration-base)}
.aside-card__big:hover{color:var(--kanso-sand)!important}
.aside-card__adr{font:var(--type-body-sm);color:var(--text-on-dark-soft);
     margin-top:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--border-on-dark)}
.aside-list{display:grid;gap:12px;padding:0 var(--space-2)}
.aside-list li{display:flex;gap:12px;font:var(--type-body-sm);color:var(--text-secondary);
     align-items:flex-start}
.aside-list li::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:3px;border-radius:50%;
     background:var(--kanso-sand);
     background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F322E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
     background-size:11px;background-position:center;background-repeat:no-repeat}


/* ---------- Modelkaarten met beeld ---------- */
.opts--kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
.kaart{position:relative;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
     border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--kanso-white);
     transition:border-color var(--duration-base),box-shadow var(--duration-base),
     transform var(--duration-base) var(--ease-standard)}
.kaart:hover{border-color:var(--kanso-simply-taupe);transform:translateY(-2px)}
.kaart input{position:absolute;opacity:0;width:1px;height:1px}
.kaart__beeld{display:block;background:var(--kanso-surface);aspect-ratio:3/2;overflow:hidden}
.kaart__beeld img{width:100%;height:100%;object-fit:cover;display:block}
.kaart__tekst{display:grid;gap:2px;padding:var(--space-4);position:relative}
.kaart__tekst b{font-weight:500;color:var(--kanso-ink);font-size:var(--fs-300);padding-right:24px}
.kaart__tekst small{font:var(--type-caption);color:var(--text-body)}
.kaart__tekst em{font:var(--type-caption);font-style:normal;color:var(--kanso-mocha-mousse);margin-top:4px}
/* Vinkje rechtsboven in de tekstbalk */
.kaart__tekst::after{content:"";position:absolute;top:var(--space-4);right:var(--space-4);
     width:18px;height:18px;border-radius:50%;border:1.5px solid var(--kanso-simply-taupe);
     background-repeat:no-repeat;background-position:center;background-size:11px;
     transition:background-color var(--duration-base),border-color var(--duration-base)}
.kaart:has(input:checked){border-color:var(--accent-signature);box-shadow:var(--shadow-sm)}
.kaart:has(input:checked) .kaart__tekst::after{background-color:var(--accent-signature);
     border-color:var(--accent-signature);
     background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.kaart:has(input:focus-visible){outline:2px solid var(--accent-primary);outline-offset:3px}
.kaart--offen{grid-column:1/-1;flex-direction:row;align-items:center;
     background:var(--kanso-sugar-swizzle);border-style:dashed}
.kaart--offen .kaart__tekst{flex:1;padding:var(--space-4) var(--space-5)}
.kaart--offen .kaart__tekst::after{top:50%;margin-top:-9px}

/* ---------- Materiaalmonsters ----------
   Kleur, hout en Dekton delen bewust dezelfde vorm: één tegel van
   72 px met de naam eronder. Drie verschillende vormen naast elkaar
   maakte het onrustig. */
.opts--muster{display:flex;flex-wrap:wrap;gap:10px}
.muster{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;
     gap:8px;width:88px;text-align:center}
.muster input{position:absolute;opacity:0;width:1px;height:1px}
.muster__beeld{display:grid;place-items:center;width:72px;height:72px;overflow:hidden;
     border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--border-subtle);
     transition:box-shadow var(--duration-base),transform var(--duration-base) var(--ease-standard),
                background-color var(--duration-slow) var(--ease-standard)}
.muster__beeld img{width:100%;height:100%;object-fit:cover;display:block}
.muster__naam{font:var(--type-caption);color:var(--text-secondary);line-height:1.3}
.muster:hover .muster__beeld{transform:scale(1.04)}
.muster:has(input:checked) .muster__beeld{box-shadow:0 0 0 2px var(--accent-signature),
     0 0 0 5px var(--kanso-sugar-swizzle)}
.muster:has(input:checked) .muster__naam{color:var(--kanso-ink);font-weight:500}
.muster:has(input:focus-visible) .muster__beeld{outline:2px solid var(--accent-primary);outline-offset:3px}

/* Lakkleuren: vlakke kleur met een lichte glans, zodat het als
   gepoedercoat staal leest en niet als een gekleurd vlak. */
.muster--kleur .muster__beeld,.muster--stahl .muster__beeld{
     background-image:linear-gradient(158deg,rgba(255,255,255,.20),rgba(0,0,0,.14))}

/* "Noch offen" heeft geen monster — wel hetzelfde vakje, zodat alle
   namen op dezelfde hoogte staan. */
.muster--leer .muster__beeld{background:var(--kanso-white);box-shadow:none;
     border:1px dashed var(--kanso-simply-taupe)}
.muster--leer .muster__beeld::after{content:"—";color:var(--text-muted);font-size:var(--fs-500)}
.muster--leer:hover .muster__beeld{transform:none;border-color:var(--kanso-411c)}
.muster--leer:has(input:checked) .muster__beeld{border-style:solid;
     border-color:var(--accent-signature);background:var(--kanso-sugar-swizzle);
     box-shadow:0 0 0 1px var(--accent-signature)}

/* Zonder hout is de bekleding gepoedercoat staal in de kleur van het
   frame. --korpus-kleur wordt door het script gezet. */
.muster--stahl .muster__beeld{background-color:var(--korpus-kleur,var(--kanso-white))}
.muster--stahl .muster__beeld::after{content:"—";color:var(--text-muted);font-size:var(--fs-500)}
.anfrage.heeft-korpus .muster--stahl .muster__beeld::after{content:none}

.aside-note{font:var(--type-caption);color:var(--text-soft);padding:0 var(--space-2)}
.aside-note a{color:var(--text-link)}

/* ---------- Smal ---------- */
@media (max-width:1080px){
  .anfrage__layout{grid-template-columns:1fr;gap:var(--space-7)}
  .anfrage__aside{position:static;grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width:760px){
  .anfrage{padding:var(--section-y) 0}
  .anfrage__head h2{font:var(--type-heading-3);letter-spacing:var(--ls-h3)}
  .anfrage__aside{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .anfrage__danke{padding:var(--space-6) var(--space-5)}
  .fset{padding:var(--space-5);border-radius:var(--radius-md)}
  .fset__intro{flex-direction:column-reverse;gap:var(--space-4)}
  .fset__mini{flex:0 0 auto;width:100%;max-width:220px;aspect-ratio:16/10}
  .opt{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px var(--space-4);align-items:start}
  .opt__mark{margin-top:2px}
  .opt__price{grid-column:2;justify-self:start}
  .anfrage__progress{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .anfrage__progress li{flex-direction:column;text-align:center;padding:0 0 var(--space-4);
     font-size:var(--fs-200);gap:6px}
  .anfrage__progress li span{width:23px;height:23px;font-size:11px}
  .opts--kaarten{grid-template-columns:1fr 1fr;gap:8px}
  .kaart__tekst{padding:var(--space-3)}
  .muster{width:78px}
  .muster__beeld{width:64px;height:64px}
  .anfrage__nav .btn{flex:1 1 auto;justify-content:center}
  .anfrage__nav-note{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  .js-anfrage .anfrage__panel.is-active{animation:none}
}