/* Diederichs theme styles */

body {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Über uns page: intro stats row (1967 / 60.000+ / Europaweit / Familiengeführt) --- */
.diederichs-stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 24px;
}
.diederichs-stats-row > div {
	flex: 1 1 110px;
	min-width: 110px;
}
.diederichs-stat-value {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #BA0309;
	line-height: 1.2;
}
.diederichs-stat-label {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #595959;
	margin-top: 4px;
}

/* --- Über uns page: "Was uns ausmacht" benefit icons above each column --- */
.diederichs-benefit-icon {
	width: 34px;
	height: 34px;
	display: block;
	margin-bottom: 14px;
}

/* --- Produkte page: category tabs ("Unsere Produktbereiche") --- */
.diederichs-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #e2e2e2;
}
.diederichs-tab-btn {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 14px 22px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #595959;
	cursor: pointer;
}
.diederichs-tab-btn.is-active {
	color: #BA0309;
	border-bottom-color: #BA0309;
}
.diederichs-tab-panel {
	display: none;
	flex-wrap: wrap;
	background: #f5f5f5;
}
.diederichs-tab-panel.is-active {
	display: flex;
}
.diederichs-tab-media {
	flex: 1 1 380px;
	min-height: 320px;
	background-size: cover;
	background-position: center;
}
.diederichs-tab-content {
	flex: 1 1 380px;
	padding: 50px;
}
.diederichs-tab-content h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 14px;
	color: #1a1a1a;
}
.diederichs-tab-content p {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #595959;
	margin: 0 0 22px;
}
.diederichs-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}
.diederichs-pill {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #d8d8d8;
	border-radius: 20px;
	background: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	color: #1a1a1a;
}
.diederichs-pill-muted {
	color: #808080;
}
.diederichs-tab-cta {
	display: inline-block;
	background: #BA0309;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 26px;
	border-radius: 2px;
	text-decoration: none;
}
@media (max-width: 600px) {
	.diederichs-tab-content { padding: 30px 24px; }
}

/* --- Small red-bar eyebrow label (Karriere page section labels) --- */
.diederichs-tag {
	position: relative;
	display: inline-block;
	padding-left: 14px;
	margin-bottom: 10px;
	color: #BA0309;
	font-weight: 700;
	font-size: 13px;
}
.diederichs-tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 4px;
	background: #BA0309;
}

/* --- Photo with a solid red backing offset behind it (Karriere page rows
   without a real photo yet — the homepage's equivalent images have this
   border baked into the photo file itself; these use a CSS stand-in). --- */
.diederichs-photo-frame {
	position: relative;
}
.diederichs-photo-frame::before {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	background: #BA0309;
	z-index: 0;
}
.diederichs-photo-frame > * {
	position: relative;
	z-index: 1;
}
.diederichs-photo-frame.diederichs-photo-frame-right::before {
	inset: 14px 14px -14px -14px;
}

/* Every full-bleed section's left/right "Flucht" margin is built on
   var(--wp--preset--spacing--90) (100px). Shrinking that one variable on
   small screens narrows all of them together instead of patching each
   section's inline padding individually. */
@media (max-width: 600px) {
	:root {
		--wp--preset--spacing--90: 20px;
	}
}
@media (min-width: 601px) and (max-width: 960px) {
	:root {
		--wp--preset--spacing--90: 40px;
	}
}
/* Content max-width cap (1300px) for ultra-wide monitors. Every full-bleed
   section's content width is (100vw - 2 * var(--wp--preset--spacing--90)),
   so once the padding needed to keep that at 1300px exceeds the normal
   100px, grow the padding instead — content (including the header nav)
   then never exceeds 1300px, and below that it's just the normal 100px,
   no separate breakpoint needed. */
@media (min-width: 961px) {
	:root {
		--wp--preset--spacing--90: max(100px, calc((100vw - 1300px) / 2));
	}
}

/* "Seit 1967 Partner..." heading: right-aligned only on mobile (where it
   stacks above the left-aligned paragraph); left-aligned at desktop widths
   where it sits beside the paragraph as its own column. */
@media (min-width: 783px) {
	h2.diederichs-aftermarket-heading.has-text-align-right {
		text-align: left;
	}
}

