/* Steildach shares the calculator shell; refinements stay scoped to this form. */
.roof-calculator .question-head h1{font-size:clamp(24px,2.8vw,30px);line-height:1.25;max-width:690px;text-wrap:pretty}
.roof-calculator .question-head{margin-bottom:22px}
.roof-calculator .choices{min-height:0;gap:14px;grid-auto-rows:1fr}
.roof-calculator .choice{transition:border-color .15s,background-color .15s,box-shadow .15s}
.roof-calculator .choice.with-image{grid-template-rows:132px auto;min-height:204px;padding:16px 17px 20px;gap:12px;align-content:start}
.roof-calculator .choice-visual{height:132px}
.roof-calculator .choices.three .choice.with-image{grid-template-rows:112px auto;min-height:192px;padding:16px 13px 18px;gap:10px}
.roof-calculator .choices.three .choice-visual{height:112px}
.roof-calculator .choice-label,.roof-calculator .choices.three .choice-label{font-size:15px;line-height:1.35}
.roof-calculator .choice-desc,.roof-calculator .choices.three .choice-desc{font-size:12px;line-height:1.5;max-width:270px}
.roof-calculator [data-validation-field="material"] .choice.material{grid-template-rows:100px auto;min-height:160px}
.roof-calculator [data-validation-field="material"] .choice-visual{height:100px}
.roof-calculator .package-choices.three .choice.with-comparison{grid-template-rows:auto;min-height:0;padding:18px 17px 43px;gap:15px}
.roof-calculator .package-choices .choice-copy{gap:10px}
.roof-calculator .choice-comparison{width:100%;min-width:0}
.roof-calculator .comparison-row{gap:10px}
.roof-calculator .counter-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;min-height:79px;padding:10px 14px;margin-bottom:10px;align-items:center}
.roof-calculator .counter-illustration{display:block;width:58px;height:58px;object-fit:contain}
.roof-calculator .counter-row:not(:has(.counter-illustration)){grid-template-columns:minmax(0,1fr) auto}
.roof-calculator .counter-label-group{display:flex;align-items:center;gap:6px;min-width:0}
.roof-calculator .counter-label-group .field-label{min-width:0;margin:0;font-size:14px;line-height:1.4}
.roof-calculator .counter-label-group .info{width:28px;height:30px;flex-shrink:0}
.roof-calculator .counter-row.has-error{grid-template-columns:58px minmax(0,1fr) auto}
.roof-calculator .counter-row.has-error:not(:has(.counter-illustration)){grid-template-columns:minmax(0,1fr) auto}
.roof-calculator .counter-row .field-feedback{grid-column:1/-1;margin:0 0 3px}
.roof-result-notes{margin-top:17px;border-top:1px solid var(--line);padding-top:13px}
.roof-result-notes h3{font-size:13px;margin:0 0 7px}
.roof-result-notes p{font-size:12px;line-height:1.6;color:var(--muted);margin:5px 0}
.roof-calculator .result-roof{object-fit:contain}
.roof-calculator .result-area strong{font-variant-numeric:tabular-nums}
.roof-calculator .number-question .field-input input{font-variant-numeric:tabular-nums}
.roof-calculator [data-validation-field="timing"] .choice-visual{height:94px}
.roof-calculator [data-validation-field="timing"] .choice.with-image{grid-template-rows:94px auto;min-height:160px}
@media(max-width:650px){
 .roof-calculator .question-head{margin-bottom:17px}
 .roof-calculator .question-head h1{font-size:23px;line-height:1.28}
 .roof-calculator .choices,.roof-calculator .choices.three{gap:10px}
 .roof-calculator .choice.with-image,.roof-calculator .choices.three .choice.with-image{grid-template-rows:78px auto;min-height:135px;padding:11px 10px 14px;gap:7px}
 .roof-calculator .choice-visual,.roof-calculator .choices.three .choice-visual{height:78px}
 .roof-calculator .choice-label,.roof-calculator .choices.three .choice-label{font-size:13px;line-height:1.35}
 .roof-calculator .choice-desc,.roof-calculator .choices.three .choice-desc{font-size:11px;line-height:1.45}
 .roof-calculator [data-validation-field="demolition"] .choices,.roof-calculator [data-validation-field="timing"] .choices{grid-template-columns:1fr;grid-auto-rows:auto}
 .roof-calculator [data-validation-field="demolition"] .choice.with-image,.roof-calculator [data-validation-field="timing"] .choice.with-image{grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto;min-height:82px;padding:12px 33px 12px 12px;gap:13px;align-items:center}
 .roof-calculator [data-validation-field="demolition"] .choice-visual,.roof-calculator [data-validation-field="timing"] .choice-visual{height:54px}
 .roof-calculator [data-validation-field="demolition"] .choice-copy,.roof-calculator [data-validation-field="timing"] .choice-copy{text-align:left}
 .roof-calculator [data-validation-field="material"] .choice.material{grid-template-rows:73px auto;min-height:122px}
 .roof-calculator [data-validation-field="material"] .choice-visual{height:73px}
 .roof-calculator .package-choices.three .choice.with-comparison{grid-template-columns:1fr;grid-template-rows:auto;min-height:0;padding:14px 15px 35px;gap:9px}
 .roof-calculator .package-choices .choice-copy{gap:6px}
 .roof-calculator .counter-row,.roof-calculator .counter-row.has-error{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;min-height:70px;padding:9px 10px;margin-bottom:9px}
 .roof-calculator .counter-illustration{width:42px;height:49px}
 .roof-calculator .counter-label-group{gap:2px}
 .roof-calculator .counter-label-group .field-label{font-size:12px}
 .roof-calculator .counter-label-group .info{width:23px;height:28px}
 .roof-calculator .roof-result-notes p{font-size:11px}
}
@media(max-width:360px){
 .roof-calculator .counter-row,.roof-calculator .counter-row.has-error{grid-template-columns:34px minmax(0,1fr) auto;gap:6px;padding-inline:8px}
 .roof-calculator .counter-illustration{width:34px}
 .roof-calculator .counter-label-group .field-label{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.roof-calculator .choice{transition:none}}

.roof-calculator [data-validation-field="dormers"],.roof-calculator [data-validation-field="chimneys"]{grid-template-columns:76px minmax(0,1fr) auto;min-height:94px}.roof-calculator [data-validation-field="dormers"] .counter-illustration,.roof-calculator [data-validation-field="chimneys"] .counter-illustration{width:76px;height:76px}@media(max-width:650px){.roof-calculator [data-validation-field="dormers"],.roof-calculator [data-validation-field="chimneys"]{grid-template-columns:52px minmax(0,1fr) auto;min-height:78px}.roof-calculator [data-validation-field="dormers"] .counter-illustration,.roof-calculator [data-validation-field="chimneys"] .counter-illustration{width:52px;height:58px}}