/* ==========================================================================
   Block 04 – wir glauben, dass beratung menschlich sein darf
   White intro over a jagged accent-colored value grid.

   Block stays position:static on purpose so block 03's overflowing photo
   (position:relative) keeps painting above this block's white top area,
   matching the "feet peeking in" look from the screenshots.
   ========================================================================== */

/* padding-top scales up with viewport instead of staying fixed at the
   170px spec value on every screen size - too much empty space above a
   small phone's shrunken (clamp-minimum) heading. */
.block-werte {
	background-color: var(--color-white);
	padding-top: 6rem;
}

@media (min-width: 30em) {
	.block-werte {
		padding-top: 9rem;
	}
}

@media (min-width: 48em) {
	.block-werte {
		padding-top: 13rem;
	}
}

@media (min-width: 64em) {
	.block-werte {
		padding-top: 20rem;
	}
}

.block-werte-intro-content {
	grid-column: 1 / 13;
}

/* Spec: weight 900, 35px font-size, 47px line-height, 0 letter-spacing
   (same ratio as the hero subline / block 02's intro). */
.block-werte-intro-content h2 {
	font-size: clamp(1.8rem, 1.82vw, 3.5rem);
	line-height: 1.34;
	letter-spacing: 0;
}

/* Spec: weight 300, 25px font-size, 35px line-height, 0 letter-spacing
   (same ratio as block 02/03's lead text). */
.block-werte-intro-content p {
	margin-top: 2rem;
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
}

/* The zigzag is a separate overlay (::before) with a fixed aspect-ratio
   (1920:650, the source's own proportions), instead of a clip-path on this
   whole box - that previously distorted the zigzag's proportions every
   time the box's height changed for responsive spacing (the box's height
   and the shape's height were the same number, so they couldn't vary
   independently). Now the box itself is just a plain solid-color fill
   sized however tall content/spacing needs, and the overlay keeps the
   zigzag looking identical at every breakpoint.

   No negative margin-top here on purpose: unlike the old clip-path (which
   only let thin pink peaks poke up into the intro text area), this box is
   now a plain, unclipped rectangle - pulling its full bounds up with a
   negative margin covered the bottom of the intro paragraph with solid
   color instead of just a few triangular tips.

   z-index:0 (not just position:relative) gives this box its own stacking
   context, so the overlay's z-index:-1 stays scoped to just behind this
   box's own content instead of potentially escaping to the page root (see
   the .btn bug in base.css for the same issue). */
.block-werte-values {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 38rem;
	padding-bottom: 6rem;
	background-color: var(--color-accent);
}

/* Traces the *notch* shape (the white cutouts), closing the polygon at the
   top edge (0%) instead of the bottom - the pink comes from
   .block-werte-values' own solid background-color showing through
   wherever this white overlay doesn't cover. Y-values scaled to 60% of the
   original SVG's depth (0.6x) - the exact source proportions made the
   notches reach too deep, showing too much white.

   top:-0.1rem (not 0) extends the overlay 1px past the box's own top edge,
   closing a hairline rendering gap that otherwise let a thin sliver of the
   pink background show through right at the seam. */
.block-werte-values::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -0.1rem;
	left: 0;
	width: 100%;
	aspect-ratio: 1920 / 646;
	background-color: var(--color-white);
	clip-path: polygon(4.17% 17.5%, -9.06% 24.7%, -9.06% 0%, 104.48% 0%, 80.63% 17.5%, 64.06% 11.8%, 41.04% 22.5%, 4.17% 17.5%);
	pointer-events: none;
}

.block-werte-values > .grid-boxed {
	row-gap: 2.4rem;
}

.block-werte-value {
	grid-column: span 12;
	color: var(--color-white);
}

/* Spec: weight 700, 25px font-size, 35px line-height, 0 letter-spacing
   (same ratio as block 02/03's lead text). */
.block-werte-value h3 {
	font-weight: var(--font-weight-bold);
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
}

/* Spec: weight 300, 20px font-size, 30px line-height, 0 letter-spacing
   (20/1920 = 1.04vw). */
.block-werte-value p {
	margin-top: 0.4rem;
	font-size: clamp(1.2rem, 1.04vw, 2rem);
	line-height: 1.5;
	letter-spacing: 0;
}

@media (min-width: 30em) {
	.block-werte-values {
		min-height: 42rem;
		padding-bottom: 8rem;
	}
}

/* From tablet up the intro is indented to column 3, same as block 02, and
   the value grid goes straight to 4 columns to match the design - which
   needs much less stacked height, so min-height (not the actual content)
   is what determines the box's height from here up. */
@media (min-width: 48em) {
	.block-werte-intro-content {
		grid-column: 3 / 9;
	}

	.block-werte-value {
		grid-column: span 3;
	}

	.block-werte-values {
		min-height: 38rem;
		padding-bottom: 12rem;
	}
}

@media (min-width: 64em) {
	.block-werte-values {
		min-height: 48rem;
		padding-bottom: 16rem;
	}
}

/* Desktop only: fixed height matching the design's spec size. Below this,
   min-height (not a flat height) drives the box's size instead - tall
   enough to match the design's intended visual weight at each tier, but
   still able to grow if the content ever needs more room than that. */
@media (min-width: 78.75em) {
	.block-werte-values {
		height: 65rem;
	}
}