/* --- Header navigation --- */
.wp-block-navigation-item > a {
	color: #1a1a1a;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.wp-block-navigation-item > a:hover {
	color: #BA0309;
}
.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current_page_item > a {
	color: #BA0309;
	border-bottom-color: #BA0309;
}
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #ffffff;
}
/* The flat 8-item nav + logo + Kontakt button needs ~1150px to fit in one row
   (measured), well above WP core's default 600px hamburger breakpoint — so
   force the mobile/overlay menu on for any viewport narrower than that. */
@media (max-width: 1279px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* --- Links --- */
a {
	transition: color 0.15s ease;
}

/* --- Buttons --- */
.wp-block-button__link {
	transition: background-color 0.15s ease;
}
.wp-block-button__link:hover {
	background-color: #890105;
}

/* --- Hero content width cap (moved out of inline style to keep the cover block valid) --- */
.diederichs-hero-content .wp-block-cover__inner-container {
	max-width: 1000px;
}

/* --- Brand bullet list (hero) --- */
ul.diederichs-bullet-red {
	list-style: none;
	padding-left: 0;
}
ul.diederichs-bullet-red li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 6px;
}
ul.diederichs-bullet-red li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	background: #BA0309;
}

/* --- Timeline (Über uns): centered line, alternating left/right cards --- */
.diederichs-tl {
	position: relative;
}
.diederichs-tl::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: #BA0309;
}
.diederichs-tl-row {
	position: relative;
	display: flex;
	margin-bottom: 50px;
}
.diederichs-tl-row:nth-child(odd) {
	justify-content: flex-end;
}
.diederichs-tl-row:nth-child(even) {
	justify-content: flex-start;
}
.diederichs-tl-card {
	width: calc(50% - 50px);
	background: #fff;
	box-sizing: border-box;
}
.diederichs-tl-card img,
.diederichs-tl-card .diederichs-tl-media {
	width: 100%;
	display: block;
}
.diederichs-tl-body {
	padding: 18px 22px 22px;
}
.diederichs-tl-badge {
	position: absolute;
	left: 50%;
	top: 14px;
	transform: translateX(-50%);
	background: #BA0309;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	padding: 7px 18px;
	border-radius: 20px;
	white-space: nowrap;
	z-index: 2;
}
@media (max-width: 782px) {
	.diederichs-tl::before { left: 20px; }
	.diederichs-tl-row,
	.diederichs-tl-row:nth-child(odd),
	.diederichs-tl-row:nth-child(even) {
		justify-content: flex-start;
		padding-left: 50px;
	}
	.diederichs-tl-card { width: 100%; }
	.diederichs-tl-badge { left: 20px; transform: translateX(-50%); }
}

/* --- Footer logo badge straddling the seam above the footer --- */
footer.wp-block-group {
	position: relative;
	/* Subtle background photo behind the footer content (taillight image, very dezent).
	   Layered as background-image (not ::before/z-index) so it composites under the
	   dark background-color and under all in-flow content automatically, with no
	   stacking-context edge cases. First layer (dark overlay) sits on top of the photo. */
	background-image:
		linear-gradient(rgba(28, 28, 28, 0.88), rgba(28, 28, 28, 0.88)),
		url('../images/footer-bg-taillight.webp');
	background-size: cover, cover;
	background-position: center, center 20%;
	background-repeat: no-repeat, no-repeat;
}
footer .diederichs-footer-badge {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 3;
	display: flex !important;
	justify-content: center;
	pointer-events: none;
}
.diederichs-footer-badge img {
	width: 84px;
	height: auto;
	display: block;
}
main.wp-block-group > *:last-child {
	margin-bottom: 0 !important;
}
main.wp-block-group {
	margin-top: 0 !important;
}
header.wp-block-group {
	margin-bottom: 0 !important;
}
header.wp-block-template-part {
	margin-bottom: 0 !important;
	/* Prevent a child block's own bottom margin from collapsing through
	   this boundary and reopening the gap below the header. (header.wp-block-group
	   itself is display:flex, which already blocks collapse from its own children.) */
	display: flow-root;
}
footer.wp-block-group,
footer.wp-block-template-part {
	margin-top: 0 !important;
	/* Prevent a child block's own top margin from collapsing through
	   this boundary and reopening the gap above the footer. */
	display: flow-root;
}
.wp-site-blocks {
	gap: 0 !important;
}

/* --- Checklist with red checkmarks --- */
ul.diederichs-checklist {
	list-style: none;
	padding-left: 0;
}
ul.diederichs-checklist li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
}
ul.diederichs-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: -1px;
	width: 20px;
	height: 20px;
	border: 2px solid #BA0309;
	border-radius: 50%;
	color: #BA0309;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 16px;
}

