/* Visually hidden but still readable by screen readers/search engines -
   for content that needs to exist in the markup (e.g. a page's one and
   only <h1>) without a visible spot in the design. */
.pze-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
	--pze-bg: #121212;
	--pze-bg-raised: #252525;
	--pze-surface: #181818;
	--pze-surface-raised: #202020;
	--pze-text: #f3f5f5;
	--pze-text-secondary-1: #b3bec4;
	--pze-text-secondary-2: rgba(179, 190, 196, 0.78);
	--pze-text-secondary-3: rgba(179, 190, 196, 0.58);
	--pze-accent: #ff6a00;
	--pze-accent-hover: #ff7c37;
	--pze-accent-tint: #ff6a0011;
	--pze-accent-eng: #19c7c1;
	--pze-accent-eng-hover: #52ddd6;
	--pze-accent-eng-tint: rgba(25, 199, 193, 0.12);
	--pze-success: #7dff95;
	--pze-info: #87d1ff;
	--pze-error: #ff8080;
	--pze-star: var(--pze-accent-hover);
	--pze-border: #333333;
	--pze-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pze-display: "Manrope", var(--pze-font);

	/* Non-token literals used directly in pze-shop.css (card surfaces) -
	   kept as variables too so the light/dark switcher only has to
	   redefine tokens, never rules. */
	--pze-card-grad: linear-gradient(160deg, var(--pze-surface) 0%, var(--pze-surface-raised) 100%);
	--pze-card-border: var(--pze-border);
	--pze-card-border-hover: color-mix(in srgb, var(--pze-border) 70%, var(--pze-text) 30%);
}

@font-face {
	font-family: "Mokoto Glitch";
	src: url("../fonts/mokoto-glitch.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   HEADER (Astra header builder, site-wide)
   ========================================================================== */

#masthead,
#masthead .main-header-bar,
.site-primary-header-wrap,
.ast-above-header-wrap,
.ast-above-header-bar,
.ast-below-header-bar,
.site-below-header-wrap {
	background-color: var(--pze-bg) !important;
}

.ast-header-break-point .main-header-menu {
	background-color: var(--pze-bg-raised);
	color: var(--pze-text);
}

.mobile-menu-toggle-icon .ast-mobile-svg{
	fill: var(--pze-text)!important;
}

.site-branding {
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-title {
	position: relative;
	font-family: "Mokoto Glitch", var(--pze-font);
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: normal;
	letter-spacing: 0;
	color: var(--pze-text) !important;
}

.site-title a {
	font-family: "Mokoto Glitch", var(--pze-font) !important;
	font-weight: 400 !important;
	color: var(--pze-text) !important;
}

.site-title::after {
	content: "\00AE";
	font-family: var(--pze-font);
	font-size: 0.6em;
	vertical-align: text-bottom;
	color: var(--pze-text-secondary-1);
}

/* Bottom-align the "| PRODUCTS" / "| ENGINEERING" suffix with the logo
   image: vertical-align can't do this reliably since the img (vertical-
   align: middle, per Astra) and the ::after text box (baseline) don't
   share a reference line. Flex with align-items: flex-end bottom-aligns
   both the <a>/img and the generated ::after against the same edge
   regardless of their individual line-height/vertical-align. */
.pze-shop-page .site-logo-img,
.pze-engineering-page .site-logo-img {
	display: flex;
	align-items: flex-end;
}

.pze-shop-page .site-logo-img::after {
	content: "| PRODUCTS";
	font-family: var(--pze-font);
	font-weight: 500;
	font-size: 0.75em;
	margin-left: 10px;
	color: var(--pze-accent);
}

.pze-engineering-page .site-logo-img::after {
	content: "| ENGINEERING";
	font-family: var(--pze-font);
	font-weight: 500;
	font-size: 0.75em;
	margin-left: 10px;
	color: var(--pze-accent-eng);
}

.site-header .menu-item {
	display: flex;
	align-items: center;
}

.main-header-menu .menu-link {
	display: inline-block;
	padding: 8px clamp(10px, 1.4vw, 15px);
	color: var(--pze-text-secondary-1) !important;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-decoration: none;
}

/* Was previously also set (to a plain --pze-text white, not the accent
   below) by a second, now-removed rule in pze-shop.css - that rule had
   equal specificity and loaded after this one on shop pages, so it was
   silently winning there. Consolidated to one rule/one color everywhere. */
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
	color: var(--pze-accent) !important;
}

.pze-engineering-page .main-header-menu .menu-item:hover > .menu-link,
.pze-engineering-page .main-header-menu .current-menu-item > .menu-link {
	color: var(--pze-accent-eng) !important;
}

/* The cart only makes sense on the Products side - hidden in Engineering
   context (including on global legal pages when the visitor's remembered
   context is "engineering", see pze_is_engineering_context()). */
.pze-engineering-page .ast-site-header-cart {
	display: none !important;
}

.ast-mobile-menu-buttons-minimal .astra-menu-toggle-icon .menu-toggle-bar,
.astra-menu-toggle-icon .menu-toggle-bar {
	background-color: var(--pze-text) !important;
}

/* Trust bar - one slim row directly under the header. Markup lives in the
   Astra Customizer (Header Builder HTML element), not in theme PHP, so
   these classes won't turn up in a code search - keep them even though
   nothing here references them. Its "Entwickelt von deutschen
   Ingenieuren / Schneller Versand..." messaging is Products-specific, so
   it's turned off entirely in Engineering context rather than restyled -
   the styling itself is global (part of the header, site-wide) even
   though its content currently only makes sense on the Products side. */

.pze-engineering-page .pze-trust-bar {
	display: none !important;
}

.pze-trust-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 28px;
	width: 100%;
	padding: 14px 20px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, transparent, var(--pze-border) 15%, var(--pze-border) 85%, transparent) 1;
}

