/* ==========================================================================
   Block 05 – okay immobilien. unsere marke.
   Olive background, photo bleeding to the true viewport right edge and down
   to the block's own bottom edge, angular white badge with the logo
   bottom-left.
   ========================================================================== */

.block-marke {
	position: relative;
	/* Below 64em: margin-bottom/padding-bottom are set in the mobile media
	   query below - the badge+logo are in-flow there (see below) and just
	   need a small gap to whatever follows. From 64em up (photo + small
	   corner badge - see below) this becomes 24rem/22.5rem instead, to
	   reserve room for that badge's own overflow and the photo. */
	padding: 0;
	margin-bottom: 0;
	background-color: var(--color-header-2);
	/* horizontal-only: keeps the badge's own width (much wider than the
	   block) from causing page-wide horizontal scroll, while letting it
	   still bleed vertically past the block's bottom edge (see badge). */
	overflow-x: clip;
}

/* Text content must render above both the photo and the badge. Since it's
   normal in-flow (position:static), any positioned sibling (both are
   position:absolute) would otherwise paint over it regardless of z-index -
   static content never wins against positioned content on z-index alone,
   so it needs position:relative here to even enter that comparison. */
.block-marke > .grid-boxed {
	position: relative;
	z-index: 3;
}

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

/* Spec: weight 900, 62px font-size, 68px line-height, 0 letter-spacing
   (same ratio as block 02/03's headings), 200px padding above, running
   width of 6 grid columns. The 200px padding-top only applies in full from
   64em up (see below) - fixed at every size, it was a lot of empty space
   above a small phone's shrunken (clamp-minimum) heading. */
.block-marke-content h2 {
	padding-top: 6rem;
	color: var(--color-accent);
	font-size: clamp(3rem, 3.23vw, 6.2rem);
	line-height: 1.1;
	letter-spacing: 0;
	max-width: calc(6 * var(--col-width) - var(--col-space));
}

@media (min-width: 30em) {
	.block-marke-content h2 {
		padding-top: 10rem;
	}
}

@media (min-width: 48em) {
	.block-marke-content h2 {
		padding-top: 14rem;
	}
}

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

/* Spec: weight 300, 25px font-size, 35px line-height, running width of
   8 grid columns plus the gap between them (i.e. not subtracting the
   trailing column-gap like the other "N columns" widths do). */
.block-marke-content p {
	margin-top: 40px;
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
	max-width: calc(8 * var(--col-width));
}

/* Spec: weight 900 (Black, not bold), same 25px/35px size as the paragraph
   above, running width of 3 grid columns. The 100px padding-bottom (needed
   to clear the badge) only applies in full from 64em up - the badge sits
   lower and smaller below that, so it doesn't need that extra clearance
   there. */
.block-marke-names {
	padding-bottom: 3rem;
	font-weight: var(--font-weight-black);
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
	max-width: calc(3 * var(--col-width) - var(--col-space));
}

/* -- photo: bleeds to the true right viewport edge and down to the
   block's own bottom edge, starting at (boxed) grid column 6. top is an
   approximation ("roughly level with the headline's second line") since
   no exact spec value was given. Only actually shown from 64em up now (see
   the media-wrap's own 64em rule further down) - the photo must stay
   visible there; below 64em the full-bleed badge takes its place instead
   (see below) and the photo is hidden entirely. ---------------------------------------- */

.block-marke-media-wrap {
	margin-top: 3.2rem;
}

.block-marke-media {
	grid-column: 1 / 15;
	display: flex;
	justify-content: flex-end;
}

.block-marke-media img {
	width: 100%;
	height: 100%;
	/* contain, not cover: the container's own aspect ratio isn't fixed (its
	   height comes from .block-marke-media-wrap's absolute top/bottom
	   offsets against .block-marke's height, which varies with the text
	   content's length and the viewport), so depending on that ratio,
	   cover could end up cropping either the width or the height to fill
	   the box - contain guarantees the full image, height included, is
	   always visible, at the cost of possibly not filling the box's full
	   width. 1024-1920px is the exception (see the 64em rule below): there
	   contain always left a visible white gap under the photo instead, so
	   cover (cropping the width instead) is the better trade-off there. */
	object-fit: contain;
	/* top: whenever cover (see below) needs to crop height, this keeps the
	   crop on the bottom only - the top of the photo must never be cut. */
	object-position: left top;
}

