/* /problem/schluessel-steckt-innen/ : layout only. All colours, radii, shadows and fonts come from theme.css tokens. Plan: plans/problem-schluessel-steckt-innen.plan.md */

/* 2. abgrenzung: keep the measure readable inside the full-width red notice */
.ksi-abgrenzung .notice__x{max-width:56rem;text-wrap:pretty}

/* 4. warum-es-blockiert: the schematic under the split (stacked on phones, one flow per row from 640px) */
.ksi-mech{display:grid;gap:1.2rem;margin:clamp(2.2rem,5vw,3.6rem) 0 0}
.ksi-mech__row{padding:1.2rem 1.2rem 1.3rem;background:var(--soft);border:1px solid var(--line);border-top:5px solid var(--brand);border-radius:var(--r)}
.ksi-mech__row--ok{border-top-color:var(--accent-600)}
.ksi-mech__lbl{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font:800 1.2rem/1.2 var(--f-head);color:var(--ink)}
.ksi-mech__lbl .ic{flex:none;width:1.5rem;height:1.5rem}
.ksi-mech__row--ok .ksi-mech__lbl .ic{color:var(--accent-700)}
.ksi-mech__flow{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem}
.ksi-node{display:flex;align-items:center;gap:.9rem;min-width:0}
.ksi-node .badge{width:2.75rem;height:2.75rem}
.ksi-node__b{min-width:0}
.ksi-node p{margin:0;line-height:1.3}
.ksi-node .ksi-node__t{margin-bottom:.15rem}
.ksi-node__t{font:800 1.0625rem/1.2 var(--f-head);color:var(--ink)}
.ksi-node__x{font-size:1.0625rem;color:var(--text)}
.ksi-node--core{padding:.75rem .9rem;background:#fff;border:2px solid var(--brand);border-radius:var(--r)}
.ksi-mech__row--ok .ksi-node--core{border-color:var(--accent-600)}
.ksi-mech__row--no .ksi-node--core .badge{background:var(--brand);color:#fff}
.ksi-node--core .ksi-node__x{font-weight:700}
.ksi-arrow{display:grid;place-items:center;width:2.75rem;height:1.7rem;color:var(--accent-700)}
.ksi-arrow .ic{width:1.4rem;height:1.4rem;transform:rotate(90deg)}
.ksi-mech figcaption{margin:0;font-size:1rem;color:var(--muted)}
@media (min-width:640px){
	.ksi-mech__row{padding:1.4rem 1.6rem 1.6rem}
	.ksi-mech__flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr) auto minmax(0,1fr);gap:.6rem;align-items:stretch}
	.ksi-node{flex-direction:column;justify-content:center;gap:.55rem;padding:.5rem .3rem;text-align:center}
	.ksi-node--core{padding:1rem .9rem}
	.ksi-arrow{width:2rem;height:auto}
	.ksi-arrow .ic{transform:none}
}

/* captioned photos: keep the offset frame behind the image only, the caption sits clear below it */
.ksi-warum .split__fig,.ksi-flow .split__fig{display:grid;grid-template-columns:minmax(0,1fr)}
.ksi-warum .split__fig::before,.ksi-flow .split__fig::before{position:relative;inset:auto;grid-area:1/1;transform:translate(.9rem,.9rem)}
.ksi-warum .split__img,.ksi-flow .split__img{grid-area:1/1}
.ksi-warum .split__fig figcaption,.ksi-flow .split__fig figcaption{grid-row:2;margin-top:1.6rem}

/* 6. was-der-fachbetrieb-macht: rail left, photo + note right */
.ksi-flow{display:grid;gap:2.4rem}
.ksi-flow__side{display:grid;gap:2.2rem;align-content:start}
.ksi-flow .notice{--t-link:var(--accent-700)}
@media (min-width:960px){
	.ksi-flow{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.4rem,5vw,4.6rem);align-items:start}
}

/* 7. + 9. heading left, content right from 900px (stacked on phones) */
.ksi-safety .wrap,.ksi-faq .wrap{display:grid;gap:1.4rem}
.ksi-safety .sec__head,.ksi-faq .sec__head{max-width:none;margin:0}
.ksi-faq .sec__head{margin-bottom:.4rem}
@media (min-width:900px){
	.ksi-safety .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:3rem;align-items:center}
	.ksi-faq .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:3.4rem;align-items:start}
	.ksi-faq .sec__head{position:sticky;top:calc(var(--hdr-h) + 24px);margin-bottom:0}
}

/* 8. kostenlose-beratung: closing paragraph under the call card */
.ksi-after{margin:1.6rem 0 0;max-width:46rem;font-size:1.125rem}

/* 10. cta-close: heading sits close to the closing row */
.ksi-close .sec__head{margin-bottom:1.2rem}