.pze-trust-bar__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--pze-text-secondary-1);
	font-size: 12.5px;
	line-height: 1.3;
	white-space: nowrap;
}

.pze-trust-bar__item svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--pze-text-secondary-2);
}

.pze-trust-bar__item img {
	flex: 0 0 auto;
}

/* ==========================================================================
   BUTTONS (shared component - Products and Engineering both use it, e.g.
   the Über PZE and Leistungen page CTAs)
   ========================================================================== */

.pze-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 8px;
	font-family: var(--pze-font);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pze-btn--outline {
	border: 1px solid var(--pze-accent);
	color: var(--pze-accent);
	background-color: var(--pze-accent-tint);
}

.pze-btn--outline:hover {
	border-color: var(--pze-text-secondary-1);
	color: var(--pze-text);
}

.pze-btn--accent {
	border: 1px solid var(--pze-accent);
	background-color: var(--pze-accent);
	color: #0a0a0a;
}

.pze-btn--accent:hover {
	background-color: var(--pze-accent-hover);
	border-color: var(--pze-accent-hover);
	color: #0a0a0a;
}

/* Engineering-accent variant - used for the one link off Über PZE into
   the Engineering side, so it visually previews the section it leads to. */

.pze-btn--eng {
	border: 1px solid var(--pze-accent-eng);
	background-color: var(--pze-accent-eng);
	color: var(--pze-text);
}

.pze-btn--eng:hover {
	background-color: var(--pze-accent-eng-hover);
	border-color: var(--pze-accent-eng-hover);
	color: #062120;
}

/* Forminator form buttons (Kontakt on the Products side, Anfrage senden
   on the Engineering side both use Forminator now, not Jetpack's
   [contact-form]) - Forminator renders its own markup/classes, so these
   can't reuse .pze-btn directly. Same visual language, and !important
   because Forminator's own default-theme CSS sets a plain blue
   (#289dcc) with the same single-class specificity. */

.forminator-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 22px !important;
	border: 1px solid var(--pze-border) !important;
	border-radius: 8px !important;
	background-color: var(--pze-surface-raised) !important;
	color: var(--pze-text) !important;
	font-family: var(--pze-font) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.forminator-button:hover {
	border-color: var(--pze-accent) !important;
}

.forminator-button-submit {
	border-color: var(--pze-accent) !important;
	background-color: var(--pze-accent) !important;
	color: #0a0a0a !important;
}

.forminator-button-submit:hover {
	background-color: var(--pze-accent-hover) !important;
	border-color: var(--pze-accent-hover) !important;
}

.forminator-required{
	border-color: var(--pze-accent) !important;
}

.pze-engineering-page .forminator-button:hover {
	border-color: var(--pze-accent-eng) !important;
}

.pze-engineering-page .forminator-button-submit {
	border-color: var(--pze-accent-eng) !important;
	background-color: var(--pze-accent-eng) !important;
	color: #062120 !important;
}

