/* ==========================================================================
   Block 03 – immo geht auch ohne anzug
   Olive background. From tablet-landscape up, the photo is taller than the
   section itself and bleeds visually into blocks 02 and 04 above/below it
   (see screenshots) - each block stays an independent, self-contained
   section, only the photo overflows its own box.

   This relies on .block-ohne-anzug being position:relative while its
   sibling sections stay position:static: a positioned element always
   paints after static in-flow siblings in the same stacking context, so
   the overflowing photo naturally appears above blocks 02/04 without any
   extra z-index bookkeeping.

   Below tablet (48em) the bleed effect is dropped in favor of a normal,
   in-flow full-width image - overlapping neighbouring text on small
   screens would hurt readability.
   ========================================================================== */

.block-ohne-anzug {
	position: relative;
	padding: 4.8rem 0 0 0;
	background-color: var(--color-header-2);
	/* Clips horizontal-only, so the media's vertical bleed (into blocks
	   02/04) stays fully visible while a right-edge overflow beyond the
	   viewport on very wide screens doesn't cause page-wide horizontal
	   scroll. */
	overflow-x: clip;
}

.block-ohne-anzug-content {
	grid-column: 1 / 13;
}

/* Spec: weight 900, 62px font-size, 68px line-height, 0 letter-spacing
   (same ratio as block 02's heading), 50px padding to the next element -
   the 50/60/15px gaps below only apply in full from 48em up; mobile gets
   smaller ones so the shrunken (clamp-minimum) text isn't left with
   disproportionately large gaps between paragraphs. */
.block-ohne-anzug-content h2,
.block-ohne-anzug-content .block-ohne-anzug-statement {
	font-weight: var(--font-weight-black);
	font-size: clamp(3rem, 3.23vw, 6.2rem);
	line-height: 1.1;
	letter-spacing: 0;
	padding-bottom: 3rem;
}

.block-ohne-anzug-light {
	color: var(--color-white);
}

/* Spec: weight 300, 25px font-size, 35px line-height, 60px padding to the
   next element (same ratio as block 02's list). */
.block-ohne-anzug-lead {
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
	padding-bottom: 4rem;
}

/* Spec: weight 900 (Black), 35px font-size, 45px line-height, 15px margin
   to the next element (same size ratio as block 02's intro/hero subline). */
.block-ohne-anzug-accent {
	color: var(--color-accent);
	font-weight: var(--font-weight-black);
	font-size: clamp(1.8rem, 1.82vw, 3.5rem);
	line-height: 1.29;
	letter-spacing: 0;
	margin-bottom: 1rem;
}

@media (min-width: 48em) {
	.block-ohne-anzug-content h2,
	.block-ohne-anzug-content .block-ohne-anzug-statement {
		padding-bottom: 5rem;
	}

	.block-ohne-anzug-lead {
		padding-bottom: 6rem;
	}

	.block-ohne-anzug-accent {
		margin-bottom: 1.5rem;
	}
}

/* Spec: weight 300, 25px font-size, 35px line-height (same as the lead). */
.block-ohne-anzug-content > p:last-child:not(.block-ohne-anzug-accent):not(.block-ohne-anzug-statement) {
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
}

/* The media lives in its own .grid-wide instance, separate from the
   content's .grid-boxed, so it can be absolutely positioned (for the
   vertical bleed) while its child still uses plain grid-column placement -
   an absolutely positioned item can't reliably resolve grid-column against
   a *sibling's* grid. .grid-wide (14 tracks, with viewport-bleed edges)
   instead of .grid-boxed also lets the image run past the boxed content's
   max-width all the way to the true viewport edge, as requested. */
.block-ohne-anzug-media-wrap {
	margin-top: 3.2rem;
}

.block-ohne-anzug-media {
	grid-column: 1 / 15;
	aspect-ratio: 4 / 4;
	overflow: hidden;
}

.block-ohne-anzug-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

@media (min-width: 48em) {
	.block-ohne-anzug {
		padding: 17.5rem 0 20rem;
	}

	.block-ohne-anzug-content {
		grid-column: 1 / 7;
	}

	/* top anchors the correct upper position; bottom caps the overflow past
	   the section's own bottom edge at 75px. grid-template-rows:100% is
	   required here: .grid-wide only defines columns, so the implicit row
	   is auto-sized (content-driven) and does NOT stretch to the wrapper's
	   computed height on its own - without it, the percentage-height chain
	   into the grid item/img below breaks and they render at native image
	   size instead. */
	.block-ohne-anzug-media-wrap {
		display: grid;
		position: absolute;
		left: 0;
		right: 0;
		top: -7rem;
		bottom: -6rem;
		grid-template-rows: 100%;
		margin-top: 0;
		pointer-events: none;
	}

	/* Content ends at line 7; starting the media at line 9 (instead of 8)
	   leaves exactly one grid column of breathing room between them. The
	   area itself runs all the way to line 15 (the true viewport edge) so
	   it's never narrower than the image's natural (height-driven) width -
	   flex-start anchors the image right after that left gap and lets it
	   extend rightward at its full size; where it ends up on the right
	   doesn't matter. */
	.block-ohne-anzug-media {
		grid-column: 8 / 15;
		height: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.block-ohne-anzug-media img {
		width: auto;
		height: 100%;
		object-fit: contain;
	}
}

@media (min-width: 64em) {
	.block-ohne-anzug-media-wrap {
		top: -10rem;
		bottom: -7.5rem;
	}

	.block-ohne-anzug-media {
		grid-column: 9 / 15;
	}
}

@media (min-width: 78.75em) {
	.block-ohne-anzug-media-wrap {
		top: -14rem;
		bottom: -7.5rem;
	}
}