/* -------------------------------------------------- */
/* Warum Let's Doo                                      */
/* -------------------------------------------------- */

/* Leistungen above this section and Vorgehen below it are both full-bleed
   gradient bands, so this one stays white — otherwise the page runs three heavy
   blocks together with nowhere for the eye to rest.

   Layout follows every other section — .section supplies the padding, an inner
   .section__content supplies the 1200px. */

.section--warum-letsdoo h2,
.section--warum-letsdoo .section__subheading {
	text-align: left;
}

/* Two columns of claims flanking a photo: .warum-letsdoo__punkte (2 items
   each) left and right, .warum-letsdoo__media in the middle. Collapses to a
   single stack in 23-mobile.css. */
.warum-letsdoo__layout {
	display: grid;
	grid-template-columns: 1fr minmax(0, 1.1fr) 1fr;
	gap: clamp(2.5rem, 4vw, 3.5rem);
	align-items: left;
	margin-top: 3rem;
}

.warum-letsdoo__punkte {
	display: grid;
	gap: 3rem;
}

/* Plain and centred rather than a card — the panel this used to be fought the
   photo for attention in the middle of the row. The badge below carries the
   weight instead. */
.warum-letsdoo-punkt {
	text-align: left;
}

/* Same badge as the Leistungen cards (07-leistungen.css): solid brand colour,
   white glyph, same two-layer shadow — one icon language across the site
   rather than the .icon-tile default's translucent wash. Centred by hand
   since .icon-tile is a flex container (for the glyph), not a block that
   text-align on the parent would centre by itself. */
.warum-letsdoo-punkt .icon-tile {
	margin: 0 0 1.25rem;
	border-radius: 30px;
	background: var(--color-gradient-end);
	color: #fff;
	box-shadow:
		0 3px 8px rgba(17, 17, 17, 0.16),
		0 10px 22px -10px rgba(17, 17, 17, 0.35);
}

.warum-letsdoo-punkt h3 {
	margin-bottom: 0.5em;
}

.warum-letsdoo-punkt p {
	margin-bottom: 0;
}

.warum-letsdoo__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.warum-letsdoo__cta {
	text-align: left;
}