.pze-engineering-page .forminator-button-submit:hover {
	background-color: var(--pze-accent-eng-hover) !important;
	border-color: var(--pze-accent-eng-hover) !important;
}

/* Select2 (Forminator's "Art der Anfrage" dropdown, .forminator-select2)
   replaces the real <select> with its own markup and hides the original
   completely (.select2-hidden-accessible) - our earlier select styling
   never reached it. Select2's default theme is a plain white box with
   dark grey text (#444), which reads as unreadable/mismatched on a dark
   page; the open dropdown panel is also appended straight to <body>
   (outside any of our page wrappers) with the same white default. */

.select2-container--default .select2-selection--single {
	background-color: var(--pze-surface-raised);
	border: 1px solid var(--pze-border);
	border-radius: 8px;
	height: auto;
	padding: 3px 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--pze-text);
	line-height: 1.6;
	padding-left: 13px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--pze-text-secondary-1) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--pze-text-secondary-1) transparent;
}

.select2-dropdown {
	background-color: var(--pze-surface-raised);
	border: 1px solid var(--pze-border);
	border-radius: 8px;
	overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
	background-color: var(--pze-bg);
	border: 1px solid var(--pze-border);
	border-radius: 6px;
	color: var(--pze-text);
}

.select2-results__option {
	color: var(--pze-text-secondary-1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--pze-accent);
	color: #0a0a0a;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--pze-surface);
	color: var(--pze-text);
}

.pze-engineering-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--pze-accent-eng);
	color: #062120;
}

.pze-engineering-page .forminator-required{
	color: var(--pze-accent-eng)!important;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

/* Page wrapper - base dark background/text color, unscoped like the
   layout geometry below: every page (Shop, Engineering, the global
   legal pages, and anything else using Astra's normal template) is dark
   by default. The homepage never reaches these selectors at all (its
   own template, no #primary/.site/.ast-container), so nothing here
   needs a .pze-shop-page/.pze-engineering-page gate any more. */

body,
.site,
#primary,
.ast-container {
	background-color: var(--pze-bg);
	color: var(--pze-text);
}

.site-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .content-area {
	background-color: transparent;
}

/* Content column width/padding - the site's general layout geometry, not
   tied to the dark theme classes above, so intentionally unscoped
   (applies on every page that uses Astra's normal #primary wrapper -
   everything except the homepage, which has its own template and never
   reaches these selectors at all). Previously scoped to .pze-shop-page,
   which meant Engineering pages had no defined content width until this
   moved here. */

/* On the WooCommerce shop/category archive (not on plain pages like
   "Über PZE"), Astra wraps #primary in its own .ast-container, which
   on this template also carries its own 20px side padding - stacking
   with #primary's own 20px above and insetting the grid 40px from the
   edge instead of 20px (the header's own .ast-container has no such
   padding, so its content sits flush at 20px). Zero it out here so
   #primary's padding is the only inset layer, same as everywhere else
   on the site; max-width then only needs to match #primary's own. */
#content .ast-container {
	max-width: 1240px !important;
	padding: 0 !important;
}

#primary {
	max-width: 1240px;
	margin: 0 auto !important;
	/* !important because Astra generates its own responsive container
	   padding dynamically per the Customizer (not in a static file we
	   can target more specifically) and zeroes this out on mobile
	   otherwise, leaving content flush against the viewport edge. */
	padding: 0 20px clamp(48px, 8vw, 96px) !important;
}

/* PZE Home landing template (template-pze-home.php) */

.pze-home-page {
	margin: 0;
}

.pze-home {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--pze-bg);
	color: var(--pze-text);
	font-family: var(--pze-font);
	overflow: hidden;
}

.pze-home::before,
.pze-home::after {
	content: "";
	position: absolute;
	width: min(60vw, 780px);
	height: min(60vw, 780px);
	border-radius: 50%;
	filter: blur(10px);
	pointer-events: none;
	z-index: 0;
}

.pze-home::before {
	top: -18%;
	left: -14%;
	background: radial-gradient(circle, var(--pze-accent-tint) 0%, transparent 70%);
}

.pze-home::after {
	bottom: -22%;
	right: -14%;
	background: radial-gradient(circle, var(--pze-accent-eng-tint) 0%, transparent 70%);
}

