body.blog .page_content_wrap {
	background: #FAFAFA;
	padding-top: 0 !important;
	padding-bottom: 86px !important;
	/* overflow-x: clip (not hidden) contains any stray horizontal overflow
	   WITHOUT establishing a scroll container, so it does not break the
	   sticky sidebar below. `hidden` here would silently kill position:sticky. */
	overflow-x: clip;
}

body.blog .content_wrap_fullscreen {
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 70px;
	padding-left: 70px;
}

body.blog .content {
	box-sizing: border-box;
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

body.blog.body_style_fullscreen.sidebar_show [class*="content_wrap"] > .content,
body.blog.body_style_fullwide.sidebar_show [class*="content_wrap"] > .content {
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

body.blog .mh-blog-hero {
	padding: 86px 0 54px;
}

body.blog.sidebar_show .content_wrap_fullscreen > .mh-blog-hero {
	grid-column: 1 / -1;
}

body.blog .mh-blog-hero__inner {
	max-width: 760px;
}

body.blog .mh-blog-hero__eyebrow {
	margin: 0 0 18px;
	color: #C8A96E;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

body.blog .mh-blog-hero h1 {
	margin: 0 0 22px;
	color: #0F1923;
	font-size: 64px;
	line-height: 1;
}

body.blog .mh-blog-hero p:not(.mh-blog-hero__eyebrow) {
	margin: 0;
	max-width: 660px;
	color: #4E565D;
	font-size: 19px;
	line-height: 1.6;
}

body.blog .posts_container.classic_wrap {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 44px !important;
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-bottom: 20px !important;
	margin-left: 0 !important;
}

body.blog .posts_container.classic_wrap > [class*="column-"] {
	box-sizing: border-box;
	width: auto !important;
	max-width: 100%;
	float: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

body.blog .post_item.post_layout_classic {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
	background: #FFFFFF;
	overflow: hidden;
}

body.blog .post_item.post_layout_classic .post_featured {
	aspect-ratio: 1.55 / 1;
	overflow: hidden;
}

body.blog .post_item.post_layout_classic .post_featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.blog .post_item.post_layout_classic .post_header,
body.blog .post_item.post_layout_classic .post_meta,
body.blog .post_item.post_layout_classic .post_content {
	padding-right: 28px;
	padding-left: 28px;
}

body.blog .post_item.post_layout_classic .post_header {
	padding-top: 28px;
}

body.blog .post_item.post_layout_classic .post_content {
	padding-bottom: 30px;
}

body.blog .post_item.post_layout_classic .post_title {
	font-size: 28px;
	line-height: 1.18;
	white-space: normal !important;
	word-break: normal;
	overflow-wrap: anywhere !important;
	hyphens: auto;
}

body.blog .post_item.post_layout_classic .post_title a,
body.blog .post_item.post_layout_classic .post_content,
body.blog .post_item.post_layout_classic .post_content_inner {
	display: block;
	max-width: 100%;
	min-width: 0;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

body.blog .sidebar {
	box-sizing: border-box;
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.blog.body_style_fullscreen.sidebar_show [class*="content_wrap"] > .sidebar_custom,
body.blog.body_style_fullwide.sidebar_show [class*="content_wrap"] > .sidebar_custom {
	width: auto !important;
	max-width: 320px !important;
	float: none !important;
}

body.blog .sidebar_inner {
	display: block;
	padding-top: 0;
	border-top: 0;
}

body.blog .sidebar_inner > .elementor {
	display: block;
}

body.blog .sidebar_inner > .elementor > .elementor-element {
	display: block;
}

body.blog .sidebar_inner > .elementor > .elementor-element > .elementor-element {
	min-width: 0;
}

/* Sidebar section spacing. Each section is a heading + its content (Suche /
   Kategorien / Aktuelle Beiträge). Headings already keep 30px above their own
   content, but there was zero gap between one section's content and the next
   heading, so the groups collided (search box touched "Kategorien",
   "Modulares Bauen" touched "Aktuelle Beiträge"). Add a clear gap after each
   content block; the last one (recent posts) needs none. */
body.blog .sidebar_inner .elementor-widget-trx_sc_layouts_search,
body.blog .sidebar_inner .elementor-widget-trx_elm_icon_list {
	margin-bottom: 44px !important;
}

body.blog .widget_recent_posts .post_item {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

/* Constrain the recent-posts thumbnail to its grid column so the title text
   no longer overlaps the image. Elementor's per-widget CSS forces
   .post_thumb to a fixed 100px + 22px right margin (specificity 0,6,0), which
   overflows the 68/82px grid track — hence the overlap. Force the thumb to
   fill its own track and drop the extra margin (the grid gap handles spacing). */
body.blog .widget_recent_posts .post_thumb {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
}

body.blog .widget_recent_posts .post_thumb img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
}

body.blog .widget_recent_posts .post_title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ---------------------------------------------------------------------------
   Header readability on the blog.
   The shared custom header (7050) is a transparent overlay with near-white
   text, designed to sit on the dark homepage hero. The blog has a light
   (#FAFAFA) background, so the logo, nav links and mobile burger are
   invisible. Recolour them to the dark brand tone, keeping the header
   transparent to match the airy editorial hero. Scoped to body.blog only,
   so the homepage overlay header is untouched.
--------------------------------------------------------------------------- */
body.blog .top_panel_custom .elementor-widget-heading .elementor-heading-title a {
	color: #0F1923 !important;
}

body.blog .top_panel_custom .trx-addons-main-nav-menu .trx-addons-menu-link {
	color: #0F1923 !important;
}

body.blog .top_panel_custom .trx-addons-main-nav-menu .trx-addons-menu-item:hover .trx-addons-menu-link,
body.blog .top_panel_custom .trx-addons-main-nav-menu .current-menu-item > .trx-addons-menu-link,
body.blog .top_panel_custom .trx-addons-main-nav-menu .trx-addons-menu-item-current > .trx-addons-menu-link {
	color: #C8A96E !important;
}

body.blog .top_panel_custom .trx-addons-hamburger-toggle,
body.blog .top_panel_custom .trx-addons-hamburger-toggle svg,
body.blog .top_panel_custom .trx-addons-mobile-menu-icon {
	color: #0F1923 !important;
	fill: #0F1923 !important;
}

/* On scroll the fixed header gains `.sc_layouts_row_fixed_on` and a dark
   (#0F1923) background. Invert the logo / nav / burger back to light so they
   stay legible on the dark bar (these rules follow the dark ones above at equal
   specificity, so they only take over once the scrolled class is present). */
body.blog .sc_layouts_row_fixed_on .elementor-widget-heading .elementor-heading-title a,
body.blog .sc_layouts_row_fixed_on .trx-addons-main-nav-menu .trx-addons-menu-link {
	color: #FAFAFA !important;
}

body.blog .sc_layouts_row_fixed_on .trx-addons-hamburger-toggle,
body.blog .sc_layouts_row_fixed_on .trx-addons-hamburger-toggle svg,
body.blog .sc_layouts_row_fixed_on .trx-addons-mobile-menu-icon {
	color: #FAFAFA !important;
	fill: #FAFAFA !important;
}

/* Two-column grid for the full desktop/tablet-landscape range. Starts at 1025px
   (one past the stack breakpoint) so there is no gap where the sidebar floats
   loose over the content. The theme's margin-left: -150px is reset here too —
   without it a grid item would shift left and overlap the content column. */
@media (min-width: 1025px) {
	body.blog.sidebar_show .content_wrap_fullscreen {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 56px;
		align-items: start;
	}

	body.blog.sidebar_show .content_wrap_fullscreen > .content {
		width: auto !important;
		max-width: 100% !important;
		min-width: 0;
	}

	body.blog.sidebar_show .content_wrap_fullscreen > .sidebar {
		width: 320px !important;
		max-width: 320px !important;
		min-width: 0;
		margin-top: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
	}

	/* Stick the (short) sidebar so it stays in view while the long post list
	   scrolls, instead of leaving a tall empty column. The top offset clears
	   the fixed header (~65px) plus breathing room; align-self:start keeps the
	   grid item at content height so it can move within its track. Selector is
	   0,6,2 to beat responsive.css's `position:static !important` (0,5,2). */
	html body.blog.sidebar_show .page_content_wrap > .content_wrap_fullscreen > .sidebar.sidebar_custom {
		position: sticky !important;
		top: 130px !important;
		align-self: start !important;
	}

	/* Elementor sizes its sidebar containers via a per-breakpoint --width
	   variable that resolves too narrow in the 1025-1279 range (Elementor's own
	   breakpoint gap), collapsing the recent-posts content column. The sidebar
	   is a single vertical stack, so force every container to fill the column. */
	body.blog .sidebar_inner .elementor-120 .e-con {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.blog .top_panel_custom .sc_layouts_row_fixed,
	body.blog .top_panel_custom .sc_layouts_row_fixed_always {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	body.blog .widget_recent_posts .post_item {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: 14px;
	}

	body.blog .widget_recent_posts .post_thumb {
		width: 68px;
	}

	body.blog .widget_recent_posts .post_title {
		font-size: 17px;
		line-height: 1.2;
	}
}

/* Below the desktop grid breakpoint the sidebar stacks under the content.
   The parent theme pulls it left with margin-left: calc(-1 * var(--theme-var-sidebar))
   (-150px), and a non-media rule (`.sidebar_custom { max-width:320px }`, specificity
   0,5,1) outranks the mobile `width:100vw` reset — together they cap the sidebar at
   320px and drag it off the left edge. Reset both with 0,5,2 specificity so it wins
   regardless of stylesheet load order. Only below 1025px, where the sidebar
   actually stacks full-width under the content (at 1025px+ the grid owns it). */
@media (max-width: 1024px) {
	html body.blog.sidebar_show .page_content_wrap > .content_wrap_fullscreen > .sidebar,
	html body.blog.sidebar_show .page_content_wrap > .content_wrap_fullscreen > .sidebar_custom {
		box-sizing: border-box !important;
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 1024px) {
	body.blog .page_content_wrap {
		padding-bottom: 72px !important;
	}

	body.blog .content_wrap_fullscreen,
	body.blog .sidebar {
		padding-right: 30px;
		padding-left: 30px;
	}

	body.blog.sidebar_show .content_wrap_fullscreen {
		display: block;
	}

	body.blog.sidebar_show .content_wrap_fullscreen > .sidebar {
		margin-top: 44px;
	}

	body.blog .sidebar_inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	body.blog .mh-blog-hero {
		padding: 70px 0 40px;
	}

	body.blog .mh-blog-hero h1 {
		font-size: 52px;
	}
}

@media (max-width: 767px) {
	body.blog .page_content_wrap {
		padding-bottom: 58px !important;
	}

	body.blog .content_wrap_fullscreen,
	body.blog .sidebar {
		box-sizing: border-box;
		width: 100vw !important;
		max-width: 100vw !important;
		padding-right: 20px;
		padding-left: 20px;
		overflow: hidden;
	}

	body.blog .content,
	body.blog .mh-blog-hero,
	body.blog .mh-blog-hero__inner,
	body.blog .posts_container.classic_wrap,
	body.blog .post_item.post_layout_classic {
		box-sizing: border-box;
		width: calc(100vw - 40px) !important;
		max-width: calc(100vw - 40px) !important;
		min-width: 0 !important;
	}

	body.blog .mh-blog-hero p,
	body.blog .mh-blog-hero h1 {
		max-width: 100% !important;
		overflow-wrap: break-word !important;
	}

	body.blog .mh-blog-hero {
		padding: 54px 0 32px;
	}

	body.blog .mh-blog-hero h1 {
		font-size: 42px;
	}

	body.blog .mh-blog-hero p:not(.mh-blog-hero__eyebrow) {
		font-size: 17px;
	}

	body.blog .posts_container.classic_wrap {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px !important;
		margin-right: 0 !important;
		margin-bottom: 12px;
		margin-left: 0 !important;
	}

	body.blog .posts_container.classic_wrap > [class*="column-"] {
		width: 100% !important;
		max-width: 100%;
		float: none;
		padding-right: 0;
		padding-left: 0;
	}

	body.blog .post_item.post_layout_classic .post_header,
	body.blog .post_item.post_layout_classic .post_meta,
	body.blog .post_item.post_layout_classic .post_content {
		padding-right: 20px;
		padding-left: 20px;
	}

	body.blog .post_item.post_layout_classic .post_title {
		font-size: 24px;
		line-height: 1.2;
	}

	body.blog .post_item.post_layout_classic,
	body.blog .post_item.post_layout_classic .post_featured,
	body.blog .post_item.post_layout_classic .post_featured img,
	body.blog .post_item.post_layout_classic .post_header,
	body.blog .post_item.post_layout_classic .post_meta,
	body.blog .post_item.post_layout_classic .post_content,
	body.blog .post_item.post_layout_classic .post_content_inner {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.blog .sidebar_inner {
		padding-top: 34px;
	}

	body.blog .widget_recent_posts .post_item {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
	}
}