/* 1024px-1920px only: the box's own aspect ratio stays narrower than the
   photo's real one (2115x1699) across this whole range, so contain always
   left a white gap below the image here - cover fills the box completely
   instead, cropping the excess width off the right (object-position:left
   keeps the crop anchored to the left, matching the "left" alignment used
   everywhere else on this photo). At/above 1920px (the FHD reference the
   rest of this section is calibrated against) the box's ratio catches up
   to the photo's, so contain already fills it with no visible gap - no
   need to crop there. */
@media (min-width: 64em) and (max-width: 119.99em) {
	.block-marke-media img {
		object-fit: cover;
	}
}

/* -- logo badge -------------------------------------------------------------
   Exact clip-path from Figma, converted to percentages (relative to the
   badge's own 100rem/34.9rem box) instead of fixed px, so the shape scales
   proportionally with the badge's actual rendered size instead of staying
   pinned to one fixed pixel scale - same fix as block 04's zigzag. Pushed
   down past the block's own bottom edge via a negative bottom offset (it
   was already at bottom:0, the lowest position possible within the block's
   own box, so "further down" means extending past that edge, same
   technique as block 03's photo overflow).

   z-index:1 (below the photo's z-index:2, see media-wrap) - both are
   position:absolute with the badge later in the DOM, so without an
   explicit z-index it would paint over the photo instead of sitting
   behind it. */
/* Below 64em the photo is hidden (see .block-marke-media-wrap) and the
   badge + logo take its place instead, so both need their own fluid-scaled
   position/size here rather than a display:none fallback. */
@media (max-width: 63.99em) {
	/* A narrower photo bleed doesn't work the same way the 64em+ tier does,
	   so below that the clip-path badge + logo shows instead of the photo. */
	.block-marke-media-wrap {
		display: none;
	}

	/* Normal in-flow instead of the 64em+ tier's bottom-anchored
	   position:absolute: that tier's badge can grow toward its calibrated
	   size without hitting the text above only because the text's own
	   padding-top grows in step with it at each breakpoint. Below 64em
	   there is no such spec'd pairing, and a fluid, continuously-growing
	   position:absolute badge overlapped the names paragraph above it as it
	   approached that boundary. Flowing it in after the text instead makes
	   that overlap structurally impossible regardless of size, at the cost
	   of the 64em+ styling's bottom-bleed-past-the-section effect.
	   Full-bleed (no grid inset) instead of a small inset corner badge - at
	   narrower widths the 64em+ tier's proportions read as a mostly-empty
	   shape with too little of the angular cut visible, looking cropped.
	   height/width keep the exact same 0.349 ratio as the 64em+ tier, just
	   expressed as vw instead of a fixed rem step since there's no single
	   spec value to land on across this whole range.
	   width:100vw + the negative margin-left (instead of plain width:100%)
	   pins the left edge to the true viewport edge regardless of any
	   horizontal padding on an ancestor - width:100% would only reach
	   .block-marke's own edge, which happens to line up with the viewport
	   in this static prototype (no ancestor padding) but won't once this is
	   wrapped in a WordPress/ACF template.
	   clip-path is the original source SVG's own path (viewBox 1096x349:
	   M181.298 0 L-137.674 232.667 L-201 349 H1096 L999.839 145.417
	   L650.376 199.109 L528.416 0 Z), converted to percentages of that same
	   1096x349 box - unlike the 64em+ tier's clamped version (see its own
	   comment), this keeps the two points that fall left of the box's own
	   left edge (negative x%), so the diagonal carries through to the
	   viewport's true corner instead of being flattened into a hard cut. */
	.block-marke-logo-badge {
		display: block;
		margin-top: 4rem;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		height: 34.9vw;
		background-color: var(--color-white);
		clip-path: polygon(16.54% 0%, -12.56% 66.67%, -18.34% 100%, 100% 100%, 91.23% 41.67%, 59.34% 57.05%, 48.21% 0%);
	}

	.block-marke {
		margin-bottom: 3rem;
		/* .block-marke only clips overflow-x, so overflow-y stays visible -
		   without a padding-bottom to contain it, the logo's negative
		   margin-top (its last child) collapses straight through the
		   section's own bottom edge, and the section's rendered box ends
		   above the logo's actual visible position instead of below it,
		   letting the next section overlap it. A hairline padding is enough
		   to stop the collapse without adding visible extra space. */
		padding-bottom: 0.1rem;
	}
}