.pze-home__brand {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: clamp(24px, 5vw, 56px) 24px clamp(32px, 5vw, 56px);
	animation: pze-home-fade-up 0.7s ease both;
}

.pze-home__brand::after {
	content: "";
	display: block;
	width: min(220px, 60%);
	height: 1px;
	margin: clamp(20px, 3vw, 28px) auto 0;
	background: linear-gradient(90deg, transparent 0%, var(--pze-text-secondary-3) 50%, transparent 100%);
}

.pze-home__brand-logo img {
	max-width: 240px !important;
	width: clamp(140px, 22vw, 240px) !important;
	height: auto;
	filter: drop-shadow(0 0 36px var(--pze-accent-tint));
}

/* Text-logo fallback, used when no custom logo is set in the Customizer */
.pze-home__logo {
	position: relative;
	display: inline-block;
	font-family: "Mokoto Glitch", var(--pze-font);
	font-size: clamp(34px, 5.5vw, 52px);
	font-weight: normal;
	letter-spacing: 0;
	text-shadow: 0 0 44px var(--pze-accent-tint);
}

.pze-home__reg {
	position: absolute;
	left: 100%;
	bottom: 0;
	margin-left: 4px;
	font-family: var(--pze-font);
	font-size: 0.35em;
	white-space: nowrap;
	color: var(--pze-text-secondary-1);
}

.pze-home__tiles {
	position: relative;
	z-index: 1;
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 16px 20px clamp(32px, 6vw, 64px);
}

@media (min-width: 900px) {
	.pze-home__tiles {
		flex-direction: row;
		height: min(76vh, 720px);
		gap: 28px;
		padding: 16px 40px clamp(32px, 6vw, 64px);
	}
}

.pze-tile-wrap {
	position: relative;
	flex: 1 1 0;
	min-height: 400px;
	border-radius: 20px;
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.7);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
	animation: pze-home-fade-up 0.7s ease both;
	animation-delay: 0.12s;
}

.pze-tile-wrap--engineering {
	animation-delay: 0.22s;
}

@media (min-width: 900px) {
	.pze-tile-wrap {
		height: 100%;
	}
}

.pze-tile-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 14%;
	right: 14%;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--pze-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.35s ease;
	z-index: 3;
}

.pze-tile-wrap--engineering::after {
	background: var(--pze-accent-eng);
}

.pze-tile-wrap:hover {
	transform: translateY(-8px) scale(1.015);
	box-shadow: 0 20px 40px -14px rgba(255, 106, 0, 0.35);
}

.pze-tile-wrap--engineering:hover {
	box-shadow: 0 20px 40px -14px rgba(25, 199, 193, 0.35);
}

.pze-tile-wrap:hover::after {
	transform: scaleX(1);
}

.pze-tile-wrap:hover .pze-tile {
	filter: brightness(1.15) saturate(1.1);
}

.pze-tile-wrap:hover .pze-tile__bg {
	transform: scale(1.08);
}

.pze-tile-wrap:hover .pze-tile__cta {
	transform: translateX(2px);
}

.pze-tile-wrap:hover .pze-tile__arrow {
	transform: translateX(5px);
}

.pze-tile {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: clamp(24px, 4vw, 56px);
	color: var(--pze-text);
	text-decoration: none;
	overflow: hidden;
	border-radius: 20px;
	transition: filter 0.35s ease;
}

.pze-tile__bg {
	position: absolute;
	inset: -1px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1.02);
	transition: transform 0.6s ease;
	z-index: 0;
}

.pze-tile::before {
	content: "";
	position: absolute;
	inset: -1px;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.08) 0%, rgba(10, 10, 10, 0.35) 55%, rgba(10, 10, 10, 0.9) 100%);
	z-index: 1;
}

.pze-tile-wrap--products .pze-tile {
	background-color: #141414;
}

.pze-tile-wrap--products .pze-tile::before {
	background: linear-gradient(180deg, rgba(20, 10, 0, 0.05) 0%, rgba(20, 10, 0, 0.4) 55%, rgba(12, 6, 0, 0.93) 100%);
}

.pze-tile-wrap--products .pze-tile__bg {
	background-image: url("../images/tile-products.jpg");
}

.pze-tile-wrap--engineering .pze-tile {
	background-color: #101010;
}

