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

/* Figures with a caption: the offset frame hugs the picture only (a flat block, no blur), so the caption sits cleanly below it */
.ag-sofort .split__fig::before,
.ag-proc__fig::before{display:none}
.ag-sofort .split__img{box-shadow:.9rem .9rem 0 var(--accent-300)}
.ag-proc__fig .split__img{box-shadow:.9rem .9rem 0 var(--brand-600)}
.ag-sofort .split__fig figcaption,
.ag-proc__fig figcaption{margin-top:1.5rem}

/* 3. sofort-tun: the illustration is 3:2, show it uncropped */
.ag-sofort .split__img{aspect-ratio:3/2}

/* 5. nicht-selber-machen: the single "helps" item carries the whole left card, so it is set a little larger */
.ag-pair .pair__col--a .pair__list{font-size:1.1875rem;line-height:1.6}

/* 6. ursachen: the one local sentence sits under the cards beside a small figure */
.ag-local{margin-top:clamp(2rem,4.5vw,3.4rem)}
.ag-local .split__img{aspect-ratio:3/2}
.ag-local .split__x{margin:0;max-width:34rem;font-size:1.1875rem}
@media (min-width:900px){
	.ag-local{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,3.6rem)}
}

/* 7. was-der-fachbetrieb-macht: rail on the left, Symbolbild sticks beside it from 960px */
.ag-proc{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1fr);align-items:start}
.ag-proc__fig{margin:0;position:relative}
.ag-proc__fig .split__img{aspect-ratio:4/3}
.ag-proc__after{margin-top:clamp(2rem,4.5vw,3.2rem)}
@media (min-width:960px){
	.ag-proc{grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr);column-gap:clamp(2.5rem,5vw,4.5rem)}
	.ag-proc__fig{position:sticky;top:calc(var(--hdr-h) + 1.5rem)}
}