@media (min-width: 64em) {
	/* Photo must stay visible from here up (see .block-marke-media-wrap's
	   own 64em rule further down) - small corner badge instead of the
	   full-bleed one below, same grid-tracking design as the original
	   calibration: Grid-column-1 formula (tracks the boxed grid's own
	   centering above ~1472px, same as the rest of the page), shifted left
	   by a fixed 25.6rem so it lands exactly on 0 at FHD (1920px) - that
	   was confirmed as the correct position there. Above 1920px it moves
	   right in step with the grid instead of staying pinned to 0, which
	   didn't match the design at wider viewports.
	   75rem/26.2rem here, growing to the full 100rem/34.9rem at 78.75em
	   (see below) - the fixed 100rem/34.9rem size (calibrated for ~1920px)
	   was nearly the full viewport width at 1024-1260px, instead of a small
	   corner badge. Height always keeps the same 0.349 ratio to width so
	   the clip-path (percentage-based) never distorts. */
	.block-marke-logo-badge {
		display: block;
		position: absolute;
		/* Clamped to a minimum of 0: below ~1920px the unclamped formula
		   goes negative, pushing the box's own left edge past the true
		   viewport edge. .block-marke's overflow-x:clip then hard-cuts the
		   badge at that edge instead of at the box's own 0%/100% clip-path
		   corner (see below), reintroducing the same vertical-seam bug one
		   level up. Pinning to 0 keeps the box's own edge as the single,
		   predictable clip boundary at every width in this tier. */
		left: max(0px, calc(max(var(--boxed-padding), calc((100% - var(--boxed)) / 2)) - 25.6rem));
		bottom: -15rem;
		z-index: 1;
		width: 75rem;
		height: 26.2rem;
		background-color: var(--color-white);
		/* Same source SVG path as the sub-64em rule (unclamped, with the
		   negative x% points) - stays below 1600px; the 100em rule below
		   swaps in a smoothed, bend-free version above that. */
		clip-path: polygon(16.54% 0%, -12.56% 66.67%, -18.34% 100%, 100% 100%, 91.23% 41.67%, 59.34% 57.05%, 48.21% 0%);
	}
}

@media (min-width: 78.75em) {
	.block-marke-logo-badge {
		width: 100rem;
		height: 34.9rem;
	}
}

/* The logo is a direct child of .block-marke (a sibling of the badge, not
   nested inside it) so its "left" percentages resolve against the
   section's actual width - nested inside the badge, they resolved against
   the badge's own fixed 100rem width instead, which was wrong.

   Aligned to the grid: left edge matches where grid column 1 actually
   starts. var(--boxed-padding) alone isn't enough - it ignores
   .grid-boxed's own centering once the viewport exceeds ~1472px (boxed
   max-width + 2x padding), at which point column 1 sits much further from
   the true left edge than just the padding. This mirrors .grid-boxed's own
   left-edge formula. z-index matches the badge so it (being later in the
   DOM) paints on top of it.

   Now fitted fully inside the clip-path with a 100px gap to the badge's
   top edge (badge top, in the same bottom-offset terms as the badge itself,
   sits at -15rem + 34.9rem = 19.9rem; minus the 10rem/100px gap and the
   logo's own 24.3rem height gives bottom:-14.4rem). That leaves only ~6px
   below the logo to the badge's bottom edge, but it stays fully contained
   instead of poking out the top as before. */
.block-marke-logo {
	position: absolute;
	/* Aligned to grid column 1 (matches the text content's own left edge). */
	left: max(var(--boxed-padding), calc((100% - var(--boxed)) / 2));
	bottom: -14.4rem;
	z-index: 1;
	width: calc(2 * var(--col-width) - var(--col-space));
	height: auto;
}

/* Flowed in below the badge instead of position:absolute (see the badge's
   own sub-64em rule above for why) - the logo is a DOM sibling of the
   badge, not nested inside it, so it can't be positioned relative to the
   badge's own (fluid, in-flow) box without knowing that box's rendered
   position, which plain CSS can't express here. Pulled back up over the
   badge with a negative margin-top instead, scaled off the badge's own
   width/height formulas so it stays nested at any viewport in this range -
   a negative margin only moves it relative to its immediately preceding
   sibling (the badge), so this can't reach back up into the text above it
   either.
   Must come after the unconditional rule above - same specificity, so
   source order decides, and this needs to win below 64em.
   First-pass - not derived from a mockup, needs a visual check across this
   whole width range. */