.pze-tile-wrap--engineering .pze-tile::before {
	background: linear-gradient(180deg, rgba(0, 16, 16, 0.05) 0%, rgba(0, 16, 16, 0.4) 55%, rgba(0, 10, 10, 0.93) 100%);
}

.pze-tile-wrap--engineering .pze-tile__bg {
	background-image: url("../images/tile-engineering.jpg");
}

.pze-tile__content {
	position: relative;
	z-index: 2;
	max-width: 480px;
}

.pze-tile__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 106, 0, 0.5);
	border-radius: 999px;
	background: rgba(255, 106, 0, 0.12);
	color: var(--pze-accent);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.pze-tile-wrap--engineering .pze-tile__eyebrow {
	border-color: rgba(25, 199, 193, 0.5);
	background: rgba(25, 199, 193, 0.12);
	color: var(--pze-accent-eng);
}

.pze-tile__title {
	display: block;
	color: var(--pze-text);
	font-family: var(--pze-display);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.1;
	margin-bottom: 14px;
	text-wrap: balance;
}

.pze-tile__subtext {
	display: block;
	color: var(--pze-text-secondary-1);
	font-size: 15.5px;
	line-height: 1.55;
	margin-bottom: 24px;
	max-width: 40ch;
}

.pze-tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 8px;
	background: var(--pze-accent);
	color: #0a0a0a;
	font-weight: 700;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.pze-tile-wrap--products .pze-tile:hover .pze-tile__cta {
	background: var(--pze-accent-hover);
}

.pze-tile-wrap--engineering .pze-tile__cta {
	background: var(--pze-accent-eng);
	color: #062120;
}

.pze-tile-wrap--engineering .pze-tile:hover .pze-tile__cta {
	background: var(--pze-accent-eng-hover);
}

.pze-tile__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

@keyframes pze-home-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pze-home__brand,
	.pze-tile-wrap {
		animation: none;
	}
}

.pze-home__footer {
	text-align: center;
	padding: 16px;
	font-size: 12px;
	color: var(--pze-text-secondary-3);
}

.pze-home__footer a {
	color: var(--pze-text-secondary-2);
	text-decoration: none;
	margin: 0 8px;
}

.pze-home__footer a:hover {
	color: var(--pze-text-secondary-1);
}

/* ==========================================================================
   FOOTER (Astra footer builder, site-wide)
   ========================================================================== */

/* Astra's footer-builder row (menu + copyright + Widerruf-button HTML
   widget) is replaced by the code-driven .pze-footer-main below - hidden
   here rather than removed from the Customizer, so it stays a pure CSS/
   theme-code change (git-tracked, identical on every environment). */
#colophon .site-below-footer-wrap {
	display: none;
}

.pze-footer-main {
	background-color: var(--pze-bg);
	color: var(--pze-text);
	padding: 40px 20px;
	border-top: 1px solid transparent;
	border-image: linear-gradient(to right, transparent, var(--pze-border) 12%, var(--pze-border) 88%, transparent) 1;
}

.pze-footer-main__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto;
}

@media (max-width: 700px) {
	.pze-footer-main__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.pze-footer-main__logo img {
	display: block;
	height: 24px;
	width: auto;
}

.pze-footer-main__tagline {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pze-text-secondary-1);
}

.pze-footer-main__col-title {
	font-family: var(--pze-display);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--pze-text-secondary-2);
	margin: 0 0 14px;
}

.pze-footer-main__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pze-footer-main__links a {
	color: var(--pze-text);
	text-decoration: none;
	font-size: 14px;
}

.pze-footer-main__links a:hover {
	color: var(--pze-accent);
}

.pze-engineering-page .pze-footer-main__links a:hover {
	color: var(--pze-accent-eng);
}

.pze-footer-main__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	max-width: 1200px;
	margin: 28px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--pze-border);
	font-size: 12.5px;
	color: var(--pze-text-secondary-1);
}

.pze-footer-main__widerruf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border-radius: 8px;
	background-color: var(--pze-accent);
	color: #0a0a0a;
	font-weight: 600;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
}

.pze-footer-main__widerruf:hover {
	background-color: var(--pze-accent-hover);
}

.pze-footer-main__made {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pze-footer-main__made img {
	width: 16px;
	height: auto;
	border-radius: 2px;
}

.agb_content a{
	color: var(--pze-accent)!important;
}

.pze-engineering-page .agb_content a{
	color: var(--pze-accent-eng)!important;
}