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

/* 1 · Hero (emergency-situation) --------------------------------------------------------- */
.tz-hero__checks { margin-top: var(--sp-5); }
.tz-sit__text { margin-top: var(--sp-3); line-height: 1.55; }
.tz-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 and the
   checks between them hold no links, so focus order stays equal to the visual order. */
@media (max-width: 61.99em) {
	.tz-hero .hero__title ~ * { order: 2; }
	.tz-hero .hero__body > .hero__cta { order: 1; margin-top: var(--sp-5); }
}

/* 2 · Abgrenzung — two cases side by side ----------------------------------------------- */
.tz-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) { .tz-notice__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); } }
.tz-notice__case { display: flex; flex-direction: column; gap: var(--sp-3); }
.tz-notice__case > * { margin: 0; }
.tz-notice__h { font-size: var(--fs-lg); }
.tz-notice__dial { margin-top: auto; padding-top: var(--sp-2); }
.tz-notice__free { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); font-weight: 700; }
.tz-notice__free .i { flex: none; }

/* 4 · Ursachen — side head + one column of boxes ---------------------------------------- */
@media (min-width: 62em) {
	.tz-causes { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
	.tz-causes__head { position: sticky; top: calc(var(--header-h) + var(--sp-6)); margin-bottom: 0; }
}
.tz-causes__list { gap: var(--sp-3); }

/* 5 · Nur zugezogen — split with two decisive boxes -------------------------------------- */
.tz-split { align-items: start; }
.tz-split__cases { gap: var(--sp-3); }
@media (min-width: 56.25em) { .tz-split .split__media { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }
/* Stacked on tablets the 4:3 lock photo would fill the screen: a wider crop keeps it a supporting image. */
@media (min-width: 40em) and (max-width: 56.24em) { .tz-split .split__media .media { --ratio: 16 / 9; } }

/* 6 · Was wir tun — the "Beispiel" tag sits on the photo -------------------------------- */
.tz-cases .pcard__media .tag { margin: 0; left: 14px; bottom: 14px; max-width: calc(100% - 28px); }
/* 992–1199 px: three 4:3 cards would be ~230 px narrow and the two-line „Beispiel“ tags would cover the photos.
   Keep the tablet composition (two cards + the drilling card horizontal across the row) until 1200 px. */
@media (min-width: 62em) and (max-width: 74.99em) {
	.tz-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tz-cases > .pcard:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
	.tz-cases > .pcard:last-child:nth-child(odd) .pcard__media { flex: 0 0 48%; aspect-ratio: auto; min-height: 280px; }
}
.tz-cases__more { max-width: 62ch; margin: var(--sp-7) auto 0; text-align: center; color: var(--c-muted); }

/* 8 · Kostenlose Beratung ---------------------------------------------------------------- */
.tz-phone { align-items: center; }
.tz-phone__ask { margin-top: var(--sp-2); font-weight: 700; }
/* The big number needs the full width until both columns are wide enough (no clipping in the card). */
@media (min-width: 56.25em) and (max-width: 74.99em) { .tz-phone { grid-template-columns: minmax(0, 1fr); } }
/* While the card runs full width (tablets up to 1200 px): number left, the questions right — no empty half. */
@media (min-width: 44em) and (max-width: 74.99em) {
	.tz-phone .phone-block { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-8); row-gap: var(--sp-3); align-items: start; }
	.tz-phone .phone-block__kicker { grid-area: 1 / 1; }
	.tz-phone .phone-block__num { grid-area: 2 / 1; }
	.tz-phone .tz-phone__ask { grid-area: 1 / 2; margin-top: 0; }
	.tz-phone .phone-block__facts { grid-area: 2 / 2; margin-top: 0; }
}