@media (max-width: 63.99em) {
	.block-marke-logo {
		display: block;
		position: relative;
		/* The unconditional rule above sets left/bottom/width for its
		   position:absolute, fixed-rem (64em+) use - now that position is
		   relative instead, left/bottom would otherwise still apply as
		   relative offsets (a positive "bottom" shifts a position:relative
		   box *down*), silently fighting the margin-based placement below,
		   so both are reset. width is overridden below too, back to the
		   same vw-based value the badge itself uses below 64em (see the
		   badge's own rule above) instead of the unconditional rule's fixed
		   rem. */
		left: auto;
		bottom: auto;
		/* Non-positioned siblings should paint in DOM order (badge, then
		   logo, on top) per normal stacking rules, but empirically Chrome
		   painted the badge over the logo without an explicit stacking
		   order - position:relative + z-index forces the intended order. */
		z-index: 2;
		/* Same ~20.8% of badge width ratio as the 64em+ tier, and same
		   18.13% left inset as the clip-path's own first point (see the
		   badge above) - now expressed in vw since the badge itself is
		   full-bleed (100% = 100vw) below 64em instead of a fixed rem
		   step. */
		width: 20.8vw;
		margin-left: 18.13vw;
		/* Logo's rendered height is ~1.1683x its width (206x243 intrinsic),
		   i.e. ~24.3% of the badge width - matches the 64em+ tier's
		   20.8rem/24.3rem logo on a 100rem badge exactly, just in vw. Pulls
		   the logo up by its own height plus a small ~0.6rem gap, so its
		   bottom edge lands just inside the badge's own bottom edge
		   (matching the 64em+ rule's "~6px gap to the badge's bottom edge"
		   nesting) instead of hanging out past it. */
		margin-top: calc(-24.3vw - 0.6rem);
	}
}

/* Scaled down at the 64em tier as the (now smaller) badge, so the logo
   stays proportionally placed inside it instead of poking out the top -
   the badge shrinking without the logo shrinking too left a much bigger,
   wrong-looking gap between the logo's top and the badge's. */
@media (min-width: 64em) and (max-width: 78.74em) {
	.block-marke-logo {
		width: 15.6rem;
	}
}

@media (min-width: 48em) {
	.block-marke-content {
		grid-column: 1 / 9;
	}
}

@media (min-width: 64em) {
	.block-marke {
		padding-bottom: 24rem;
		margin-bottom: 22.5rem;
	}

	.block-marke-names {
		padding-bottom: 10rem;
	}

	.block-marke-logo {
		display: block;
	}

	/* bottom:-22.5rem reaches all the way to the edge of .block-marke's own
	   margin-bottom (22.5rem: 15rem badge overflow + 7.5rem gap to the
	   footer), instead of stopping at the section's own padding-box edge.
	   top:23rem here matches the h2's own 20rem padding-top tier at this
	   width (see .block-marke-content h2). */
	.block-marke-media-wrap {
		position: absolute;
		left: 0;
		right: 0;
		top: 23rem;
		bottom: -22.5rem;
		z-index: 2;
		grid-template-rows: 100%;
	}

	/* Boxed column 6 = grid-wide line 7 (grid-wide's 12 boxed tracks are
	   offset by one leading bleed track); line 15 is the true right edge. */
	.block-marke-media {
		grid-column: 7 / 15;
		height: 100%;
		display: flex;
		justify-content: flex-end;
	}
}

@media (min-width: 64em) and (max-width: 78.74em) {
	/* Tablet-landscape only: starts one grid column earlier (boxed column
	   5 instead of 6) than the 78.75em+ tier - the container here is much
	   taller/narrower relative to the photo's own ratio than at 78.75em+,
	   so object-fit:cover (see the img rule above) was cropping off a much
	   larger share of the image's width to fill it. Widening the box
	   reduces (but, short of colliding with the text column, can't fully
	   eliminate) how much gets cropped. */
	.block-marke-media {
		grid-column: 6 / 15;
	}
}