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

/* 2. abgrenzung: keep the measure readable inside the full-width red notice */
.tz-abgrenzung .notice__x{max-width:52rem}

/* 3. sofort-tun: four numbered cards in a 2 x 2 grid */
.tz-sofort .ilist{counter-reset:tz;gap:1.1rem}
.tz-sofort .ilist__i{counter-increment:tz;position:relative;padding-right:3.4rem}
.tz-sofort .ilist__i::after{content:counter(tz);position:absolute;top:.8rem;right:1.1rem;font:800 1.6rem/1 var(--f-head);color:var(--accent-700)}

/* 4. zugefallen-oder-abgeschlossen: hint card + onward links under the pair */
.tz-zo__after{display:grid;gap:1.2rem;margin-top:2.2rem;align-items:center}
.tz-zo__after .notice{margin:0}
.tz-zo__after .notice__x{max-width:none}
.tz-zo__next{display:flex;gap:.7rem;align-items:flex-start;margin:0;font-size:1.0625rem}
.tz-zo__next .ic{flex:none;width:1.4rem;height:1.4rem;margin-top:.2rem;color:var(--accent-700)}

/* 4b. pair: room for the "oder" badge, equal top edges */
.tz-zo .pair__col--b{border-top:5px solid var(--brand)}
@media (min-width:900px){
	.tz-zo .pair__col--a{padding-right:2.8rem}
	.tz-zo .pair__col--b{padding-left:2.8rem}
}

/* 6. ursachen: icon rows, portrait photo on the right from 1000px (banner on small screens) */
.tz-ursachen__grid{display:grid;gap:2rem}
.tz-ursachen__fig{position:relative;margin:0;isolation:isolate}
.tz-ursachen__fig::before{content:"";position:absolute;inset:.9rem -.9rem -.9rem .9rem;border-radius:var(--r-lg);background:var(--accent-300);z-index:-1}
.tz-ursachen__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--soft2)}
.tz-ursachen__img img{width:100%;height:100%;object-fit:cover}

/* 7. was-der-fachbetrieb-macht: timeline right, photo left and sticky from 900px (photo last on phones) */
.tz-ablauf__grid{display:grid;gap:2.2rem}
.tz-ablauf__fig{position:relative;margin:0;isolation:isolate}
.tz-ablauf__fig::before{content:"";position:absolute;inset:.9rem -.9rem -.9rem .9rem;border-radius:var(--r-lg);background:var(--accent-300);z-index:-1}
.tz-ablauf__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--soft2)}
.tz-ablauf__img img{width:100%;height:100%;object-fit:cover}

/* 9. kostenlose-beratung: copy left, call card right (stacked on phones) */
.tz-beratung__grid{display:grid;gap:2rem;align-items:center}
.tz-beratung__lead{margin:0 0 1rem;font-size:1.1875rem}
.tz-beratung__more{margin:0;font-size:1.0625rem}
.tz-beratung .phoneblock{grid-template-columns:minmax(0,1fr)}

@media (min-width:900px){
	.tz-zo__after{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.6rem,4vw,3rem)}
	.tz-ablauf__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
	.tz-ablauf__fig{grid-column:1;grid-row:1;position:sticky;top:calc(var(--hdr-h) + 1.5rem)}
	.tz-ablauf .steps{grid-column:2;grid-row:1}
	.tz-ablauf__img{aspect-ratio:4/5}
	.tz-beratung__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,4rem)}
}
@media (min-width:1000px){
	.tz-ursachen__grid{grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);column-gap:clamp(2.5rem,5vw,4rem);align-items:center}
	.tz-ursachen__img{aspect-ratio:4/5}
}