/* Schloss & Zylinder austauschen — page layout only (tokens from theme.css; no colours, no new sizes). */

/* Inline phone numbers in running text stay on one line and read as the number. */
.sa-tel { font-weight: 700; white-space: nowrap; }

/* Hero: the checks follow the call button with a little more air. */
.sa-hero .hero__checks { margin-top: var(--sp-6); }

/* Vorher / Nachher: each example photo carries its own note card (phones keep photo + note
   together); the arrow coin sits at the photos' mid-height, measured from the pair's width. */
.sa-compare__pair { container-type: inline-size; }
.sa-compare__col { display: flex; flex-direction: column; gap: var(--sp-5); }
.sa-compare__note { flex: 1; }
.sa-compare__note-head { display: flex; align-items: center; gap: var(--sp-3); }
@media (min-width: 40em) {
	.sa-compare__pair .ba__arrow { top: calc((100cqi - clamp(18px, 3vw, 40px)) * .1875); }
}

/* Ablauf: timeline left, the measuring example sticks beside it on wide screens. */
.sa-steps__split { align-items: start; }
/* Timeline inside a split column: numeral coins keep their size, the text takes the rest. */
.sa-steps__list .step__n { flex: none; }
.sa-steps__list .step__body { flex: 1; min-width: 0; }
.sa-steps__panel { min-height: 0; justify-content: flex-start; }
@media (min-width: 56.25em) {
	.sa-steps__panel { position: sticky; top: calc(var(--sp-12) + var(--sp-4)); }
}

/* Sicherheitsmerkmale: the code reading aid as three rows (key + meaning). */
.sa-features__head { align-items: center; margin-bottom: var(--sp-8); }
.sa-scale__list { display: grid; margin: 0; }
.sa-scale__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-4); padding-block: var(--sp-3); border-top: 1px solid var(--c-line); }
.sa-scale__row:first-child { border-top: 0; }
.sa-scale__row > * { margin: 0; }
.sa-scale__key { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1; color: var(--c-heading); white-space: nowrap; }
.sa-scale__row dd { color: var(--c-text); }
@media (min-width: 48em) {
	.sa-features__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Beratung: head split (H2 left, long lead right); phone card and checklist equally tall,
   the checklist centred in its card. */
.sa-call__head { align-items: start; }
.sa-call__grid { align-items: stretch; }
.sa-call__grid .phone-block--list { justify-content: center; }