@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap");

.page--keuzehulp{--font-display:"Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif}

/* ========================================
   PAGE SHELL
   ======================================== */
.page--keuzehulp{background:linear-gradient(180deg, #fff9f2 0%, #fdf8f2 100%)}
/* global.css reserves 7rem here for the accommodation sticky bar; this page has none. */
.page--keuzehulp #main{display:flex;flex-direction:column;padding-bottom:0}

/* ========================================
   STEP
   ======================================== */
main > section{display:flex;flex-direction:column;min-height:calc(100dvh - var(--header-h));padding-block:clamp(1.5rem, 4vw, 3rem) 3rem;animation:stepFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both}

#keuzehulp-grid,
#keuzehulp-who-form{width:100%}

@keyframes stepFadeIn{from{opacity:0;transform:translateY(20px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ========================================
   HEADER
   ======================================== */
main header{display:flex;align-items:flex-start;gap:0.875rem;padding:0 1.25rem;margin-bottom:clamp(1.5rem, 3vw, 2.5rem);text-align:left}
@media (min-width: 768px){
main header{display:block;padding-inline:0;text-align:center}
}

#keuzehulp-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:3rem;height:3rem;background:linear-gradient(135deg, #ffc837 0%, #ff8008 100%);border-radius:1rem;transform:rotate(-5deg);box-shadow:0 6px 14px var(--color-primary-shadow-soft);transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}
@media (min-width: 768px){
#keuzehulp-badge{width:4rem;height:4rem;margin:0 auto 1.25rem;border-radius:1.25rem;box-shadow:0 10px 20px var(--color-primary-shadow-soft)}
}

main header:hover #keuzehulp-badge{transform:rotate(5deg) scale(1.1)}

#keuzehulp-badge .material-symbols-outlined{font-size:1.5rem;color:var(--color-white)}
@media (min-width: 768px){
#keuzehulp-badge .material-symbols-outlined{font-size:2rem}
}

.keuzehulp-heading{min-width:0}

header p{overflow:hidden;margin-bottom:0.125rem;font-size:0.75rem;font-weight:800;letter-spacing:0.12em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;color:var(--color-primary)}
@media (min-width: 768px){
header p{overflow:visible;margin-bottom:0.75rem;font-size:0.8125rem;letter-spacing:0.15em;text-overflow:clip;white-space:normal}
}

header h1{font-family:var(--font-display);font-size:clamp(1.3125rem, 6.8vw, 1.875rem);font-weight:900;line-height:1.05;color:var(--color-text-main);letter-spacing:-0.02em}
@media (min-width: 768px){
header h1{font-size:2.25rem}
}
@media (min-width: 1024px){
header h1{font-size:2.5rem}
}

main header small{display:block;margin-top:0.125rem;font-size:0.875rem;font-weight:600;color:var(--color-text-muted)}
@media (max-width: 767.98px) and (max-height: 700px){
main header small{font-size:0.8125rem;line-height:1.2}
}
@media (min-width: 768px){
main header small{margin-top:0.75rem;font-size:1.0625rem}
}

/* ========================================
   GRID
   ======================================== */
#keuzehulp-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;--cols:var(--cols-s);--tile-max:10rem;--gap-row:1.5rem;--gap-col:1rem;--pad-x:1.25rem;gap:var(--gap-row) var(--gap-col);padding:0 var(--pad-x);margin:0 auto;width:100%;max-width:calc(var(--cols) * var(--tile-max) + (var(--cols) - 1) * var(--gap-col) + 2 * var(--pad-x))}
@media (min-width: 600px){
#keuzehulp-grid{--gap-row:2rem;--gap-col:1.5rem}
}
@media (min-width: 768px){
#keuzehulp-grid{--cols:var(--cols-m);--pad-x:0rem}
}
@media (min-width: 1024px){
#keuzehulp-grid{--cols:var(--cols-l);--tile-max:11rem;--gap-col:1.75rem}
}

#keuzehulp-grid button{display:flex;flex-direction:column;align-items:center;min-width:0;gap:0.75rem;text-align:center;-webkit-tap-highlight-color:transparent;flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap-col)) / var(--cols));max-width:var(--tile-max)}

#keuzehulp-grid div{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:50%;overflow:hidden;background-color:var(--color-surface);box-shadow:0 8px 16px rgb(0 0 0 / 0.06);border:4px solid var(--color-surface);transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease}
#keuzehulp-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)}
#keuzehulp-grid button:hover div{transform:translateY(-6px) scale(1.05);box-shadow:0 12px 24px rgb(242 143 36 / 0.2);border-color:var(--color-primary-border-soft)}
#keuzehulp-grid button:hover img{transform:scale(1.15)}
#keuzehulp-grid button:active div{transform:scale(0.95);box-shadow:0 4px 8px rgb(0 0 0 / 0.06)}
#keuzehulp-grid span{min-height:2lh;font-size:0.875rem;font-weight:800;line-height:1.2;color:var(--color-text-main);transition:color 0.2s ease}
@media (min-width: 480px){
#keuzehulp-grid span{font-size:1rem}
}

#keuzehulp-grid button:hover span{color:var(--color-primary)}
#keuzehulp-grid button:focus-visible div{outline:var(--focus-ring);outline-offset:2px}

/* ========================================
   STACKED CARDS
   ======================================== */
/* Grow the row spacing smoothly from short phones to standard mobile heights. */
#keuzehulp-stacked-cards{display:flex;flex-direction:column;gap:clamp(0.5rem, calc(5.5dvh - 1.75rem), 1rem);padding:0 1.25rem;flex:1}
@media (min-width: 600px){
#keuzehulp-stacked-cards{padding:0;margin:0 auto;max-width:34rem;flex:0 1 auto}
}
@media (min-width: 768px){
#keuzehulp-stacked-cards{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1rem;width:100%;max-width:48rem}
}

#keuzehulp-stacked-cards .keuzehulp-who-option{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0.5rem;overflow:hidden;background-color:var(--color-surface);border:4px solid transparent;border-radius:1.5rem;box-shadow:0 4px 12px rgb(0 0 0 / 0.04);cursor:pointer;transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);text-align:left;-webkit-tap-highlight-color:transparent}
@media (min-width: 480px){
#keuzehulp-stacked-cards .keuzehulp-who-option{gap:1.25rem}
}

#keuzehulp-stacked-cards input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
#keuzehulp-stacked-cards .keuzehulp-who-option:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgb(0 0 0 / 0.08)}
#keuzehulp-stacked-cards .keuzehulp-who-option:active{transform:scale(0.96)}
#keuzehulp-stacked-cards .keuzehulp-who-option:has(input:checked){border-color:var(--color-primary);background-color:var(--color-warning-bg);box-shadow:0 12px 24px var(--color-primary-shadow-soft);transform:translateY(-3px)}
#keuzehulp-stacked-cards .keuzehulp-who-option:has(input:checked):active{transform:scale(0.96)}
#keuzehulp-stacked-cards .keuzehulp-who-option>div:first-of-type{flex-shrink:0;width:5.5rem;height:5.5rem;overflow:hidden;border-radius:1rem;border:2px solid var(--color-surface-warm)}
#keuzehulp-stacked-cards img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)}
#keuzehulp-stacked-cards .keuzehulp-who-option:hover img{transform:scale(1.1)}
#keuzehulp-stacked-cards .keuzehulp-who-option>div:last-of-type{display:flex;flex-direction:column;gap:0.25rem;flex:1;min-width:0}
#keuzehulp-stacked-cards strong{hyphens:none;font-family:var(--font-display);font-size:1.1875rem;font-weight:900;white-space:nowrap;color:var(--color-text-main)}
@media (min-width: 480px){
#keuzehulp-stacked-cards strong{font-size:1.25rem}
}

#keuzehulp-stacked-cards small{font-size:0.9375rem;font-weight:600;color:var(--color-text-muted);background-color:var(--color-surface-alt);padding:0.125rem 0.5rem;border-radius:0.5rem;align-self:flex-start}
#keuzehulp-stacked-cards .keuzehulp-who-option:has(input:checked) small{background-color:var(--color-white);color:var(--color-primary-dark)}
#keuzehulp-stacked-cards .keuzehulp-who-option>span{flex-shrink:0;font-size:1.75rem;color:var(--color-border-strong);font-variation-settings:"FILL" 0;transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}
@media (min-width: 480px){
#keuzehulp-stacked-cards .keuzehulp-who-option>span{margin-right:1rem}
}
@media (max-width: 359.98px){
#keuzehulp-stacked-cards .keuzehulp-who-option>div:first-of-type{width:4.5rem;height:4.5rem}
#keuzehulp-stacked-cards strong{font-size:0.9375rem}
#keuzehulp-stacked-cards .keuzehulp-who-option>span{font-size:1.5rem}
}

@keyframes checkBounce{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.3);opacity:1}100%{transform:scale(1.15);opacity:1}}
#keuzehulp-stacked-cards .keuzehulp-who-option:has(input:checked)>span{color:var(--color-primary);font-variation-settings:"FILL" 1;animation:checkBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}
#keuzehulp-stacked-cards .keuzehulp-who-option:has(input:focus-visible){outline:var(--focus-ring);outline-offset:2px}

/* ========================================
   FOOTER
   ======================================== */
/* Keep the CTA close on short screens, then add breathing room as height allows. */
#keuzehulp-cta{padding-block:clamp(0.5rem, calc(10dvh - 3.5rem), 2.5rem) clamp(0.75rem, calc(2dvh - 0.125rem), 1.5rem);padding-inline:1.25rem;display:flex;flex-direction:column;align-items:stretch}
@media (max-width: 767.98px) and (max-height: 740px){
#keuzehulp-cta{padding-bottom:0}
}
@media (min-width: 600px){
#keuzehulp-cta{padding-inline:0;margin:0 auto;max-width:34rem}
}
@media (min-width: 768px){
#keuzehulp-cta{padding-block:2.5rem 1.5rem}
}

#keuzehulp-next{width:100%;min-height:4rem;justify-content:center;font-size:1.25rem;font-weight:900;border-radius:2rem;box-shadow:0 10px 25px var(--color-primary-shadow);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);gap:0.75rem;background:linear-gradient(135deg, #ff9b26 0%, var(--color-primary) 100%);color:#fff}
@media (max-width: 767.98px) and (max-height: 690px){
#keuzehulp-next{min-height:3rem;font-size:1.125rem}
}

#keuzehulp-next .material-symbols-outlined{font-size:1.5rem;transition:transform 0.3s ease}
#keuzehulp-next:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 15px 30px var(--color-primary-shadow)}
#keuzehulp-next:hover:not(:disabled) .material-symbols-outlined{transform:translateX(4px)}
#keuzehulp-next:active:not(:disabled){transform:scale(0.96);box-shadow:0 5px 15px var(--color-primary-shadow)}
#keuzehulp-next:disabled{opacity:0.5;pointer-events:none;box-shadow:none;background:var(--color-border-strong);color:var(--color-surface)}
#keuzehulp-who-form:not(:has(input:checked)) #keuzehulp-next{opacity:0.5;pointer-events:none;box-shadow:none;background:var(--color-border-strong);color:var(--color-surface)}

/* ========================================
   PLACEHOLDER
   ======================================== */
#keuzehulp-placeholder{flex:1;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem}
@media (min-width: 768px){
#keuzehulp-placeholder{padding:4rem 0}
}

#keuzehulp-placeholder>div{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;background-color:var(--color-surface);padding:2.5rem 1.5rem;border-radius:1.5rem;box-shadow:0 10px 30px rgb(0 0 0 / 0.05);border:2px dashed var(--color-primary-border-strong)}
#keuzehulp-placeholder span{font-size:3.5rem;color:var(--color-primary);animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
#keuzehulp-placeholder p:first-of-type{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--color-text-main)}
#keuzehulp-placeholder p:last-of-type{font-size:1rem;font-weight:600;color:var(--color-text-muted)}