/* /ratgeber/schluesseldienst-abzocke-erkennen/ : layout only. All colours, radii, shadows and fonts come from theme.css tokens.
   Plan: plans/ratgeber-schluesseldienst-abzocke-erkennen.plan.md */

/* 1b. jump nav under the hero: one quiet row of link chips */
.az-jump .chips{gap:.5rem .6rem}

/* 2. kurz-die-antwort: lead block, then five criteria cards (3 + 2 on desktop, 2 + 2 + 1 on tablets) */
.az-answer .lead-block{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
@media (min-width:600px) and (max-width:999px){
	.az-answer .cm:last-child{grid-column:1 / -1}
}
@media (min-width:1000px){
	.az-answer .commits{grid-template-columns:repeat(6,minmax(0,1fr))}
	.az-answer .cm{grid-column:span 2}
	.az-answer .cm:nth-child(n+4){grid-column:span 3}
}

/* 3. warnsignale: hairline rows in two columns, the rule of thumb as a strip below */
.az-warn .ilist{gap:0}
.az-warn .notice,.az-pat .notice,.az-law .notice{margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.az-warn .notice__x{font-size:1.1875rem;font-weight:600}
@media (min-width:600px){
	.az-warn .ilist{column-gap:clamp(1.6rem,4vw,3.4rem)}
	.az-warn .ilist__i:nth-child(2){border-top:1px solid var(--t-card-line)}
}

/* 4. abzock-muster: each card ends in the quoted counter-question, pinned to the card foot */
.az-pat .icard__x{flex:1;display:flex;flex-direction:column;gap:.9rem}
.az-q{display:block;margin-top:auto;padding:.7rem .95rem .8rem;border-left:4px solid var(--accent-700);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--accent-100);color:var(--ink);font-weight:700;line-height:1.45}
.az-q__l{display:block;margin-bottom:.15rem;font:800 .9375rem/1.3 var(--f-head);color:var(--accent-700)}

/* 5. vor-dem-anruf: timeline left, the "witness" advice floats beside it (stacked on phones) */
.az-steps__grid{display:grid;gap:clamp(1.8rem,4vw,2.6rem);align-items:start}
.az-steps .step__b{flex:1;min-width:0}
@media (min-width:1000px){
	.az-steps__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:clamp(2.4rem,5vw,4.5rem)}
	.az-steps__aside{position:sticky;top:calc(var(--hdr-h) + 1.5rem)}
}

/* 6. so-pruefen-sie-uns: a calm document column on ink, the call sits right under the five checks */
.az-check .sec__head{max-width:none}
.az-check__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.az-check__cta p{margin:0;flex:1 1 15rem;font-size:1.125rem;color:var(--t-body)}
.az-check__cta p a{font-weight:700}

/* 7. rechtlicher-rahmen: photo beside four paragraphs; the photo stays in view while reading */
.az-law .split{align-items:start}
.az-law .split__x{margin-bottom:0}
.az-law .split__txt p{margin:0 0 1.1rem}
.az-law .split__txt p:last-child{margin-bottom:0}
@media (min-width:900px){
	.az-law .split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
	.az-law .split__media{position:sticky;top:calc(var(--hdr-h) + 1.5rem)}
}
.az-law .split__img{aspect-ratio:3/2}
@media (min-width:900px){
	.az-law .split__img{aspect-ratio:4/5}
}

/* 8. abgrenzung: keep the measure readable inside the red notice */
.az-ab .notice__x{max-width:48rem}

/* 10. router: the one link in each card stretches over the whole card */
.az-next .icard__x a{font-weight:700}
.az-next .icard__x a::after{content:"";position:absolute;inset:0;z-index:1}
.az-next .icard:has(a:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.az-more{margin:clamp(1.4rem,3vw,2rem) 0 0;font-size:1.0625rem}
.az-more a{font-weight:700}
@media (hover:hover){
	.az-next .icard:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--accent-600)}
}