/* schluessel-verloren — page layout only (tokens only; no colours, no new sizes). Owner: page builder. */

/* 1 · Hero (emergency-situation) --------------------------------------------------------- */
.sv-sit__text { margin-top: var(--sp-3); line-height: 1.55; }
.sv-hero .situation__call { margin-top: var(--sp-5); }
/* Phones/tablets: the call button moves straight under the H1 (first screen at 390×664). The lead between
   them holds no links, so focus order stays equal to the visual order. */
@media (max-width: 61.99em) {
	.sv-hero .hero__title ~ * { order: 2; }
	.sv-hero .hero__body > .hero__cta { order: 1; margin-top: var(--sp-5); }
}

/* 2 · Sofort tun — 3 × 2 boxes, tighter rows --------------------------------------------- */
.sv-todo { row-gap: var(--gap); }

/* 4 · Welche Schlüssel — cards keep the text at the top -------------------------------- */
.sv-keys .card { justify-content: flex-start; }

/* 5 · Abgrenzung — two cases side by side ----------------------------------------------- */
.sv-notice__cases { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
/* Side by side only from 62em: below that the 112 column would shrink to ~35 characters per line. */
@media (min-width: 62em) { .sv-notice__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); } }
.sv-notice__case { display: flex; flex-direction: column; gap: var(--sp-3); }
.sv-notice__case > * { margin: 0; }
.sv-notice__h { font-size: var(--fs-lg); }
.sv-notice__dial { margin-top: auto; padding-top: var(--sp-2); }
.sv-notice__free { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); font-weight: 700; }
.sv-notice__free .i { flex: none; }

/* 6 · Öffnen und tauschen — timeline beside a sticky photo ------------------------------ */
.sv-visit { align-items: start; }
.sv-visit__steps { margin-top: var(--sp-6); }
.sv-visit__steps .step__n { flex: none; }
@media (min-width: 56.25em) { .sv-visit .split__media { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }
/* Stacked on tablets the 4:3 photo would fill the screen: a wider crop keeps it a supporting image. */
@media (min-width: 40em) and (max-width: 56.24em) { .sv-visit .split__media .media { --ratio: 16 / 9; } }

/* 7 · Kostenlose Beratung — dark number card left, text right --------------------------- */
.sv-phone { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 75em) { .sv-phone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sv-phone > .phone-block { order: -1; } }
.sv-phone__text > * { margin: 0; }
.sv-phone__text > * + * { margin-top: var(--sp-4); }
/* While the card runs full width (tablets up to 1200 px): number left, the two facts right — no empty half. */
@media (min-width: 44em) and (max-width: 74.99em) {
	.sv-phone > .phone-block { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-8); row-gap: var(--sp-3); align-items: center; }
	.sv-phone > .phone-block > .phone-block__kicker { grid-area: 1 / 1; }
	.sv-phone > .phone-block > .phone-block__num { grid-area: 2 / 1; }
	.sv-phone > .phone-block > .phone-block__facts { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }
}