/* Türöffnung — page layout only (tokens from theme.css; no colours, no new sizes). */

/* Hero (urgent split, photo bleeding from the left): a wider text column keeps the H1 on two
   lines and the call card high; the photo crop keeps handle and Profilzylinder in view. */
.tr-hero__states { margin-top: var(--sp-5); }
@media (min-width: 56.25em) {
	.tr-hero.hero--bleed .hero__inner { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
	.tr-hero.hero--bleed .hero__figure { width: 42vw; }
	.tr-hero .hero__lead { max-width: 62ch; }
	.tr-hero .hero__figure .media > img { object-position: 24% 62%; }
}
/* Wide screens: call card left, state chips + checks right — a shorter hero, so the call card,
   the checks and the Profilzylinder of the photo all sit in the first screen. */
@media (min-width: 75em) {
	.tr-hero .hero__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); align-items: start; }
	.tr-hero .hero__body > * { grid-column: 1 / -1; justify-self: start; }
	.tr-hero .hero__body > .callcard { grid-column: 1; grid-row: span 2; justify-self: stretch; }
	.tr-hero .hero__body > .tr-hero__states { grid-column: 2; margin-top: var(--sp-6); }
	.tr-hero .hero__body > .hero__checks { grid-column: 2; margin-top: var(--sp-4); }
}

/* Zugezogen oder abgeschlossen: a wider centred head so the long H2 needs two lines, not three. */
.tr-states .section-head { max-width: var(--narrow); }

/* Leistungsumfang: phones read intro → included points → "nicht enthalten"; desktop puts the
   card under the intro (left) and the points beside both (right). */
.tr-scope__grid { display: grid; gap: var(--sp-6); }
.tr-scope__card-head { display: flex; align-items: center; gap: var(--sp-3); }
@media (min-width: 56.25em) {
	.tr-scope__grid {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "intro list" "card list";
		column-gap: clamp(32px, 5vw, 80px);
		row-gap: var(--sp-6);
		align-items: start;
	}
	.tr-scope__intro { grid-area: intro; }
	.tr-scope__list { grid-area: list; }
	.tr-scope__card { grid-area: card; }
}

/* Drei Türwelten: this page keeps the full copy per world (longer than the brick default), so
   below the 3-column layout the photo becomes a block on top and the text sits on the dark panel. */
@media (max-width: 56.24em) {
	.tr-worlds .triptych__panel { aspect-ratio: auto; min-height: 0; justify-content: flex-start; }
	.tr-worlds .triptych__media { position: relative; inset: auto; height: clamp(220px, 56vw, 340px); }
}

/* Legitimation: the two points stack in one column, centred beside the statement. */
.tr-legit__points { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
@media (min-width: 62em) { .tr-legit .usp { align-items: center; } }

/* Ablauf: 3 × 2 — the dashed connector only runs between steps of the same row. */
@media (min-width: 56.25em) {
	.tr-steps__grid { row-gap: var(--sp-8); }
	.tr-steps__grid .step:nth-child(3n)::after { display: none; }
}

/* Kostenlose Beratung: text and phone card share the top line; the number in the text stays together. */
.tr-call__split { align-items: start; }
.tr-call__tel { font-weight: 700; white-space: nowrap; }

/* Wenn gebohrt: the three case chips get air between the two paragraphs. */
.tr-drill__cases { margin-block: var(--sp-5); }