/* --- Bar-bullet list (Services cards) --- */
ul.diederichs-bar-list {
	list-style: none;
	padding-left: 0;
}
ul.diederichs-bar-list li {
	position: relative;
	padding-left: 14px;
	margin-bottom: 8px;
	font-size: 14px;
	color: #595959;
}
ul.diederichs-bar-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 2px;
	background: #DBDBDB;
}

/* --- Process step number --- */
.diederichs-step-number {
	color: #BA0309;
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 8px;
}

/* --- Media-text left/right control (overrides core grid so .has-media-on-right reliably works) --- */
.wp-block-media-text {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
}
.wp-block-media-text > .wp-block-media-text__media {
	flex: 1 1 50%;
	max-width: 50%;
	margin: 0;
	order: 1;
}
.wp-block-media-text > .wp-block-media-text__content {
	flex: 1 1 50%;
	max-width: 50%;
	align-self: center;
	order: 2;
	padding: 0 60px;
	box-sizing: border-box;
}
.wp-block-media-text.has-media-on-right > .wp-block-media-text__media {
	order: 2;
}
.wp-block-media-text.has-media-on-right > .wp-block-media-text__content {
	order: 1;
}
.wp-block-media-text__media img,
.wp-block-media-text__media > div {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wp-block-media-text.alignfull {
	padding-left: var(--wp--preset--spacing--90);
	padding-right: var(--wp--preset--spacing--90);
	box-sizing: border-box;
}
.wp-block-media-text.diederichs-media-narrow > .wp-block-media-text__media {
	flex: 1 1 42%;
	max-width: 42%;
}
.wp-block-media-text.diederichs-media-narrow > .wp-block-media-text__content {
	flex: 1 1 58%;
	max-width: 58%;
}
.wp-block-media-text.diederichs-media-equal {
	height: 600px;
}
/* Checker-grid: a 5-row / 2-column (50%/50%) grid. Reference size at full
   width: 1300px wide, 405px tall per row (aspect-ratio 1300/405, locked
   exactly — the row scales as one rigid unit, image included, like a
   single image being resized). The photo is a CSS background-image on the
   media cell (background-size:cover) rather than an <img>, so it always
   fills the cell exactly with no separate object-fit/height plumbing.
   Text is the only thing that adapts: font-size is a PURE cqw value (no
   clamp floor/ceiling) so it scales in exact linear proportion with the
   row — same rate as the row's own width/height. container-type lives on
   the *outer* .diederichs-checker-grid wrapper, not on each row: cqw units
   need to resolve against a container the rows can also be queried
   against from outside themselves (a container can't query its own size).
   The 1214px breakpoint is computed, not guessed: at 15px-per-1300px, the
   paragraph's cqw rate is (15/1300)*100 = 1.1538cqw, which crosses below
   14px right around 1213.6px of container width — below that point even
   the smallest comfortable text no longer fits beside the image, so the
   two columns stack instead. */
.diederichs-checker-grid {
	container-type: inline-size;
}
.diederichs-checker-grid .wp-block-media-text {
	aspect-ratio: 1300 / 405;
	align-items: stretch;
}
.diederichs-checker-grid .wp-block-media-text__media {
	height: 100%;
	overflow: hidden;
}
.diederichs-checker-grid .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.diederichs-checker-grid .wp-block-media-text__content {
	overflow: hidden;
}
.diederichs-checker-grid .wp-block-media-text__content h3 {
	font-size: 1.6923cqw;
	line-height: 1.2;
}
.diederichs-checker-grid .wp-block-media-text__content p {
	font-size: 1.1538cqw;
	line-height: 1.4;
}
/* Breakpoint was originally computed from a 14px floor (@container max-width
   1214px) — user tested it and found it kicked in too early (any normal
   laptop window was already stacked); they'd rather text/image keep
   shrinking together, smaller than 14px, for longer. Reusing the site's
   one shared mobile breakpoint (782px viewport, same as every other
   media-text row) instead of a bespoke early one — text does get quite
   small (~8-9px) right before it, which is the direct consequence of
   "let it keep shrinking in the same ratio, just later"; narrow this
   further only if that's specifically flagged as unreadable. */
@media (max-width: 782px) {
	.diederichs-checker-grid .wp-block-media-text {
		aspect-ratio: unset;
	}
	.diederichs-checker-grid .wp-block-media-text__media {
		aspect-ratio: 16 / 9;
		height: auto;
		padding: 0;
	}
	.diederichs-checker-grid .wp-block-media-text__content h3 {
		font-size: 20px;
		line-height: 1.3;
	}
	.diederichs-checker-grid .wp-block-media-text__content p {
		font-size: 15px;
		line-height: 1.6;
	}
}
@media (max-width: 782px) {
	.wp-block-media-text,
	.wp-block-media-text.has-media-on-right {
		flex-direction: column;
	}
	.wp-block-media-text.alignfull {
		padding-left: 0;
		padding-right: 0;
	}
	.wp-block-media-text > .wp-block-media-text__media,
	.wp-block-media-text > .wp-block-media-text__content,
	.wp-block-media-text.has-media-on-right > .wp-block-media-text__media,
	.wp-block-media-text.has-media-on-right > .wp-block-media-text__content,
	.wp-block-media-text.diederichs-media-narrow > .wp-block-media-text__media,
	.wp-block-media-text.diederichs-media-narrow > .wp-block-media-text__content {
		/* flex-basis "50%"/"42%"/"58%" from the desktop rule means WIDTH in a
		   row layout, but once flex-direction switches to column above it
		   means HEIGHT instead — reset the whole shorthand, not just max-width,
		   or the media box collapses to ~0 width. */
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		order: initial;
		padding: 30px 24px;
	}
	.wp-block-media-text > .wp-block-media-text__media,
	.wp-block-media-text.has-media-on-right > .wp-block-media-text__media,
	.wp-block-media-text.diederichs-media-narrow > .wp-block-media-text__media {
		padding: 0;
	}
	.wp-block-media-text.diederichs-media-equal {
		height: auto;
	}
}

/* --- Category / product card hover --- */
.diederichs-card {
	transition: transform 0.2s ease;
}
.diederichs-card:hover {
	transform: translateY(-4px);
}

/* --- Responsive --- */
@media (max-width: 960px) {
	.wp-block-group.alignfull > header,
	header.wp-block-group {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.diederichs-checker-row {
		flex-direction: column !important;
	}
	.diederichs-checker-row > * {
		width: 100% !important;
	}
	.diederichs-category-cards {
		flex-wrap: wrap !important;
	}
	.diederichs-category-cards > * {
		width: 100% !important;
		flex: 1 1 100% !important;
	}
}

@media (max-width: 782px) {
	.diederichs-stat-row {
		flex-wrap: wrap !important;
	}
	.diederichs-stat-row > div {
		flex: 1 1 45% !important;
	}
}

/* --- Footer content grid --- */
@media (max-width: 600px) {
	.diederichs-footer-grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
}
@media (min-width: 601px) and (max-width: 900px) {
	.diederichs-footer-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* --- Karriere page: benefit icon grid --- */
.diederichs-benefits-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px 40px;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}
.diederichs-benefits-grid > div {
	width: 130px;
}
.diederichs-benefits-grid svg {
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
}
.diederichs-benefits-grid p {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
}

/* --- Karriere page: 4-step application process --- */
.diederichs-process-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.diederichs-process-steps > div {
	flex: 1 1 200px;
}
.diederichs-process-steps svg {
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
}
.diederichs-process-steps .diederichs-step-number {
	margin-bottom: 6px;
}
.diederichs-process-steps p {
	font-size: 14px;
	color: #595959;
	margin: 0;
	line-height: 1.4;
}

/* --- Karriere page: application form --- */
.diederichs-apply-form input,
.diederichs-apply-form select {
	width: 100%;
	border: none;
	border-bottom: 1px solid #cccccc;
	background: transparent;
	padding: 8px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #1a1a1a;
	box-sizing: border-box;
}
.diederichs-apply-form input::placeholder {
	color: #808080;
}
.diederichs-apply-form label.diederichs-file-upload {
	display: inline-block;
	border: 1px solid #cccccc;
	border-radius: 2px;
	padding: 10px 20px;
	font-size: 14px;
	color: #595959;
	cursor: pointer;
	background: #fff;
}
.diederichs-apply-form label.diederichs-file-upload input[type="file"] {
	display: none;
}
.diederichs-apply-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px 40px;
}
@media (max-width: 782px) {
	.diederichs-apply-grid {
		grid-template-columns: 1fr;
	}
}