/*  =========================================================
   Wagner Motoren – custom.css PRODUKTION V3
   Joomla 6 / Astroid

   Bereinigt nach dem Bottom-up-Prinzip:
   Die zuletzt eingefügten, funktionierenden Korrekturen wurden
   in die jeweiligen Hauptbereiche eingearbeitet.

   Aufbau:
   1. Variablen und Basis
   2. Master-Button
   3. Header, Navigation und Sprache
   4. Breadcrumbs und Artikelbereich
   5. 404-Seite
   6. Offcanvas-Menü
   7. Startseiten-Hero, Bildübergang und Vorteile
   8. Footer
   9. Leistungsblock
   10. Motorenübersicht
   11. Startseiten-Abschlussblock
   12. Breadcrumb-Endfassung
   13. Telefonleiste V5
   14. Kontaktkacheln
   15. Kontaktformular und Karte
   16. OpenStreetMap / Leaflet
   17. RSForm Pro
   18. Phoca Download
   19. Artikelüberschriften und Bestätigungsseite
   20. Newsübersicht
   21. Barrierefreiheit
   22. Motor-Detailseiten
   23. Cookie Consent Klaro
   =========================================================  */
/* =========================================================
   1. Variablen und Basis
   ========================================================= */
:root {
	--wm-blue: #000091;
	--wm-blue-dark: #00004f;
	--wm-blue-deep: #020426;
	--wm-blue-light: #1450ff;
	--wm-white: #ffffff;
	--wm-text: #11162a;
	--wm-muted: #667085;
	--wm-border: #e2e6ee;
	--wm-gradient: linear-gradient(135deg, #000091 0%, #0015b8 55%, #1450ff 100%);
	--wm-header-blue: #000091;
	--wm-header-dark: #00005f;
	--wm-header-height: 112px;
	--wm-logo-card-width: 180px;
	--wm-logo-card-height: 138px;
	--wm-logo-overhang: 34px;
	--wm-content-safety-gap: 22px;
	--wm-offcanvas-width: min(390px, 88vw);
	--wm-start-content-gutter: clamp(40px, 7.2vw, 96px);
	--wm-mobile-content-gutter: 24px;
	--wm-contact-cta-height: 86px;
	--wm-contact-cta-footer-offset: 0px;
	--wm-contact-block-gap: clamp(18px, 1.8vw, 30px);
}
/* ==========================================================
   Wagner Motoren – Farbe für markierten Text
   ========================================================== */

::selection {
  color: #000052;
  background: #8fb1ff;
  text-shadow: none;
}

/* Firefox */
::-moz-selection {
  color: #000052;
  background: #8fb1ff;
  text-shadow: none;
}
html, body {
	margin: 0;
	padding: 0;
}
*, *::before, *::after {
	box-sizing: border-box;
}
/* Lange Wörter nur im eigentlichen Inhaltsbereich umbrechen. */
.astroid-component-area h1, .astroid-component-area h2, .astroid-component-area h3, .astroid-component-area p {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.astroid-framework h1, .astroid-framework .h1 {
  letter-spacing: 0.5px !important;
}
/* Astroid-eigenen Home-Button auf Fehlerseiten ausblenden. */
.btn.btn-backtohome.btn-lg {
	display: none !important;
}
/* Font Awesome 7 - JCH-Fix */

@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/media/astroid/assets/vendor/fontawesome/webfonts/fa-solid-900.woff2")
         format("woff2");
}

@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/media/astroid/assets/vendor/fontawesome/webfonts/fa-regular-400.woff2")
         format("woff2");
}

@font-face {
    font-family: "Font Awesome 7 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/media/astroid/assets/vendor/fontawesome/webfonts/fa-brands-400.woff2")
         format("woff2");
}

/* =========================================================
   2. Wagner Motoren Master-Button
   ========================================================= */
.wm-btn {
	--wm-btn-blue: #000091;
	--wm-btn-blue-dark: #00005d;
	--wm-btn-blue-light: #245bff;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-width: 240px;
	min-height: 58px;
	padding: 18px 34px;
	overflow: hidden;
	color: var(--wm-white) !important;
	background: linear-gradient(135deg, var(--wm-btn-blue) 0%, var(--wm-btn-blue-light) 100%);
	border: 0;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 145, 0.28);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, background 0.35s ease;
}
.wm-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-25deg);
	transition: left 0.75s ease;
}
.wm-btn:hover, .wm-btn:focus {
	color: var(--wm-white) !important;
	background: linear-gradient(135deg, var(--wm-btn-blue-dark) 0%, #3d73ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 18px 45px rgba(0, 0, 145, 0.4);
}
.wm-btn:hover::before, .wm-btn:focus::before {
	left: 160%;
}
.wm-btn:active {
	transform: translateY(0);
	box-shadow: 0 8px 20px rgba(0, 0, 145, 0.28);
}
.wm-btn:focus-visible {
	outline: 3px solid rgba(93, 139, 255, 0.58);
	outline-offset: 3px;
}
.wm-btn-arrow {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transition: transform 0.35s ease;
}
.wm-btn:hover .wm-btn-arrow, .wm-btn:focus .wm-btn-arrow {
	transform: translateX(7px);
}
/* =========================================================
   3. Sticky Header
   ========================================================= */
.astroid-section.astroid-header-section.Header {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible !important;
	background: radial-gradient(circle at 55% 0%, rgba(38, 65, 255, 0.18), transparent 42%), linear-gradient(90deg, var(--wm-header-blue) 0%, #000078 52%, var(--wm-header-dark) 100%);
	border: 0;
	box-shadow: 0 10px 28px rgba(0, 0, 35, 0.2);
}
/* Der Hauptheader ist sticky; Astroids zweite Sticky-Kopie wird nicht benötigt. */
#astroid-sticky-header {
	display: none !important;
}
.astroid-section.astroid-header-section.Header > .container {
	width: min(1440px, calc(100% - 56px));
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
}
.astroid-section.astroid-header-section.Header .astroid-row {
	margin: 0;
}
.astroid-section.astroid-header-section.Header .astroid-column {
	padding: 0;
}
.astroid-section.astroid-header-section.Header > .container, .astroid-section.astroid-header-section.Header .astroid-row, .astroid-section.astroid-header-section.Header .astroid-column, .astroid-section.astroid-header-section.Header .astroid-module-position, #astroid-header, #astroid-header > .d-flex, #astroid-header .header-left-section, #astroid-header .header-right-section, #astroid-header .logo-wrapper {
	overflow: visible !important;
}
#astroid-header.astroid-header {
	position: relative;
	width: 100%;
	min-height: var(--wm-header-height);
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: 0;
	box-shadow: none;
}
#astroid-header > .d-flex, #astroid-header .header-left-section, #astroid-header .header-right-section {
	min-height: var(--wm-header-height);
}
#astroid-header > .d-flex {
	position: relative;
	align-items: center;
}
#astroid-header .header-left-section {
	min-width: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 34px;
}
#astroid-header .header-right-section {
	flex: 0 0 auto;
	min-width: auto !important;
	padding: 0 0 0 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
/* Linken Desktop-Offcanvas-Auslöser nicht anzeigen. */
@media (min-width: 1576px) {
	#astroid-header .header-left-section > .offcanvasLeft {
		display: none !important;
	}
	.Pagecontent .breadcrumbs-position {
		padding-left: 35px;
	}
	.Pagecontent .breadcrumbs-position .breadcrumb {

		padding-left: 0 !important;
	}
}
/* ---------------------------------------------------------
   Header-Logo mit exakt definiertem Überstand
   --------------------------------------------------------- */
#astroid-header .logo-wrapper.astroid-logo {
	position: relative;
	z-index: 20;
	flex: 0 0 var(--wm-logo-card-width);
	width: var(--wm-logo-card-width);
	min-width: var(--wm-logo-card-width);
	height: var(--wm-header-height);
	margin: 0;
}
#astroid-header .astroid-logo-image {
	position: absolute;
	top: calc(var(--wm-header-height) - var(--wm-logo-card-height) + var(--wm-logo-overhang));
	left: 0;
	z-index: 25;
	width: var(--wm-logo-card-width);
	height: var(--wm-logo-card-height);
	margin: 0 !important;
	padding: 10px 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden !important;
	background: var(--wm-white) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 8px !important;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#astroid-header .astroid-logo-image:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
#astroid-header .astroid-logo-image img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: calc(var(--wm-logo-card-width) - 26px) !important;
	max-height: calc(var(--wm-logo-card-height) - 22px) !important;
	object-fit: contain;
	filter: contrast(1.08) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.14));
}
#astroid-header .astroid-logo-default {
	display: block !important;
}
#astroid-header .astroid-logo-mobile {
	display: none !important;
}
/* ==========================================================
   Mobiler Hamburger links sichtbar und näher am Rand
   ========================================================== */
/* ---------------------------------------------------------
   Hauptnavigation
   --------------------------------------------------------- */
#astroid-header nav {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 auto;
}
#astroid-header .astroid-nav {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 1.45vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}
#astroid-header .astroid-nav > .nav-item {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	white-space: nowrap !important;
}
#astroid-header .astroid-nav > .nav-item > .nav-link {
	position: relative;
	min-height: var(--wm-header-height);
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.025em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap !important;
	transition: color 0.25s ease;
}
#astroid-header .astroid-nav > .nav-item > .nav-link::after {
	content: "";
	position: absolute;
	right: 50%;
	bottom: 25px;
	left: 50%;
	height: 3px;
	background: #3c70ff;
	opacity: 0;
	transition: right 0.25s ease, left 0.25s ease, opacity 0.25s ease;
}
#astroid-header .astroid-nav > .nav-item > .nav-link:hover, #astroid-header .astroid-nav > .nav-item > .nav-link:focus, #astroid-header .astroid-nav > .nav-item-current > .nav-link, #astroid-header .astroid-nav > .nav-item-active > .nav-link {
	color: var(--wm-white) !important;
}
#astroid-header .astroid-nav > .nav-item > .nav-link:hover::after, #astroid-header .astroid-nav > .nav-item > .nav-link:focus::after, #astroid-header .astroid-nav > .nav-item-current > .nav-link::after, #astroid-header .astroid-nav > .nav-item-active > .nav-link::after {
	right: 0;
	left: 0;
	opacity: 1;
}
#astroid-header .astroid-nav .fa-home {
	font-size: 17px;
}
/* ---------------------------------------------------------
   Sprachumschalter und Header-CTA
   --------------------------------------------------------- */
#astroid-header .header-right-block, #astroid-header .header-block-item, #astroid-header .mod-custom {
	display: flex;
	align-items: center;
}
#astroid-header .header-block-item {
	justify-content: flex-end;
	gap: 14px;
	white-space: nowrap;
}
/* Funktioniert sowohl mit als auch ohne zusätzliche Klasse. */
#astroid-header .mod-languages, #astroid-header .wm-language-switcher {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}
#astroid-header .mod-languages__list, #astroid-header .mod-languages .lang-inline, #astroid-header .wm-language-switcher .lang-inline {
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
}
#astroid-header .mod-languages li, #astroid-header .wm-language-switcher li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	background-color: #07119A;
}
#astroid-header .mod-languages li > a, #astroid-header .wm-language-switcher li > a {
	width: 40px;
	height: 36px;
	padding: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--wm-white);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 5px;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
#astroid-header .mod-languages li > a:hover, #astroid-header .mod-languages .lang-active > a, #astroid-header .wm-language-switcher li > a:hover, #astroid-header .wm-language-switcher .lang-active > a {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.38);
	transform: translateY(-2px);
}
#astroid-header .mod-languages img, #astroid-header .wm-language-switcher img {
	display: block !important;
	width: 28px !important;
	height: 20px !important;
	max-width: 28px !important;
	max-height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover;
	border: 0;
	border-radius: 2px;
}
#astroid-header .wm-btn {
	--wm-btn-blue: #0631df;
	--wm-btn-blue-dark: #00187c;
	--wm-btn-blue-light: #245aff;
	min-width: 190px;
	min-height: 54px;
	padding: 16px 24px;
	gap: 14px;
	border-radius: 2px;
	font-size: 13px;
	letter-spacing: 0.035em;
	box-shadow: 0 12px 28px rgba(0, 19, 180, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* =========================================================
   4. Abstand zwischen Header, Logo und Breadcrumbs
   ========================================================= */
.astroid-section.astroid-component-section.Pagecontent {
	position: relative;
	z-index: 1;
	padding-top: calc(var(--wm-logo-overhang) + var(--wm-content-safety-gap)) !important;
}
.Pagecontent .breadcrumbs-position {
	position: relative;
	z-index: 2;
	min-height: 42px;
	margin-top: 0;
}
/* ==========================================================
   Normale Astroid-Artikelüberschriften – Endfassung

   Titel, Breadcrumb und Artikeltext verwenden exakt
   dieselbe horizontale Ausrichtung.
   Gültig für Deutsch und Englisch.
   ========================================================== */

/* Titelcontainer wie den Artikeltext vollbreit aufbauen */
.com-content-article .astroid-article-title {
  box-sizing: border-box !important;

  width: 100vw !important;
  max-width: none !important;

  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;

  padding-right: var(--wm-start-content-gutter) !important;
  padding-left: var(--wm-start-content-gutter) !important;
}

/* H1 innerhalb des korrekt ausgerichteten Containers zurücksetzen */
.com-content-article .astroid-article-title > h1 {
  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;

  padding-right: 0 !important;
  padding-left: 0 !important;

  text-align: left !important;
}

/* Smartphone – identisch mit Breadcrumb und Artikeltext */
@media (max-width: 650px) {
  .com-content-article .astroid-article-title {
    padding-right:
      calc(
        40px +
        env(safe-area-inset-right, 0px)
      ) !important;

    padding-left:
      calc(
        40px +
        env(safe-area-inset-left, 0px)
      ) !important;
  }
}

/* Sehr kleine Smartphones */
@media (max-width: 390px) {
  .com-content-article .astroid-article-title {
    padding-right:
      calc(
        24px +
        env(safe-area-inset-right, 0px)
      ) !important;

    padding-left:
      calc(
        24px +
        env(safe-area-inset-left, 0px)
      ) !important;
  }
}
/* =========================================================
   5. 404-Fehlerseite
   ========================================================= */
.wm-error-page {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	color: var(--wm-text);
	background: var(--wm-white);
}
.wm-error-hero {
	position: relative;
	min-height: 760px;
	overflow: hidden;
	background: linear-gradient(rgba(2, 4, 38, 0.62), rgba(2, 4, 38, 0.74)), url("/images/1Startseite/Motoreninstandsetzung_Wagner_Motoren_Morschen_2.webp") center center / cover no-repeat;
}
/* Blaue Fläche mit einer "/"-Kante. */
.wm-error-hero::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: 59%;
	pointer-events: none;
	background: radial-gradient(circle at 52% 42%, rgba(35, 65, 255, 0.24), transparent 48%), linear-gradient(135deg, #000091 0%, #000078 58%, #00004f 100%);
	-webkit-clip-path: polygon(0 0, 88% 0, 74% 100%, 0 100%);
	clip-path: polygon(0 0, 88% 0, 74% 100%, 0 100%);
}
.wm-error-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 48%;
	z-index: 1;
	width: 120px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 40, 0.22), rgba(0, 0, 0, 0));
	transform: skewX(-10deg);
	transform-origin: bottom left;
}
.wm-error-inner {
	position: relative;
	z-index: 2;
	width: min(1420px, calc(100% - 64px));
	min-height: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.wm-error-left {
	position: relative;
	z-index: 3;
	flex: 0 0 52%;
	min-width: 0;
	min-height: 760px;
	padding: 48px 70px 72px 0;
	display: flex;
	align-items: center;
}
.wm-error-left::before, .wm-error-left::after {
	content: none;
	display: none;
}
.wm-error-logo {
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 5;
	width: 190px;
	min-height: 165px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wm-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wm-error-logo:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.wm-error-logo img {
	display: block;
	width: auto;
	max-width: 158px;
	max-height: 138px;
	object-fit: contain;
	filter: contrast(1.08) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.18));
}
.wm-error-content {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: 590px;
	padding-top: 115px;
	padding-left: 20px;
}
.wm-error-label {
	display: block;
	margin-bottom: 20px;
	color: #73a9ff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.wm-error-code {
	margin: 0 0 28px;
	color: var(--wm-white);
	font-size: clamp(100px, 11vw, 170px);
	font-weight: 950;
	line-height: 0.78;
	letter-spacing: -0.06em;
	text-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}
.wm-error-content h1 {
	width: 100%;
	max-width: 520px;
	margin: 0 0 22px;
	padding: 0;
	color: var(--wm-white);
	font-size: clamp(29px, 2.7vw, 45px);
	font-weight: 900;
	line-height: 1.07;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.wm-error-content h1::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin-top: 20px;
	background: var(--wm-blue-light);
}
.wm-error-message {
	margin: 0 0 12px;
	color: var(--wm-white);
	font-size: clamp(23px, 2.2vw, 31px);
	font-weight: 800;
	line-height: 1.2;
}
.wm-error-description {
	max-width: 540px;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17px;
	line-height: 1.65;
}
.wm-error-actions {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.wm-error-button {
	min-height: 58px;
	padding: 16px 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	color: var(--wm-white) !important;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wm-error-button span {
	font-size: 25px;
	font-weight: 400;
	line-height: 1;
}
.wm-error-button-primary {
	background: var(--wm-gradient);
	box-shadow: 0 13px 30px rgba(0, 25, 205, 0.32);
}
.wm-error-button-primary:hover, .wm-error-button-primary:focus {
	color: var(--wm-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(0, 25, 205, 0.44);
}
.wm-error-button-outline {
	color: var(--wm-white) !important;
	background: rgba(0, 0, 20, 0.12);
	border-color: rgba(255, 255, 255, 0.72);
}
.wm-error-button-outline:hover, .wm-error-button-outline:focus {
	color: var(--wm-blue) !important;
	background: var(--wm-white);
	border-color: var(--wm-white);
	transform: translateY(-2px);
}
.wm-error-services {
	position: relative;
	z-index: 5;
	background: var(--wm-white);
	border-bottom: 1px solid var(--wm-border);
	box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.05);
}
.wm-error-services-inner {
	width: min(1420px, calc(100% - 64px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}
.wm-error-service {
	min-width: 0;
	min-height: 180px;
	padding: 34px 24px;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	border-right: 1px solid var(--wm-border);
}
.wm-error-service:last-child {
	border-right: 0;
}
.wm-error-service-icon {
	width: 46px;
	min-width: 46px;
	margin-top: 3px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: var(--wm-blue);
	font-size: 37px;
	line-height: 1;
}
.wm-error-service-content {
	min-width: 0;
}
.wm-error-service-content h2 {
	margin: 0 0 10px;
	color: var(--wm-blue);
	font-size: clamp(16px, 1.1vw, 20px) !important;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.wm-error-service-content p {
	margin: 0;
	color: var(--wm-muted);
	font-size: 15px !important;
	line-height: 1.55;
	text-align: left;
}
/* =========================================================
   6. Responsive Anpassungen
   ========================================================= */
/* Kompakter Desktop, Desktop-Menü bleibt sichtbar. */
@media (min-width: 1576px) and (max-width: 1700px) {
	:root {
		--wm-header-height: 104px;
		--wm-logo-card-width: 160px;
		--wm-logo-card-height: 122px;
		--wm-logo-overhang: 26px;
		--wm-content-safety-gap: 20px;
	}
	.astroid-section.astroid-header-section.Header > .container {
		width: calc(100% - 32px);
	}
	#astroid-header .header-left-section {
		gap: 18px;
	}
	#astroid-header .astroid-nav {
		gap: 14px;
	}
	#astroid-header .astroid-nav > .nav-item > .nav-link {
		font-size: 11.5px;
	}
	#astroid-header .header-right-section {
		padding-left: 14px;
	}
	#astroid-header .header-block-item {
		gap: 9px;
	}
	#astroid-header .wm-btn {
		min-width: 164px;
		padding-right: 18px;
		padding-left: 18px;
		gap: 10px;


		font-size: 11.5px;
	}
}
/* =========================================================
   Mobiles Menü ab 1575 px
   Hamburger links, Sprachumschalter rechts
   ========================================================= */
@media (max-width: 1575.98px) {
	/* Bootstrap .d-none überschreiben */
	#astroid-header .header-left-section > .offcanvasLeft.d-none, #astroid-header .header-left-section > .offcanvas-button.d-none, #astroid-header .header-mobilemenu-trigger.d-none, #astroid-header .d-none.header-mobilemenu-trigger {
		display: flex !important;
	}
	/* Linken Offcanvas-Button sicher anzeigen */
	/* Hamburger näher an den linken Rand */
	#astroid-header .header-left-section .burger-menu-button .button {
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
	}
	/* Platz links für den Hamburger */
	/* Rechten Hamburger ausblenden */
	:root {
		--wm-header-height: 96px;
		--wm-logo-card-width: 150px;
		--wm-logo-card-height: 112px;
		--wm-logo-overhang: 20px;
		--wm-content-safety-gap: 18px;
	}
	/*Active nicht anzeigen*/
	li.current a span.nav-title::after {
		display: none !important;
	}
	.astroid-section.astroid-header-section.Header > .container {
		width: calc(100% - 30px);
	}
	/* Desktop-Navigation ausblenden. */
	#astroid-header nav, #astroid-header .header-left-section > nav, #astroid-header .astroid-nav {
		display: none !important;
	}
	#astroid-header > .d-flex {
		position: relative;
		justify-content: space-between !important;
	}
	/* Linken Astroid-Mobile-Trigger bereits ab 1348 px anzeigen. */
	#astroid-header > .d-flex > .d-flex.d-lg-none.justify-content-start {
		position: absolute;
		top: 50%;
		left: 0;
		z-index: 60;
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		transform: translateY(-50%);
	}
	#astroid-header .header-mobilemenu-trigger {
		position: relative;
		z-index: 61;
		display: flex !important;
		align-items: center;
	}
	/* Einen zusätzlich ausgegebenen rechten Burger ausblenden. */
	#astroid-header .header-right-section .offcanvasRight {
		display: none !important;
	}
	/* Logo mittig mit Platz für Hamburger und Sprachen. */
	#astroid-header .logo-wrapper.astroid-logo {
		margin: 0 auto !important;
	}
	#astroid-header .astroid-logo-default {
		display: none !important;
	}
	#astroid-header .astroid-logo-mobile {
		display: block !important;
	}
	/* Sprachumschalter immer rechts sichtbar. */
	#astroid-header .header-right-block, #astroid-header .header-block-item, #astroid-header .mod-languages {
		display: flex !important;
		align-items: center;
	}
	/* Anfrage-Button auf mobilen Breiten ausblenden. */
	#astroid-header #mod-custom447, #astroid-header #mod-custom448 {
		display: none !important;
	}
	#astroid-header .header-block-item {
		gap: 0;
	}
	#astroid-header .burger-menu-button .button {
		width: 48px;
		height: 48px;
		padding: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
	}
	#astroid-header .burger-menu-button .inner, #astroid-header .burger-menu-button .inner::before, #astroid-header .burger-menu-button .inner::after {
		background: var(--wm-white) !important;
	}
	#astroid-header .mod-languages li > a, #astroid-header .wm-language-switcher li > a {
		width: 38px;
		height: 34px;
		padding: 4px;
	}
	#astroid-header .mod-languages img, #astroid-header .wm-language-switcher img {
		width: 25px !important;
		height: 17px !important;
		max-width: 25px !important;
		max-height: 17px !important;
	}
	.Pagecontent .breadcrumbs-position {
		padding-left: 0;
	}
	.Pagecontent .breadcrumbs-position .breadcrumb {
		padding-left: 0 !important;
	}
	.wm-error-hero::before {
		width: 70%;
		-webkit-clip-path: polygon(0 0, 88% 0, 72% 100%, 0 100%);
		clip-path: polygon(0 0, 88% 0, 72% 100%, 0 100%);
	}
	.wm-error-hero::after {
		left: 56%;
	}
	.wm-error-inner {
		width: min(calc(100% - 44px), 1080px);
	}
	.wm-error-left {
		flex-basis: 62%;
		padding-right: 50px;
	}
	.wm-error-content {
		max-width: 540px;
		padding-left: 10px;
	}
	.wm-error-content h1 {
		max-width: 490px;
	}
	.wm-error-services-inner {
		width: min(calc(100% - 44px), 1080px);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wm-error-service:nth-child(2n) {
		border-right: 0;
	}
	.wm-error-service:nth-child(-n + 2) {
		border-bottom: 1px solid var(--wm-border);
	}
	#t-fs8bhwlsh {
		padding: 10px 10px 4px 10px !important;
	}
	/* Hamburger links */
	#astroid-header .header-left-section > .offcanvasLeft, #astroid-header .header-left-section > .offcanvas-button {
		position: absolute;
		top: 50%;
		left: 0 !important;
		z-index: 60;
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
		transform: translateY(-50%);
	}
	#astroid-header .header-left-section .burger-menu-button {
		margin: 0;
		padding: 0;
		margin-left: 0 !important;
	}
	/* Sprachumschalter rechts */
	#astroid-header .header-right-section {
		position: absolute;
		top: 0;
		right: 0 !important;
		z-index: 50;
		min-width: auto !important;
		min-height: var(--wm-header-height);
		padding: 0 !important;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		padding-right: 0 !important;
	}
	/* Platz für Logo, Hamburger und Sprachen */
	#astroid-header .header-left-section {
		position: relative;
		padding-left: 44px !important;
		flex: 1 1 auto !important;
		justify-content: center !important;
		padding: 0 88px 0 44px !important;
		padding-right: 88px !important;
	}
	/* Sprachumschalter kompakt */
	#astroid-header .mod-languages__list, #astroid-header .mod-languages .lang-inline {
		gap: 3px;
	}
	#astroid-header .mod-languages li > a {
		width: 31px;
		height: 29px;
		padding: 3px;
	}
	#astroid-header .mod-languages img {
		width: 21px !important;
		height: 15px !important;
		max-width: 21px !important;
		max-height: 15px !important;
	}
}
@media (max-width: 900px) {
	.wm-error-hero, .wm-error-inner, .wm-error-left {
		min-height: 700px;
	}
	.wm-error-hero::before {
		width: 82%;
		-webkit-clip-path: polygon(0 0, 90% 0, 72% 100%, 0 100%);
		clip-path: polygon(0 0, 90% 0, 72% 100%, 0 100%);
	}
	.wm-error-hero::after {
		left: 66%;
	}
	.wm-error-left {
		flex-basis: 74%;
		padding-right: 42px;
	}
	.wm-error-content {
		max-width: 500px;
	}
	.wm-error-logo {
		width: 165px;
		min-height: 145px;
	}
	.wm-error-logo img {
		max-width: 132px;
		max-height: 115px;
	}
}
@media (max-width: 767px) {
	#astroid-header .burger-menu-button .button {
		width: 44px;
		height: 44px;
	}
	:root {
		--wm-header-height: 84px;
		--wm-logo-card-width: 124px;
		--wm-logo-card-height: 88px;
		--wm-logo-overhang: 8px;
		--wm-content-safety-gap: 14px;
	}
	.astroid-section.astroid-header-section.Header > .container {
		width: calc(100% - 24px);
	}
	.wm-btn {
		width: 100%;
		min-width: 0;
		padding: 18px 24px;
	}
	.wm-error-hero {
		min-height: auto;
		background: linear-gradient(rgba(0, 0, 80, 0.9), rgba(0, 0, 45, 0.94)), url("/images/1Startseite/Motoreninstandsetzung_Wagner_Motoren_Morschen_2.webp") center center / cover no-repeat;
	}
	.wm-error-hero::before {
		width: 100%;
		background: linear-gradient(135deg, rgba(0, 0, 145, 0.9), rgba(0, 0, 65, 0.92));
		-webkit-clip-path: none;
		clip-path: none;
	}
	.wm-error-hero::after {
		display: none;
	}
	.wm-error-inner {
		width: calc(100% - 34px);
		min-height: auto;
		display: block;
	}
	.wm-error-left {
		width: 100%;
		min-height: auto;
		padding: 28px 0 54px;
		display: block;
	}
	.wm-error-logo {
		position: relative;
		top: auto;
		left: auto;
		width: 150px;
		min-height: 130px;
		margin-bottom: 38px;
	}
	.wm-error-logo img {
		max-width: 118px;
		max-height: 104px;
	}
	.wm-error-content {
		max-width: none;
		padding: 0;
	}
	.wm-error-code {
		font-size: 100px;
	}
	.wm-error-content h1 {
		max-width: 100%;
		font-size: 38px;
	}
	.wm-error-message {
		font-size: 24px;
	}
	.wm-error-description {
		font-size: 16px;
	}
	.wm-error-actions {
		display: grid;
	}
	.wm-error-button {
		width: 100%;
	}
	.wm-error-services-inner {
		width: calc(100% - 34px);
		grid-template-columns: 1fr;
	}
	.wm-error-service, .wm-error-service:nth-child(2n) {
		min-height: auto;
		padding: 26px 0;
		border-right: 0;
		border-bottom: 1px solid var(--wm-border);
	}
	.wm-error-service:last-child {
		border-bottom: 0;
	}
	.wm-error-service-content h2 {
		font-size: 18px !important;
	}
}
/* ==========================================================
   Kompakter Header und Sprachumschalter auf kleinen Displays
   ========================================================== */
@media (max-width: 480px) {
	#astroid-header .burger-menu-button .button {
		width: 40px;
		height: 40px;
	}
	:root {
		--wm-header-height: 78px;
		--wm-logo-card-width: 108px;
		--wm-logo-card-height: 78px;
		--wm-logo-overhang: 5px;
		--wm-content-safety-gap: 12px;
		--wm-offcanvas-width: min(350px, 92vw);
	}
	.astroid-section.astroid-header-section.Header > .container {
		width: calc(100% - 20px);
	}
	.wm-error-code {
		font-size: 82px;
	}
	.wm-error-content h1 {
		font-size: 31px;
	}
	.wm-error-message {
		font-size: 21px;
	}
	.wm-error-service {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 14px;
	}
	.wm-error-service-icon {
		width: 42px;
		min-width: 42px;
		font-size: 34px;
	}
}
/* ==========================================================
   Responsiver Anfrage-Button – Endfassung

   1000–1575,98 px:
   Vollständiger Button bleibt unverändert sichtbar.

   300–999,98 px:
   Kompakter Button rechts vom Sprachumschalter.
   Nur Anfangssymbol und Pfeil sichtbar.

   Bis 299,98 px:
   Anfrage-Button vollständig ausgeblendet.
   ========================================================== */
/* ----------------------------------------------------------
   1. Hamburger-Header mit vollständigem Anfrage-Button
   ---------------------------------------------------------- */

@media (min-width: 1000px) and (max-width: 1575.98px) {

  /*
   * Die bestehende mobile Ausblendung überschreiben.
   * Die Gestaltung des vollständigen Buttons bleibt unverändert.
   */
  #astroid-header #mod-custom447,
  #astroid-header #mod-custom448 {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Abstand zwischen Anfrage-Button und Sprachumschalter */
  #astroid-header .header-block-item {
    gap: 10px !important;
  }
}


/* ----------------------------------------------------------
   2. Smartphone: Sprachumschalter links, kleiner Button rechts
   ---------------------------------------------------------- */

@media (min-width: 300px) and (max-width: 999.98px) {

  /* Anfrage-Modul wieder einblenden */
  #astroid-header #mod-custom447,
  #astroid-header #mod-custom448 {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    /* Rechts vom Sprachumschalter */
    order: 2;
  }

  /* Sprachumschalter steht vor dem kleinen Button */
  #astroid-header .mod-languages,
  #astroid-header .wm-language-switcher {
    flex: 0 0 auto !important;
    order: 1;
  }

  #astroid-header .header-right-block,
  #astroid-header .header-block-item {
    display: flex !important;
    align-items: center !important;
  }

  #astroid-header .header-block-item {
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  /*
   * Kompakte Buttonfläche.
   * Der Text bleibt im HTML erhalten, wird aber visuell verborgen.
   */
  #astroid-header #mod-custom447 .wm-btn,
  #astroid-header #mod-custom448 .wm-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    flex: 0 0 48px !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 6px !important;
    gap: 0 !important;

    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;

    border-radius: 4px;
  }

  /* Anfangssymbol wieder sichtbar machen */
  #astroid-header #mod-custom447 .wm-btn i,
  #astroid-header #mod-custom448 .wm-btn i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* SVG-Absicherung für das Anfangssymbol */
  #astroid-header #mod-custom447 .wm-btn svg,
  #astroid-header #mod-custom448 .wm-btn svg {
    display: block !important;

    flex: 0 0 auto;

    width: 15px !important;
    height: 15px !important;
  }

  /* Pfeil am rechten Rand */
  #astroid-header #mod-custom447 .wm-btn-arrow,
  #astroid-header #mod-custom448 .wm-btn-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 14px !important;

    width: 14px !important;
    height: 18px !important;

    font-size: 18px !important;
    line-height: 1 !important;
  }
}


/* ----------------------------------------------------------
   3. Sehr schmale Geräte: Elemente kompakter anordnen
   ---------------------------------------------------------- */

@media (min-width: 300px) and (max-width: 380px) {

  #astroid-header .header-block-item {
    gap: 2px !important;
  }

  #astroid-header #mod-custom447 .wm-btn,
  #astroid-header #mod-custom448 .wm-btn {
    flex-basis: 42px !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  #astroid-header #mod-custom447 .wm-btn i,
  #astroid-header #mod-custom448 .wm-btn i {
    font-size: 13px !important;
  }

  #astroid-header #mod-custom447 .wm-btn svg,
  #astroid-header #mod-custom448 .wm-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  #astroid-header #mod-custom447 .wm-btn-arrow,
  #astroid-header #mod-custom448 .wm-btn-arrow {
    flex-basis: 12px !important;

    width: 12px !important;
    font-size: 16px !important;
  }

  /* Sprachflaggen geringfügig verkleinern */
  #astroid-header .mod-languages li > a,
  #astroid-header .wm-language-switcher li > a {
    width: 28px !important;
    height: 28px !important;
    padding: 3px !important;
  }

  #astroid-header .mod-languages img,
  #astroid-header .wm-language-switcher img {
    width: 19px !important;
    height: 14px !important;
    max-width: 19px !important;
    max-height: 14px !important;
  }
}


/* ----------------------------------------------------------
   4. Unter 300 px vollständig ausblenden
   ---------------------------------------------------------- */

@media (max-width: 299.98px) {

  #astroid-header #mod-custom447,
  #astroid-header #mod-custom448 {
    display: none !important;
  }
}

/* =========================================================
   7. Astroid Offcanvas-Menü im Wagner-Motoren-Design
   ========================================================= */
/* Dunkler Seitenhintergrund */
#astroid-offcanvas, .astroid-offcanvas {
	width: var(--wm-offcanvas-width) !important;
	max-width: var(--wm-offcanvas-width) !important;
	color: var(--wm-white);
	background: radial-gradient( circle at 20% 0%, rgba(47, 91, 255, 0.24), transparent 38%), linear-gradient( 155deg, #000091 0%, #00006d 48%, #00003f 100%) !important;
	border: 0 !important;
	box-shadow: 24px 0 60px rgba(0, 0, 35, 0.38);
	z-index: 30000 !important;
}
/* Inhalt des Offcanvas-Menüs */
#astroid-offcanvas .offcanvas-inner, #astroid-offcanvas .astroid-offcanvas-inner, .astroid-offcanvas .offcanvas-inner, .astroid-offcanvas .astroid-offcanvas-inner {
	min-height: 100%;
	padding: 30px 24px 36px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Oberer Bereich */
#astroid-offcanvas .offcanvas-header, #astroid-offcanvas .astroid-offcanvas-header, .astroid-offcanvas .offcanvas-header, .astroid-offcanvas .astroid-offcanvas-header {
	min-height: 74px;
	margin: 0 0 18px;
	padding: 0 0 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
/* Logo im mobilen Menü */
#astroid-offcanvas .astroid-logo-image, #astroid-offcanvas .offcanvas-logo, .astroid-offcanvas .astroid-logo-image, .astroid-offcanvas .offcanvas-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	min-height: 82px;
	padding: 8px 10px;
	background: var(--wm-white) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
#astroid-offcanvas .astroid-logo-image img, #astroid-offcanvas .offcanvas-logo img, .astroid-offcanvas .astroid-logo-image img, .astroid-offcanvas .offcanvas-logo img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 104px !important;
	max-height: 68px !important;
	object-fit: contain;
}
/* Schließen-Schaltfläche */
#astroid-offcanvas .close-offcanvas, #astroid-offcanvas .offcanvas-close, #astroid-offcanvas [data-dismiss="offcanvas"], #astroid-offcanvas [data-bs-dismiss="offcanvas"], .astroid-offcanvas .close-offcanvas, .astroid-offcanvas .offcanvas-close {
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wm-white) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 6px;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
#astroid-offcanvas .close-offcanvas:hover, #astroid-offcanvas .offcanvas-close:hover, #astroid-offcanvas [data-dismiss="offcanvas"]:hover, #astroid-offcanvas [data-bs-dismiss="offcanvas"]:hover, .astroid-offcanvas .close-offcanvas:hover, .astroid-offcanvas .offcanvas-close:hover {
	background: rgba(255, 255, 255, 0.18) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: rotate(4deg);
}
/* Navigation zurücksetzen */
#astroid-offcanvas ul, #astroid-offcanvas .menu, #astroid-offcanvas .nav, #astroid-offcanvas .astroid-mobilemenu, .astroid-offcanvas ul, .astroid-offcanvas .menu, .astroid-offcanvas .nav, .astroid-offcanvas .astroid-mobilemenu {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Hauptmenüpunkte */
#astroid-offcanvas .nav-item, #astroid-offcanvas .menu-item, #astroid-offcanvas li, .astroid-offcanvas .nav-item, .astroid-offcanvas .menu-item, .astroid-offcanvas li {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}
/* Hauptlinks */
#astroid-offcanvas .nav-link, #astroid-offcanvas .menu-link, #astroid-offcanvas li > a, .astroid-offcanvas .nav-link, .astroid-offcanvas .menu-link, .astroid-offcanvas li > a {
	position: relative;
	min-height: 56px;
	margin: 0 0 7px;
	padding: 15px 48px 15px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.92) !important;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 5px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.035em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
/* Blaue Akzentlinie */
#astroid-offcanvas .nav-link::before, #astroid-offcanvas .menu-link::before, #astroid-offcanvas li > a::before, .astroid-offcanvas .nav-link::before, .astroid-offcanvas .menu-link::before, .astroid-offcanvas li > a::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 3px;
	background: #3c70ff;
	border-radius: 0 3px 3px 0;
	opacity: 0;
	transform: scaleY(0.45);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Hover und aktive Seite */
#astroid-offcanvas .nav-link:hover, #astroid-offcanvas .nav-link:focus, #astroid-offcanvas .menu-link:hover, #astroid-offcanvas li > a:hover, #astroid-offcanvas .active > a, #astroid-offcanvas .current > a, #astroid-offcanvas .nav-item-active > a, #astroid-offcanvas .nav-item-current > a, .astroid-offcanvas .nav-link:hover, .astroid-offcanvas .nav-link:focus, .astroid-offcanvas .menu-link:hover, .astroid-offcanvas li > a:hover, .astroid-offcanvas .active > a, .astroid-offcanvas .current > a {
	color: var(--wm-white) !important;
	background: rgba(36, 91, 255, 0.20);
	border-color: rgba(91, 132, 255, 0.42);
	transform: translateX(3px);
}
#astroid-offcanvas .nav-link:hover::before, #astroid-offcanvas .nav-link:focus::before, #astroid-offcanvas .menu-link:hover::before, #astroid-offcanvas li > a:hover::before, #astroid-offcanvas .active > a::before, #astroid-offcanvas .current > a::before, #astroid-offcanvas .nav-item-active > a::before, #astroid-offcanvas .nav-item-current > a::before, .astroid-offcanvas .nav-link:hover::before, .astroid-offcanvas .nav-link:focus::before, .astroid-offcanvas li > a:hover::before, .astroid-offcanvas .active > a::before, .astroid-offcanvas .current > a::before {
	opacity: 1;
	transform: scaleY(1);
}
/* Untermenü-Schalter */
#astroid-offcanvas .menu-item-toggle, #astroid-offcanvas .dropdown-toggle, #astroid-offcanvas .submenu-toggle, #astroid-offcanvas .nav-item-caret, .astroid-offcanvas .menu-item-toggle, .astroid-offcanvas .dropdown-toggle, .astroid-offcanvas .submenu-toggle, .astroid-offcanvas .nav-item-caret {
	position: absolute;
	top: 7px;
	right: 0;
	z-index: 4;
	width: 46px;
	height: 46px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wm-white) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* Untermenüs */
#astroid-offcanvas .nav-child, #astroid-offcanvas .dropdown-menu, #astroid-offcanvas .submenu, .astroid-offcanvas .nav-child, .astroid-offcanvas .dropdown-menu, .astroid-offcanvas .submenu {
	position: static !important;
	float: none !important;
	width: 100%;
	min-width: 0;
	margin: 4px 0 10px;
	padding: 2px 0 2px 14px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}
#astroid-offcanvas .nav-child li > a, #astroid-offcanvas .dropdown-menu li > a, #astroid-offcanvas .submenu li > a, .astroid-offcanvas .nav-child li > a, .astroid-offcanvas .dropdown-menu li > a, .astroid-offcanvas .submenu li > a {
	min-height: 46px;
	margin-bottom: 5px;
	padding: 12px 42px 12px 16px;
	color: rgba(255, 255, 255, 0.78) !important;
	background: rgba(0, 0, 40, 0.16);
	border-color: rgba(255, 255, 255, 0.07);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.025em;
}
/* Optionaler Modulbereich unter dem Menü */
#astroid-offcanvas .moduletable, #astroid-offcanvas .astroid-module-position, .astroid-offcanvas .moduletable, .astroid-offcanvas .astroid-module-position {
	margin-top: 24px;
}
/* Sprachumschalter innerhalb des Offcanvas-Menüs */
#astroid-offcanvas .mod-languages, .astroid-offcanvas .mod-languages {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
#astroid-offcanvas .mod-languages .lang-inline, .astroid-offcanvas .mod-languages .lang-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}
#astroid-offcanvas .mod-languages a, .astroid-offcanvas .mod-languages a {
	width: 42px;
	height: 38px;
	padding: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 5px;
}
#astroid-offcanvas .mod-languages img, .astroid-offcanvas .mod-languages img {
	display: block;
	width: 28px !important;
	height: 19px !important;
	max-width: 28px !important;
	max-height: 19px !important;
	object-fit: cover;
	border-radius: 2px;
}
/* Hintergrundabdunklung */
.st-pusher::after, .astroid-offcanvas-overlay, .offcanvas-overlay {
	background: rgba(2, 4, 38, 0.62) !important;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 29990 !important;
}
/* Scrollbar passend gestalten */
#astroid-offcanvas, #astroid-offcanvas .offcanvas-inner, .astroid-offcanvas, .astroid-offcanvas .offcanvas-inner {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.34) transparent;
}
#astroid-offcanvas::-webkit-scrollbar, #astroid-offcanvas .offcanvas-inner::-webkit-scrollbar, .astroid-offcanvas::-webkit-scrollbar, .astroid-offcanvas .offcanvas-inner::-webkit-scrollbar {
	width: 7px;
}
#astroid-offcanvas::-webkit-scrollbar-thumb, #astroid-offcanvas .offcanvas-inner::-webkit-scrollbar-thumb, .astroid-offcanvas::-webkit-scrollbar-thumb, .astroid-offcanvas .offcanvas-inner::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
}
/* Kleine Smartphones */
@media (max-width: 480px) {
	#astroid-offcanvas .offcanvas-inner, #astroid-offcanvas .astroid-offcanvas-inner, .astroid-offcanvas .offcanvas-inner, .astroid-offcanvas .astroid-offcanvas-inner {
		padding: 24px 18px 30px;
	}
	#astroid-offcanvas .nav-link, #astroid-offcanvas .menu-link, #astroid-offcanvas li > a, .astroid-offcanvas .nav-link, .astroid-offcanvas .menu-link, .astroid-offcanvas li > a {
		min-height: 52px;
		padding: 14px 44px 14px 15px;
		font-size: 13px;
	}
}
/* Bewegungsreduzierung */
/* ==========================================================
   Astroid Offcanvas-Schließen-Button

   Wichtig:
   display, opacity und visibility werden absichtlich nicht
   gesetzt. Astroid steuert selbst, wann der Button sichtbar ist.
   ========================================================== */
#astroid-offcanvas .close-offcanvas, #astroid-offcanvas .offcanvas-close, #astroid-offcanvas [data-dismiss="offcanvas"], #astroid-offcanvas [data-bs-dismiss="offcanvas"] {
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 6px;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
/* Die Box exakt im Button zentrieren */
#astroid-offcanvas button.offcanvas-close-btn .box {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: block !important;
	width: 26px !important;
	height: 26px !important;
	transform: translate(-50%, -50%) !important;
}
/* Erste Linie des X */
#astroid-offcanvas button.offcanvas-close-btn .inner {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: block !important;
	width: 24px !important;
	height: 2px !important;
	margin: 0 !important;
	background: #ffffff !important;
	border: 0 !important;
	opacity: 1 !important;
	transform: translate(-50%, -50%) rotate(45deg) !important;
}
/* Zweite Linie des X */
#astroid-offcanvas button.offcanvas-close-btn .inner::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	display: block !important;
	width: 24px !important;
	height: 2px !important;
	background: #ffffff !important;
	border: 0 !important;
	opacity: 1 !important;
	transform: rotate(90deg) !important;
}
/* Dritte Hamburger-Linie deaktivieren */
#astroid-offcanvas button.offcanvas-close-btn .inner::after {
	content: none !important;
	display: none !important;
}
/* Zusätzliche Absicherung, falls Astroid aria-hidden verwendet */
#astroid-offcanvas[aria-hidden="true"] button.offcanvas-close-btn {
	visibility: hidden !important;
	pointer-events: none !important;
}
/* Hover nur bei tatsächlich sichtbarem Menü */
#astroid-offcanvas button.offcanvas-close-btn:hover, #astroid-offcanvas button.offcanvas-close-btn:focus-visible {
	background: rgba(255, 255, 255, 0.18) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	transform: rotate(4deg);
}
/* ==========================================================
   Linke Linie/Schatten am Inhaltsbereich entfernen
   ========================================================== */
.Pagecontent .astroid-component.shadow-sm, .Pagecontent .astroid-component {
	border: 0 !important;
	border-left: 0 !important;
	box-shadow: none !important;
}
.Pagecontent .astroid-component-area {
	border: 0 !important;
	border-left: 0 !important;
	box-shadow: none !important;
}
/* ==========================================================
   Wagner Motoren – Startseiten-Hero
   Bereinigt, dedupliziert und responsiv optimiert
   ========================================================== */
.Pagecontent #ta1-l3s5mo9ci, .Pagecontent #ta1-l3s5mo9ci .top-a-1-position, .Pagecontent #ta1-l3s5mo9ci .mod-custom, .Pagecontent #ta1-l3s5mo9ci .astroid-row, .Pagecontent #ta1-l3s5mo9ci .astroid-column, .Pagecontent #ta1-l3s5mo9ci .astroid-module-position {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.Pagecontent #ta1-l3s5mo9ci .astroid-row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}
/* Alle Hero-Bereiche in Top-A-1 automatisch vollflächig */
.Pagecontent #ta1-l3s5mo9ci .wm-home-hero {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	width: 100vw !important;
	max-width: none !important;
	margin-top: 0 !important;
	margin-right: calc(50% - 50vw) !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	transform: none !important;
}
/* ==========================================================
   2. Hero-Grundaufbau
   ========================================================== */
.wm-home-hero {
	--wm-hero-height: 660px;
	--wm-hero-cut-top: 43%;
	--wm-hero-cut-bottom: 31%;
	/*
     MASTER-VARIABLEN FUER DAS WECHSELBARE HERO-BILD

     Das konkrete Bild wird NICHT in dieser custom.css eingetragen.
     Es wird je Menuepunkt oder direkt am Modul gesetzt, zum Beispiel:

     .wm-home-hero {
       --wm-hero-image: url("/images/pfad/zum-bild.webp");
     }
  */
	--wm-hero-image-position: right center;
	--wm-hero-image-size: auto 100%;
	--wm-hero-image-overlay: linear-gradient( 90deg, rgba(2, 4, 38, 0.04) 0%, rgba(2, 4, 38, 0) 100%);
	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: var(--wm-hero-height);
	overflow: hidden;
	color: var(--wm-white, #ffffff);
	/*
     Die blaue Flaeche ist der echte Hero-Hintergrund.
     Dadurch bleibt die Darstellung unter Safari, iOS und iPadOS stabil.
  */
	background: radial-gradient( circle at 24% 28%, rgba(36, 91, 255, 0.22), transparent 42%), linear-gradient( 135deg, #000091 0%, #000069 58%, #000041 100%);
	border-bottom: 3px solid rgba(255, 255, 255, 0.9);
}
/* Wechselbares Bild auf einer eigenen, WebKit-stabilen Ebene */
.wm-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--wm-blue-deep, #020426);
	background-image: var(--wm-hero-image-overlay), var(--wm-hero-image, none);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, var(--wm-hero-image-position);
	background-size: 100% 100%, var(--wm-hero-image-size);
	-webkit-clip-path: polygon( var(--wm-hero-cut-top) 0, 100% 0, 100% 100%, var(--wm-hero-cut-bottom) 100%);
	clip-path: polygon( var(--wm-hero-cut-top) 0, 100% 0, 100% 100%, var(--wm-hero-cut-bottom) 100%);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/*  Blauer Diagonalbalken entlang der Bildkante.  */
.wm-home-hero::after {
	  content: "" !important;
  display: block !important;

  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  /* Dunkle Außenkanten und leuchtender blauer Kern */
  background: linear-gradient(
    90deg,
    var(--wm-blue-dark, #00004f) 0%,
    var(--wm-blue, #000091) 18%,
    var(--wm-blue-light, #1450ff) 38%,
    #9bb8ff 50%,
    var(--wm-blue-light, #1450ff) 62%,
    var(--wm-blue, #000091) 82%,
    var(--wm-blue-dark, #00004f) 100%
  );


  -webkit-clip-path: polygon(
    calc(var(--wm-hero-cut-top) - 3px) 0,
    calc(var(--wm-hero-cut-top) + 3px) 0,
    calc(var(--wm-hero-cut-bottom) + 3px) 100%,
    calc(var(--wm-hero-cut-bottom) - 3px) 100%
  );

  clip-path: polygon(
    calc(var(--wm-hero-cut-top) - 3px) 0,
    calc(var(--wm-hero-cut-top) + 3px) 0,
    calc(var(--wm-hero-cut-bottom) + 3px) 100%,
    calc(var(--wm-hero-cut-bottom) - 3px) 100%
  );

  filter:
    drop-shadow(0 0 3px rgba(155, 184, 255, 0.95))
    drop-shadow(0 0 8px rgba(20, 80, 255, 0.85))
    drop-shadow(0 0 16px rgba(0, 0, 145, 0.55));

  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* ==========================================================
   3. Inhalt
   ========================================================== */
.wm-home-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: inherit;
	margin: 0;
	padding-right: clamp(40px, 5vw, 100px);
	padding-left: clamp(50px, 6vw, 120px);
	display: flex;
	align-items: center;
}
.wm-home-hero__content {
	width: min(40%, 590px);
	margin: 0;
	padding: clamp(70px, 8vw, 120px) 34px clamp(65px, 7vw, 100px) 0;
}
.wm-home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	color: #78a8ff;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.wm-home-hero__eyebrow::before {
	content: "";
	width: 42px;
	height: 3px;
	flex: 0 0 auto;
	background: var(--wm-blue-light, #1450ff);
	box-shadow: 0 0 14px rgba(20, 80, 255, 0.5);
}
.wm-home-hero__content .wm-home-hero__title {
	max-width: 100%;
	margin: 0 0 26px;
	padding: 0;
	color: var(--wm-white, #ffffff);
	font-size: clamp(46px, 4.6vw, 76px);
	font-weight: 950;
	line-height: 0.98;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 2px 1px rgba(0, 0, 0, 0.2);
}
.wm-home-hero__content .wm-home-hero__title span {
	display: block;
}
.wm-home-hero__content .wm-home-hero__title::after {
	content: "";
	display: block;
	width: 84px;
	height: 4px;
	margin-top: 24px;
	background: linear-gradient( 90deg, var(--wm-blue-light, #1450ff), #6d99ff);
	box-shadow: 0 0 16px rgba(36, 91, 255, 0.48);
}
.wm-home-hero__text {
	max-width: 540px;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: clamp(17px, 1.35vw, 20px);
	font-weight: 500;
	line-height: 1.65;
	text-align: left;
	hyphens: none;
}
/* ==========================================================
   4. Buttons
   ========================================================== */
.wm-home-hero__actions {
	margin-top: 38px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}
.wm-home-hero .wm-btn {
	min-width: 210px;
	min-height: 58px;
	padding: 17px 26px;
	font-size: 13px;
}
.wm-home-hero__button-outline {
	position: relative;
	min-width: 210px;
	min-height: 58px;
	padding: 17px 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	overflow: hidden;
	color: var(--wm-white, #ffffff) !important;
	background: rgba(0, 0, 40, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: 2px;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.15);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.wm-home-hero__button-outline span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	transition: transform 0.3s ease;
}
.wm-home-hero__button-outline:hover, .wm-home-hero__button-outline:focus {
	color: var(--wm-blue, #000091) !important;
	background: var(--wm-white, #ffffff);
	border-color: var(--wm-white, #ffffff);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.wm-home-hero__button-outline:hover span, .wm-home-hero__button-outline:focus span {
	transform: translateX(6px);
}
.wm-home-hero__button-outline:focus-visible {
	outline: 3px solid rgba(93, 139, 255, 0.7);
	outline-offset: 3px;
}
/* ==========================================================
   5. Übergangsbereich: 1327 bis 1875 px
   Text und Buttons bleiben sicher vor der "/"-Kante
   ========================================================== */
@media (min-width: 1327px) and (max-width: 1875px) {
	.wm-home-hero {
		--wm-hero-height: 650px;
		--wm-hero-cut-top: 52%;
		--wm-hero-cut-bottom: 40%;
		--wm-hero-image-position: right center;
		--wm-hero-image-size: auto 100%;
	}
	.wm-home-hero__inner {
		padding-right: clamp(34px, 4vw, 70px);
		padding-left: clamp(44px, 5vw, 86px);
	}
	.wm-home-hero__content {
		width: min(calc(var(--wm-hero-cut-bottom) - 4%), 590px);
		max-width: 590px;
		padding-right: 24px;
	}
	.wm-home-hero__content .wm-home-hero__title {
		font-size: clamp(44px, 4vw, 68px);
		line-height: 0.99;
	}
	.wm-home-hero__text {
		max-width: 100%;
		font-size: clamp(16px, 1.2vw, 19px);
	}
	.wm-home-hero__actions {
		width: 100%;
		max-width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
	.wm-home-hero .wm-btn, .wm-home-hero__button-outline {
		width: 100%;
		min-width: 0;
		padding-right: 18px;
		padding-left: 18px;
		font-size: 12px;
	}
}
/* ==========================================================
   6. Kompakter Desktop: 1161 bis 1326 px
   ========================================================== */
@media (min-width: 1161px) and (max-width: 1326px) {
	.wm-home-hero {
		--wm-hero-height: 620px;
		--wm-hero-cut-top: 57%;
		--wm-hero-cut-bottom: 44%;
		--wm-hero-image-position: right center;
		--wm-hero-image-size: auto 100%;
	}
	.wm-home-hero__inner {
		padding-right: 30px;
		padding-left: clamp(38px, 4.5vw, 64px);
	}
	.wm-home-hero__content {
		width: min(calc(var(--wm-hero-cut-bottom) - 4%), 520px);
		max-width: 520px;
		padding-right: 18px;
	}
	.wm-home-hero__eyebrow {
		margin-bottom: 18px;
		font-size: 12px;
	}
	.wm-home-hero__content .wm-home-hero__title {
		font-size: clamp(40px, 4.4vw, 56px);
		line-height: 1.01;
		letter-spacing: -0.025em;
	}
	.wm-home-hero__text {
		max-width: 100%;
		font-size: 15.5px;
		line-height: 1.55;
	}
	.wm-home-hero__actions {
		width: 100%;
		max-width: 100%;
		margin-top: 28px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.wm-home-hero .wm-btn, .wm-home-hero__button-outline {
		width: 100%;
		min-width: 0;
		min-height: 54px;
		padding: 15px 14px;
		font-size: 11.5px;
	}
}
/* ==========================================================
   7. Tablet und große Smartphones: 600 bis 1160 px
   Motor weiter rechts, Logo auf dem Motor bleibt sichtbar
   ========================================================== */
@media (min-width: 600px) and (max-width: 1160px) {
	.wm-home-hero {
		--wm-hero-height: 690px;
		--wm-hero-cut-top: 63%;
		--wm-hero-cut-bottom: 50%;
		min-height: var(--wm-hero-height);
		/*
       Ein kleinerer X-Wert verschiebt ein überbreites
       Hintergrundbild optisch weiter nach rechts.
    */
		--wm-hero-image-position: 40% center;
		--wm-hero-image-size: auto 100%;
	}
	.wm-home-hero__inner {
		min-height: var(--wm-hero-height);
		padding: 58px 30px 52px clamp(38px, 5.5vw, 66px);
	}
	.wm-home-hero__content {
		width: min(calc(var(--wm-hero-cut-bottom) - 5%), 430px);
		max-width: 430px;
		padding: 0 16px 0 0;
	}
	.wm-home-hero__eyebrow {
		margin-bottom: 20px;
		font-size: 12px;
		line-height: 1.3;
		letter-spacing: 0.14em;
		white-space: normal;
	}
	.wm-home-hero__content .wm-home-hero__title {
		width: 100%;
		font-size: clamp(36px, 5vw, 50px);
		line-height: 1.02;
		letter-spacing: -0.025em;
	}
	.wm-home-hero__content .wm-home-hero__title span {
		width: 100%;
		white-space: normal;
	}
	.wm-home-hero__text {
		width: 100%;
		max-width: 100%;
		margin: 0;
		font-size: 15px;
		line-height: 1.55;
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: auto;
	}
	.wm-home-hero__actions {
		width: 100%;
		max-width: 350px;
		margin-top: 28px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.wm-home-hero .wm-btn, .wm-home-hero__button-outline {
		width: 100%;
		min-width: 0;
		min-height: 54px;
		padding: 15px 18px;
		font-size: 12px;
		white-space: normal;
	}
}
/* ==========================================================
   8. Schmale Tablets: 600 bis 820 px
   ========================================================== */
@media (min-width: 600px) and (max-width: 820px) {
	.wm-home-hero {
		--wm-hero-cut-top: 65%;
		--wm-hero-cut-bottom: 52%;
		--wm-hero-image-position: 54% center;
	}
	.wm-home-hero__inner {
		padding-right: 24px;
		padding-left: 44px;
	}
	.wm-home-hero__content {
		width: min(calc(var(--wm-hero-cut-bottom) - 6%), 395px);
		max-width: 395px;
		padding-right: 12px;
	}
	.wm-home-hero__content .wm-home-hero__title {
		font-size: clamp(34px, 4.9vw, 42px);
		line-height: 1.03;
	}
	.wm-home-hero__text {
		font-size: 14.5px;
	}
	.wm-home-hero__actions {
		max-width: 330px;
	}
}
/* ==========================================================
   9. Smartphones: bis 599 px
   ========================================================== */
@media (max-width: 599px) {
	.wm-home-hero {
		min-height: 700px;
		--wm-hero-image-position: 58% center;
		--wm-hero-image-size: auto 100%;
		--wm-hero-image-overlay: linear-gradient( 90deg, rgba(0, 0, 145, 0.98) 0%, rgba(0, 0, 112, 0.94) 58%, rgba(2, 4, 38, 0.76) 100%);
	}
	/* Auf Smartphones wird das Bild vollflaechig ohne Polygon gezeigt. */
	.wm-home-hero::before {
		-webkit-clip-path: none;
		clip-path: none;
	}
	.wm-home-hero::after {
		display: none !important;
		content: none !important;
	}
	.wm-home-hero__inner {
		min-height: 700px;
		padding: 76px 24px 52px;
		align-items: flex-end;
	}
	.wm-home-hero__content {
		width: 100%;
		max-width: 500px;
		padding: 0;
	}
	.wm-home-hero__eyebrow {
		margin-bottom: 18px;
		font-size: 12px;
		line-height: 1.3;
	}
	.wm-home-hero__content .wm-home-hero__title {
		width: 100%;
		margin-bottom: 22px;
		font-size: clamp(38px, 11vw, 53px);
		line-height: 1.02;
		letter-spacing: -0.025em;
	}
	.wm-home-hero__content .wm-home-hero__title span {
		width: 100%;
		white-space: normal;
	}
	.wm-home-hero__text {
		width: 100%;
		max-width: 460px;
		font-size: 16px;
		line-height: 1.55;
		overflow-wrap: break-word;
		word-break: normal;
	}
	.wm-home-hero__actions {
		width: 100%;
		max-width: 420px;
		margin-top: 28px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.wm-home-hero .wm-btn, .wm-home-hero__button-outline {
		width: 100%;
		min-width: 0;
		min-height: 54px;
		padding: 15px 18px;
		font-size: 12px;
		white-space: normal;
	}
}
/* ==========================================================
   10. Sehr kleine Smartphones
   ========================================================== */
@media (max-width: 390px) {
	.wm-home-hero {
		min-height: 660px;
		--wm-hero-image-position: 54% center;
	}
	.wm-home-hero__inner {
		min-height: 660px;
		padding: 60px 18px 42px;
	}
	.wm-home-hero__content .wm-home-hero__title {
		font-size: clamp(33px, 10.4vw, 42px);
		line-height: 1.04;
	}
	.wm-home-hero__text {
		font-size: 15px;
	}
}
/* ==========================================================
   Wagner Motoren – Vorteile / Qualitätsmerkmale
   ========================================================== */
.wm-benefits {
	position: relative;
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: linear-gradient( 180deg, #ffffff 0%, #f8f9fc 100%);
	border-top: 1px solid rgba(0, 0, 145, 0.08);
	border-bottom: 1px solid rgba(0, 0, 145, 0.1);
}
.wm-benefits__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}
/* Einzelner Vorteil */
.wm-benefit {
	position: relative;
	min-width: 0;
	min-height: 145px;
	padding: 32px 28px;
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	border-right: 1px solid rgba(0, 0, 145, 0.1);
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.wm-benefit:last-child {
	border-right: 0;
	padding-right: clamp(50px, 6vw, 120px);
}
.wm-benefit:hover {
	z-index: 2;
	background: #ffffff;
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0, 0, 50, 0.1);
}
/* Icon */
.wm-benefit__icon {
	width: 58px;
	height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wm-blue, #000091);
	background: linear-gradient( 135deg, rgba(0, 0, 145, 0.06), rgba(20, 80, 255, 0.1));
	border: 1px solid rgba(0, 0, 145, 0.15);
	border-radius: 50%;
	font-size: 27px;
	line-height: 1;
	transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
	margin-top: 4px;
}
.wm-benefit:hover .wm-benefit__icon {
	color: #ffffff;
	background: linear-gradient( 135deg, var(--wm-blue, #000091), var(--wm-blue-light, #1450ff));
	transform: rotate(-5deg) scale(1.05);
}
/* Textbereich */
.wm-benefit__content {
	min-width: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
}

/* Der erste Absatz ersetzt die fruehere H3-Ueberschrift. */
.wm-benefit__content > p:first-child {
	position: relative;
	display: block;
	min-height: 54px;
	margin: 0 0 10px;
	padding: 0 0 14px;
	color: var(--wm-blue, #000091);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Der zweite Absatz ist die Beschreibung. */
.wm-benefit__content > p + p {
	margin: 0;
	padding: 0;
	color: var(--wm-muted, #667085);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	overflow-wrap: break-word;
	word-break: normal;
}
.wm-benefit:first-child {
	padding-left: clamp(50px, 6vw, 120px);
}
/* Kleine Akzentlinie unter der Überschrift */
.wm-benefit__content > p:first-child::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 34px;
	height: 2px;
	margin: 0;
	background: linear-gradient( 90deg, var(--wm-blue-light, #1450ff), transparent);
}
/* ==========================================================
   Tablet
   ========================================================== */
@media (max-width: 1100px) {
	.wm-benefits__inner {
		width: min(calc(100% - 40px), 980px);
		margin-right: auto;
		margin-left: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wm-benefit {
		min-height: 135px;
		padding: 28px 24px;
	}
	.wm-benefit:nth-child(2n) {
		border-right: 0;
	}
	.wm-benefit:nth-child(-n + 2) {
		border-bottom: 1px solid rgba(0, 0, 145, 0.1);
	}
}
/* ==========================================================
   Smartphone
   ========================================================== */
@media (max-width: 650px) {
	.wm-benefits__inner {
		width: calc(100% - 28px);
		margin-right: auto;
		margin-left: auto;
		grid-template-columns: 1fr;
	}
	.wm-benefit, .wm-benefit:nth-child(2n), .wm-benefit:first-child, .wm-benefit:last-child {
		min-height: auto;
		padding: 24px 8px;
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 16px;
		border-right: 0;
		border-bottom: 1px solid rgba(0, 0, 145, 0.1);
	}
	.wm-benefit:last-child {
		border-bottom: 0;
	}
	.wm-benefit__icon {
		width: 52px;
		height: 52px;
		font-size: 24px;
	}
	.wm-benefit__content > p:first-child {
		font-size: 14px;
		min-height: 0;
	}
	.wm-benefit__content > p + p {
		font-size: 13.5px;
	}
}
/* ==========================================================
   Hero – identischer Bildausschnitt von Full HD bis 6K+

   Referenz:
   1920 px  ->  660 px
   2560 px  ->  880 px
   3840 px  -> 1320 px
   4096 px  -> 1408 px
   5120 px  -> 1760 px
   6016 px  -> 2068 px

   Entscheidend:
   Das Hero-Bild wird weiterhin über seine HÖHE skaliert
   (auto 100%) und rechts zentriert. Dadurch bleiben Motivgröße,
   Bildausschnitt und sichtbare Bildelemente proportional gleich.
   ========================================================== */
@media (min-width: 1900px) {
	.wm-home-hero {
		/* 660 / 1920 = 0,34375 */
		--wm-hero-height: clamp(660px, 34.375vw, 2304px);

		/* Full-HD-Bildausschnitt unverändert fortführen. */
		--wm-hero-image-position: right center;
		--wm-hero-image-size: auto 100%;

		height: var(--wm-hero-height);
		min-height: var(--wm-hero-height);
	}

	.wm-home-hero__inner {
		height: var(--wm-hero-height);
		min-height: var(--wm-hero-height);
	}
}

/* ==========================================================
   Hero-Zoom ausschließlich für 4K-Auflösungen

   Alle Auflösungen außerhalb von 1874 bis 4096 CSS-Pixeln
   verwenden weiterhin die Standardgröße auto 100%.
   ========================================================== */
@media (min-width: 1874px) and (max-width: 4096px) {
	.wm-home-hero::before {
		--wm-hero-image-size: calc(69% + 2px) auto;
	}
}

/* Ab ca. 6703 px wäre für eine weiterhin pixelnative Darstellung
   ein größeres Quellbild als 4096 × 2304 px erforderlich. */
@media (min-width: 6703px) {
	.wm-home-hero {
		--wm-hero-height: 2304px;
	}
}

/* ==========================================================
   Wagner Motoren – weicher Bildübergang ohne sichtbare Kante
   Der Verlauf läuft bewusst in das Bild hinein.
   ========================================================== */

.wm-media-fade {
  --wm-media-blue: 0 0 145;
  --wm-media-blue-dark: 0 0 82;

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.wm-media-fade > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Verlauf bewusst ÜBER die Bildkante hinweg */
.wm-media-fade__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    /* Hauptverlauf von links nach rechts */
    linear-gradient(
      90deg,
      rgb(var(--wm-media-blue) / 1) 0%,
      rgb(var(--wm-media-blue) / 0.98) 10%,
      rgb(var(--wm-media-blue) / 0.92) 18%,
      rgb(var(--wm-media-blue) / 0.78) 28%,
      rgb(var(--wm-media-blue) / 0.58) 38%,
      rgb(var(--wm-media-blue) / 0.34) 48%,
      rgb(var(--wm-media-blue) / 0.14) 58%,
      rgb(var(--wm-media-blue) / 0) 70%
    ),

    /* zusätzlicher Verlauf links unten */
    radial-gradient(
      ellipse 85% 95% at 0% 100%,
      rgb(var(--wm-media-blue) / 0.92) 0%,
      rgb(var(--wm-media-blue) / 0.68) 24%,
      rgb(var(--wm-media-blue) / 0.34) 46%,
      rgb(var(--wm-media-blue) / 0.10) 62%,
      transparent 78%
    ),

    /* leichter dunkler Schleier, damit die Naht sicher verschwindet */
    linear-gradient(
      90deg,
      rgb(var(--wm-media-blue-dark) / 0.34) 0%,
      rgb(var(--wm-media-blue-dark) / 0.20) 24%,
      rgb(var(--wm-media-blue-dark) / 0.08) 42%,
      transparent 60%
    );
}

/* Inhalte immer über dem Verlauf */
.wm-media-fade > :not(img):not(.wm-media-fade__overlay) {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  body.start-alias section.wm-home-hero {
    --wm-hero-image: url("/images/1Startseite/Wagner%20Motoren%20Morschen%20Startseite%20Motor-mobile-1600.webp") !important;
  }
}
/* ==========================================================
   Wagner Motoren – vollständige mobile Hero-Bilder
   Erkennt das verwendete Originalbild direkt im style-Attribut.
   ========================================================== */

@media (max-width: 767px) {

  /* Startseite und Hauptseiten */

  section.wm-home-hero[style*="Wagner%20Motoren%20Morschen%20Startseite%20Motor.webp"] {
    --wm-hero-image: url("/images/1Startseite/Wagner%20Motoren%20Morschen%20Startseite%20Motor-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Firma%20Wagner%20Motoren%20Morschen%20Deutschland.webp"] {
    --wm-hero-image: url("/images/5Unternehmen/Firma%20Wagner%20Motoren%20Morschen%20Deutschland-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Austauschmotoren.webp"] {
    --wm-hero-image: url("/images/2Austauschmotoren/Wagner%20Motoren%20Austauschmotoren-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20E-Auuto%20Service%20%C3%9Cbersicht.webp"] {
    --wm-hero-image: url("/images/9E-Autos/Wagner%20Motoren%20E-Auuto%20Service%20%C3%9Cbersicht-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Serviceangebot.webp"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Serviceangebot-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20News.webp"] {
    --wm-hero-image: url("/images/4News/Wagner%20Motoren%20News-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Kontakt.webp"] {
    --wm-hero-image: url("/images/6Kontakt/Wagner%20Motoren%20Kontakt-mobile-1600.webp") !important;
  }

  /* Austauschmotoren – Unterseiten */

  section.wm-home-hero[style*="Wagner%20Motoren%20Austauschmotoren%20auf%20Bestellung.webp"] {
    --wm-hero-image: url("/images/2Austauschmotoren/Wagner%20Motoren%20Austauschmotoren%20auf%20Bestellung-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Motoren%20Generalueberholung.webp"] {
    --wm-hero-image: url("/images/2Austauschmotoren/Wagner%20Motoren%20Motoren%20Generalueberholung-mobile-1600.webp") !important;
  }

  /* E-Auto Service – Unterseiten */

  section.wm-home-hero[style*="Wagner%20Motoren%20E-Auto%20Batterie-Service.webp"] {
    --wm-hero-image: url("/images/9E-Autos/Wagner%20Motoren%20E-Auto%20Batterie-Service-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20E-Auto%20Fehlerdiagnose.webp"] {
    --wm-hero-image: url("/images/9E-Autos/Wagner%20Motoren%20E-Auto%20Fehlerdiagnose-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20E-Auto%20Hochvolt-Systeme.webp"] {
    --wm-hero-image: url("/images/9E-Autos/Wagner%20Motoren%20E-Auto%20Hochvolt-Systeme-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20E-Auto%20Reparatur%20der%20Leistungselektronik.webp"] {
    --wm-hero-image: url("/images/9E-Autos/Wagner%20Motoren%20E-Auto%20Reparatur%20der%20Leistungselektronik-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20E-Auto-Wartung%20und%20Inspektion.webp"] {
    --wm-hero-image: url("/images/9E-Autos/Wagner%20Motoren%20E-Auto-Wartung%20und%20Inspektion-mobile-1600.webp") !important;
  }

  /* E-Motor-Instandsetzung bleibt beim bereits kleinen Original (1672 px / 103 KB). */

  /* Serviceangebote – Unterseiten */

  section.wm-home-hero[style*="Wagner%20Motoren%20Einspritzd%C3%BCsen%20pr%C3%BCfen.webp"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Einspritzd%C3%BCsen%20pr%C3%BCfen-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Fehlercode%20auslesen.webp"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Fehlercode%20auslesen-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Getriebeinstandsetzung.png"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Getriebeinstandsetzung-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Getriebesp%C3%BClungen.webp"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Getriebesp%C3%BClungen-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Klimaanlagenreinigung.webp"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Klimaanlagenreinigung-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Klimaservice%20.webp"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Klimaservice-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Partikelfilter%20reinigen.webp"] {
    --wm-hero-image: url("/images/3Serviceangebote/Wagner%20Motoren%20Partikelfilter%20reinigen-mobile-1600.webp") !important;
  }

  /* Unternehmen – Unterseiten */

  section.wm-home-hero[style*="Wagner%20Motoren%20Qualität%20und%20Kundenzufriedenheit.webp"] {
    --wm-hero-image: url("/images/5Unternehmen/Wagner%20Motoren%20Qualit%C3%A4t%20und%20Kundenzufriedenheit-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Stellenangebot.webp"] {
    --wm-hero-image: url("/images/5Unternehmen/Wagner%20Motoren%20Stellenangebot-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20lange%20Zeit.webp"] {
    --wm-hero-image: url("/images/5Unternehmen/Wagner%20Motoren%20lange%20Zeit-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Team.webp"] {
    --wm-hero-image: url("/images/5Unternehmen/Wagner%20Motoren%20Team-mobile-1600.webp") !important;
  }

  /* News – Unterseiten */

  section.wm-home-hero[style*="Wagner%20Motoren%20Problem%20der%201.2%203%20Zylinder%20Motoren.webp"] {
    --wm-hero-image: url("/images/4News/Wagner%20Motoren%20Problem%20der%201.2%203%20Zylinder%20Motoren-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Downsizing%20Debakel%201.2%20TSI%20Probleme.webp"] {
    --wm-hero-image: url("/images/4News/Wagner%20Motoren%20Downsizing%20Debakel%201.2%20TSI%20Probleme-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%201.8%20%26%202.0%20TFSI%20%C3%96lverbrauch.webp"] {
    --wm-hero-image: url("/images/4News/Wagner%20Motoren%201.8%20%26%202.0%20TFSI%20%C3%96lverbrauch-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Ford%20Ecoboost%20Motorschaden.webp"] {
    --wm-hero-image: url("/images/4News/Wagner%20Motoren%20Ford%20Ecoboost%20Motorschaden-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Mini%20Steuerkette%20macht%20Probleme.webp"] {
    --wm-hero-image: url("/images/4News/Wagner%20Motoren%20Mini%20Steuerkette%20macht%20Probleme-mobile-1600.webp") !important;
  }

  section.wm-home-hero[style*="Wagner%20Motoren%20Motorschäden%20vermeiden.webp"] {
    --wm-hero-image: url("/images/4News/Wagner%20Motoren%20Motorsch%C3%A4den%20vermeiden-mobile-1600.webp") !important;
  }
  section.wm-home-hero[style*="Wagner%20Motoren%20Problemzone%20Motor%201.4%20TFSI%20CAV%20CAX.webp"] {

    --wm-hero-image: url("/images/4News/Wagner%20Motoren%20Problemzone%20Motor%201.4%20TFSI%20CAV%20CAX-1600.webp") !important;

  }
}
/* ==========================================================
   Wagner Motoren – Footer V5
   Unterstützt beide Astroid-Strukturen:
   - Kontakt und Social in einer gemeinsamen Astroid-Spalte
   - Kontakt und Social in zwei getrennten Astroid-Spalten
   ========================================================== */
.astroid-section.Footer-Top {
	--wm-footer-accent: #638fff;
	--wm-footer-text: rgba(255, 255, 255, 0.84);
	--wm-footer-muted: rgba(255, 255, 255, 0.68);
	--wm-footer-logo-size: 238px;
	--wm-footer-logo-zoom: 1.08;
	--wm-footer-edge-space: clamp(24px, 3.2vw, 64px);
	position: relative;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	color: #ffffff;
	background: radial-gradient( circle at 48% 0%, rgba(48, 86, 255, 0.22), transparent 44%), linear-gradient( 112deg, #000091 0%, #000078 52%, #000052 100%);
}
/* Leuchtende obere Linie */
.astroid-section.Footer-Top::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 3;
	height: 3px;
	background: linear-gradient( 90deg, rgba(58, 105, 255, 0.6) 0%, #88a9ff 50%, rgba(58, 105, 255, 0.6) 100%);
	box-shadow: 0 0 12px rgba(78, 125, 255, 0.8), 0 0 26px rgba(45, 92, 255, 0.38);
}
.astroid-section.Footer-Top > .container {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.astroid-section.Footer-Top .astroid-row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.astroid-section.Footer-Top .astroid-column {
	min-width: 0;
	width: auto !important;
	max-width: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	flex: none !important;
}
/* ==========================================================
   Hauptzeile: fünf gleichmäßig verteilte Bereiche
   ========================================================== */
.astroid-section.Footer-Top #ar-pn9wa1b0i {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: clamp(58px, 4.5vw, 86px) var(--wm-footer-edge-space) clamp(50px, 4vw, 72px);
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-flow: row;
	align-items: start;
	gap: clamp(28px, 2.6vw, 56px);
}
/* Feste Positionen der ersten drei Bereiche */
.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}
.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}
.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(3) {
	grid-column: 3;
	grid-row: 1;
}
/*
   Astroid kann Kontakt und Social entweder gemeinsam in der
   vierten Spalte oder als vierte und fünfte Spalte ausgeben.
   Das Auflösen beider Spalten macht die Modulpositionen in
   beiden Fällen zu direkten Elementen des Fünf-Spalten-Grids.
*/
.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(4), .astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(5) {
	display: contents !important;
}
.astroid-section.Footer-Top #ar-pn9wa1b0i .wm-footer-kontakt {
	grid-column: 4;
	grid-row: 1;
	min-width: 0;
}
.astroid-section.Footer-Top #ar-pn9wa1b0i .wm-footer-social {
	grid-column: 5;
	grid-row: 1;
	min-width: 0;
}
/* ==========================================================
   Logo und Footer-Breadcrumb
   ========================================================== */
.astroid-section.Footer-Top .wm-footer-logo {
	display: flex;
	justify-content: flex-start;
}
.astroid-section.Footer-Top .wm-footer-logo .moduletable, .astroid-section.Footer-Top .wm-footer-logo .mod-custom {
	width: 100%;
	margin: 0;
}
.astroid-section.Footer-Top .wm-footer-logo p {
	box-sizing: border-box;
	width: min(100%, var(--wm-footer-logo-size));
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 0;
	padding: 14px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.82);
	border-radius: 9px;
	box-shadow: 0 18px 42px rgba(0, 0, 36, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.astroid-section.Footer-Top .wm-footer-logo img {
	float: none !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	object-fit: contain;
	object-position: center;
	transform: scale(var(--wm-footer-logo-zoom));
	transform-origin: center;
}
.astroid-section.Footer-Top .wm-footer-logo br {
	display: none !important;
}
.astroid-section.Footer-Top .wm-footer-read {
	display: block !important;
	width: min(100%, var(--wm-footer-logo-size));
	margin-top: 18px;
}
.astroid-section.Footer-Top .wm-footer-read .mod-breadcrumbs__wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.astroid-section.Footer-Top .wm-footer-read .breadcrumb,
.astroid-section.Footer-Top .wm-footer-read .mod-breadcrumbs {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline;
	gap: 4px;
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	background: transparent !important;
	font-size: clamp(13px, 0.78vw, 15px);
	line-height: 1.45;
	white-space: normal;
	list-style: none;
}
.astroid-section.Footer-Top .wm-footer-read .mod-breadcrumbs__here {
	display: inline-block !important;
	flex: 0 0 auto;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	opacity: 1 !important;
	white-space: nowrap !important;
}
.astroid-section.Footer-Top .wm-footer-read .mod-breadcrumbs__item {
	display: block !important;
	flex: 1 1 300px;
	min-width: 0;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	opacity: 1 !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: normal !important;
}
.astroid-section.Footer-Top .wm-footer-read .mod-breadcrumbs__item span {
	display: inline !important;
	color: #ffffff !important;
	opacity: 1 !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: normal !important;
}
.astroid-section.Footer-Top .wm-footer-read .breadcrumb-item + .breadcrumb-item::before {
	display: none !important;
}
/* ==========================================================
   Überschriften und Akzentlinien
   ========================================================== */
.astroid-section.Footer-Top .wm-footer-navigation h2, .astroid-section.Footer-Top .wm-footer-services h2, .astroid-section.Footer-Top .wm-footer-kontakt::before, .astroid-section.Footer-Top .wm-footer-social::before {
	display: block;
	margin: 0 0 22px;
	padding: 0 0 13px;
	color: #ffffff;
	font-size: clamp(15px, 0.94vw, 18px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	background: linear-gradient( 90deg, var(--wm-footer-accent), rgba(99, 143, 255, 0)) left bottom / 44px 2px no-repeat;
}
.astroid-section.Footer-Top .wm-footer-navigation h2, .astroid-section.Footer-Top .wm-footer-services h2 {
	position: static;
}
.astroid-section.Footer-Top .wm-footer-navigation h2::after, .astroid-section.Footer-Top .wm-footer-services h2::after {
	display: none !important;
}
.astroid-section.Footer-Top .wm-footer-kontakt::before {
	content: "Kontakt";
}
.astroid-section.Footer-Top .wm-footer-social::before {
	content: "Folgen Sie uns";
}
html[lang^="en"] .astroid-section.Footer-Top .wm-footer-kontakt::before {
	content: "Contact";
}
html[lang^="en"] .astroid-section.Footer-Top .wm-footer-social::before {
	content: "Follow us";
}
/* ==========================================================
   Navigation und Leistungen
   ========================================================== */
.astroid-section.Footer-Top .wm-footer-navigation ul, .astroid-section.Footer-Top .wm-footer-services ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.astroid-section.Footer-Top .wm-footer-navigation li, .astroid-section.Footer-Top .wm-footer-services li {
	margin: 0 0 9px;
	padding: 0;
}
.astroid-section.Footer-Top .wm-footer-navigation a, .astroid-section.Footer-Top .wm-footer-services a {
	position: relative;
	display: inline-block;
	padding-left: 0;
	color: var(--wm-footer-text) !important;
	font-size: clamp(14px, 0.82vw, 16px);
	font-weight: 500;
	line-height: 1.42;
	text-decoration: none !important;
	transition: color 0.22s ease, padding-left 0.22s ease, transform 0.22s ease;
}
.astroid-section.Footer-Top .wm-footer-navigation a::before, .astroid-section.Footer-Top .wm-footer-services a::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 0;
	height: 2px;
	background: #7da4ff;
	transition: width 0.22s ease;
}
.astroid-section.Footer-Top .wm-footer-navigation a:hover, .astroid-section.Footer-Top .wm-footer-navigation a:focus-visible, .astroid-section.Footer-Top .wm-footer-services a:hover, .astroid-section.Footer-Top .wm-footer-services a:focus-visible {
	padding-left: 16px;
	color: #ffffff !important;
	transform: translateX(2px);
}
.astroid-section.Footer-Top .wm-footer-navigation a:hover::before, .astroid-section.Footer-Top .wm-footer-navigation a:focus-visible::before, .astroid-section.Footer-Top .wm-footer-services a:hover::before, .astroid-section.Footer-Top .wm-footer-services a:focus-visible::before {
	width: 10px;
}
/* ==========================================================
   Kontakt
   ========================================================== */
.astroid-section.Footer-Top .wm-footer-kontakt, .astroid-section.Footer-Top .wm-footer-kontakt .moduletable, .astroid-section.Footer-Top .wm-footer-kontakt .mod-custom {
	min-width: 0;
}
.astroid-section.Footer-Top .wm-footer-kontakt p {
	margin: 0 0 16px;
	color: var(--wm-footer-text);
	font-size: clamp(14px, 0.82vw, 16px);
	line-height: 1.58;
}
.astroid-section.Footer-Top .wm-footer-kontakt p:first-child {
	margin-bottom: 20px;
}
.astroid-section.Footer-Top .wm-footer-kontakt i {
	width: 19px;
	margin-right: 6px;
	color: #84a7ff;
	text-align: center;
}
.astroid-section.Footer-Top .wm-footer-kontakt a {
	color: rgba(255, 255, 255, 0.92) !important;
	text-decoration: none !important;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}
.astroid-section.Footer-Top .wm-footer-kontakt a:hover, .astroid-section.Footer-Top .wm-footer-kontakt a:focus-visible {
	color: #ffffff !important;
}
.astroid-section.Footer-Top .wm-footer-kontakt table {
	width: auto !important;
	height: auto !important;
	margin: 3px 0 0;
	border-collapse: collapse;
	color: var(--wm-footer-text);
	font-size: clamp(13px, 0.78vw, 15px);
	line-height: 1.45;
}
.astroid-section.Footer-Top .wm-footer-kontakt td {
	width: auto !important;
	padding: 3px 13px 3px 0;
	border: 0 !important;
	vertical-align: top;
}
/* ==========================================================
   Social Media und Partnerlogos
   ========================================================== */
.astroid-section.Footer-Top .wm-footer-social .astroid-social-icons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;

	align-items: center;
	gap: 14px;
	margin: 0 0 28px !important;
	padding: 0 !important;
	list-style: none;
}
.astroid-section.Footer-Top .wm-footer-social .astroid-social-icons li {
	margin: 0 !important;
	padding: 0 !important;
}
.astroid-section.Footer-Top .wm-footer-social .astroid-social-icons a {
	width: 48px;
	height: 48px;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 50%;
	text-decoration: none !important;
	transition: color 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}
.astroid-section.Footer-Top .wm-footer-social .astroid-social-icons a:hover, .astroid-section.Footer-Top .wm-footer-social .astroid-social-icons a:focus-visible {
	color: #000091 !important;
	background: #ffffff;
	border-color: #ffffff;
	transform: translateY(-3px);
}
.astroid-section.Footer-Top .wm-footer-social .astroid-social-icons span {
	font-size: 18px !important;
	line-height: 1;
}
.astroid-section.Footer-Top .wm-footer-social .footer-5-position + .footer-5-position {
	margin-top: 20px;
}
.astroid-section.Footer-Top .wm-footer-social #mod-custom307 p {
	margin: 0 0 14px;
	color: var(--wm-footer-muted);
	font-size: 14px;
	line-height: 1.45;
}
.astroid-section.Footer-Top .wm-footer-social #mod-custom307 p:first-child {
	margin-bottom: 18px;
}
.astroid-section.Footer-Top .wm-footer-social #mod-custom307 img {
	display: block;
	width: auto;
	height: 70px;
	max-width: 100%;
	object-fit: contain;
}
.astroid-section.Footer-Top .wm-footer-social #mod-custom307 p:first-child img {
	width: min(255px, 100%) !important;
	max-width: 255px !important;
	height: auto !important;
	padding: 7px 9px;
	background: #ffffff;
	border-radius: 4px;
}
.astroid-section.Footer-Top .wm-footer-social #mod-custom307 p:last-child img {
	display: block;
	width: min(200px, 100%) !important;
	max-width: 200px !important;
	height: auto !important;
	object-fit: contain;
}
.astroid-section.Footer-Top .wm-footer-social #mod-custom307 a:empty {
	display: none;

}
/* ==========================================================
   Untere Zeile
   ========================================================== */
.astroid-section.Footer-Top #ar-656ab721e62ab867745006 {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 24px var(--wm-footer-edge-space) 27px;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 30px;
}
.astroid-section.Footer-Top #ar-656ab721e62ab867745006::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: rgba(88, 128, 255, 0.58);
	box-shadow: 0 -1px 12px rgba(60, 103, 255, 0.22);
}
.astroid-section.Footer-Top .wm-footer-copyright, .astroid-section.Footer-Top .wm-footer-legal {
	min-width: 0;
}
.astroid-section.Footer-Top .wm-footer-copyright .astroid-footer, .astroid-section.Footer-Top .wm-footer-copyright .astroid-footer > div {
	margin: 0;
	padding: 0;
	background: transparent !important;
	color: var(--wm-footer-muted);
	font-size: 13px;
	line-height: 1.45;
}
.astroid-section.Footer-Top .wm-footer-legal p {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(16px, 1.8vw, 34px);
	text-align: right !important;
	line-height: 1.4;
}
.astroid-section.Footer-Top .wm-footer-legal a {
	flex: 0 0 auto;
	display: inline-flex;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.astroid-section.Footer-Top .wm-footer-legal a:hover, .astroid-section.Footer-Top .wm-footer-legal a:focus-visible {
	color: #ffffff !important;
}
/* ==========================================================
   Tablet und kleinere Notebooks
   ========================================================== */
@media (max-width: 1199px) {
	.astroid-section.Footer-Top {
		--wm-footer-logo-size: 220px;
		--wm-footer-edge-space: 32px;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 54px;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(3) {
		grid-column: 1;
		grid-row: 2;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i .wm-footer-kontakt {
		grid-column: 2;
		grid-row: 2;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i .wm-footer-social {
		grid-column: 1 / -1;
		grid-row: 3;
		width: min(100%, 360px);
	}

}
/* ==========================================================
   Mobile Geräte
   ========================================================== */
@media (max-width: 767px) {
	.astroid-section.Footer-Top {
		--wm-footer-logo-size: 210px;
		--wm-footer-logo-zoom: 1.05;
		--wm-footer-edge-space: 16px;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i {
		padding-top: 46px;
		padding-bottom: 44px;
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(1), .astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(2), .astroid-section.Footer-Top #ar-pn9wa1b0i > .astroid-column:nth-child(3), .astroid-section.Footer-Top #ar-pn9wa1b0i .wm-footer-kontakt, .astroid-section.Footer-Top #ar-pn9wa1b0i .wm-footer-social {
		grid-column: 1;
		grid-row: auto;
		width: 100%;
	}
	.astroid-section.Footer-Top .wm-footer-logo {
		justify-content: flex-start;
	}
	.astroid-section.Footer-Top .wm-footer-read {
		width: 100%;
	}
	.astroid-section.Footer-Top .wm-footer-read .breadcrumb {
		flex-wrap: wrap !important;
		white-space: normal;
	}
	.astroid-section.Footer-Top #ar-656ab721e62ab867745006 {
		grid-template-columns: 1fr;
		gap: 14px;
		padding-top: 23px;
		padding-bottom: 26px;
	}
	/* ==========================================================
   Footer-Links auf Smartphones
   Erste Reihe: 3 Links
   Zweite Reihe: 2 Links
   ========================================================== */
		.astroid-section.Footer-Top .wm-footer-legal {
			width: 100%;
		}
		.astroid-section.Footer-Top .wm-footer-legal p {
			width: 100%;
			margin: 0 !important;
			padding: 0 !important;
			display: flex !important;
			flex-wrap: wrap !important;
			align-items: center;
			justify-content: center !important;
			gap: 18px 0;
			text-align: center !important;
		}
		/* Eventuell vorhandene Zeilenumbrüche aus dem Joomla-Modul entfernen */
		.astroid-section.Footer-Top .wm-footer-legal p br {
			display: none !important;
		}
		.astroid-section.Footer-Top .wm-footer-legal a {
			margin: 0 !important;
			padding: 0 6px !important;
			display: block !important;
			flex: 0 0 33.333% !important;
			color: rgba(255, 255, 255, 0.82) !important;
			font-size: 14px;
			font-weight: 600;
			line-height: 1.4;
			text-align: center !important;
			white-space: nowrap;
			transform: none !important;
		}
		/* Die letzten beiden Links bilden die zweite, zentrierte Reihe */
		.astroid-section.Footer-Top .wm-footer-legal a:nth-of-type(4), .astroid-section.Footer-Top .wm-footer-legal a:nth-of-type(5) {
			flex-basis: 40% !important;
		}
}
@media (max-width: 420px) {
	.astroid-section.Footer-Top {
		--wm-footer-logo-size: 190px;
		--wm-footer-logo-zoom: 1.03;
	}
	.astroid-section.Footer-Top .wm-footer-kontakt table, .astroid-section.Footer-Top .wm-footer-kontakt tbody, .astroid-section.Footer-Top .wm-footer-kontakt tr, .astroid-section.Footer-Top .wm-footer-kontakt td {
		display: block;
		width: 100% !important;
	}
	.astroid-section.Footer-Top .wm-footer-kontakt tr {
		margin-bottom: 8px;
	}
}
@media (max-width: 576px) {
	.astroid-section.Footer-Top .wm-footer-read .mod-breadcrumbs__item {
		flex-basis: 100%;
		margin-top: 4px !important;
	}
}
/*Scroll to top*/
@media (min-width: 300px) {
	#astroid-backtotop {
		margin-bottom: 70px;
		z-index: 11020 !important;
	}
}
/* ==========================================================
   Wagner Motoren – Leistungsblock V2
   - vollflächig ohne Rand
   - iPhone-/Safari-sicher mit echtem <img>
   - verwendet den vorhandenen Master-Button .wm-btn
   ========================================================== */
/* Astroid-/Joomla-Abstände nur für dieses Modul entfernen */
.astroid-module-position:has(.wm-services-feature), .moduletable:has(.wm-services-feature), .mod-custom:has( > .wm-services-feature) {
	margin: 0 !important;
	padding: 0 !important;
}
.wm-services-feature, .wm-services-feature *, .wm-services-feature *::before, .wm-services-feature *::after {
	box-sizing: border-box;
}
.wm-services-feature, .wm-services-feature figure, .wm-services-feature picture, .wm-services-feature p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.wm-services-feature figure, .wm-services-feature picture {
	padding: 0 !important;
}
.wm-services-feature {
	position: relative;
	isolation: isolate;
	display: block;
	width: 100vw;
	max-width: none;
	min-height: 520px;
	margin-top: 0 !important;
	margin-right: calc(50% - 50vw);
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw);
	padding: 0 !important;
	overflow: hidden;
	color: #ffffff;
	background: radial-gradient( circle at 22% 30%, rgba(40, 80, 255, 0.26), transparent 42%), linear-gradient( 135deg, #000091 0%, #00006d 58%, #000047 100%);
}
/* ==========================================================
   Bildbereich
   ========================================================== */
.wm-services-feature__media {
	position: absolute;
	/* Kleine Überdeckung verhindert helle Linien an allen Kanten. */
	top: -2px;
	right: -2px;
	bottom: -2px;
	left: -2px;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: #000000;
	-webkit-clip-path: polygon(47% 0, 100% 0, 100% 100%, 39% 100%);
	clip-path: polygon(47% 0, 100% 0, 100% 100%, 39% 100%);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.wm-services-feature__media img {
	position: absolute;
	inset: 0;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	/*
   * Desktop: vollständigeres Motiv statt starkem Beschnitt.
   * Das Bild wird rechts ausgerichtet und proportional angezeigt.
   */
	object-fit: contain;
	object-position: right center;
	border: 0 !important;
	vertical-align: middle;
}
/* Dunkle Verlaufsfläche für bessere Lesbarkeit */
.wm-services-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient( 90deg, rgba(0, 0, 105, 0.98) 0%, rgba(0, 0, 105, 0.94) 34%, rgba(0, 0, 80, 0.44) 49%, rgba(0, 0, 45, 0.04) 68%, rgba(0, 0, 20, 0) 100%);
}
/* Dezente blaue Polygonkante – kein weißer Schleier */
.wm-services-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: #497cff;
	-webkit-clip-path: polygon(calc(47% - 1px) 0, calc(47% + 1px) 0, calc(39% + 1px) 100%, calc(39% - 1px) 100%) !important;
	clip-path: polygon(calc(47% - 1px) 0, calc(47% + 1px) 0, calc(39% + 1px) 100%, calc(39% - 1px) 100%) !important;
	opacity: 0.78;
}
/* ==========================================================
   Inhalt
   ========================================================== */
.wm-services-feature__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: none;
	min-height: 520px;
	margin: 0;
	padding-right: clamp(40px, 7.2vw, 96px);
	padding-left: clamp(40px, 7.2vw, 96px);
	display: flex;
	align-items: center;
}
.wm-services-feature__content {
	width: min(40%, 560px);
	margin: 0;
	padding: 64px 30px 64px 0;
}
.wm-services-feature__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wm-services-feature__eyebrow::before {
	content: "";
	width: 34px;
	height: 3px;
	flex: 0 0 auto;
	background: #3f74ff;
	box-shadow: 0 0 14px rgba(63, 116, 255, 0.48);
}
.wm-services-feature__content h2 {
	max-width: 500px;
	margin: 0 0 24px;
	padding: 0;
	color: #ffffff;
	font-size: clamp(42px, 4vw, 68px);
	font-weight: 950;
	line-height: 0.98;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 2px 1px rgba(0, 0, 0, 0.18);
}

.wm-services-feature__content h2 span {
	display: block;
}
.wm-services-feature__text {
	max-width: 520px;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: clamp(16px, 1.2vw, 19px);
	font-weight: 500;
	line-height: 1.65;
	text-align: left;
}
.wm-services-feature__actions {
	margin-top: 30px;
}
.wm-services-feature .wm-btn {
	min-width: 210px;
}
/* ==========================================================
   Tablet
   ========================================================== */
/*  Desktop ab 1101 px  */
@media (min-width: 1101px) {
	.wm-services-feature__content {
		width: min(42%, 640px);
		max-width: 640px;
		padding-right: 24px;
	}
	.wm-services-feature__content h2 {
		width: 100%;
		max-width: 620px;
		font-size: clamp(42px, 3.35vw, 64px);
	}
	.wm-services-feature__content h2 span {
		white-space: nowrap;
	}
}
@media (max-width: 1100px) {
	.wm-services-feature, .wm-services-feature__inner {
		min-height: 500px;
	}
	.wm-services-feature__media {
		-webkit-clip-path: polygon(58% 0, 100% 0, 100% 100%, 48% 100%);
		clip-path: polygon(58% 0, 100% 0, 100% 100%, 48% 100%);
	}
	.wm-services-feature__media img {
		object-position: 60% center;
	}
	.wm-services-feature::before {
		background: linear-gradient( 90deg, rgba(0, 0, 105, 0.99) 0%, rgba(0, 0, 105, 0.96) 44%, rgba(0, 0, 80, 0.52) 58%, rgba(0, 0, 30, 0.08) 78%, rgba(0, 0, 20, 0) 100%);
	}
	.wm-services-feature::after {
		-webkit-clip-path: polygon(calc(58% - 1px) 0, calc(58% + 1px) 0, calc(48% + 1px) 100%, calc(48% - 1px) 100%) !important;
		clip-path: polygon(calc(58% - 1px) 0, calc(58% + 1px) 0, calc(48% + 1px) 100%, calc(48% - 1px) 100%) !important;
	}
	.wm-services-feature__inner {
		width: min(100% - 48px, 960px);
	}
	.wm-services-feature__content {
		width: 48%;
		max-width: 480px;
	}
	.wm-services-feature__content h2 {
		font-size: clamp(36px, 4.5vw, 50px);
		max-width: 100%;
	}
	.wm-services-feature__content h2 span {
		white-space: nowrap;
	}
}
/* ==========================================================
   Smartphone / iPhone
   ========================================================== */
@media (max-width: 700px) {
	.wm-services-feature, .wm-services-feature__inner {
		min-height: 680px;
	}
	/* Echtes Bild vollflächig – Safari/iPhone-sicher */
	.wm-services-feature__media {
		top: -2px;
		right: -2px;
		bottom: -2px;
		left: -2px;
		-webkit-clip-path: none;
		clip-path: none;
	}
	.wm-services-feature__media img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		object-position: 56% center;
		opacity: 1;
	}
	.wm-services-feature::before {
		background: linear-gradient( 180deg, rgba(0, 0, 145, 0.72) 0%, rgba(0, 0, 112, 0.82) 42%, rgba(0, 0, 72, 0.94) 100%);
	}
	.wm-services-feature::after {
		display: none;
	}
	.wm-services-feature__inner {
		width: 100%;
		max-width: none;
		margin: 0;
		/* Gleiche linke/rechte Inhaltslinie wie der Content darüber */
		padding-left: calc(var(--wm-mobile-content-gutter) + env(safe-area-inset-left, 0px));
		padding-right: calc(var(--wm-mobile-content-gutter) + env(safe-area-inset-right, 0px));
		align-items: flex-end;
		box-sizing: border-box;
	}
	.wm-services-feature__content {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 70px 0 54px;
	}
	.wm-services-feature__eyebrow, .wm-services-feature__content h2, .wm-services-feature__text, .wm-services-feature__actions {
		max-width: 100%;
	}
	.wm-services-feature__content h2 {
		font-size: clamp(38px, 12vw, 54px);
	}
	.wm-services-feature__text {
		font-size: 16px;
	}
	.wm-services-feature__actions {
		width: 100%;
	}
	.wm-services-feature .wm-btn {
		width: 100%;
		min-width: 0;
	}
	.wm-services-feature__content h2 span {
		white-space: normal;
	}
}
@media (max-width: 390px) {
	.wm-services-feature, .wm-services-feature__inner {
		min-height: 640px;
	}
	.wm-services-feature__inner {
		width: 100%;
		max-width: none;
		/* 40-px-Innenlinie auch auf kleinen iPhones beibehalten */
	}
	.wm-services-feature__content h2 {
		font-size: clamp(34px, 11vw, 45px);
	}
}

/* ==========================================================
   Wagner Motoren – Motorenübersicht FINAL
   Deutsch und Englisch

   - Vollbreite ohne seitliche Außenränder
   - gleiche Inhaltslinie wie die übrigen Seitenblöcke
   - Safari-/iPhone-Safe-Area berücksichtigt
   - Karten und Bilder ohne Animation
   - nur „Mehr erfahren“ wird animiert
   - vorhandener Master-Button .wm-btn bleibt erhalten
   ========================================================== */
/* ==========================================================
   1. Astroid darf den Vollbreiten-Block nicht abschneiden
   ========================================================== */
.Pagecontent:has(.wm-engine-showcase), .Pagecontent:has(.wm-engine-showcase) > .container, .Pagecontent:has(.wm-engine-showcase) .astroid-component-area, .Pagecontent:has(.wm-engine-showcase) .astroid-row, .Pagecontent:has(.wm-engine-showcase) .astroid-column, .Pagecontent:has(.wm-engine-showcase) .astroid-module-position, .Pagecontent:has(.wm-engine-showcase) .moduletable, .Pagecontent:has(.wm-engine-showcase) .mod-custom {
	overflow: visible !important;
}
/* Bootstrap-/Astroid-Zeilengutter innerhalb dieses Moduls neutralisieren */
.Pagecontent:has(.wm-engine-showcase) .astroid-row {
	--bs-gutter-x: 0;
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.Pagecontent:has(.wm-engine-showcase) .astroid-column, .Pagecontent:has(.wm-engine-showcase) .astroid-module-position, .Pagecontent:has(.wm-engine-showcase) .moduletable, .Pagecontent:has(.wm-engine-showcase) .mod-custom {
	padding-right: 0 !important;
	padding-left: 0 !important;
}
/* ==========================================================
   2. Grundaufbau
   ========================================================== */
.wm-engine-showcase, .wm-engine-showcase *, .wm-engine-showcase *::before, .wm-engine-showcase *::after {
	box-sizing: border-box;
}
.wm-engine-showcase {
	position: relative;
	/*
   * Nur diese eine Methode für Vollbreite verwenden:
   * kein left: 50%, kein translateX() und keine -50vw-Margins.
   */
	width: 100vw;
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc(50% - 50vw) !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	padding: clamp(64px, 6vw, 104px) 0;
	overflow: hidden;
	color: #11162a;
	background: radial-gradient( circle at 12% 18%, rgba(36, 91, 255, 0.05), transparent 28%), linear-gradient( 180deg, #ffffff 0%, #f7f8fc 100%);
	border-top: 1px solid rgba(0, 0, 145, 0.08);
	border-bottom: 1px solid rgba(0, 0, 145, 0.08);
}
/*
 * Der Inhalt nutzt die volle Breite.
 * Der gewünschte Seitenabstand entsteht ausschließlich durch padding-inline.
 */
.wm-engine-showcase__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-right: clamp(40px, 7.2vw, 96px);
	padding-left: clamp(40px, 7.2vw, 96px);
	display: grid;
	grid-template-columns: minmax(300px, 0.9fr) minmax(0, 2.1fr);
	align-items: center;
	gap: clamp(42px, 5vw, 82px);
}
/* ==========================================================
   3. Einleitung
   ========================================================== */
.wm-engine-showcase__intro {
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
}
.wm-engine-showcase__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	color: #000091;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.wm-engine-showcase__eyebrow::before {
	content: "";
	width: 36px;
	height: 3px;
	flex: 0 0 auto;
	background: linear-gradient(90deg, #1450ff, #638fff);
	box-shadow: 0 0 12px rgba(20, 80, 255, 0.3);
}
.wm-engine-showcase__intro h2 {
	width: 100%;
	max-width: 560px;
	margin: 0 0 24px;
	padding: 0;
	color: #11162a;
	font-size: clamp(42px, 4vw, 68px);
	font-weight: 950;
	line-height: 0.99;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.wm-engine-showcase__intro h2 span {
	display: block;
}
.wm-engine-showcase__text {
	width: 100%;
	max-width: 540px;
	margin: 0;
	padding: 0;
	color: #4d566b;
	font-size: clamp(16px, 1.15vw, 19px);
	font-weight: 500;
	line-height: 1.65;
	text-align: left;
}
.wm-engine-showcase__actions {
	margin-top: 32px;
}
.wm-engine-showcase .wm-btn {
	min-width: 220px;
}
/* ==========================================================
   4. Karten
   ========================================================== */
.wm-engine-showcase__cards {
	min-width: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(18px, 2vw, 30px);
}
.wm-engine-card {
	position: relative;
	min-width: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 145, 0.1);
	border-radius: 6px;
	box-shadow: 0 16px 38px rgba(0, 0, 45, 0.08), 0 2px 8px rgba(0, 0, 45, 0.04);
	/* Karte bleibt ruhig */
	transform: none !important;
	transition: none !important;
}
.wm-engine-card:hover, .wm-engine-card:focus-within {
	transform: none !important;
}
.wm-engine-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: radial-gradient( circle at 50% 46%, #ffffff 0%, #f7f8fb 72%, #ebedf5 100%);
}
.wm-engine-card__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 18px !important;
	object-fit: contain;
	object-position: center;
	border: 0;
	/* Bild bleibt ruhig */
	transform: none !important;
	transition: none !important;
}
.wm-engine-card:hover .wm-engine-card__image img {
	transform: none !important;
}
.wm-engine-card__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
}
.wm-engine-card__body h3 {
	margin: 0 0 12px;
	padding: 0;
	color: #11162a;
	font-size: clamp(18px, 1.25vw, 23px);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.wm-engine-card__body p {
	margin: 0;
	padding: 0;
	color: #5d6678;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	text-align: left;
}
/* ==========================================================
   5. Nur „Mehr erfahren“ animieren
   ========================================================== */
.wm-engine-card__link {
	margin-top: auto;
	padding-top: 22px;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 12px;
	color: #000091 !important;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	text-transform: uppercase;
	transform: translateX(0);
	transition: color 0.25s ease, transform 0.25s ease;
}
.wm-engine-card__link span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1450ff;
	font-size: 16px;
	transform: translateX(0);
	transition: transform 0.25s ease;
}
.wm-engine-card__link:hover, .wm-engine-card__link:focus-visible {
	color: #1450ff !important;
	transform: translateX(5px);
}
.wm-engine-card__link:hover span, .wm-engine-card__link:focus-visible span {
	transform: translateX(4px);
}
.wm-engine-card__link:focus-visible {
	outline: 3px solid rgba(36, 91, 255, 0.28);
	outline-offset: 4px;
}
/*Abstand Spezial Top and Bottom*/
#bc-z9oxsuh5i {
	margin: -6px 0px -3px 0px !important;
}
/* ==========================================================
   6. Tablet
   ========================================================== */
@media (max-width: 1180px) {
	.wm-engine-showcase__inner {
		padding-right: clamp(32px, 5vw, 56px);
		padding-left: clamp(32px, 5vw, 56px);
		grid-template-columns: 1fr;
		gap: 46px;
	}
	.wm-engine-showcase__intro {
		max-width: 760px;
	}
	.wm-engine-showcase__intro h2, .wm-engine-showcase__text {
		max-width: 720px;
	}
	.wm-engine-showcase__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.wm-engine-showcase__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wm-engine-card:last-child {
		grid-column: 1 / -1;
		width: min(50%, 420px);
		justify-self: center;
	}
}
/* ==========================================================
   7. Smartphone und iPhone
   ========================================================== */
@media (max-width: 650px) {
	.wm-engine-showcase {
		padding: 54px 0;
	}
	.wm-engine-showcase__inner {
		width: 100%;
		max-width: none;
		margin: 0;
		/*
     * Gleiche Inhaltslinie wie beim vorherigen mobilen Block.
     * iPhone-Notch/Safe-Area wird zusätzlich berücksichtigt.
     */
		padding-right: calc(var(--wm-mobile-content-gutter) + env(safe-area-inset-right, 0px));
		padding-left: calc(var(--wm-mobile-content-gutter) + env(safe-area-inset-left, 0px));
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.wm-engine-showcase__intro, .wm-engine-showcase__cards {
		width: 100%;
		max-width: none;
	}
	.wm-engine-showcase__intro h2 {
		width: 100%;
		max-width: none;
		font-size: clamp(36px, 11vw, 49px);
	}
	.wm-engine-showcase__text {
		width: 100%;
		max-width: none;
		font-size: 16px;
	}
	.wm-engine-showcase__actions, .wm-engine-showcase .wm-btn {
		width: 100%;
	}
	.wm-engine-showcase .wm-btn {
		min-width: 0;
	}
	.wm-engine-showcase__cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.wm-engine-card, .wm-engine-card:last-child {
		grid-column: auto;
		width: 100%;
		max-width: none;
		justify-self: stretch;
	}
	.wm-engine-card__image {
		aspect-ratio: 16 / 10;
	}
	.wm-engine-card__image img {
		padding: 16px !important;
	}
	.wm-engine-card__body {
		padding: 22px 20px 24px;
	}
	.wm-engine-card__body h3 {
		font-size: 20px;
	}
}
/* Sehr kleine Smartphones */
/* ==========================================================
   8. Bewegungsreduzierung
   ========================================================== */
/* ==========================================================
   Wagner Motoren – Abschlussblock Startseite
   Deutsch und Englisch

   - vollflächig ohne seitliche Außenränder
   - saubere Inhaltslinien auf Desktop, Tablet und iPhone
   - echtes Logo als dezentes Wasserzeichen
   - kein Kontaktformular
   - verwendet den vorhandenen Master-Button .wm-btn
   ========================================================== */
/* Astroid-/Joomla-Abstände nur für diesen Block neutralisieren */
.astroid-module-position:has(.wm-home-final), .moduletable:has(.wm-home-final), .mod-custom:has( > .wm-home-final) {
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}
.wm-home-final, .wm-home-final *, .wm-home-final *::before, .wm-home-final *::after {
	box-sizing: border-box;
}
.wm-home-final {
	position: relative;
	width: 100vw;
	max-width: none;
	margin-top: 0 !important;
	margin-right: calc(50% - 50vw) !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	padding: 0 !important;
	overflow: hidden;
	color: #11162a;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 145, 0.1);
	border-bottom: 1px solid rgba(0, 0, 145, 0.1);
}
.wm-home-final__grid {
	width: 100%;
	min-height: 520px;
	display: grid;
	grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
}
/* ==========================================================
   Linke Seite – Unternehmen
   ========================================================== */
.wm-home-final__about {
	position: relative;
	isolation: isolate;
	min-width: 0;
	overflow: hidden;
	padding: clamp(68px, 6vw, 104px) clamp(38px, 4vw, 68px) clamp(68px, 6vw, 104px) clamp(40px, 7.2vw, 96px);
	display: flex;
	align-items: center;
	color: #ffffff;
	background: radial-gradient( circle at 24% 22%, rgba(48, 88, 255, 0.28), transparent 38%), linear-gradient( 135deg, #000091 0%, #000078 58%, #00004f 100%);
}
.wm-home-final__about::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background: rgba(105, 145, 255, 0.62);
	pointer-events: none;
}
/* Logo als dezentes Wasserzeichen */
.wm-home-final__watermark {
	position: absolute;
	top: 50%;
	right: -1%;
	z-index: -1;
	width: min(60%, 620px);
	max-height: 92%;
	object-fit: contain;
	object-position: center right;
	opacity: 0.16;
	filter: grayscale(1) brightness(2.5) contrast(0.9);
	transform: translateY(-50%);
	pointer-events: none;
	user-select: none;
}
.wm-home-final__about-content {
	position: relative;
	z-index: 1;
	width: min(100%, 620px);
}
.wm-home-final__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.wm-home-final__eyebrow::before {
	content: "";
	width: 36px;
	height: 3px;
	flex: 0 0 auto;
	background: linear-gradient(90deg, #1450ff, #76a0ff);
	box-shadow: 0 0 12px rgba(20, 80, 255, 0.4);
}
.wm-home-final__about h2 {
	width: 100%;
	max-width: 650px;
	margin: 0 0 24px;
	padding: 0;
	color: #ffffff;
	font-size: clamp(42px, 3.8vw, 66px);
	font-weight: 950;
	line-height: 0.99;
	letter-spacing: -0.035em;
	text-align: left !important;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.wm-home-final__about h2 span {
	display: block;
}
.wm-home-final__about-text {
	width: 100%;
	max-width: 590px;
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(16px, 1.15vw, 19px);
	font-weight: 500;
	line-height: 1.65;
	text-align: left !important;
}
.wm-home-final__about-actions {
	margin-top: 32px;
}
.wm-home-final__about .wm-btn {
	min-width: 220px;
}
/* ==========================================================
   Rechte Seite – Kontakt und Öffnungszeiten
   ========================================================== */
.wm-home-final__contact {
	min-width: 0;
	padding: clamp(68px, 6vw, 104px) clamp(40px, 7.2vw, 96px) clamp(68px, 6vw, 104px) clamp(38px, 4vw, 68px);
	display: flex;
	align-items: center;
	background: radial-gradient( circle at 90% 16%, rgba(36, 91, 255, 0.055), transparent 35%), linear-gradient( 180deg, #ffffff 0%, #f7f8fc 100%);
}
.wm-home-final__contact-inner {
	width: min(100%, 760px);
}
.wm-home-final__contact-kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: #000091;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.wm-home-final__contact-kicker::before {
	content: "";
	width: 36px;
	height: 3px;
	flex: 0 0 auto;
	background: linear-gradient(90deg, #1450ff, #638fff);
	box-shadow: 0 0 12px rgba(20, 80, 255, 0.25);
}
.wm-home-final__contact h2 {
	margin: 0 0 18px;
	padding: 0;
	color: #11162a;
	font-size: clamp(40px, 3.2vw, 58px);
	font-weight: 950;
	line-height: 1;
	letter-spacing: -0.03em;
	text-align: left !important;
	text-transform: uppercase;
	hyphens: none;
}
.wm-home-final__contact-intro {
	max-width: 640px;
	margin: 0;
	color: #566074;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	text-align: left !important;
}
.wm-home-final__details {
	margin-top: 34px;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	gap: 28px;
}
.wm-home-final__contact-list {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	list-style: none;
}
.wm-home-final__contact-item {
	min-width: 0;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}
.wm-home-final__contact-icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1450ff;
	background: rgba(36, 91, 255, 0.07);
	border: 1px solid rgba(36, 91, 255, 0.18);
	border-radius: 50%;
	font-size: 19px;
	line-height: 1;
}
.wm-home-final__contact-copy {
	min-width: 0;
	padding-top: 3px;
}
.wm-home-final__contact-label {
	display: block;
	margin-bottom: 4px;
	color: #11162a;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wm-home-final__contact-value, .wm-home-final__contact-value a, .wm-home-final address {
	margin: 0;
	color: #505a6e !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.55;
	text-align: left !important;
	text-decoration: none !important;
}
.wm-home-final__contact-value a {
	transition: color 0.22s ease;
}
.wm-home-final__contact-value a:hover, .wm-home-final__contact-value a:focus-visible {
	color: #1450ff !important;
}
/* Öffnungszeiten */
.wm-home-final__hours {
	align-self: stretch;
	min-width: 0;
	padding: 24px 22px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 145, 0.1);
	border-radius: 6px;
	box-shadow: 0 16px 38px rgba(0, 0, 45, 0.07), 0 2px 8px rgba(0, 0, 45, 0.035);
}
.wm-home-final__hours-heading {
	margin: 0 0 18px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	color: #11162a;
	font-size: clamp(16px, 1.05vw, 20px) !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase;
	white-space: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.wm-home-final__hours-heading i {
	color: #1450ff;
	font-size: 19px;
}
.wm-home-final__hours-list {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	list-style: none;
}
.wm-home-final__hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	color: #505a6e;
	border-bottom: 1px solid rgba(0, 0, 145, 0.09);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.4;
}
.wm-home-final__hours-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.wm-home-final__hours-day {
	color: #11162a;
	font-weight: 850;
	white-space: nowrap;
}
.wm-home-final__hours-time {
	text-align: right;
	white-space: nowrap;
}
/* ==========================================================
   Tablet
   ========================================================== */
@media (max-width: 1100px) {
	.wm-home-final__grid {
		grid-template-columns: 1fr;
	}
	.wm-home-final__about, .wm-home-final__contact {
		min-height: 500px;
		padding-right: clamp(32px, 5vw, 56px);
		padding-left: clamp(32px, 5vw, 56px);
	}
	.wm-home-final__about::after {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: 1px;
	}
	.wm-home-final__about-content, .wm-home-final__contact-inner {
		width: min(100%, 860px);
		margin-right: auto;
		margin-left: auto;
	}
	.wm-home-final__watermark {
		right: 2%;
		width: min(52%, 500px);
		opacity: 0.14;
	}
}
/* ==========================================================
   Smartphone und iPhone
   ========================================================== */
@media (max-width: 700px) {
	.wm-home-final__grid {
		min-height: auto;
	}
	.wm-home-final__about, .wm-home-final__contact {
		min-height: auto;
		padding-top: 58px;
		padding-bottom: 58px;
		padding-right: calc(var(--wm-mobile-content-gutter) + env(safe-area-inset-right, 0px));
		padding-left: calc(var(--wm-mobile-content-gutter) + env(safe-area-inset-left, 0px));
	}
	.wm-home-final__about h2 {
		font-size: clamp(36px, 11vw, 50px);
	}
	.wm-home-final__contact h2 {
		font-size: clamp(35px, 10vw, 48px);
	}
	.wm-home-final__watermark {
		top: 42%;
		right: -12%;
		width: 82%;
		opacity: 0.1;
	}
	.wm-home-final__about-actions, .wm-home-final__about .wm-btn {
		width: 100%;
	}
	.wm-home-final__about .wm-btn {
		min-width: 0;
	}
	.wm-home-final__details {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.wm-home-final__hours {
		padding: 22px 20px;
	}
}
@media (max-width: 390px) {
	.wm-home-final__contact-item {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 13px;
	}
	.wm-home-final__contact-icon {
		width: 44px;
		height: 44px;
	}
}
/* ==========================================================
   Telefon und E-Mail – leichte Hover-Animation
   ========================================================== */
/* Neuer Kontaktblock auf der Startseite */
.wm-home-final__contact-item:has(a[href^="tel:"]), .wm-home-final__contact-item:has(a[href^="mailto:"]) {
	transition: transform 0.25s ease, filter 0.25s ease;
}
.wm-home-final__contact-item:has(a[href^="tel:"]):hover, .wm-home-final__contact-item:has(a[href^="mailto:"]):hover, .wm-home-final__contact-item:has(a[href^="tel:"]):focus-within, .wm-home-final__contact-item:has(a[href^="mailto:"]):focus-within {
	transform: translateY(-4px);
	filter: drop-shadow(0 7px 10px rgba(0, 0, 80, 0.1));
}
/* Footer-Modul 137 */
#mod-custom137 p:has(a[href^="tel:"]), #mod-custom137 p:has(a[href^="mailto:"]) {
	transition: transform 0.25s ease, filter 0.25s ease;
}
#mod-custom137 p:has(a[href^="tel:"]):hover, #mod-custom137 p:has(a[href^="mailto:"]):hover, #mod-custom137 p:has(a[href^="tel:"]):focus-within, #mod-custom137 p:has(a[href^="mailto:"]):focus-within {
	transform: translateY(-4px);
	filter: drop-shadow(0 7px 10px rgba(0, 0, 40, 0.16));
}
/* Links bleiben sauber ausgerichtet */
#mod-custom137 a[href^="tel:"], #mod-custom137 a[href^="mailto:"] {
	display: inline-block;
	text-decoration: none;
}
/* ==========================================================
   22. Wagner Motoren – Google Reviews auf der Startseite
   Bereinigte Produktionsfassung

   Modul:  #mod-custom557
   Widget: #grp-widget-1

   Bottom-up zusammengeführt:
   - spätere Korrekturen sind direkt eingearbeitet
   - keine doppelten oder gegeneinander arbeitenden Regeln
   - keine überzähligen Klammern
   - Smartphone: maximal drei Bewertungen, kein Mehr-laden-Button
   ========================================================== */

/* ----------------------------------------------------------
   1. Modul, Vollbreite und Höhen-Reset
   ---------------------------------------------------------- */

html body #mod-custom557 {
  position: relative;
  box-sizing: border-box;

  width: 100vw;
  max-width: none;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;

  padding: clamp(58px, 5.6vw, 96px) 0 clamp(48px, 5vw, 80px) !important;

  overflow: hidden;

  color: var(--wm-text, #11162a);

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(20, 80, 255, 0.065),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fc 100%
    );

  border-top: 1px solid rgba(0, 0, 145, 0.08);
  border-bottom: 1px solid rgba(0, 0, 145, 0.08);
}

#mod-custom557 > p:empty {
  display: none !important;
}

html body #mod-custom557 .googlereviewspro-widget {
  box-sizing: border-box;

  width: 100%;
  max-width: none;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0;

  padding-right: var(
    --wm-start-content-gutter,
    clamp(40px, 7.2vw, 96px)
  );

  padding-left: var(
    --wm-start-content-gutter,
    clamp(40px, 7.2vw, 96px)
  );
}

html body #mod-custom557 #grp-widget-1,
html body #mod-custom557 #grp-widget-1 .grp-widget-box,
html body #mod-custom557 #grp-widget-1 .grp-reviews-container,
html body #mod-custom557 #grp-widget-1 .grp-reviews-container-inner {
  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

html body #mod-custom557 #grp-widget-1 {
  color: var(--wm-text, #11162a);
  font-family: inherit !important;
}

html body #mod-custom557 #grp-widget-1 .grp-widget-box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------
   2. Kopfbereich im Wagner-Design
   ---------------------------------------------------------- */

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head {
  box-sizing: border-box;

  width: 100%;

  margin: 0 0 clamp(24px, 2.5vw, 38px) !important;

  padding:
    clamp(24px, 2.7vw, 40px)
    clamp(24px, 3.2vw, 50px) !important;

  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;

  column-gap: clamp(20px, 2.5vw, 38px);
  row-gap: 7px;

  color: #ffffff !important;

  background:
    radial-gradient(
      circle at 78% 15%,
      rgba(72, 113, 255, 0.28),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      var(--wm-blue, #000091) 0%,
      #000078 55%,
      var(--wm-blue-dark, #00004f) 100%
    ) !important;

  border: 1px solid rgba(99, 143, 255, 0.46) !important;
  border-radius: 8px !important;

  box-shadow:
    0 18px 44px rgba(0, 0, 60, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor {
  grid-column: 1;
  grid-row: 1 / 3;

  margin: 0 !important;
  color: #ffffff !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-rating,
html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-rating-score {
  color: #ffffff !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-rating-score {
  font-weight: 950 !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-rating svg {
  color: rgba(255, 255, 255, 0.92) !important;
  fill: currentColor !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-rating svg path {
  fill: currentColor !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-stars,
html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-stars span,
html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-honor-stars span::before {
  color: #ffd166 !important;
}

html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title,
html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:link,
html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:visited,
html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:hover,
html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:focus,
html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:focus-visible {
  grid-column: 2;
  grid-row: 1;

  box-sizing: border-box !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  background: transparent !important;

  font-size: clamp(22px, 2vw, 34px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;

  text-align: center !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-transform: uppercase;

  border: 0 !important;
  box-shadow: none !important;
}

html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:hover,
html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:focus-visible {
  color: #dce6ff !important;
}

html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 5px;
}

html body
#mod-custom557
#grp-widget-1
a.grp-widget-box-head-title.wm-google-reviews-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  text-align: center !important;
  text-transform: none !important;
}

html body
#mod-custom557

#grp-widget-1
.wm-google-reviews-title__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 11px !important;

  color: #a9c1ff !important;

  font-family: inherit !important;
  font-size: clamp(12px, 0.8vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;

  text-align: center !important;
  text-transform: uppercase !important;
}

html body
#mod-custom557
#grp-widget-1
.wm-google-reviews-title__eyebrow::before {
  content: "" !important;

  flex: 0 0 36px;

  width: 36px;
  height: 3px;

  display: block !important;

  background: linear-gradient(
    90deg,
    var(--wm-blue-light, #1450ff),
    #9bb8ff
  ) !important;

  box-shadow: 0 0 13px rgba(93, 139, 255, 0.58);
}

html body
#mod-custom557
#grp-widget-1
.wm-google-reviews-title__company {
  display: block !important;

  width: 100% !important;

  color: #ffffff !important;

  font-family: inherit !important;
  font-size: clamp(27px, 2.3vw, 42px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;

  text-align: center !important;
  text-transform: uppercase !important;

  text-shadow: 0 8px 24px rgba(0, 0, 35, 0.22);
}

html body
#mod-custom557
#grp-widget-1
a.wm-google-reviews-title:hover
.wm-google-reviews-title__company,
html body
#mod-custom557
#grp-widget-1
a.wm-google-reviews-title:focus-visible
.wm-google-reviews-title__company {
  color: #ffffff !important;
}

html body
#mod-custom557
#grp-widget-1
a.wm-google-reviews-title:hover
.wm-google-reviews-title__eyebrow,
html body
#mod-custom557
#grp-widget-1
a.wm-google-reviews-title:focus-visible
.wm-google-reviews-title__eyebrow {
  color: #c8d7ff !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-head-subtitle {
  grid-column: 2;
  grid-row: 2;

  margin: 3px 0 0 !important;

  color: rgba(255, 255, 255, 0.82) !important;

  font-size: clamp(14px, 1vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;

  text-align: center !important;
}

/* ----------------------------------------------------------
   3. Optionale Empfehlungsabfrage
   ---------------------------------------------------------- */

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request {
  margin: 0 0 28px !important;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.5vw, 30px) !important;

  color: var(--wm-text, #11162a) !important;
  background: rgba(20, 80, 255, 0.065) !important;

  border: 1px solid rgba(20, 80, 255, 0.18) !important;
  border-radius: 6px !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request,
html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request * {
  box-sizing: border-box;
  font-family: inherit !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request-action {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: var(--wm-text, #11162a) !important;

  font-size: clamp(16px, 1.25vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request-action
> span:first-child {
  margin-right: 6px;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request
.grp-btn {
  min-width: 74px;
  min-height: 44px;

  margin: 0 !important;
  padding: 11px 18px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 4px !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request
.grp-btn-primary {
  color: #ffffff !important;

  background: var(
    --wm-gradient,
    linear-gradient(
      135deg,
      #000091 0%,
      #1450ff 100%
    )
  ) !important;

  border: 1px solid transparent !important;
  border-radius: 4px !important;

  box-shadow: 0 7px 18px rgba(0, 0, 145, 0.18);
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request
.grp-btn-link {
  color: var(--wm-blue, #000091) !important;

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 145, 0.32) !important;
  border-radius: 4px !important;

  text-decoration: none !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request
.grp-btn:hover {
  transform: translateY(-1px);
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request
.grp-btn-primary:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 145, 0.24);
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request
.grp-btn-link:hover {
  color: #ffffff !important;
  background: var(--wm-blue, #000091) !important;
  border-color: var(--wm-blue, #000091) !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-box-request
.grp-btn:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.28);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-box-request {
    padding: 18px 16px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-box-request-action
  > span:first-child {
    flex: 0 0 100%;

    margin: 0 0 3px;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-box-request
  .grp-btn {
    min-width: 96px;
  }
}

/* ----------------------------------------------------------
   4. Reviews-Grid und Plugin-Reset
   ---------------------------------------------------------- */

html body
#mod-custom557
#grp-widget-1
.grp-reviews-container-inner {
  position: static !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;

  gap: clamp(28px, 3vw, 42px) !important;

  transform: none !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-items.grp-layout-grid {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;

  gap: clamp(18px, 2vw, 30px) !important;

  overflow: visible !important;

  transform: none !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-reviews-items::after {
  content: none !important;
  display: none !important;

  height: 0 !important;
  min-height: 0 !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-items.grp-layout-grid
> .grp-reviews-item {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  float: none !important;
  clear: none !important;

  box-sizing: border-box !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-self: stretch !important;

  transform: none !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-items.grp-layout-grid
> .grp-reviews-item
> .grp-reviews-item-inner {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-self: stretch !important;
}

/* ----------------------------------------------------------
   5. Bewertungskarten
   ---------------------------------------------------------- */

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-item
.grp-reviews-review.grp-style-spotlight,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-item
.grp-reviews-review.grp-style-spotlight[style] {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 100% !important;
  min-height: 260px !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  color: var(--wm-text, #11162a) !important;
  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 145, 0.12) !important;
  border-radius: 7px !important;

  box-shadow:
    0 16px 38px rgba(0, 0, 45, 0.075),
    0 2px 8px rgba(0, 0, 45, 0.035) !important;

  text-align: left !important;

  transform: none !important;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review.grp-style-spotlight:hover,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review.grp-style-spotlight:focus-within {
  border-color: rgba(20, 80, 255, 0.34) !important;

  box-shadow:
    0 22px 46px rgba(0, 0, 70, 0.12),
    0 3px 10px rgba(0, 0, 45, 0.05) !important;

  transform: translateY(-4px) !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review.grp-style-spotlight
.grp-reviews-review-text-container {
  box-sizing: border-box !important;

  flex: 1 1 auto !important;

  width: 100% !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 25px 26px 22px !important;

  color: var(--wm-text, #11162a) !important;

  background:
    linear-gradient(
      180deg,
      rgba(20, 80, 255, 0.045) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    #ffffff !important;

  border: 0 !important;
  border-radius: 0 !important;

  text-align: left !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review.grp-style-spotlight
.grp-reviews-review-text-wrap {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 25px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 10px !important;

  overflow: visible !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review.grp-style-spotlight
.grp-reviews-review-quote {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  box-sizing: border-box !important;

  width: 25px !important;
  min-width: 25px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  color: #8fb1ff !important;
  background: transparent !important;

  font-size: 27px !important;
  line-height: 1 !important;

  text-align: left !important;

  transform: none !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review-quote i,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review-quote i::before,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review-quote::before,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review-quote::after {
  color: #8fb1ff !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review-quote::before,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review-quote::after {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review.grp-style-spotlight
.grp-reviews-review-text-container
.grp-reviews-review-text-wrap
.grp-reviews-review-text {
  grid-column: 2 !important;
  grid-row: 1 !important;

  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #283248 !important;

  font-family: inherit !important;
  font-size: clamp(15px, 0.85vw, 17px) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;

  text-align: left !important;
  text-indent: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;

  white-space: pre-line !important;

  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-style-spotlight
.grp-reviews-review-head-dots,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-style-spotlight
.grp-reviews-review-head-dots::before,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-style-spotlight
.grp-reviews-review-head-dots::after {
  display: none !important;
  content: none !important;

  width: 0 !important;
  height: 0 !important;

  background: transparent !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review
.grp-reviews-review-head {
  box-sizing: border-box !important;

  flex: 0 0 auto !important;

  width: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 17px 26px 20px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  gap: 6px !important;

  color: var(--wm-text, #11162a) !important;
  background: #f8f9fd !important;

  border-top: 1px solid rgba(0, 0, 145, 0.09) !important;

  text-align: left !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review
.grp-reviews-review-author-name {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--wm-blue, #000091) !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;

  text-align: left !important;
  text-transform: none !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review
.grp-reviews-review-rating {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  color: #f4b400 !important;
  text-align: left !important;
}

html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review
.grp-reviews-review-rating span,
html body
#mod-custom557
#grp-widget-1.grp-widget
.grp-reviews-review
.grp-reviews-review-rating span::before {
  color: #f4b400 !important;
}

/* ----------------------------------------------------------
   6. Mehr-laden-Button im Wagner-Design
   ---------------------------------------------------------- */

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-container {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: none !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn {
  position: relative !important;
  isolation: isolate;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  box-sizing: border-box !important;

  width: min(100%, 355px) !important;
  min-width: 355px !important;
  max-width: 355px !important;

  min-height: 86px !important;

  margin: 0 !important;
  padding: 22px 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 28px !important;

  overflow: hidden !important;

  color: #ffffff !important;

  background: linear-gradient(
    135deg,
    #11129a 0%,
    #1838c8 46%,
    #3f70ed 100%
  ) !important;

  border: 0 !important;
  border-radius: 4px !important;

  box-shadow: 0 14px 34px rgba(0, 0, 145, 0.28) !important;

  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;

  text-align: left !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  transform: translateY(0) !important;

  transition:
    transform 280ms ease,
    box-shadow 280ms ease,
    background 280ms ease !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn > span {
  position: relative;
  z-index: 2;

  color: #ffffff !important;

  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn::before {
  content: "" !important;

  position: absolute;
  top: 0;
  bottom: 0;
  left: -120%;
  z-index: 1;

  width: 58%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.34),
    transparent
  );

  transform: skewX(-25deg);

  transition: left 750ms ease;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn::after {
  content: "\f107" !important;

  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  z-index: 2;

  flex: 0 0 auto !important;

  width: 24px !important;
  height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #ffffff !important;
  background: transparent !important;

  border: 0 !important;

  font-family:
    "Font Awesome 6 Free",
    "Font Awesome 5 Free" !important;
  font-size: 25px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform: translateY(0) !important;

  transition: transform 280ms ease !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn:hover,
html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn:focus-visible {
  color: #ffffff !important;

  background: linear-gradient(
    135deg,
    #00005d 0%,
    #1745d9 48%,
    #527eff 100%
  ) !important;

  box-shadow: 0 20px 44px rgba(0, 0, 145, 0.4) !important;

  transform: translateY(-3px) !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn:hover::before,
html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn:focus-visible::before {
  left: 160%;
}


html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn:hover::after,
html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn:focus-visible::after {
  transform: translateY(5px) !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn:focus-visible {
  outline: 3px solid rgba(93, 139, 255, 0.62) !important;
  outline-offset: 4px !important;
}

html body
#mod-custom557
#grp-widget-1
.grp-widget-load-more-btn.grp-disabled {
  opacity: 0.58 !important;
  cursor: wait !important;
  transform: none !important;
}

/* ----------------------------------------------------------
   7. Responsive Darstellung
   ---------------------------------------------------------- */

@media (max-width: 1000px) {
  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-items.grp-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  html body #mod-custom557 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  html body #mod-custom557 .googlereviewspro-widget {
    padding-right: calc(
      24px + env(safe-area-inset-right, 0px)
    );

    padding-left: calc(
      24px + env(safe-area-inset-left, 0px)
    );
  }

  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-box-head {
    padding: 24px 22px !important;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;

    justify-items: center;
    row-gap: 10px;

    text-align: center !important;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-box-head-honor {
    grid-column: 1;
    grid-row: 1;
  }

  html body
  #mod-custom557
  #grp-widget-1
  a.grp-widget-box-head-title,
  html body
  #mod-custom557
  #grp-widget-1
  a.grp-widget-box-head-title.wm-google-reviews-title {
    grid-column: 1;
    grid-row: 2;

    gap: 8px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-box-head-subtitle {
    grid-column: 1;
    grid-row: 3;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .wm-google-reviews-title__eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .wm-google-reviews-title__eyebrow::before {
    flex-basis: 28px;
    width: 28px;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .wm-google-reviews-title__company {
    font-size: clamp(25px, 8vw, 35px) !important;
    line-height: 1.04 !important;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .grp-reviews-container-inner {
    gap: 26px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-items.grp-layout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 18px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-item
  .grp-reviews-review.grp-style-spotlight,
  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-item
  .grp-reviews-review.grp-style-spotlight[style] {
    height: auto !important;
    min-height: 0 !important;
  }

  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-review.grp-style-spotlight
  .grp-reviews-review-text-container {
    padding: 23px 22px 20px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-review.grp-style-spotlight
  .grp-reviews-review-text-wrap {
    grid-template-columns: 23px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-review.grp-style-spotlight
  .grp-reviews-review-quote {
    width: 23px !important;
    min-width: 23px !important;
    font-size: 25px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-review
  .grp-reviews-review-head {
    padding: 16px 22px 19px !important;
  }

  html body
  #mod-custom557
  #grp-widget-1
  .grp-reviews-items.grp-layout-grid
  > .grp-reviews-item:nth-child(n + 4) {
    display: none !important;
  }
}

@media (max-width: 390px) {
  html body #mod-custom557 .googlereviewspro-widget {
    padding-right: calc(
      18px + env(safe-area-inset-right, 0px)
    );

    padding-left: calc(
      18px + env(safe-area-inset-left, 0px)
    );
  }
}

/* ----------------------------------------------------------
   8. Bewegungsreduzierung
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-review.grp-style-spotlight,
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-load-more-btn,
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-load-more-btn::before,
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-load-more-btn::after {
    transition: none !important;
  }

  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-review.grp-style-spotlight:hover,
  html body
  #mod-custom557
  #grp-widget-1.grp-widget
  .grp-reviews-review.grp-style-spotlight:focus-within,
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-load-more-btn:hover,
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-load-more-btn:focus-visible,
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-load-more-btn:hover::after,
  html body
  #mod-custom557
  #grp-widget-1
  .grp-widget-load-more-btn:focus-visible::after {
    transform: none !important;
  }
}
/* =========================================================
   Google Reviews – Smartphone: 3 Bewertungen + Mehr-laden
   ========================================================= */

@media (max-width: 650px) {

  /* Alte nth-child-Ausblendung gezielt überschreiben */
  html body #mod-custom557 #grp-widget-1
  .grp-reviews-items.grp-layout-grid
  > .grp-reviews-item:nth-child(n + 4) {
    display: flex !important;
  }

  /* Steuerung der ausgeblendeten Bewertungen durch JavaScript */
  html body #mod-custom557 #grp-widget-1
  .grp-reviews-items.grp-layout-grid
  > .grp-reviews-item.wm-grp-mobile-hidden {
    display: none !important;
  }

  /* Button-Container immer sichtbar */
  html body #mod-custom557 #grp-widget-1
  .grp-widget-load-more-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 22px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mehr-laden-Button */
  html body #mod-custom557 #grp-widget-1
  .grp-widget-load-more-btn {
    display: flex !important;
    width: calc(100% - 30px) !important;
    max-width: 355px !important;
    min-height: 58px !important;
    padding: 16px 24px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}
@media (max-width: 650px) {

  html body #mod-custom557 #grp-widget-1
  .grp-reviews-items.grp-layout-grid
  > .grp-reviews-item:nth-child(n + 4) {
    display: flex !important;
  }

  html body #mod-custom557 #grp-widget-1
  .grp-reviews-items.grp-layout-grid
  > .grp-reviews-item.wm-grp-mobile-hidden {
    display: none !important;
  }

  html body #mod-custom557 #grp-widget-1
  .grp-widget-load-more-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 22px !important;
    align-items: center !important;
    justify-content: center !important;
  }
}/* WM_FONT_AWESOME_SVG_FALLBACK_END */

/* Animation bei reduzierter Bewegung deaktivieren */
/*  ==========================================================
   Wagner Motoren – Breadcrumb und Artikel FINAL
   Seite: /de/
   ==========================================================  */

/* ----------------------------------------------------------
   1. Breadcrumb über die tatsächliche Browserbreite ausrichten
   ---------------------------------------------------------- */

#b-6569311e4e58c814389352,
#b-6569311e4e58c814389352 .breadcrumbs-position {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#b-6569311e4e58c814389352 .breadcrumb {
  box-sizing: border-box !important;

  width: 100vw !important;
  max-width: none !important;

  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;

  padding-top: 7px !important;
  padding-right: var(--wm-start-content-gutter) !important;
  padding-bottom: 7px !important;
  padding-left: var(--wm-start-content-gutter) !important;
}

/* Das Inline-padding-left: 30px wird damit überschrieben. */
#b-6569311e4e58c814389352 .breadcrumb[style] {
  padding-left: var(--wm-start-content-gutter) !important;
}

/* ----------------------------------------------------------
   2. Nur den oberen Leerraum der Komponente entfernen
   ---------------------------------------------------------- */

#ca-6568ee70fcd29018906395,
#ca-6568ee70fcd29018906395 .astroid-component-area,
#ca-6568ee70fcd29018906395 .com-content-article,
#ca-6568ee70fcd29018906395 .item-page,
#as-61b5cf11613cc086185689,
#ar-61b5cf11613cc033152637,
#ac-61b5cf11613cc030930660 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Bootstrap-Gutter innerhalb der ersten Artikelzeile entfernen. */
#ar-61b5cf11613cc033152637 {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;

  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* ----------------------------------------------------------
   3. Artikeltext vollbreit, aber mit sauberem Inhaltsabstand
   ---------------------------------------------------------- */

#awt-61bae20c0d2cf499628496 {
  box-sizing: border-box !important;

  width: 100vw !important;
  max-width: none !important;


  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;

  padding-top: 10px !important;
  padding-right: var(--wm-start-content-gutter) !important;
  padding-bottom: 0 !important;
  padding-left: var(--wm-start-content-gutter) !important;

  overflow: visible !important;
}

/* Leerer Bildcontainer darf keinen Raum reservieren. */
#fi-61b9f1168f37cc48296773 {
  display: none !important;

  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Erste Überschrift ohne zusätzlichen großen oberen Abstand. */
#awt-61bae20c0d2cf499628496 > h1:first-child {
  margin-top: 0 !important;
}

/* ----------------------------------------------------------
   4. Tablet und Smartphone
   ---------------------------------------------------------- */

@media (max-width: 650px) {

  #b-6569311e4e58c814389352 .breadcrumb {
    padding-right:
      calc(40px + env(safe-area-inset-right, 0px)) !important;

    padding-left:
      calc(40px + env(safe-area-inset-left, 0px)) !important;
  }

  #awt-61bae20c0d2cf499628496 {
    padding-right:
      calc(40px + env(safe-area-inset-right, 0px)) !important;

    padding-left:
      calc(40px + env(safe-area-inset-left, 0px)) !important;
  }
}

@media (max-width: 390px) {
  #b-6569311e4e58c814389352 .breadcrumb,
  #awt-61bae20c0d2cf499628496 {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px)) !important;

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px)) !important;
  }
}
/*  ==========================================================
   Wagner Motoren – Telefonleiste V5 Produktionsfassung
   JavaScript-Schnittstelle: --wm-contact-cta-footer-offset
   ==========================================================  */

/* Astroid-/Joomla-Hüllen der Leiste ohne eigene Außenabstände */
.astroid-module-position:has(.wm-contact-cta),
.moduletable:has(.wm-contact-cta),
.mod-custom:has(> .wm-contact-cta) {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.wm-contact-cta,
.wm-contact-cta *,
.wm-contact-cta *::before,
.wm-contact-cta *::after {
  box-sizing: border-box;
}

/*
 * Nicht mehr nur body > .wm-contact-cta:
 * Dadurch ist die Leiste bereits korrekt formatiert, bevor oder falls
 * das JavaScript sie unter <body> verschiebt.
 */
.wm-contact-cta {
  position: fixed !important;
  right: 0 !important;
  bottom: calc(
    var(--wm-contact-cta-footer-offset, 0px) + env(safe-area-inset-bottom, 0px)
  ) !important;
  left: 0 !important;
  z-index: 9000;

  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: var(--wm-contact-cta-height);

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  color: #ffffff !important;

  background:
    radial-gradient(
      circle at 72% 50%,
      rgba(45, 91, 255, 0.18),
      transparent 36%
    ),
    linear-gradient(
      110deg,
      #000091 0%,
      #000078 57%,
      #000052 100%
    ) !important;

  border-top: 1px solid rgba(100, 140, 255, 0.6);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;

  box-shadow: 0 -10px 28px rgba(0, 0, 45, 0.18);
}

.wm-contact-cta .wm-contact-cta__inner {
  width: 100% !important;
  max-width: none !important;
  min-height: var(--wm-contact-cta-height);

  margin: 0 !important;
  padding: 10px clamp(40px, 7.2vw, 96px) !important;

  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
}

.wm-contact-cta__icon {
  width: 52px;
  height: 52px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  color: #ffffff !important;

  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;

  font-size: 23px;
  line-height: 1;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 8px 20px rgba(0, 0, 45, 0.2);
}

.wm-contact-cta__content {
  min-width: 0;
  max-width: none;
}

/*
 * H3 ist der gewünschte Tag.
 * H2 wird vorübergehend mitgestaltet, damit das englische Modul nicht
 * unformatiert bleibt, falls dort noch ein H2 eingetragen ist.
 */
.wm-contact-cta__content h3,
.wm-contact-cta__content h2 {
  margin: 0 0 4px !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: clamp(16px, 1.05vw, 20px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.008em !important;
  text-align: left !important;
  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-contact-cta__content p {
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.84) !important;

  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 500;
  line-height: 1.3;
  text-align: left !important;
  white-space: nowrap;
}

.wm-contact-cta__actions {
  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.wm-contact-cta .wm-contact-cta__button {
  width: auto !important;
  min-width: 176px;
  min-height: 46px;

  padding: 13px 20px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Platzhalter für den vom JavaScript entfernten Platz im Seitenfluss */
.wm-contact-cta-spacer {
  display: block !important;
  width: 100%;
  height: var(--wm-contact-cta-height);
  margin: 0;
  padding: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  :root {
    --wm-contact-cta-height: 78px;
  }

  .wm-contact-cta .wm-contact-cta__inner {
    padding-right: clamp(28px, 5vw, 48px) !important;
    padding-left: clamp(28px, 5vw, 48px) !important;

    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 16px;
  }

  .wm-contact-cta__icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .wm-contact-cta__content h3,
  .wm-contact-cta__content h2 {
    font-size: clamp(15px, 1.9vw, 18px) !important;
  }
}

@media (max-width: 650px) {
  :root {
    --wm-contact-cta-height: 66px;
  }

  .wm-contact-cta .wm-contact-cta__inner {
    padding-top: 8px !important;
    padding-right:
      calc(16px + env(safe-area-inset-right, 0px)) !important;
    padding-bottom: 8px !important;
    padding-left:
      calc(16px + env(safe-area-inset-left, 0px)) !important;

    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .wm-contact-cta__icon {
    width: 40px;
    height: 40px;
    border-width: 1.5px;
    font-size: 18px;
  }

  .wm-contact-cta__content h3,
  .wm-contact-cta__content h2 {
    margin: 0 !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.12 !important;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .wm-contact-cta__content p {
    display: none !important;
  }

  .wm-contact-cta .wm-contact-cta__button {
    min-width: 112px;
    min-height: 42px;
    padding: 11px 13px;
    gap: 10px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .wm-contact-cta .wm-contact-cta__inner {
    padding-right:
      calc(12px + env(safe-area-inset-right, 0px)) !important;
    padding-left:
      calc(12px + env(safe-area-inset-left, 0px)) !important;

    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
  }
}

/* Ausschließlich unter 300 px ausblenden */
@media (max-width: 299.98px) {
  .wm-contact-cta,
  .wm-contact-cta-spacer {
    display: none !important;
  }
}
.wm-contact-cta__icon i,
.wm-contact-cta__icon svg {
  display: block;
  transform-origin: 50% 55%;
  will-change: transform;
}
/* Mouseover über die gesamte Leiste */
.wm-contact-cta:hover .wm-contact-cta__icon i,
.wm-contact-cta:hover .wm-contact-cta__icon svg,

/* Tastaturbedienung über Link oder Button */
.wm-contact-cta:focus-within .wm-contact-cta__icon i,
.wm-contact-cta:focus-within .wm-contact-cta__icon svg {
  animation: wm-contact-phone-ring 0.42s ease-in-out 3 !important;
}
@keyframes wm-contact-phone-ring {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  20% {
    transform: rotate(-18deg) scale(1.08);
  }

  40% {
    transform: rotate(17deg) scale(1.08);
  }

  60% {
    transform: rotate(-13deg) scale(1.05);
  }

  80% {
    transform: rotate(11deg) scale(1.03);
  }
}
/* ==========================================================
   Telefonleiste – Abstand unter der Leiste auf dem iPad entfernen
   ========================================================== */

@media (min-width: 768px) and (max-width: 1366px) {
  .wm-contact-cta {
    bottom: var(
      --wm-contact-cta-footer-offset,
      0px
    ) !important;
  }
}
/* ==========================================================
   14. Wagner Motoren – Kontaktkacheln V3

   Änderungen:
   - geringerer Abstand oberhalb der Kacheln
   - kein zusätzlicher Abstand unterhalb der Kacheln
   - einheitliche Seitenabstände
   - übliche Wagner-Button-Animation bleibt erhalten
   - Kacheln selbst bleiben statisch
   ========================================================== */

.wm-contact-cards {
  --wm-contact-blue: var(--wm-blue, #000091);
  --wm-contact-blue-light: var(--wm-blue-light, #1450ff);
  --wm-contact-text: var(--wm-text, #11162a);
  --wm-contact-muted: var(--wm-muted, #667085);
  --wm-contact-border: var(--wm-border, #e2e6ee);

  position: relative;
  box-sizing: border-box;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding-top: clamp(18px, 2vw, 30px);
  padding-right: clamp(50px, 6vw, 120px);
  padding-bottom: 0;
  padding-left: clamp(50px, 6vw, 120px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(20, 80, 255, 0.045),
      transparent 42%
    ),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

.wm-contact-cards__grid {
  width: 100%;
  max-width: none;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--wm-contact-block-gap);
}

.wm-contact-card {
  min-width: 0;
  min-height: 320px;
  padding: clamp(28px, 2.4vw, 42px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: var(--wm-contact-text);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--wm-contact-border);
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(0, 0, 50, 0.055);

  transform: none;
  transition: none;
}

.wm-contact-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-contact-blue);
  font-size: 39px;
  line-height: 1;

  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: center;

  transition:
    color 220ms ease,
    transform 260ms ease;
}

.wm-contact-card__icon i,
.wm-contact-card__icon svg {
  display: block;
}

.wm-contact-card__title {
  margin: 0 0 22px;
  padding: 0 0 12px;

  color: var(--wm-contact-blue);
  font-size: clamp(17px, 1.05vw, 21px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.035em;
  text-transform: uppercase;

  background:
    linear-gradient(
      90deg,
      var(--wm-contact-blue-light),
      rgba(20, 80, 255, 0)
    )
    left bottom / 42px 2px no-repeat;

  transform: translate3d(0, 0, 0);

  transition:
    color 220ms ease,
    letter-spacing 220ms ease,
    transform 220ms ease,
    background-size 220ms ease;
}

.wm-contact-card:hover .wm-contact-card__icon,
.wm-contact-card:focus-within .wm-contact-card__icon {
  color: var(--wm-contact-blue-light);
  transform: translate3d(0, -4px, 0) rotate(-5deg);
}

.wm-contact-card:hover .wm-contact-card__title,
.wm-contact-card:focus-within .wm-contact-card__title {
  color: var(--wm-contact-blue-light);
  letter-spacing: 0.055em;
  transform: translate3d(6px, 0, 0);
  background-size: 74px 2px;
}

.wm-contact-card__content {
  width: 100%;
  min-width: 0;

  color: var(--wm-contact-text);
  font-size: clamp(15px, 0.92vw, 17px);
  line-height: 1.62;
}

.wm-contact-card__content p {
  margin: 0 0 12px;
}

.wm-contact-card__content p:last-child {
  margin-bottom: 0;
}

.wm-contact-card__content a:not(.wm-btn) {
  color: var(--wm-contact-text);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.wm-contact-card__content a:not(.wm-btn):hover,
.wm-contact-card__content a:not(.wm-btn):focus-visible {
  color: var(--wm-contact-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wm-contact-card__person {
  font-weight: 800;
}

.wm-contact-card__hours {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.wm-contact-card__hours th,
.wm-contact-card__hours td {
  padding: 8px 0;
  border: 0;
  vertical-align: top;
}

.wm-contact-card__hours th {
  width: 42%;
  padding-right: 16px;

  color: var(--wm-contact-text);
  font-weight: 800;
  text-align: left;
}

.wm-contact-card__hours td {
  color: var(--wm-contact-muted);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.wm-contact-card--download .wm-contact-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.wm-contact-card__button {
  width: 100% !important;
  min-width: 0 !important;
  margin-top: auto;
  justify-content: space-between;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 1320px) {
  .wm-contact-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .wm-contact-cards {
    padding-top: 20px;

    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .wm-contact-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wm-contact-card {
    min-height: 290px;
  }
}

@media (max-width: 599px) {
  :root {
    --wm-contact-block-gap: 16px;
  }

  .wm-contact-cards {
    padding-top: 14px;

    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-contact-cards__grid {
    grid-template-columns: 1fr;
  }

  .wm-contact-card {
    min-height: auto;
    padding: 26px 24px;
  }

  .wm-contact-card__hours td {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-contact-card__icon,
  .wm-contact-card__title {
    transition: none !important;
  }
}

/* ==========================================================
   15. Wagner Motoren – Kontaktformular und Karte

   Desktop:
   Formular und Karte nebeneinander.

   Tablet / Smartphone:
   Beide Bereiche untereinander.

   Die Kontaktkacheln oberhalb bleiben unverändert erhalten.
   ========================================================== */

.wm-contact-form-map {
  --wm-contact-layout-blue: var(--wm-blue, #000091);
  --wm-contact-layout-light: var(--wm-blue-light, #1450ff);
  --wm-contact-layout-text: var(--wm-text, #11162a);
  --wm-contact-layout-muted: var(--wm-muted, #667085);
  --wm-contact-layout-border: var(--wm-border, #e2e6ee);

  position: relative;
  box-sizing: border-box;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding:
    var(--wm-contact-block-gap, clamp(18px, 1.8vw, 30px))
    clamp(50px, 6vw, 120px)
    clamp(48px, 5vw, 84px);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(20, 80, 255, 0.045),
      transparent 44%
    ),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

.wm-contact-form-map__grid {
  width: 100%;
  max-width: none;
  margin: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 52px);
}

.wm-contact-form-map__panel {
  min-width: 0;
  padding: clamp(30px, 3.2vw, 54px);

  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--wm-contact-layout-border);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 50, 0.06);
}

.wm-contact-form-map__map-panel {
  position: sticky;
  top: calc(var(--wm-header-height, 112px) + 24px);
}

.wm-contact-form-map__header {
  margin-bottom: clamp(28px, 3vw, 46px);
}

.wm-contact-form-map__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin: 0 0 18px;

  color: var(--wm-contact-layout-blue);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wm-contact-form-map__eyebrow::before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 3px;

  background: var(--wm-contact-layout-light);
}

.wm-contact-form-map__title {
  margin: 0 0 20px;
  padding: 0;

  color: var(--wm-contact-layout-text);
  font-size: clamp(34px, 3vw, 54px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-contact-form-map__intro {
  /*max-width: 650px;
  margin: 0;
  color: var(--wm-contact-layout-muted);
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 500;
  line-height: 1.65;*/
  display: none;
}

/* ==========================================================
   RSForm-Darstellung
   ========================================================== */

.wm-contact-form-map__form-body {
  width: 100%;
}

.wm-contact-form-map__form-body > .rsform-block {
  width: 100%;
  margin-bottom: 12px !important;
}

.wm-contact-form-map__form-body
  .row.rsform-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;

  width: 100%;
  margin: 0 0 12px !important;
}

.wm-contact-form-map__form-body
  .rsform-block:last-child {
  margin-bottom: 0 !important;
}

.wm-contact-form-map__form-body
  .formControlLabel,
.wm-contact-form-map__form-body
  .formControls {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.wm-contact-form-map__form-body
  .formControlLabel {
  color: var(--wm-contact-layout-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.wm-contact-form-map__form-body
  .formRequired {
  margin-left: 3px;
  color: var(--wm-contact-layout-light);
}

.wm-contact-form-map__form-body
  .form-control,
.wm-contact-form-map__form-body
  .form-select {
  width: 100% !important;
  min-height: 48px;

  padding: 10px 14px;

  color: var(--wm-contact-layout-text);
  background-color: #ffffff;
  border: 1px solid #d9deea;
  border-radius: 4px;
  box-shadow: none;

  font-size: 16px;
  line-height: 1.35;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.wm-contact-form-map__form-body
  textarea.form-control {
  min-height: 130px;
  padding-top: 11px;
  padding-bottom: 11px;
  resize: vertical;
}

.wm-contact-form-map__form-body
  .form-control:hover,
.wm-contact-form-map__form-body
  .form-select:hover {
  border-color: #b8c2d8;
}

.wm-contact-form-map__form-body
  .form-control:focus,
.wm-contact-form-map__form-body
  .form-select:focus {
  border-color: var(--wm-contact-layout-light);
  box-shadow:
    0 0 0 3px rgba(20, 80, 255, 0.12);
  outline: 0;
}

.wm-contact-form-map__form-body
  input[type="file"].form-control {
  min-height: 48px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.wm-contact-form-map__form-body
  .formValidation
  .formNoError {
  display: none;

}

.wm-contact-form-map__form-body
  .rsform-block-agb-datenschutz {
  margin: 6px 0 24px;
  color: var(--wm-contact-layout-muted);
  font-size: 14px;
  line-height: 1.6;
}

.wm-contact-form-map__form-body
  .rsform-block-agb-datenschutz p {
  margin: 0;
}

.wm-contact-form-map__form-body
  .rsform-block-agb-datenschutz a {
  color: var(--wm-contact-layout-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wm-contact-form-map__form-body
  .rsform-block-senden {
  margin-bottom: 0 !important;
}

.wm-contact-form-map__form-body
  .rsform-block-senden
  > .formControlLabel {
  display: none !important;
}

.wm-contact-form-map__submit {
  width: min(100%, 340px) !important;
  min-width: 0 !important;
  justify-content: space-between;
}

/* ==========================================================
   Karte
   ========================================================== */

.wm-contact-form-map__map-body,
.wm-contact-form-map__map-body
  .astroid-module-position,
.wm-contact-form-map__map-body
  .moduletable,
.wm-contact-form-map__map-body
  .mod-custom,
.wm-contact-form-map__map-body
  .phocamaps,
.wm-contact-form-map__map-body
  .phocamaps-box {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.wm-contact-form-map__map-body
  .module-title {
  display: none !important;
}

.wm-contact-form-map__map-body
  .phocamaps-box {
  overflow: hidden;
  border: 0 !important;
  border-radius: 7px;
  box-shadow: 0 12px 32px rgba(0, 0, 50, 0.09);
}

.wm-contact-form-map__map-body
  .phocamaps-map,
.wm-contact-form-map__map-body
  .leaflet-container {
  width: 100% !important;
  height: clamp(430px, 43vw, 650px) !important;
  min-height: 430px;

  border-radius: 7px;
}

.wm-contact-form-map__route {
  margin-top: 24px;

  display: inline-flex;
  align-items: center;
  gap: 13px;

  color: var(--wm-contact-layout-blue) !important;

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.055em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.wm-contact-form-map__route i {
  font-size: 22px;
  transform: rotate(-14deg);
  transition: transform 220ms ease;
}

.wm-contact-form-map__route:hover,
.wm-contact-form-map__route:focus-visible {
  color: var(--wm-contact-layout-light) !important;
}

.wm-contact-form-map__route:hover i,
.wm-contact-form-map__route:focus-visible i {
  transform:
    translate3d(4px, -3px, 0)
    rotate(-14deg);
}

.wm-contact-form-map__route:focus-visible {
  outline: 3px solid rgba(93, 139, 255, 0.45);
  outline-offset: 5px;
}

/* Vom JavaScript geleerte ursprüngliche Kartenzeile */
.wm-contact-map-source-empty {
  display: none !important;
}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1080px) {
  .wm-contact-form-map {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .wm-contact-form-map__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wm-contact-form-map__map-panel {
    position: static;
  }

  .wm-contact-form-map__map-body
    .phocamaps-map,
  .wm-contact-form-map__map-body
    .leaflet-container {
    height: 520px !important;
    min-height: 520px;
  }
}

/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 599px) {
  .wm-contact-form-map {
    padding-top: 16px;
    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));
    padding-bottom: 42px;
    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-contact-form-map__grid {
    gap: 18px;
  }

  .wm-contact-form-map__panel {
    padding: 28px 22px;
  }

  .wm-contact-form-map__header {
    margin-bottom: 26px;
  }

  .wm-contact-form-map__title {
    font-size: clamp(31px, 10vw, 42px);
  }

  .wm-contact-form-map__form-body
    .form-control,
  .wm-contact-form-map__form-body
    .form-select {
    min-height: 48px;
    font-size: 16px;
  }

  .wm-contact-form-map__submit {
    width: 100% !important;
  }

  .wm-contact-form-map__form-body
    .row.rsform-block,
  .wm-contact-form-map__form-body
    > .rsform-block {
    margin-bottom: 10px !important;
  }

  .wm-contact-form-map__map-body
    .phocamaps-map,
  .wm-contact-form-map__map-body
    .leaflet-container {
    height: 420px !important;
    min-height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-contact-form-map *,
  .wm-contact-form-map *::before,
  .wm-contact-form-map *::after {
    transition: none !important;
  }
}
/* ==========================================================
   16. Wagner Motoren – OpenStreetMap / Leaflet V2
   Firmenfarben ohne Font-Awesome-Pseudoelemente

   WICHTIG:
   Den bisherigen Block "OpenStreetMap / Leaflet Firmenfarben"
   vollständig entfernen und nur diese Endfassung verwenden.
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350) {
  --wm-map-blue: var(--wm-blue, #000091);
  --wm-map-blue-dark: var(--wm-blue-dark, #00004f);
  --wm-map-blue-light: var(--wm-blue-light, #1450ff);
  --wm-map-white: #ffffff;
  --wm-map-text: var(--wm-text, #11162a);
  --wm-map-muted: var(--wm-muted, #667085);
  --wm-map-control-size: 46px;
}

/* ==========================================================
   1. Kartenrahmen
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(.phocamaps, .phocamaps-box) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .phocamaps-box {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 145, 0.10) !important;
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(0, 0, 50, 0.10);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-container {
  width: 100% !important;
  border-radius: 8px;
  background: #eef1f7;
  font-family: inherit;
}

/* ==========================================================
   2. Gemeinsame Gestaltung aller Kartenbuttons
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-bar {
  overflow: hidden;
  border: 0 !important;
  border-radius: 7px;
  box-shadow:
    0 12px 28px rgba(0, 0, 50, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out,
    .leaflet-control-fullscreen-button,
    .leaflet-control-locate > a
  ) {
  position: relative;
  box-sizing: border-box;

  width: var(--wm-map-control-size) !important;
  height: var(--wm-map-control-size) !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  color: var(--wm-map-white) !important;
  background-color: var(--wm-map-blue) !important;
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(20, 80, 255, 0.42)
    ) !important;

  border: 0 !important;
  border-bottom:
    1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 !important;

  text-align: center !important;
  text-decoration: none !important;
  text-indent: 0 !important;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-bar > a:first-child {
  border-radius: 7px 7px 0 0 !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-bar > a:last-child {
  border-bottom: 0 !important;
  border-radius: 0 0 7px 7px !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-fullscreen,
    .leaflet-control-locate
  )
  > a {

  border-bottom: 0 !important;
  border-radius: 7px !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out,
    .leaflet-control-fullscreen-button,
    .leaflet-control-locate > a
  ):hover,
:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out,
    .leaflet-control-fullscreen-button,
    .leaflet-control-locate > a
  ):focus-visible {
  color: var(--wm-map-white) !important;
  background-color: var(--wm-map-blue-dark) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.24);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out,
    .leaflet-control-fullscreen-button,
    .leaflet-control-locate > a
  ):focus-visible {
  outline: 3px solid rgba(93, 139, 255, 0.56);
  outline-offset: 3px;
}

/* ==========================================================
   3. Zoom: vorhandene Zeichen verwenden
   Keine Icon-Schrift und keine Pseudoelement-Glyphen
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out
  ) {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: var(--wm-map-control-size) !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-zoom-out {
  font-size: 31px !important;
  line-height: calc(var(--wm-map-control-size) - 3px) !important;
}

/* Alte Pseudoelemente zuverlässig abschalten */
:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out
  )::before,
:is(.wm-contact-form-map__map-body, #mod-custom350)
  :is(
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out
  )::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================
   4. Vollbildsymbol rein mit CSS gezeichnet
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-fullscreen-button {
  overflow: hidden;
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(20, 80, 255, 0.42)
    ) !important;
  font-size: 0 !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-fullscreen-button::before {
  content: "" !important;
  display: block !important;

  width: 22px;
  height: 22px;

  background:
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      left top / 8px 2px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      left top / 2px 8px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      right top / 8px 2px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      right top / 2px 8px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      left bottom / 8px 2px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      left bottom / 2px 8px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      right bottom / 8px 2px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      right bottom / 2px 8px no-repeat;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-fullscreen-button::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================
   5. Standortbutton als CSS-Fadenkreuz
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-locate > a {
  overflow: hidden;
  font-size: 0 !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-locate > a > :is(span, i) {
  display: none !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-locate > a::before {
  content: "" !important;
  display: block !important;

  position: absolute;
  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;

  background:
    radial-gradient(
      circle,
      var(--wm-map-white) 0 3px,
      transparent 4px
    );

  border: 2px solid var(--wm-map-white);
  border-radius: 50%;

  transform: translate(-50%, -50%);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-locate > a::after {
  content: "" !important;
  display: block !important;

  position: absolute;
  top: 50%;
  left: 50%;

  width: 28px;
  height: 28px;

  background:
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      center top / 2px 6px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      center bottom / 2px 6px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      left center / 6px 2px no-repeat,
    linear-gradient(var(--wm-map-white), var(--wm-map-white))
      right center / 6px 2px no-repeat;

  transform: translate(-50%, -50%);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-locate:is(
    .active,
    .following,
    .requesting
  )
  > a {
  background-color: var(--wm-map-blue-dark) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.30),
    0 0 18px rgba(20, 80, 255, 0.46);
}

/* ==========================================================
   6. Wagner-Kartenmarker ohne Plugin-Sprite
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .awesome-marker-icon-blue.awesome-marker {
  overflow: visible !important;

  width: 36px !important;
  height: 45px !important;

  background: none !important;
  background-image: none !important;
  border: 0 !important;

  filter:
    drop-shadow(0 8px 9px rgba(0, 0, 45, 0.28));
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .awesome-marker-icon-blue.awesome-marker::before {
  content: "" !important;
  display: block !important;

  position: absolute;
  top: 2px;
  left: 50%;

  width: 31px;
  height: 31px;

  background:
    linear-gradient(
      135deg,
      var(--wm-map-blue-light) 0%,
      var(--wm-map-blue) 62%,
      var(--wm-map-blue-dark) 100%
    );

  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 50% 50% 50% 0;

  transform:
    translateX(-50%)
    rotate(-45deg);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .awesome-marker-icon-blue.awesome-marker::after {
  content: "" !important;
  display: block !important;

  position: absolute;
  top: 11px;
  left: 50%;

  width: 9px;
  height: 9px;

  background: var(--wm-map-white);
  border-radius: 50%;

  transform: translateX(-50%);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .awesome-marker-icon-blue.awesome-marker > i {
  display: none !important;
}

/* Marker-Schatten */
:is(.wm-contact-form-map__map-body, #mod-custom350)
  .awesome-marker-shadow {
  overflow: visible !important;

  background: none !important;
  background-image: none !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .awesome-marker-shadow::before {
  content: "" !important;
  display: block !important;

  position: absolute;
  top: 7px;
  left: 50%;

  width: 27px;
  height: 8px;

  background: rgba(0, 0, 30, 0.22);
  border-radius: 50%;
  filter: blur(3px);

  transform: translateX(-50%);
}

/* ==========================================================
   7. Popup
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content-wrapper {
  overflow: hidden;

  color: var(--wm-map-text);
  background: rgba(255, 255, 255, 0.985);

  border: 1px solid rgba(0, 0, 145, 0.14);
  border-radius: 8px;

  box-shadow:
    0 18px 44px rgba(0, 0, 45, 0.22);
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content {
  min-width: 240px;
  margin: 24px 54px 24px 24px;

  color: var(--wm-map-text);
  font-size: 15px;
  line-height: 1.55;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content > div:first-child {
  margin: 0 0 18px !important;

  color: var(--wm-map-text);
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.2;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content p {
  margin: 0 0 10px;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content i {
  width: 20px;
  margin-right: 6px;

  color: var(--wm-map-blue);
  text-align: center;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content a {
  color: var(--wm-map-blue) !important;
  font-weight: 800;
  text-decoration: none !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content a:hover,
:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-content a:focus-visible {
  color: var(--wm-map-blue-light) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-tip {
  background: #ffffff;
  box-shadow:
    3px 3px 7px rgba(0, 0, 45, 0.12);
}

/*
 * Das vorhandene ×-Zeichen wird verwendet.
 * Keine Icon-Schrift und kein Pseudoelement.
 */
:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-close-button {
  top: 12px !important;
  right: 12px !important;

  width: 32px !important;
  height: 32px !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  color: var(--wm-map-white) !important;
  background: var(--wm-map-blue) !important;

  border-radius: 50%;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  text-align: center !important;
  text-decoration: none !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-close-button::before,
:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-close-button::after {
  content: none !important;
  display: none !important;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-close-button:hover,
:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-popup-close-button:focus-visible {
  color: var(--wm-map-white) !important;
  background: var(--wm-map-blue-light) !important;
}

/* ==========================================================
   8. Attribution
   ========================================================== */

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-attribution {
  padding: 4px 7px;

  color: #4c556b;
  background: rgba(255, 255, 255, 0.90);

  border-radius: 4px 0 0 0;

  font-size: 10px;
  line-height: 1.3;
}

:is(.wm-contact-form-map__map-body, #mod-custom350)
  .leaflet-control-attribution a {
  color: var(--wm-map-blue) !important;
}

/* ==========================================================
   10. Smartphone
   ========================================================== */

@media (max-width: 599px) {
  :is(.wm-contact-form-map__map-body, #mod-custom350) {
    --wm-map-control-size: 42px;
  }

  :is(.wm-contact-form-map__map-body, #mod-custom350)
    .leaflet-popup-content {
    min-width: 200px;
    margin: 22px 48px 22px 20px;
    font-size: 14px;
  }

  :is(.wm-contact-form-map__map-body, #mod-custom350)
    .leaflet-popup-content > div:first-child {
    font-size: 18px !important;
  }
}

/* ==========================================================
   11. Bewegungsreduzierung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  :is(.wm-contact-form-map__map-body, #mod-custom350)
    :is(
      .leaflet-control-zoom-in,
      .leaflet-control-zoom-out,
      .leaflet-control-fullscreen-button,
      .leaflet-control-locate > a
    ) {
    transition: none !important;
  }
}

/* ==========================================================
   12. Routenplanung – Leaflet Routing Machine
   V5: eigenes Routensymbol ohne Font Awesome
   ========================================================== */

/*
 * Den weißen Standardcontainer der eingeklappten Routenplanung
 * vollständig neutralisieren.
 */
#phocaMapPlgPM1
  .leaflet-routing-container.leaflet-routing-container-hide,
#phocaMapPlgPM1
  .leaflet-routing-container-hide {
  width: var(--wm-map-control-size, 46px) !important;
  min-width: var(--wm-map-control-size, 46px) !important;
  max-width: var(--wm-map-control-size, 46px) !important;

  height: var(--wm-map-control-size, 46px) !important;
  min-height: var(--wm-map-control-size, 46px) !important;
  max-height: var(--wm-map-control-size, 46px) !important;

  overflow: visible !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/*
 * Der eigentliche Button.
 * Das Plugin-Hintergrundbild "routing-icon.png" wird vollständig
 * entfernt, einschließlich Position und Größe.
 */
#phocaMapPlgPM1
  .leaflet-routing-container-hide
  .leaflet-routing-collapse-btn {
  position: relative !important;

  inset: auto !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;

  box-sizing: border-box !important;

  width: var(--wm-map-control-size, 46px) !important;
  min-width: var(--wm-map-control-size, 46px) !important;
  max-width: var(--wm-map-control-size, 46px) !important;

  height: var(--wm-map-control-size, 46px) !important;
  min-height: var(--wm-map-control-size, 46px) !important;
  max-height: var(--wm-map-control-size, 46px) !important;

  display: block !important;
  overflow: hidden !important;

  color: var(--wm-map-white, #ffffff) !important;

  background: var(--wm-map-blue, #000091) !important;
  background-color: var(--wm-map-blue, #000091) !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 0 0 !important;

  border: 0 !important;
  border-radius: 7px !important;

  box-shadow:
    0 12px 28px rgba(0, 0, 50, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.18) !important;

  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

/*
 * Routenplanungssymbol exakt horizontal und vertikal zentrieren.
 * Absolute Positionierung verhindert Baseline- und Sprite-Versatz.
 */
#phocaMapPlgPM1
  .leaflet-routing-container-hide
  .leaflet-routing-collapse-btn::before {
  content: "" !important;

  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;

  width: 25px !important;
  height: 25px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  background-color: var(--wm-map-white, #ffffff) !important;

  /*
   * Eigenes Routensymbol als CSS-Maske.
   * Keine Abhängigkeit von Font-Awesome-Unicode oder Plugin-Sprites.
   */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 18h3.2c3.4 0 3.4-4.5 0-4.5H10c-3.4 0-3.4-4.5 0-4.5h5.5'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat !important;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 18h3.2c3.4 0 3.4-4.5 0-4.5H10c-3.4 0-3.4-4.5 0-4.5h5.5'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat !important;

  transform: translate(-50%, -50%) !important;
}

/* Das standardmäßige × des Routing-Plugins vollständig entfernen. */
#phocaMapPlgPM1
  .leaflet-routing-container-hide
  .leaflet-routing-collapse-btn::after,
.leaflet-routing-container-hide
  .leaflet-routing-collapse-btn::after {
  content: none !important;
  display: none !important;
}

/* Hover und Tastaturfokus */
#phocaMapPlgPM1
  .leaflet-routing-container-hide
  .leaflet-routing-collapse-btn:hover,
#phocaMapPlgPM1
  .leaflet-routing-container-hide
  .leaflet-routing-collapse-btn:focus-visible {
  color: var(--wm-map-white, #ffffff) !important;

  background: var(--wm-map-blue-dark, #00004f) !important;
  background-color: var(--wm-map-blue-dark, #00004f) !important;
  background-image: none !important;

  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.24),
    0 12px 28px rgba(0, 0, 50, 0.22) !important;
}

#phocaMapPlgPM1
  .leaflet-routing-container-hide
  .leaflet-routing-collapse-btn:focus-visible {
  outline: 3px solid rgba(93, 139, 255, 0.56);
  outline-offset: 3px;
}

@media (max-width: 599px) {
  #phocaMapPlgPM1
    .leaflet-routing-container-hide
    .leaflet-routing-collapse-btn::before {
    font-size: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #phocaMapPlgPM1
    .leaflet-routing-container-hide
    .leaflet-routing-collapse-btn {
    transition: none !important;
  }
}
/* ==========================================================
   17. RSForm Pro – bedingte Felder

   Wichtig:
   Muss nach allen anderen Kontaktformular-Regeln stehen.

   RSForm steuert bedingte Felder über:
   style="display: none;"

   Diese Regel stellt sicher, dass das Ausblenden nicht durch
   display: grid !important überschrieben wird.
   ========================================================== */

.wm-contact-form-map
  .wm-contact-form-map__form-body
  .rsform-block[style*="display: none"],
.wm-contact-form-map
  .wm-contact-form-map__form-body
  .rsform-block[style*="display:none"],
.wm-contact-form-map
  .wm-contact-form-map__form-body
  .rsform-block[hidden] {
  display: none !important;
}
/* ==========================================================
   17. RSForm – Radiobuttons im Wagner-Motoren-Design
   ========================================================== */

.wm-contact-form-map__form-body
  input[type="radio"].form-check-input {
  -webkit-appearance: none;
  appearance: none;

  width: 22px;
  height: 22px;
  min-width: 22px;

  margin: 0 8px 0 0;
  padding: 0;

  vertical-align: middle;
  cursor: pointer;

  background-color: #ffffff;
  background-image: none !important;

  border: 2px solid #000091;
  border-radius: 50%;

  box-shadow: none;

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Ausgewählter Zustand */
.wm-contact-form-map__form-body
  input[type="radio"].form-check-input:checked {
  background-color: #ffffff;

  background-image:
    radial-gradient(
      circle at center,
      #000091 0,
      #000091 38%,
      transparent 41%
    ) !important;

  border-color: #000091;
}

/* Hover */
.wm-contact-form-map__form-body
  input[type="radio"].form-check-input:hover {
  border-color: #1450ff;
}

/* Tastaturfokus */
.wm-contact-form-map__form-body
  input[type="radio"].form-check-input:focus,
.wm-contact-form-map__form-body
  input[type="radio"].form-check-input:focus-visible {
  border-color: #1450ff;

  box-shadow:
    0 0 0 4px rgba(20, 80, 255, 0.18);

  outline: none;
}

/* Leichte Rückmeldung beim Anklicken */
.wm-contact-form-map__form-body
  input[type="radio"].form-check-input:active {
  transform: scale(0.94);
}

/* Beschriftungen */
.wm-contact-form-map__form-body
  .form-check-label {
  color: var(--wm-contact-layout-text, #11162a);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;

  cursor: pointer;
}

/* Abstand zwischen Ja und Nein */
.wm-contact-form-map__form-body
  .rsfp-fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;

  margin: 0;
  padding: 0;

  border: 0;
}

.wm-contact-form-map__form-body
  .form-check {
  display: inline-flex;
  align-items: center;

  margin: 0 !important;
  padding: 0 !important;
}

/* Deaktivierter Zustand */
.wm-contact-form-map__form-body
  input[type="radio"].form-check-input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wm-contact-form-map__form-body
  input[type="radio"].form-check-input:disabled
  + .form-check-label {
  cursor: not-allowed;
  opacity: 0.55;
}
/* Service-Seiten: unteres Textmodul exakt wie die Service-Karten ausrichten */
.Pagecontent .bottom-b-1-position .mod-custom {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  padding-inline: clamp(50px, 6vw, 120px) !important;
}

/* Tablet und Smartphone */
@media (max-width: 999.98px) {
  .Pagecontent .bottom-b-1-position .mod-custom {
    padding-inline: calc(24px + env(safe-area-inset-left, 0px)) !important;
  }
}

@media (max-width: 639.98px) {
  .Pagecontent .bottom-b-1-position .mod-custom {
    padding-inline: calc(18px + env(safe-area-inset-left, 0px)) !important;
  }
}
/* Kontaktseite: Layout an das tatsächlich ausgegebene RSForm-HTML anpassen */
body.kontakt-alias {
  container-type: inline-size;
}

/* Vollbreite Kontaktkarten ohne den aktuellen horizontalen 15-px-Überstand */
body.kontakt-alias .rsform-block-kontaktdaten .wm-contact-cards {
  width: 100cqw !important;
  max-width: 100cqw !important;
  margin-right: calc(50% - 50cqw) !important;
  margin-left: calc(50% - 50cqw) !important;
}

/* Überschrift und Einleitung sauber zum Formular ausrichten */
body.kontakt-alias .rsform-block-kontaktdaten > h1,
body.kontakt-alias .rsform-block-kontaktdaten > p:not(.wm-contact-card__content p) {
  box-sizing: border-box;
  width: min(100%, 960px);
  margin-right: auto;
  margin-left: auto;
}

/* Formularfelder: Labels und Eingabefelder statt Bootstrap-Versatz sauber ausrichten */
body.kontakt-alias #rsform_3_page_0 .row.rsform-block {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 8px 24px;
  width: min(100%, 960px);
  margin: 0 auto 16px !important;
  padding: 0 !important;
}

body.kontakt-alias #rsform_3_page_0 .row.rsform-block > .formControlLabel,
body.kontakt-alias #rsform_3_page_0 .row.rsform-block > .formControls {
  box-sizing: border-box;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.kontakt-alias #rsform_3_page_0 .row.rsform-block > .formControlLabel {
  grid-column: 1;
  align-self: center;
  color: var(--wm-text, #11162a);
  font-size: 15px;
  font-weight: 700;
}

body.kontakt-alias #rsform_3_page_0 .row.rsform-block > .formControls {
  grid-column: 2;
  min-width: 0;
}

body.kontakt-alias #rsform_3_page_0 .row.rsform-block .form-control,
body.kontakt-alias #rsform_3_page_0 .row.rsform-block .form-select {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 48px;
  color: var(--wm-text, #11162a);
  border: 1px solid #d9deea;
  border-radius: 4px;
  font-size: 16px;
}

body.kontakt-alias #rsform_3_page_0 .row.rsform-block textarea.form-control {
  min-height: 140px;
}

/* Datenschutz und Absenden benötigen keine linke Label-Spalte */
body.kontakt-alias #rsform_3_page_0 .rsform-block-agb-datenschutz,
body.kontakt-alias #rsform_3_page_0 .rsform-block-senden {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.kontakt-alias #rsform_3_page_0 .rsform-block-agb-datenschutz > .formControlLabel,
body.kontakt-alias #rsform_3_page_0 .rsform-block-senden > .formControlLabel {
  display: none !important;
}

body.kontakt-alias #rsform_3_page_0 .rsform-block-agb-datenschutz > .formControls,
body.kontakt-alias #rsform_3_page_0 .rsform-block-senden > .formControls {
  grid-column: 1 !important;
}

@media (max-width: 720px) {
  body.kontakt-alias #rsform_3_page_0 .row.rsform-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
  }

  body.kontakt-alias #rsform_3_page_0 .row.rsform-block > .formControlLabel,
  body.kontakt-alias #rsform_3_page_0 .row.rsform-block > .formControls {
    grid-column: 1;
  }
}
/* ==========================================================
   RSForm Pro – bedingte Felder zuverlässig ausblenden

   Muss am Dateiende stehen: Die spätere deutsche
   Kontaktformular-Regel setzt alle .rsform-block-Elemente mit
   display: grid !important. Diese Selektoren geben den von
   RSForm gesetzten Zustand display: none wieder Vorrang.
   ========================================================== */

body.kontakt-alias
  #rsform_3_page_0
  .row.rsform-block[style*="display: none"],
body.kontakt-alias
  #rsform_3_page_0
  .row.rsform-block[style*="display:none"],
body.kontakt-alias
  #rsform_3_page_0
  .row.rsform-block[hidden],
body.contact-alias
  #rsform_3_page_0
  .row.rsform-block[style*="display: none"],
body.contact-alias
  #rsform_3_page_0
  .row.rsform-block[style*="display:none"],
body.contact-alias
  #rsform_3_page_0
  .row.rsform-block[hidden] {
  display: none !important;
}
/* ==========================================================
   18. Wagner Motoren – Phoca Download
   Seite: /de/kontakt/download.html

   - blendet den Button „Kategorien“ aus
   - gestaltet Downloadliste, Dateihinweise und Modale
   - responsive für Desktop, Tablet, iPhone und iPad
   ========================================================== */

#phoca-dl-category-box {
  --wm-pd-blue: var(--wm-blue, #000091);
  --wm-pd-blue-dark: var(--wm-blue-dark, #00004f);
  --wm-pd-blue-light: var(--wm-blue-light, #1450ff);
  --wm-pd-text: var(--wm-text, #11162a);
  --wm-pd-muted: var(--wm-muted, #667085);
  --wm-pd-border: var(--wm-border, #e2e6ee);
  --wm-pd-surface: #ffffff;
  --wm-pd-surface-soft: #f7f8fc;

  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding:
    clamp(42px, 4.5vw, 76px)
    clamp(50px, 6vw, 120px);

  color: var(--wm-pd-text);
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(20, 80, 255, 0.055),
      transparent 32%
    ),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

#phoca-dl-category-box,
#phoca-dl-category-box * {
  box-sizing: border-box;
}

/* Kategorien-Schaltfläche vollständig ausblenden */
#phoca-dl-category-box .ph-top {
  display: none !important;
}

/* Überschrift */
#phoca-dl-category-box .pd-ctitle {
  position: relative;
  margin: 0 0 clamp(26px, 3vw, 44px);
  padding: 0 0 18px;

  color: var(--wm-pd-blue-dark);
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;

  border: 0;
}

#phoca-dl-category-box .pd-ctitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(58px, 6vw, 92px);
  height: 4px;
  background: var(--wm-pd-blue-light);
}

/* Jede eigentliche Download-Zeile als Karte */
#phoca-dl-category-box
  .pd-category
  > .row:not(.pd-row2-bp) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);

  width: 100%;
  margin: 0 0 16px !important;
  padding: clamp(22px, 2.4vw, 34px);

  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--wm-pd-border);
  border-left: 5px solid var(--wm-pd-blue);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 79, 0.065);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

#phoca-dl-category-box
  .pd-category
  > .row:not(.pd-row2-bp):hover {
  border-color: rgba(20, 80, 255, 0.34);
  border-left-color: var(--wm-pd-blue-light);
  box-shadow: 0 18px 42px rgba(0, 0, 79, 0.11);
  transform: translateY(-2px);
}

#phoca-dl-category-box
  .pd-category
  > .row:not(.pd-row2-bp)
  > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Leere Bewertungszeilen und leere Zusatzbereiche entfernen */
#phoca-dl-category-box .pd-row2-bp,
#phoca-dl-category-box .pd-rating:empty,
#phoca-dl-category-box .pd-button-box-bt:empty,
#phoca-dl-category-box .pd-csv-paginaton {
  display: none !important;
}

/* Dateiinformationen */
#phoca-dl-category-box .pd-filenamebox-bt,
#phoca-dl-category-box .pd-filename,
#phoca-dl-category-box .pd-document16,
#phoca-dl-category-box .pd-float {
  width: 100%;
  margin: 0;
  padding: 0;
}

#phoca-dl-category-box .pd-title {
  margin: 0 0 10px;
  color: var(--wm-pd-blue-dark);
  font-size: clamp(18px, 1.3vw, 23px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

/* Das kleine alte PDF-Hintergrundbild durch ein sauberes Badge ersetzen */
#phoca-dl-category-box .pd-document16 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  background: none !important;
}

#phoca-dl-category-box .pd-document16::before {
  content: "PDF";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;
  height: 26px;
  padding: 0 8px;

  color: #ffffff;
  background: var(--wm-pd-blue);
  border-radius: 3px;

  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
}

#phoca-dl-category-box .pd-filename a {
  color: var(--wm-pd-blue) !important;
  font-size: clamp(14px, 0.95vw, 16px);
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none !important;
  overflow-wrap: anywhere;

  transition: color 180ms ease;
}

#phoca-dl-category-box .pd-filename a:hover,
#phoca-dl-category-box .pd-filename a:focus-visible {
  color: var(--wm-pd-blue-light) !important;
}

#phoca-dl-category-box .pd-filename a:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.25);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Download-Schaltfläche im Wagner-Design */
#phoca-dl-category-box .pd-button-box-bt {
  margin: 0;
  padding: 0;
}

#phoca-dl-category-box .pd-button-box-bt .btn,
#phoca-dl-category-box .pd-button-box-bt .btn-success {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  min-width: 190px;
  min-height: 54px;
  margin: 0;
  padding: 0 18px 0 22px;

  color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      var(--wm-pd-blue) 0%,
      var(--wm-pd-blue-light) 100%
    ) !important;
  border: 0 !important;
  border-radius: 4px;
  box-shadow: 0 12px 26px rgba(0, 0, 145, 0.18);

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;
  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    box-shadow 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}

#phoca-dl-category-box .pd-button-box-bt .btn::after {
  content: "›";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;

  font-size: 28px;
  font-weight: 400;
  line-height: 1;

  transition: transform 180ms ease;
}

#phoca-dl-category-box .pd-button-box-bt .btn:hover,
#phoca-dl-category-box .pd-button-box-bt .btn:focus-visible {
  color: #ffffff !important;
  filter: brightness(1.07);
  box-shadow: 0 16px 32px rgba(0, 0, 145, 0.26);
  transform: translateY(-2px);
}

#phoca-dl-category-box .pd-button-box-bt .btn:hover::after,
#phoca-dl-category-box .pd-button-box-bt .btn:focus-visible::after {
  transform: translateX(3px);
}

#phoca-dl-category-box .pd-button-box-bt .btn:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.3);
  outline-offset: 4px;
}

/* Modale Fenster */
#phoca-dl-category-box .modal-content,
#phModalPlay .modal-content,
#phModalPreview .modal-content {
  overflow: hidden;
  border: 1px solid var(--wm-pd-border, #e2e6ee);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 50, 0.24);
}

#phoca-dl-category-box .modal-header,
#phModalPlay .modal-header,
#phModalPreview .modal-header {
  color: #ffffff;
  background: var(--wm-pd-blue, #000091);
  border-bottom: 0;
}

#phoca-dl-category-box .modal-title,
#phModalPlay .modal-title,
#phModalPreview .modal-title {
  color: #ffffff;
  font-weight: 900;
}

#phoca-dl-category-box .modal-header .btn-close,
#phModalPlay .modal-header .btn-close,
#phModalPreview .modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.9;
}

#phoca-dl-category-box .modal-footer,
#phModalPlay .modal-footer,
#phModalPreview .modal-footer {
  background: var(--wm-pd-surface-soft, #f7f8fc);
  border-top: 1px solid var(--wm-pd-border, #e2e6ee);
}

/* Tablet */
@media (max-width: 999.98px) {
  #phoca-dl-category-box {
    padding:
      38px
      max(24px, env(safe-area-inset-right))
      44px
      max(24px, env(safe-area-inset-left));
  }

  #phoca-dl-category-box
    .pd-category
    > .row:not(.pd-row2-bp) {
    gap: 22px;
  }
}


/* Smartphone */
@media (max-width: 599px) {
  #phoca-dl-category-box {
    padding:
      30px
      max(18px, env(safe-area-inset-right))
      36px
      max(18px, env(safe-area-inset-left));
  }

  #phoca-dl-category-box .pd-ctitle {
    margin-bottom: 24px;
    font-size: clamp(30px, 10vw, 42px);
  }

  #phoca-dl-category-box
    .pd-category
    > .row:not(.pd-row2-bp) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px 18px;
    border-left-width: 4px;
  }

  #phoca-dl-category-box .pd-button-box-bt .btn,
  #phoca-dl-category-box .pd-button-box-bt .btn-success {
    width: 100%;
    min-width: 0;
  }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  #phoca-dl-category-box *,
  #phoca-dl-category-box *::before,
  #phoca-dl-category-box *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.pagination.pagination-centered {
  display: none;
}
/* ==========================================================
   18. Downloadseite – manueller Zurückbutton
   ========================================================== */

#phoca-dl-category-box .wm-download-back-wrap {
  display: flex;
  justify-content: flex-start;

  width: 100%;
  margin-top: clamp(22px, 2.5vw, 38px);
  padding-top: clamp(20px, 2vw, 30px);

  border-top: 1px solid #e2e6ee;
}

#phoca-dl-category-box .wm-download-back {
  gap: 12px;
}

#phoca-dl-category-box .wm-download-back > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 180ms ease;
}

#phoca-dl-category-box .wm-download-back:hover > span:first-child,
#phoca-dl-category-box .wm-download-back:focus-visible > span:first-child {
  transform: translateX(-4px);
}

@media (max-width: 599px) {
  #phoca-dl-category-box .wm-download-back {
    width: 100%;
  }
}
/*Download Seite*/
.ph-subheader.pd-ctitle {
  display: none !important;
}
/* ==========================================================
   19. Wagner Motoren – Bestätigungsseite "E-Mail gesendet"

   HTML-Klasse:
   .wm-mail-success

   Die vorhandene Astroid-Artikelüberschrift wird nur auf der
   Bestätigungsseite ausgeblendet, sobald der neue Block im
   Artikel vorhanden ist.
   ========================================================== */

/* ----------------------------------------------------------
   Astroid-/Joomla-Ausgabe nur auf dieser Seite neutralisieren
   ---------------------------------------------------------- */

.com-content-article:has(.wm-mail-success)
  .astroid-article-title,
.com-content-article:has(.wm-mail-success)
  .astroid-article-full-image:empty {
  display: none !important;
}

.com-content-article:has(.wm-mail-success),
.com-content-article:has(.wm-mail-success)
  .item-page,
.com-content-article:has(.wm-mail-success)
  .astroid-article-text {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.com-content-article:has(.wm-mail-success)
  .astroid-article-text
  > .wm-mail-success:first-child {
  margin-top: 0 !important;
}

/* ----------------------------------------------------------
   Hauptbereich
   ---------------------------------------------------------- */

.wm-mail-success {
  --wm-mail-blue: var(--wm-blue, #000091);
  --wm-mail-dark: var(--wm-blue-dark, #00004f);
  --wm-mail-light: var(--wm-blue-light, #1450ff);
  --wm-mail-text: var(--wm-text, #11162a);
  --wm-mail-muted: var(--wm-muted, #667085);
  --wm-mail-border: var(--wm-border, #e2e6ee);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  box-sizing: border-box;
  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding:
    clamp(54px, 6vw, 96px)
    calc(
      clamp(50px, 6vw, 120px) +
      env(safe-area-inset-right)
    )
    clamp(64px, 7vw, 112px)
    calc(
      clamp(50px, 6vw, 120px) +
      env(safe-area-inset-left)
    );

  color: var(--wm-mail-text);

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(20, 80, 255, 0.11),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(0, 0, 145, 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f5f7fc 100%
    );
}

.wm-mail-success::before,
.wm-mail-success::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.wm-mail-success::before {
  top: -170px;
  right: -130px;

  width: 420px;
  height: 420px;

  border: 58px solid rgba(20, 80, 255, 0.055);
  border-radius: 50%;
}

.wm-mail-success::after {
  bottom: -230px;
  left: -180px;

  width: 520px;
  height: 520px;

  background:
    radial-gradient(
      circle,
      rgba(0, 0, 145, 0.075) 0%,
      rgba(0, 0, 145, 0.025) 42%,
      transparent 68%
    );
}

.wm-mail-success__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* ----------------------------------------------------------

   Bestätigungskarte
   ---------------------------------------------------------- */

.wm-mail-success__card {
  position: relative;

  box-sizing: border-box;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(34px, 4.5vw, 68px);

  text-align: center;

  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 145, 0.12);
  border-top: 5px solid var(--wm-mail-light);
  border-radius: 8px;

  box-shadow:
    0 26px 70px rgba(0, 0, 79, 0.11),
    0 3px 12px rgba(0, 0, 79, 0.045);
}

.wm-mail-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 88px;
  height: 88px;
  margin: 0 auto 28px;

  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      var(--wm-mail-blue) 0%,
      var(--wm-mail-light) 100%
    );
  border: 8px solid rgba(20, 80, 255, 0.11);
  border-radius: 50%;
  background-clip: padding-box;

  box-shadow: 0 14px 34px rgba(20, 80, 255, 0.22);
}

.wm-mail-success__icon i {
  font-size: 34px;
  line-height: 1;
}

.wm-mail-success__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 0 0 18px;

  color: var(--wm-mail-blue);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wm-mail-success__eyebrow::before,
.wm-mail-success__eyebrow::after {
  content: "";

  width: 28px;
  height: 3px;

  background: var(--wm-mail-light);
}

.wm-mail-success h1 {
  max-width: 820px;
  margin: 0 auto 24px !important;
  padding: 0 !important;

  color: var(--wm-mail-dark);
  font-size: clamp(36px, 4.8vw, 68px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: center !important;
  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-mail-success__lead {
  max-width: 720px;
  margin: 0 auto 30px;

  color: var(--wm-mail-muted);
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 500;
  line-height: 1.7;
}

/* ----------------------------------------------------------
   Hinweis
   ---------------------------------------------------------- */

.wm-mail-success__notice {
  display: flex;
  align-items: center;
  gap: 16px;

  max-width: 690px;
  margin: 0 auto 30px;
  padding: 18px 20px;

  color: var(--wm-mail-text);
  text-align: left;

  background: rgba(20, 80, 255, 0.055);
  border: 1px solid rgba(20, 80, 255, 0.14);
  border-left: 4px solid var(--wm-mail-light);
  border-radius: 5px;
}

.wm-mail-success__notice-icon {
  flex: 0 0 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  color: var(--wm-mail-blue);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 145, 0.12);
  border-radius: 50%;
}

.wm-mail-success__notice-icon i {
  font-size: 19px;
}

.wm-mail-success__notice p {
  margin: 0;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.wm-mail-success__signature {
  margin: 0 0 34px;

  color: var(--wm-mail-muted);
  font-size: 16px;
  line-height: 1.7;
}

.wm-mail-success__signature strong {
  color: var(--wm-mail-dark);
  font-weight: 850;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */

.wm-mail-success__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.wm-mail-success__primary {
  min-width: min(100%, 300px);
  justify-content: space-between;
}

.wm-mail-success__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  min-width: min(100%, 220px);
  min-height: 54px;
  padding: 14px 22px;

  color: var(--wm-mail-blue) !important;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 145, 0.28);
  border-radius: 4px;

  font-size: 14px;
  font-weight: 900;
  line-height: 1;

  letter-spacing: 0.045em;
  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.wm-mail-success__secondary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 180ms ease;
}

.wm-mail-success__secondary:hover,
.wm-mail-success__secondary:focus-visible {
  color: #ffffff !important;
  background: var(--wm-mail-blue);
  border-color: var(--wm-mail-blue);

  box-shadow: 0 12px 26px rgba(0, 0, 145, 0.18);
  transform: translateY(-2px);
}

.wm-mail-success__secondary:hover span,
.wm-mail-success__secondary:focus-visible span {
  transform: translateX(4px);
}

.wm-mail-success__secondary:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.25);
  outline-offset: 4px;
}

/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 999.98px) {
  .wm-mail-success {
    padding:
      48px
      calc(24px + env(safe-area-inset-right))
      68px
      calc(24px + env(safe-area-inset-left));
  }

  .wm-mail-success__card {
    padding: clamp(32px, 6vw, 54px);
  }
}

/* ----------------------------------------------------------
   Smartphone
   ---------------------------------------------------------- */

@media (max-width: 599px) {
  .wm-mail-success {
    padding:
      34px
      calc(18px + env(safe-area-inset-right))
      48px
      calc(18px + env(safe-area-inset-left));
  }

  .wm-mail-success__card {
    padding: 28px 20px 24px;
    border-radius: 6px;
  }

  .wm-mail-success__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 23px;
    border-width: 6px;
  }

  .wm-mail-success__icon i {
    font-size: 27px;
  }

  .wm-mail-success__eyebrow {
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.065em;
  }

  .wm-mail-success__eyebrow::before,
  .wm-mail-success__eyebrow::after {
    width: 18px;
    height: 2px;
  }

  .wm-mail-success h1 {
    margin-bottom: 20px !important;
    font-size: clamp(31px, 10vw, 44px);
  }

  .wm-mail-success__lead {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.62;
  }

  .wm-mail-success__notice {
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 26px;
    padding: 15px;
  }

  .wm-mail-success__notice-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .wm-mail-success__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .wm-mail-success__primary,
  .wm-mail-success__secondary {
    width: 100%;
    min-width: 0;
  }
}

/* ----------------------------------------------------------
   Reduzierte Bewegung
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wm-mail-success__secondary,
  .wm-mail-success__secondary span {
    transition: none;
  }
}
/* ==========================================================
   20. Wagner Motoren – Newsübersicht

   Reihenfolge Desktop:
   Intro | Motorschäden vermeiden | MINI | Ford
         | TFSI                  | 1.2 TSI | 3-Zylinder

   Horizontale Standardabstände:
   Desktop:    clamp(50px, 6vw, 120px)
   Tablet:     24px + Safe Area
   Smartphone: 18px + Safe Area
   ========================================================== */

.wm-news-overview {
  --wm-news-blue: var(--wm-blue, #000091);
  --wm-news-dark: var(--wm-blue-dark, #00004f);
  --wm-news-light: var(--wm-blue-light, #1450ff);
  --wm-news-text: var(--wm-text, #11162a);
  --wm-news-muted: var(--wm-muted, #5f6676);
  --wm-news-border: var(--wm-border, #e0e4ed);

  position: relative;
  box-sizing: border-box;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding:
    16px
    clamp(50px, 6vw, 120px)
    clamp(42px, 4.2vw, 72px);

  overflow: hidden;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(20, 80, 255, 0.04),
      transparent 36%
    ),
    #ffffff;
}

.wm-news-overview,
.wm-news-overview * {
  box-sizing: border-box;
}

.wm-news-overview__grid {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.98fr)
    repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "intro card-1 card-2 card-3"
    "intro card-4 card-5 card-6";
  align-items: stretch;
  gap: 16px;

  width: 100%;
  max-width: none;
  margin: 0;
}

.wm-news-overview__intro {
  grid-area: intro;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
  margin: 0;
  padding:
    clamp(32px, 3.4vw, 58px)
    clamp(24px, 2.5vw, 46px)
    clamp(32px, 3.4vw, 58px)
    0;
}

.wm-news-overview__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin: 0 0 24px;

  color: var(--wm-news-blue);
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.wm-news-overview__eyebrow::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 3px;
  background: var(--wm-news-light);
}

.wm-news-overview__intro h2 {
  margin: 0;
  padding: 0;

  color: var(--wm-news-dark);
  font-size: clamp(37px, 3.15vw, 62px);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-news-overview__intro h2 span {
  display: block;
}

.wm-news-overview__lead {
  max-width: 680px;
  margin: clamp(28px, 3vw, 44px) 0 0;

  color: var(--wm-news-muted);
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 500;
  line-height: 1.7;
}

.wm-news-overview__main-button {
  margin-top: clamp(28px, 3vw, 44px);
}

.wm-news-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  margin: 0;

  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--wm-news-border);
  border-radius: 5px;
  box-shadow: 0 12px 32px rgba(0, 0, 79, 0.055);

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.wm-news-card:nth-of-type(1) {
  grid-area: card-1;
}

.wm-news-card:nth-of-type(2) {
  grid-area: card-2;
}

.wm-news-card:nth-of-type(3) {
  grid-area: card-3;
}

.wm-news-card:nth-of-type(4) {
  grid-area: card-4;
}

.wm-news-card:nth-of-type(5) {
  grid-area: card-5;
}

.wm-news-card:nth-of-type(6) {
  grid-area: card-6;
}

.wm-news-card:hover,
.wm-news-card:focus-within {
  z-index: 2;
  border-color: rgba(20, 80, 255, 0.35);
  box-shadow: 0 20px 44px rgba(0, 0, 91, 0.13);
  transform: translateY(-5px);
}

.wm-news-card__image-link {
  position: relative;
  display: block;
  flex: 0 0 auto;

  width: 100%;
  aspect-ratio: 16 / 10;

  overflow: hidden;
  background: #070a13;
}

.wm-news-card__image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 79, 0.02) 45%,
      rgba(0, 0, 79, 0.16) 100%
    );
  opacity: 0.5;
  transition: opacity 220ms ease;
}

.wm-news-card__image-link img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;

  object-fit: cover;
  object-position: center;

  transition: transform 420ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.wm-news-card:hover .wm-news-card__image-link img,
.wm-news-card:focus-within .wm-news-card__image-link img {
  transform: scale(1.045);
}

.wm-news-card:hover .wm-news-card__image-link::after,
.wm-news-card:focus-within .wm-news-card__image-link::after {
  opacity: 1;
}

.wm-news-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
  padding: clamp(20px, 1.7vw, 30px);
}

.wm-news-card__body h3 {
  margin: 0;
  padding: 0;

  color: var(--wm-news-text);
  font-size: clamp(18px, 1.15vw, 23px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.wm-news-card__body h3 a {
  color: inherit !important;
  text-decoration: none !important;
}

.wm-news-card__body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wm-news-card__body p {
  margin: 18px 0 24px;

  color: var(--wm-news-muted);
  font-size: clamp(15px, 0.93vw, 18px);
  font-weight: 500;
  line-height: 1.58;
}

.wm-news-card__link {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-top: auto;
  padding: 4px 0;

  color: var(--wm-news-blue) !important;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.wm-news-card__link::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;

  height: 2px;
  background: var(--wm-news-light);
  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 220ms ease;
}

.wm-news-card__link > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  transition: transform 220ms ease;
}

.wm-news-card__link:hover,
.wm-news-card__link:focus-visible {
  color: var(--wm-news-light) !important;
}

.wm-news-card__link:hover::before,
.wm-news-card__link:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.wm-news-card__link:hover > span,
.wm-news-card__link:focus-visible > span {
  transform: translateX(5px);
}

.wm-news-card__link:focus-visible,
.wm-news-card__image-link:focus-visible,
.wm-news-card__body h3 a:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.34);
  outline-offset: 4px;
}
.wm-video {
  width: 100%;
  max-width: 900px;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
}
.wm-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 6px;
}
/* ==========================================================
   Kleinere Desktop- und Tabletbreiten
   ========================================================== */

@media (max-width: 1399.98px) {
  .wm-news-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "intro intro intro"
      "card-1 card-2 card-3"
      "card-4 card-5 card-6";
  }

  .wm-news-overview__intro {
    padding: 0 0 clamp(28px, 3vw, 44px);
  }

  .wm-news-overview__lead {
    max-width: 850px;
  }
}

@media (max-width: 999.98px) {
  .wm-news-overview {
    padding:
      14px
      calc(24px + env(safe-area-inset-right))
      38px
      calc(24px + env(safe-area-inset-left));
  }

  .wm-news-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro intro"
      "card-1 card-2"
      "card-3 card-4"
      "card-5 card-6";
    gap: 16px;
  }

  .wm-news-overview__intro h2 {
    font-size: clamp(36px, 6.4vw, 54px);
  }
}

/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 639.98px) {
  .wm-news-overview {
    padding:
      12px
      calc(18px + env(safe-area-inset-right))
      32px
      calc(18px + env(safe-area-inset-left));
  }

  .wm-news-overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "card-1"
      "card-2"
      "card-3"
      "card-4"
      "card-5"
      "card-6";
    gap: 14px;
  }

  .wm-news-overview__intro {
    padding-bottom: 20px;
  }

  .wm-news-overview__eyebrow {
    margin-bottom: 18px;
    font-size: 13px;
  }

  .wm-news-overview__intro h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .wm-news-overview__lead {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.62;
  }

  .wm-news-overview__main-button {
    width: 100%;
    margin-top: 24px;
  }

  .wm-news-card__body {
    padding: 20px 18px 22px;
  }

  .wm-news-card__body h3 {
    font-size: 19px;
  }

  .wm-news-card__body p {
    margin: 14px 0 20px;
    font-size: 15px;
  }
}

/* ==========================================================
   Barrierefreiheit
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .wm-news-card,
  .wm-news-card__image-link img,
  .wm-news-card__image-link::after,
  .wm-news-card__link::before,
  .wm-news-card__link > span {
    transition: none !important;
  }

  .wm-news-card:hover,
  .wm-news-card:focus-within,
  .wm-news-card:hover .wm-news-card__image-link img,
  .wm-news-card:focus-within .wm-news-card__image-link img {
    transform: none !important;
  }
}

/*  ==========================================================
   21. Barrierefreiheit – Bewegungen systemweit reduzieren
   ==========================================================  */
@media (prefers-reduced-motion: reduce) {
	.wm-btn, .wm-btn::before, .wm-btn-arrow, .wm-error-button, .wm-error-logo, #astroid-header .astroid-logo-image, #astroid-header .astroid-nav > .nav-item > .nav-link::after, #astroid-header .mod-languages li > a, #astroid-header .wm-language-switcher li > a {
		transition: none !important;
	}
	#astroid-offcanvas *, .astroid-offcanvas * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.wm-home-hero .wm-btn, .wm-home-hero .wm-btn::before, .wm-home-hero .wm-btn-arrow, .wm-home-hero__button-outline, .wm-home-hero__button-outline span {
		transition: none !important;
	}
	.wm-benefit, .wm-benefit__icon {
		transition: none !important;
	}
	.astroid-section.Footer-Top a {
		transition: none !important;
	}
	.wm-services-feature .wm-btn, .wm-services-feature .wm-btn::before, .wm-services-feature .wm-btn-arrow {
		transition: none !important;
	}
	.wm-engine-card__link, .wm-engine-card__link span, .wm-engine-showcase .wm-btn, .wm-engine-showcase .wm-btn::before, .wm-engine-showcase .wm-btn-arrow {
		transition: none !important;
	}
	.wm-home-final .wm-btn, .wm-home-final .wm-btn::before, .wm-home-final .wm-btn-arrow, .wm-home-final__contact-value a {
		transition: none !important;
	}
	.wm-home-final__contact-item, #mod-custom137 p {
		transition: none !important;
	}
	.wm-home-final__contact-item:hover, .wm-home-final__contact-item:focus-within, #mod-custom137 p:hover, #mod-custom137 p:focus-within {
		transform: none !important;
		filter: none !important;
	}
	.wm-contact-cta:hover .wm-contact-cta__icon i, .wm-contact-cta:hover .wm-contact-cta__icon svg, .wm-contact-cta:focus-within .wm-contact-cta__icon i, .wm-contact-cta:focus-within .wm-contact-cta__icon svg {
		animation: none !important;
	}
}
/******************************************** Neu 20.07.2026 ******************************************************/
/* ==========================================================
   Hauptmenü – Shop als Wagner-Button hervorheben

   Menü-IDs:
   Deutsch: 1003
   Englisch: 1002
   ========================================================== */

/* Desktop */
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a {
  position: relative;
  isolation: isolate;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 46px;
  margin-left: 12px;
  padding: 13px 24px !important;

  overflow: hidden;

  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--wm-blue, #000091) 0%,
      var(--wm-blue-light, #1450ff) 100%
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 4px;

  box-shadow:
    0 9px 24px rgba(0, 0, 145, 0.26);

  font-weight: 800 !important;
  letter-spacing: 0.055em;
  line-height: 1;
  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

/* Lichtreflex */
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 35%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 65%,
      transparent 100%
    );

  transform: translateX(-130%);
  transition: transform 520ms ease;
}

/* Pfeil */
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a::after {
  content: "";

  position: static !important;

  flex: 0 0 auto;
  width: 8px !important;
  height: 8px !important;

  background: none !important;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  opacity: 1 !important;
  transform: rotate(45deg);
  transition: transform 220ms ease;
}

/* Hover und Tastaturfokus */
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a:hover,
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a:focus-visible {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--wm-blue-dark, #00004f) 0%,
      var(--wm-blue-light, #1450ff) 100%
    ) !important;

  box-shadow:
    0 14px 32px rgba(0, 0, 145, 0.36);

  transform: translateY(-2px);
}

#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a:hover::before,
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a:focus-visible::before {
  transform: translateX(130%);
}

#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a:hover::after,
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a:focus-visible::after {
  transform: translateX(4px) rotate(45deg);
}

/* Normale Menü-Unterstreichung beim Shop entfernen */
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a
  .nav-title::after,
#astroid-header
  .astroid-nav
  > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
  > a
  .nav-title-text::after {
  display: none !important;
}

/* Reduzierte Bewegung berücksichtigen */
@media (prefers-reduced-motion: reduce) {
  #astroid-header
    .astroid-nav
    > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
    > a,
  #astroid-header
    .astroid-nav
    > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
    > a::before,
  #astroid-header
    .astroid-nav
    > .nav-item:is(.nav-item-id-1002, .nav-item-id-1003)
    > a::after {
    transition: none;
  }
}

/* ==========================================================
   Offcanvas-Menü
   ========================================================== */

#astroid-offcanvas
  .nav-item-id-1003
  > a,
.astroid-offcanvas
  .nav-item-id-1003
  > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  margin-top: 14px;
  padding: 15px 18px !important;

  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--wm-blue, #000091) 0%,
      var(--wm-blue-light, #1450ff) 100%
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px;

  font-weight: 800 !important;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* Bewegungsreduzierung */
@media (prefers-reduced-motion: reduce) {
  #astroid-header
    .astroid-nav
    > .nav-item.nav-item-id-1003
    > a,
  #astroid-header
    .astroid-nav
    > .nav-item.nav-item-id-1003
    > a::before,
  #astroid-header
    .astroid-nav
    > .nav-item.nav-item-id-1003
    > a::after {
    transition: none !important;
  }

  #astroid-header
    .astroid-nav
    > .nav-item.nav-item-id-1003
    > a:hover,
  #astroid-header
    .astroid-nav
    > .nav-item.nav-item-id-1003
    > a:focus-visible {
    transform: none !important;
  }
}
/* ==========================================================
   Wagner Motoren – Links im Artikeltext
   Firmenfarben, barrierefrei und responsiv
   ========================================================== */

.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link) {
  color: var(--wm-blue, #000091) !important;

  font-weight: 700;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(0, 0, 145, 0.38) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;

  transition:
    color 180ms ease,
    text-decoration-color 180ms ease,
    background-color 180ms ease;
}

/* Bereits besuchte Links bleiben in den Firmenfarben */
.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):visited {
  color: var(--wm-blue-dark, #00004f) !important;
}

/* Hover */
.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):hover {
  color: var(--wm-blue-light, #1450ff) !important;
  text-decoration-color: var(--wm-blue-light, #1450ff) !important;

  background-color: rgba(20, 80, 255, 0.07);
}

/* Tastaturbedienung */
.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):focus-visible {
  color: var(--wm-blue-light, #1450ff) !important;

  background-color: rgba(20, 80, 255, 0.10);

  outline: 3px solid rgba(20, 80, 255, 0.34);
  outline-offset: 3px;

  border-radius: 2px;
}

/* Links, die ausschließlich ein Bild enthalten, nicht unterstreichen */
.com-content-article
  .astroid-article-text
  a:has(> img) {
  background: none !important;
  text-decoration: none !important;
}

/* Bewegungsreduzierung */
@media (prefers-reduced-motion: reduce) {
  .com-content-article
    .astroid-article-text
    a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link) {
    transition: none !important;
  }
}
/* ==========================================================
   Wagner Motoren – Breadcrumb
   Firmenfarben, klar und responsiv
   ========================================================== */

/* Grundaufbau */
.Pagecontent .breadcrumbs-position .breadcrumb {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  color: var(--wm-muted, #667085);

  font-size: clamp(14px, 1vw, 17px);
  font-weight: 500;
  line-height: 1.5;

  list-style: none;
}

/* Das Joomla-Inline-Padding entfernen */
.Pagecontent .breadcrumbs-position .breadcrumb[style] {
  padding-left: 0 !important;
}

/* Standort-Symbol ausblenden */
.Pagecontent .breadcrumbs-position
  .breadcrumb
  > li.float-left {
  display: none !important;
}

/* Einzelne Einträge */
.Pagecontent .breadcrumbs-position
  .breadcrumb-item {
  display: inline-flex;
  align-items: center;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--wm-muted, #667085);
}

/* Joomla-Trennzeichen im HTML ausblenden */
.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > .divider {
  display: none !important;
}

/* Eigenes diagonales Trennzeichen */
.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  + .breadcrumb-item::before {
  content: "/" !important;

  display: inline-block !important;

  margin: 0 14px;
  padding: 0 !important;

  color: var(--wm-blue-light, #1450ff) !important;

  font-size: 1.15em;
  font-weight: 500;
  line-height: 1;

  opacity: 1;
}

/* Verlinkte Breadcrumb-Einträge */
.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > a.pathway {
  position: relative;

  display: inline-flex;
  align-items: center;

  color: var(--wm-blue, #000091) !important;

  font-weight: 700;
  text-decoration: none !important;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

/* Kleine Akzentlinie */
.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > a.pathway::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;

  height: 2px;

  background: linear-gradient(
    90deg,
    var(--wm-blue, #000091),
    var(--wm-blue-light, #1450ff)
  );

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 180ms ease;
}

/* Hover und Tastaturfokus */
.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > a.pathway:hover,
.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > a.pathway:focus-visible {
  color: var(--wm-blue-light, #1450ff) !important;
}

.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > a.pathway:hover::after,
.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > a.pathway:focus-visible::after {
  transform: scaleX(1);
}

.Pagecontent .breadcrumbs-position
  .breadcrumb-item
  > a.pathway:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.28);
  outline-offset: 5px;
  border-radius: 2px;
}

/* Aktuelle Seite */
.Pagecontent .breadcrumbs-position
  .breadcrumb-item.active,
.Pagecontent .breadcrumbs-position
  .breadcrumb-item.active
  > span[itemprop="name"] {
  color: var(--wm-muted, #667085) !important;
  font-weight: 500;
}

/* Smartphone */
@media (max-width: 599px) {
  .Pagecontent .breadcrumbs-position .breadcrumb {
    font-size: 14px;
  }

  .Pagecontent .breadcrumbs-position
    .breadcrumb-item
    + .breadcrumb-item::before {
    margin-right: 9px;
    margin-left: 9px;
  }
}

/* Bewegungsreduzierung */
@media (prefers-reduced-motion: reduce) {
  .Pagecontent .breadcrumbs-position
    .breadcrumb-item
    > a.pathway,
  .Pagecontent .breadcrumbs-position
    .breadcrumb-item
    > a.pathway::after {
    transition: none !important;
  }
}
/* ==========================================================
   Wagner Motoren – Service- und Newsübersicht mit sieben Kacheln

   Desktop:
   Reihe 1: Einleitung + drei Beiträge
   Reihe 2: vier Beiträge

   Die News-Seite wird über ihre Astroid-Bodyklasse gezielt
   angesprochen. Andere Übersichten bleiben unverändert.
   ========================================================== */

.wm-service-overview .wm-news-card:nth-of-type(7),
.motor-reparieren-alias
  .wm-news-overview
  .wm-news-card:nth-of-type(7) {
  grid-area: card-7;
}

/* Große Desktop-Auflösungen */
.wm-service-overview .wm-news-overview__grid,
.motor-reparieren-alias
  .wm-news-overview
  .wm-news-overview__grid {
  grid-template-areas:
    "intro  card-1 card-2 card-3"
    "card-4 card-5 card-6 card-7";
}

/* Kleinere Desktop-Auflösungen */
@media (max-width: 1399.98px) {
  .wm-service-overview .wm-news-overview__grid,
  .motor-reparieren-alias
    .wm-news-overview
    .wm-news-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "intro  intro  card-1"
      "card-2 card-3 card-4"
      "card-5 card-6 card-7";
  }
}

/* Tablet */
@media (min-width: 640px) and (max-width: 999.98px) {
  .wm-service-overview .wm-news-overview__grid,
  .motor-reparieren-alias
    .wm-news-overview
    .wm-news-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro  intro"
      "card-1 card-2"
      "card-3 card-4"
      "card-5 card-6"
      "card-7 .";
  }
}

/* Smartphone */
@media (max-width: 639.98px) {
  .wm-service-overview .wm-news-overview__grid,
  .motor-reparieren-alias
    .wm-news-overview
    .wm-news-overview__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "card-1"
      "card-2"
      "card-3"
      "card-4"
      "card-5"
      "card-6"
      "card-7";
  }
}
/* ==========================================================
   Motor reparieren: sieben Beitraege wie bei Serviceangeboten

   Desktop gross: Einleitung + 3 Karten / danach 4 Karten
   Desktop klein: 3 Spalten
   Tablet:        2 Spalten
   Smartphone:   1 Spalte

   Diesen Block am Ende der produktiven custom.css einfuegen.
   ========================================================== */

body.motor-reparieren-alias
  .wm-news-overview
  .wm-news-card:nth-of-type(7) {
  grid-area: card-7;
}

body.motor-reparieren-alias
  .wm-news-overview
  .wm-news-overview__grid {
  grid-template-areas:
    "intro  card-1 card-2 card-3"
    "card-4 card-5 card-6 card-7";
}

@media (max-width: 1399.98px) {
  body.motor-reparieren-alias
    .wm-news-overview
    .wm-news-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "intro  intro  card-1"
      "card-2 card-3 card-4"
      "card-5 card-6 card-7";
  }
}

@media (min-width: 640px) and (max-width: 999.98px) {
  body.motor-reparieren-alias
    .wm-news-overview
    .wm-news-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro  intro"
      "card-1 card-2"
      "card-3 card-4"
      "card-5 card-6"
      "card-7 .";
  }
}

@media (max-width: 639.98px) {
  body.motor-reparieren-alias
    .wm-news-overview
    .wm-news-overview__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "card-1"
      "card-2"
      "card-3"
      "card-4"
      "card-5"
      "card-6"
      "card-7";
  }
}
/* ==========================================================
   Wagner Motoren – wiederverwendbare 2x2-Übersicht

   Desktop:
   Intro | Karte 1 | Karte 2
         | Karte 3 | Karte 4

   Die Regeln wirken ausschließlich innerhalb von
   .wm-overview-2x2.
   ========================================================== */

.wm-overview-2x2 .wm-overview-2x2__layout {
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(0, 2fr);

    align-items: start;
}

/* Einleitung links */

.wm-overview-2x2 .wm-news-overview__intro {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start;
}

/* Rechter Kartenbereich */

.wm-overview-2x2__cards {
    grid-column: 2;
    grid-row: 1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;

    min-width: 0;
}

/* Bestehende automatische Kartenpositionen neutralisieren */

.wm-overview-2x2__cards > .wm-news-card {
    grid-column: auto !important;
    grid-row: auto !important;

    min-width: 0;
    height: 100%;
}

/* Tablet */

@media (max-width: 1100px) {

    .wm-overview-2x2 .wm-overview-2x2__layout {
        grid-template-columns: 1fr;
    }

    .wm-overview-2x2 .wm-news-overview__intro {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .wm-overview-2x2__cards {
        grid-column: 1;
        grid-row: auto;

        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphone */

@media (max-width: 700px) {

    .wm-overview-2x2__cards {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
/* ==========================================================
   Mitarbeiter-Hero – schmaler Bildverlauf rechts
   Wirkt nur bei .wm-media-fade--both-sides
   ========================================================== */

.wm-home-hero.wm-media-fade--both-sides
> .wm-media-fade__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 1;

  background:

    /* Rechts: schmaler Übergang nur am äußeren Bildrand */
    linear-gradient(
      to left,
      rgba(0, 0, 82, 1) 0%,
      rgba(0, 0, 145, 0.92) 3%,
      rgba(0, 0, 145, 0.68) 6%,
      rgba(0, 0, 145, 0.38) 9%,
      rgba(0, 0, 145, 0.16) 12%,
      rgba(0, 0, 145, 0.05) 15%,
      transparent 18%
    ),

    /* Links: vorhandener Übergang */
    linear-gradient(
      to right,
      rgba(0, 0, 145, 1) 0%,
      rgba(0, 0, 145, 0.98) 10%,
      rgba(0, 0, 145, 0.92) 18%,
      rgba(0, 0, 145, 0.78) 28%,
      rgba(0, 0, 145, 0.58) 38%,
      rgba(0, 0, 145, 0.34) 48%,
      rgba(0, 0, 145, 0.14) 58%,
      transparent 70%
    ),

    /* Blaue Tiefe links unten */
    radial-gradient(
      ellipse 85% 95% at 0% 100%,
      rgba(0, 0, 145, 0.92) 0%,
      rgba(0, 0, 145, 0.68) 24%,
      rgba(0, 0, 145, 0.34) 46%,
      rgba(0, 0, 145, 0.10) 62%,
      transparent 78%
    ) !important;
}


/* Tablet */
@media (min-width: 600px) and (max-width: 1160px) {

  .wm-home-hero.wm-media-fade--both-sides
  > .wm-media-fade__overlay {
    background:

      linear-gradient(
        to left,
        rgba(0, 0, 82, 0.96) 0%,
        rgba(0, 0, 145, 0.72) 4%,
        rgba(0, 0, 145, 0.38) 8%,
        rgba(0, 0, 145, 0.12) 12%,
        transparent 16%
      ),

      linear-gradient(
        to right,
        rgba(0, 0, 145, 1) 0%,
        rgba(0, 0, 145, 0.96) 18%,
        rgba(0, 0, 145, 0.72) 36%,
        rgba(0, 0, 145, 0.32) 53%,
        transparent 70%
      ) !important;
  }
}


/* Smartphone */
@media (max-width: 599px) {

  .wm-home-hero.wm-media-fade--both-sides
  > .wm-media-fade__overlay {
    background:

      linear-gradient(
        to left,
        rgba(0, 0, 82, 0.80) 0%,
        rgba(0, 0, 145, 0.42) 4%,
        rgba(0, 0, 145, 0.12) 8%,
        transparent 12%
      ),

      linear-gradient(
        to right,
        rgba(0, 0, 145, 0.98) 0%,
        rgba(0, 0, 145, 0.92) 38%,
        rgba(0, 0, 112, 0.72) 68%,
        rgba(0, 0, 82, 0.30) 100%
      ) !important;
  }
}
/* ==========================================================
   Wagner Motoren – Mitarbeiterübersicht

   Gestaltung und Animationen passend zu den bestehenden
   Wagner-Motoren-Kacheln und dem Master-Button.
   ========================================================== */

.wm-team-overview {
  --wm-team-blue: #000091;
  --wm-team-dark: #000052;
  --wm-team-light: #1450ff;
  --wm-team-text: #11162a;
  --wm-team-muted: #667085;
  --wm-team-border: #e2e6ee;

  position: relative;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  overflow: hidden;

  color: var(--wm-team-text);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(20, 80, 255, 0.07),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fc 100%
    );

  border-top: 1px solid rgba(0, 0, 145, 0.08);

  border-bottom: 1px solid rgba(0, 0, 145, 0.10);
}


/* ==========================================================
   Innerer Bereich
   ========================================================== */

.wm-team-overview__inner {
  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    clamp(70px, 6vw, 110px)
    clamp(50px, 6vw, 120px)
    clamp(76px, 6.5vw, 120px);
}


/* ==========================================================
   Überschrift
   ========================================================== */

.wm-team-overview__header {
  width: min(100%, 820px);

  margin: 0 auto clamp(44px, 4.5vw, 70px);

  text-align: center;
}

.wm-team-overview__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 20px;

  color: var(--wm-team-blue);

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.wm-team-overview__eyebrow::before,
.wm-team-overview__eyebrow::after {
  content: "";

  width: 36px;
  height: 3px;

  flex: 0 0 auto;

  background: linear-gradient(
    90deg,
    var(--wm-team-blue),
    var(--wm-team-light)
  );

  box-shadow: 0 0 12px rgba(20, 80, 255, 0.28);
}

.wm-team-overview__header h2 {
  margin: 0 0 22px;
  padding: 0;

  color: var(--wm-team-dark);

  font-size: clamp(38px, 4vw, 62px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -0.035em;

  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-team-overview__lead {
  width: min(100%, 720px);

  margin: 0 auto;

  color: var(--wm-team-muted);

  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.68;

  text-align: center;
}


/* ==========================================================
   Vier Kacheln
   ========================================================== */

.wm-team-overview__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  align-items: stretch;
  gap: clamp(20px, 1.8vw, 30px);
}


/* ==========================================================
   Mitarbeiterkachel
   ========================================================== */

.wm-team-card {
  position: relative;
  isolation: isolate;

  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--wm-team-border);
  border-radius: 4px;

  box-shadow: 0 12px 30px rgba(0, 0, 70, 0.07);

  transition:
    transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.wm-team-card::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  z-index: 3;

  height: 4px;

  background: linear-gradient(
    90deg,
    var(--wm-team-blue) 0%,
    var(--wm-team-light) 100%
  );

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 320ms ease;
}

.wm-team-card:hover,
.wm-team-card:focus-within {
  z-index: 2;

  border-color: rgba(20, 80, 255, 0.35);

  box-shadow: 0 20px 44px rgba(0, 0, 91, 0.13);

  transform: translateY(-5px);
}

.wm-team-card:hover::before,
.wm-team-card:focus-within::before {
  transform: scaleX(1);
}


/* ==========================================================
   Bildbereich
   ========================================================== */

.wm-team-card__image {
  position: relative;

  flex: 0 0 auto;

  min-height: clamp(255px, 21vw, 350px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: clamp(28px, 2.5vw, 42px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 38%,
      #ffffff 0%,
      #f0f3fb 55%,
      #e4e9f5 100%
    );

  border-bottom: 1px solid var(--wm-team-border);
}

.wm-team-card__image::before {
  content: "";

  position: absolute;
  top: -30%;
  right: -25%;

  width: 80%;
  aspect-ratio: 1;

  background: radial-gradient(
    circle,
    rgba(20, 80, 255, 0.12),
    transparent 70%
  );

  pointer-events: none;
}

.wm-team-card__image::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 36%;

  pointer-events: none;

  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 0, 82, 0.08)
  );
}


/* Rundes Portrait */

.wm-team-card__image img {
  position: relative;
  z-index: 1;

  display: block;

  width: clamp(170px, 13vw, 230px);
  aspect-ratio: 1;

  object-fit: cover;
  object-position: center top;

  background: #ffffff;

  border: 6px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 0 0 2px rgba(0, 0, 145, 0.13),
    0 14px 32px rgba(0, 0, 80, 0.17);

  transition:
    transform 420ms cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 420ms ease;
}

.wm-team-card:hover .wm-team-card__image img,
.wm-team-card:focus-within .wm-team-card__image img {
  transform: scale(1.045);

  box-shadow:
    0 0 0 2px rgba(20, 80, 255, 0.24),
    0 20px 40px rgba(0, 0, 80, 0.22);
}


/* Individuelle Bildausschnitte */

.wm-team-card:nth-child(1) .wm-team-card__image img {
  object-position: 50% 12%;
}

.wm-team-card:nth-child(2) .wm-team-card__image img {
  object-position: 50% 9%;
}

.wm-team-card:nth-child(3) .wm-team-card__image img {
  object-position: 50% 13%;
}

.wm-team-card:nth-child(4) .wm-team-card__image img {
  object-position: 50% 9%;
}


/* ==========================================================
   Karteninhalt
   ========================================================== */

.wm-team-card__body {
  flex: 1 1 auto;

  min-width: 0;

  padding: clamp(22px, 1.8vw, 30px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wm-team-card__department {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 13px;

  color: var(--wm-team-light);

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.wm-team-card__department::before {
  content: "";

  width: 24px;
  height: 2px;

  flex: 0 0 auto;

  background: var(--wm-team-light);
}

.wm-team-card__body h3 {
  width: 100%;

  margin: 0 0 9px;
  padding: 0;

  color: var(--wm-team-dark);

  font-size: clamp(20px, 1.35vw, 25px);
  font-weight: 900;
  line-height: 1.16;

  text-align: left;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-team-card__role {
  min-height: 44px;

  margin: 0 0 25px;

  color: var(--wm-team-muted);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.48;

  text-align: left;
}


/* ==========================================================
   Kontaktbereich
   ========================================================== */

.wm-team-card__contact {
  width: 100%;

  margin-top: auto;

  display: grid;
  gap: 16px;
}


/* Telefonnummer im Stil der Wagner-Textlinks */

.wm-team-card__phone {
  position: relative;

  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 11px;

  padding: 4px 0;

  color: var(--wm-team-blue) !important;

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.025em;

  text-decoration: none !important;
}

.wm-team-card__phone::before {
  content: "";

  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;

  height: 2px;

  background: var(--wm-team-light);

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 220ms ease;
}

.wm-team-card__phone > span {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--wm-team-blue),
    var(--wm-team-light)
  );

  border-radius: 50%;

  font-size: 12px;

  box-shadow: 0 7px 18px rgba(0, 0, 145, 0.22);

  transition: transform 220ms ease;
}

.wm-team-card__phone:hover,
.wm-team-card__phone:focus-visible {
  color: var(--wm-team-light) !important;
}

.wm-team-card__phone:hover::before,
.wm-team-card__phone:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.wm-team-card__phone:hover > span,
.wm-team-card__phone:focus-visible > span {
  transform: translateX(4px);
}


/* Vorhandenen Master-Button verwenden */

.wm-team-card__button {
  width: 100%;
  min-width: 0;
  min-height: 54px;

  padding: 16px 20px;

  justify-content: space-between;

  gap: 14px;

  border-radius: 3px;

  font-size: 12px;
  letter-spacing: 0.045em;
}


/* ==========================================================
   Fokus
   ========================================================== */

.wm-team-card__phone:focus-visible,
.wm-team-card__button:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.34);
  outline-offset: 4px;
}


/* ==========================================================
   Tablet – zwei Kacheln nebeneinander
   ========================================================== */

@media (max-width: 1100px) {

  .wm-team-overview__inner {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .wm-team-overview__grid {
    width: min(100%, 850px);

    margin-right: auto;
    margin-left: auto;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wm-team-card__image {
    min-height: 320px;
  }

  .wm-team-card__image img {
    width: clamp(190px, 25vw, 230px);
  }

}


/* ==========================================================
   Smartphone – eine Kachel pro Reihe
   ========================================================== */

@media (max-width: 650px) {

  .wm-team-overview__inner {
    padding-top: 56px;

    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-bottom: 70px;

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-team-overview__header {
    margin-bottom: 40px;
  }

  .wm-team-overview__eyebrow {
    font-size: 12px;
  }

  .wm-team-overview__eyebrow::before,
  .wm-team-overview__eyebrow::after {
    width: 24px;
  }

  .wm-team-overview__header h2 {
    font-size: clamp(34px, 10vw, 45px);
  }

  .wm-team-overview__lead {
    font-size: 16px;
  }

  .wm-team-overview__grid {
    width: min(100%, 430px);

    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wm-team-card__image {
    min-height: 300px;
    padding: 32px 24px;
  }

  .wm-team-card__image img {
    width: min(220px, 65vw);
  }

  .wm-team-card__body {
    padding: 24px 22px 28px;
  }

  .wm-team-card__role {
    min-height: 0;
  }

}


/* ==========================================================
   Sehr kleine Smartphones
   ========================================================== */

@media (max-width: 390px) {

  .wm-team-overview__inner {
    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-team-card__image {
    min-height: 270px;
  }

  .wm-team-card__image img {
    width: min(200px, 66vw);
  }

  .wm-team-card__button {
    padding-right: 16px;
    padding-left: 16px;

    font-size: 11.5px;
  }

}


/* ==========================================================
   Bewegungsreduzierung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .wm-team-card,
  .wm-team-card::before,
  .wm-team-card__image img,
  .wm-team-card__phone,
  .wm-team-card__phone::before,
  .wm-team-card__phone > span {
    transition: none !important;
  }

  .wm-team-card:hover,
  .wm-team-card:focus-within,
  .wm-team-card:hover .wm-team-card__image img,
  .wm-team-card:focus-within .wm-team-card__image img,
  .wm-team-card__phone:hover > span,
  .wm-team-card__phone:focus-visible > span {
    transform: none !important;
  }

}
/* ==========================================================
   Wagner Motoren – Unternehmenshistorie

   Eigenständige Timeline mit Wagner-Motoren-Farben,
   Kachelbewegung und responsiver Darstellung.
   ========================================================== */

.wm-history {
  --wm-history-blue: #000091;
  --wm-history-dark: #000052;
  --wm-history-light: #1450ff;
  --wm-history-text: #11162a;
  --wm-history-muted: #667085;
  --wm-history-border: #e2e6ee;

  position: relative;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  overflow: hidden;

  color: var(--wm-history-text);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(20, 80, 255, 0.08),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fc 100%
    );

  border-top: 1px solid rgba(0, 0, 145, 0.08);
  border-bottom: 1px solid rgba(0, 0, 145, 0.10);
}


/* ==========================================================
   Innerer Bereich
   ========================================================== */

.wm-history__inner {
  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    clamp(70px, 6vw, 110px)
    clamp(50px, 6vw, 120px)
    clamp(80px, 7vw, 130px);
}


/* ==========================================================
   Überschrift
   ========================================================== */

.wm-history__header {
  width: min(100%, 820px);

  margin: 0 auto clamp(58px, 6vw, 90px);

  text-align: center;
}

.wm-history__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 20px;

  color: var(--wm-history-blue);

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.wm-history__eyebrow::before,
.wm-history__eyebrow::after {
  content: "";

  width: 36px;
  height: 3px;

  flex: 0 0 auto;

  background: linear-gradient(
    90deg,
    var(--wm-history-blue),
    var(--wm-history-light)
  );

  box-shadow: 0 0 12px rgba(20, 80, 255, 0.28);
}

.wm-history__header h2 {
  margin: 0 0 22px;
  padding: 0;

  color: var(--wm-history-dark);

  font-size: clamp(38px, 4vw, 62px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -0.035em;

  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-history__lead {
  width: min(100%, 720px);

  margin: 0 auto;

  color: var(--wm-history-muted);

  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.68;

  text-align: center;
}


/* ==========================================================
   Timeline
   ========================================================== */

.wm-history__timeline {
  position: relative;

  width: min(100%, 1180px);

  margin-right: auto;
  margin-left: auto;

  display: grid;
  gap: 34px;
}


/* Senkrechte Mittellinie */

.wm-history__timeline::before {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;

  width: 4px;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 145, 0.12) 0%,
    var(--wm-history-blue) 12%,
    var(--wm-history-light) 50%,
    var(--wm-history-blue) 88%,
    rgba(0, 0, 145, 0.12) 100%
  );

  border-radius: 10px;

  box-shadow:
    0 0 12px rgba(20, 80, 255, 0.22);

  transform: translateX(-50%);
}


/* ==========================================================
   Einzelner Meilenstein
   ========================================================== */

.wm-history__item {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    110px
    minmax(0, 1fr);

  align-items: center;

  min-width: 0;
}


/* Ungerade Einträge links */

.wm-history__item:nth-child(odd) .wm-history__card {
  grid-column: 1;
  grid-row: 1;

  margin-right: 16px;
}


/* Gerade Einträge rechts */

.wm-history__item:nth-child(even) .wm-history__card {
  grid-column: 3;
  grid-row: 1;

  margin-left: 16px;
}


/* Jahr immer in der Mitte */

.wm-history__marker {
  position: relative;
  z-index: 3;

  grid-column: 2;
  grid-row: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.wm-history__marker time {
  width: 86px;
  height: 86px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.24),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--wm-history-blue) 0%,
      var(--wm-history-light) 100%
    );

  border: 6px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 0 0 2px rgba(0, 0, 145, 0.16),
    0 14px 32px rgba(0, 0, 91, 0.23);

  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.02em;

  transition:
    transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 320ms ease;
}


/* Verbindung von Jahr zur Karte */

.wm-history__item::before {
  content: "";

  position: absolute;
  top: 50%;

  z-index: 1;

  width: 46px;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--wm-history-blue),
    var(--wm-history-light)
  );

  transform: translateY(-50%);
}

.wm-history__item:nth-child(odd)::before {
  left: calc(50% - 54px);
}

.wm-history__item:nth-child(even)::before {
  left: calc(50% + 8px);
}


/* ==========================================================
   Kachel
   ========================================================== */

.wm-history__card {
  position: relative;
  isolation: isolate;

  min-width: 0;
  min-height: 190px;

  padding: clamp(26px, 2.2vw, 38px);

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--wm-history-border);
  border-radius: 4px;

  box-shadow: 0 12px 30px rgba(0, 0, 70, 0.07);

  transition:
    transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}


/* Blaue obere Linie */

.wm-history__card::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 4px;

  background: linear-gradient(
    90deg,
    var(--wm-history-blue),
    var(--wm-history-light)
  );

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 320ms ease;
}


/* Dezente Fläche in der Ecke */

.wm-history__card::after {
  content: "";

  position: absolute;
  top: -70px;
  right: -70px;

  z-index: -1;

  width: 180px;
  height: 180px;

  background: radial-gradient(
    circle,
    rgba(20, 80, 255, 0.10),
    transparent 70%
  );

  pointer-events: none;
}


.wm-history__item:hover .wm-history__card,
.wm-history__item:focus-within .wm-history__card {
  z-index: 2;

  border-color: rgba(20, 80, 255, 0.35);

  box-shadow: 0 20px 44px rgba(0, 0, 91, 0.13);

  transform: translateY(-5px);
}

.wm-history__item:hover .wm-history__card::before,
.wm-history__item:focus-within .wm-history__card::before {
  transform: scaleX(1);
}

.wm-history__item:hover .wm-history__marker time,
.wm-history__item:focus-within .wm-history__marker time {
  transform: scale(1.06);

  box-shadow:
    0 0 0 2px rgba(20, 80, 255, 0.24),
    0 18px 38px rgba(0, 0, 91, 0.30);
}


/* ==========================================================
   Kacheltexte
   ========================================================== */

.wm-history__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 13px;

  color: var(--wm-history-light);

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.wm-history__label::before {
  content: "";

  width: 24px;
  height: 2px;

  flex: 0 0 auto;

  background: var(--wm-history-light);
}

.wm-history__card h3 {
  margin: 0 0 15px;
  padding: 0;

  color: var(--wm-history-dark);

  font-size: clamp(21px, 1.55vw, 28px);
  font-weight: 900;
  line-height: 1.16;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-history__card p {
  margin: 0;

  color: var(--wm-history-muted);

  font-size: clamp(15px, 1vw, 17px);
  font-weight: 500;
  line-height: 1.62;

  text-align: left;
}


/* ==========================================================
   Aktueller Meilenstein 2024
   ========================================================== */

.wm-history__item--current .wm-history__card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(20, 80, 255, 0.10),
      transparent 42%
    ),
    #ffffff;

  border-color: rgba(20, 80, 255, 0.28);
}

.wm-history__item--current .wm-history__marker time {
  box-shadow:
    0 0 0 2px rgba(20, 80, 255, 0.22),
    0 0 28px rgba(20, 80, 255, 0.30),
    0 16px 36px rgba(0, 0, 91, 0.28);
}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 900px) {

  .wm-history__inner {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .wm-history__timeline {
    width: min(100%, 720px);
    gap: 28px;
  }

  .wm-history__timeline::before {
    left: 43px;

    transform: none;
  }

  .wm-history__item {
    grid-template-columns: 86px minmax(0, 1fr);

    align-items: start;
  }

  .wm-history__marker {
    grid-column: 1;
    grid-row: 1;

    justify-content: flex-start;
  }

  .wm-history__marker time {
    width: 78px;
    height: 78px;

    font-size: 17px;
  }

  .wm-history__item:nth-child(odd) .wm-history__card,
  .wm-history__item:nth-child(even) .wm-history__card {
    grid-column: 2;
    grid-row: 1;

    margin: 0 0 0 24px;
  }

  .wm-history__item::before,
  .wm-history__item:nth-child(odd)::before,
  .wm-history__item:nth-child(even)::before {
    top: 39px;
    left: 68px;

    width: 42px;

    transform: none;
  }

}


/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 599px) {

  .wm-history__inner {
    padding-top: 56px;

    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-bottom: 74px;

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-history__header {
    margin-bottom: 48px;
  }

  .wm-history__eyebrow {
    font-size: 12px;
  }

  .wm-history__eyebrow::before,
  .wm-history__eyebrow::after {
    width: 24px;
  }

  .wm-history__header h2 {
    font-size: clamp(34px, 10vw, 45px);
  }

  .wm-history__lead {
    font-size: 16px;
  }

  .wm-history__timeline {
    gap: 24px;
  }

  .wm-history__timeline::before {
    left: 32px;

    width: 3px;
  }

  .wm-history__item {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .wm-history__marker time {
    width: 64px;
    height: 64px;

    border-width: 4px;

    font-size: 15px;
  }

  .wm-history__item:nth-child(odd) .wm-history__card,
  .wm-history__item:nth-child(even) .wm-history__card {
    margin-left: 15px;
  }

  .wm-history__item::before,
  .wm-history__item:nth-child(odd)::before,
  .wm-history__item:nth-child(even)::before {
    top: 31px;
    left: 54px;

    width: 28px;
  }

  .wm-history__card {
    min-height: 0;

    padding: 24px 20px;
  }

  .wm-history__card h3 {
    font-size: 21px;
  }

  .wm-history__card p {
    font-size: 15px;
  }

}


/* ==========================================================
   Sehr kleine Smartphones
   ========================================================== */


@media (max-width: 390px) {

  .wm-history__item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .wm-history__timeline::before {
    left: 28px;
  }

  .wm-history__marker time {
    width: 56px;
    height: 56px;

    font-size: 13px;
  }

  .wm-history__item::before,
  .wm-history__item:nth-child(odd)::before,
  .wm-history__item:nth-child(even)::before {
    top: 27px;
    left: 47px;

    width: 26px;
  }

  .wm-history__item:nth-child(odd) .wm-history__card,
  .wm-history__item:nth-child(even) .wm-history__card {
    margin-left: 14px;
  }

  .wm-history__card {
    padding: 22px 17px;
  }

}


/* ==========================================================
   Bewegungsreduzierung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .wm-history__card,
  .wm-history__card::before,
  .wm-history__marker time {
    transition: none !important;
  }

  .wm-history__item:hover .wm-history__card,
  .wm-history__item:focus-within .wm-history__card,
  .wm-history__item:hover .wm-history__marker time,
  .wm-history__item:focus-within .wm-history__marker time {
    transform: none !important;
  }

}
/* Historie – oberen Abstand verkleinern */

.wm-history__inner {
  padding-top: 0px;
}

@media (max-width: 900px) {
  .wm-history__inner {
    padding-top: 5px;
  }
}

@media (max-width: 599px) {
  .wm-history__inner {
    padding-top: 5px;
  }
}
/* ==========================================================
   Wagner Motoren – Motorinformationen 2 x 3

   Desktop: 2 Spalten
   Smartphone: 1 Spalte
   ========================================================== */

.wm-engine-info {
  --wm-engine-info-blue: #000091;
  --wm-engine-info-dark: #000052;
  --wm-engine-info-light: #1450ff;
  --wm-engine-info-text: #11162a;
  --wm-engine-info-muted: #667085;
  --wm-engine-info-border: #e2e6ee;

  position: relative;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(20, 80, 255, 0.06),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fc 100%
    );

  border-top: 1px solid rgba(0, 0, 145, 0.08);
  border-bottom: 1px solid rgba(0, 0, 145, 0.10);
}


/* Innerer Bereich */

.wm-engine-info__inner {
  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    24px
    clamp(50px, 6vw, 120px)
    clamp(70px, 6vw, 110px);
}


/* Zweispaltiges Raster */

.wm-engine-info__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  align-items: stretch;
  gap: clamp(20px, 1.8vw, 30px);
}


/* Einzelne Kachel */

.wm-engine-info__card {
  position: relative;
  isolation: isolate;

  min-width: 0;
  min-height: 230px;

  padding: clamp(26px, 2.2vw, 38px);

  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 1.5vw, 26px);

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--wm-engine-info-border);
  border-radius: 4px;

  box-shadow: 0 12px 30px rgba(0, 0, 70, 0.07);

  transition:
    transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}


/* Blaue Akzentlinie */

.wm-engine-info__card::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 4px;

  background: linear-gradient(
    90deg,
    var(--wm-engine-info-blue),
    var(--wm-engine-info-light)
  );

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 320ms ease;
}


/* Dezenter Lichtschein */

.wm-engine-info__card::after {
  content: "";

  position: absolute;
  top: -90px;
  right: -90px;

  z-index: -1;

  width: 220px;
  height: 220px;

  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(20, 80, 255, 0.10),
    transparent 70%
  );
}


.wm-engine-info__card:hover,
.wm-engine-info__card:focus-within {
  z-index: 2;

  border-color: rgba(20, 80, 255, 0.35);

  box-shadow: 0 20px 44px rgba(0, 0, 91, 0.13);

  transform: translateY(-5px);
}

.wm-engine-info__card:hover::before,
.wm-engine-info__card:focus-within::before {
  transform: scaleX(1);
}


/* Icon */

.wm-engine-info__icon {
  width: 58px;
  height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-engine-info-blue);

  background: linear-gradient(
    135deg,
    rgba(0, 0, 145, 0.06),
    rgba(20, 80, 255, 0.12)
  );

  border: 1px solid rgba(0, 0, 145, 0.15);
  border-radius: 50%;

  font-size: 27px;
  line-height: 1;

  transition:
    color 320ms ease,
    background 320ms ease,
    transform 320ms ease;
}

.wm-engine-info__card:hover .wm-engine-info__icon,
.wm-engine-info__card:focus-within .wm-engine-info__icon {
  color: #ffffff;

  background: linear-gradient(
    135deg,
    var(--wm-engine-info-blue),
    var(--wm-engine-info-light)
  );

  transform: rotate(-5deg) scale(1.05);
}


/* Inhaltsbereich */

.wm-engine-info__content {
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wm-engine-info__content h3 {
  margin: 0 0 15px;
  padding: 0 0 14px;

  position: relative;

  color: var(--wm-engine-info-blue);

  font-size: clamp(19px, 1.35vw, 25px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;

  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-engine-info__content h3::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 42px;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--wm-engine-info-light),
    transparent
  );
}

.wm-engine-info__content p {
  margin: 0;

  color: var(--wm-engine-info-muted);

  font-size: clamp(15px, 0.95vw, 17px);
  font-weight: 500;
  line-height: 1.62;

  text-align: left;
}


/* Link im bekannten Wagner-Motoren-Stil */

.wm-engine-info__link {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-top: auto;
  padding: 22px 0 4px;

  color: var(--wm-engine-info-blue) !important;

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;

  text-decoration: none !important;
  text-transform: uppercase;
}

.wm-engine-info__link::before {
  content: "";

  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;

  height: 2px;

  background: var(--wm-engine-info-light);

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 220ms ease;
}

.wm-engine-info__link > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;

  transition: transform 220ms ease;
}

.wm-engine-info__link:hover,
.wm-engine-info__link:focus-visible {
  color: var(--wm-engine-info-light) !important;
}

.wm-engine-info__link:hover::before,
.wm-engine-info__link:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.wm-engine-info__link:hover > span,
.wm-engine-info__link:focus-visible > span {
  transform: translateX(5px);
}

.wm-engine-info__link:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.34);
  outline-offset: 4px;
}


/* Tablet */

@media (max-width: 1000px) {

  .wm-engine-info__inner {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .wm-engine-info__card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

}


/* Smartphone */

@media (max-width: 700px) {

  .wm-engine-info__inner {
    padding-top: 18px;

    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-bottom: 70px;

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-engine-info__grid {
    width: min(100%, 540px);

    margin-right: auto;
    margin-left: auto;

    grid-template-columns: 1fr;
    gap: 22px;
  }

  .wm-engine-info__card {
    min-height: 0;

    padding: 26px 22px;

    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
  }

  .wm-engine-info__icon {
    width: 52px;
    height: 52px;

    font-size: 24px;
  }

  .wm-engine-info__content h3 {
    font-size: 19px;
  }

}


/* Sehr kleine Smartphones */

@media (max-width: 390px) {

  .wm-engine-info__card {
    padding: 24px 18px;

    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
  }

  .wm-engine-info__icon {
    width: 46px;
    height: 46px;

    font-size: 21px;
  }

  .wm-engine-info__content h3 {

    font-size: 17px;
  }

  .wm-engine-info__content p {
    font-size: 14.5px;
  }

}


/* Bewegungsreduzierung */

@media (prefers-reduced-motion: reduce) {

  .wm-engine-info__card,
  .wm-engine-info__card::before,
  .wm-engine-info__icon,
  .wm-engine-info__link::before,
  .wm-engine-info__link > span {
    transition: none !important;
  }

  .wm-engine-info__card:hover,
  .wm-engine-info__card:focus-within,
  .wm-engine-info__card:hover .wm-engine-info__icon,
  .wm-engine-info__card:focus-within .wm-engine-info__icon,
  .wm-engine-info__link:hover > span,
  .wm-engine-info__link:focus-visible > span {
    transform: none !important;
  }

}
/*Google ReCaptcha*/
.grecaptcha-badge {
  margin-bottom: 12%;
	z-index: 15000;
}
@media (max-width: 390px) {
/*Google ReCaptcha*/
.grecaptcha-badge {
  margin-bottom: 35%;
	right: -195px !important;
	z-index: 15000;
}}
/* ==========================================================
   Wagner Motoren – 4 Schritte zum Austauschmotor

   Desktop: 4 Karten nebeneinander
   Tablet:  2 Karten pro Reihe
   Mobil:   1 Karte pro Reihe
   ========================================================== */
.wm-austauschmotor-image {
  width: 100%;
  max-width: 960px;
  margin: 28px auto;
}

.wm-austauschmotor-image img {
  display: block;
  width: 100%;
  height: auto;
}

.wm-austauschmotor-image figcaption {
  margin-top: 9px;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.wm-steps {
  --wm-steps-blue: #000091;
  --wm-steps-dark: #00004f;
  --wm-steps-light: #1450ff;
  --wm-steps-text: #11162a;
  --wm-steps-muted: #667085;
  --wm-steps-border: #e2e6ee;

  position: relative;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  overflow: hidden;

  color: var(--wm-steps-text);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(20, 80, 255, 0.08),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f8fc 100%
    );

  border-top: 1px solid rgba(0, 0, 145, 0.08);
  border-bottom: 1px solid rgba(0, 0, 145, 0.1);
}


/* Innerer Bereich */

.wm-steps__inner {
  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    clamp(56px, 5vw, 90px)
    clamp(50px, 6vw, 120px)
    clamp(70px, 6vw, 110px);
}


/* Überschrift */

.wm-steps__header {
  width: min(100%, 980px);

  margin: 0 0 clamp(38px, 4vw, 58px);

  text-align: left;
}

.wm-steps__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 18px;

  color: var(--wm-steps-blue);

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.wm-steps__eyebrow::before {
  content: "";

  width: 42px;
  height: 3px;

  flex: 0 0 auto;

  background: var(--wm-steps-light);

  box-shadow: 0 0 14px rgba(20, 80, 255, 0.35);
}

.wm-steps__header h2 {
  margin: 0;
  padding: 0;

  color: var(--wm-steps-dark);

  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 950;
  line-height: 1.03;
  letter-spacing: -0.035em;

  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}


/* Gesamtes Schrittraster */

.wm-steps__grid {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    54px
    minmax(0, 1fr)
    54px
    minmax(0, 1fr)
    54px
    minmax(0, 1fr);

  align-items: stretch;
}


/* Einzelne Karte */

.wm-step-card {
  position: relative;
  isolation: isolate;

  min-width: 0;
  min-height: 285px;

  padding: clamp(28px, 2.2vw, 38px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--wm-steps-border);
  border-radius: 4px;

  box-shadow: 0 12px 30px rgba(0, 0, 70, 0.07);

  transition:
    transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}


/* Animierte obere Linie */

.wm-step-card::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 4px;

  background: linear-gradient(
    90deg,
    var(--wm-steps-blue),
    var(--wm-steps-light)
  );

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 320ms ease;
}


/* Dezenter Lichtschein */

.wm-step-card::after {
  content: "";

  position: absolute;
  top: -90px;
  right: -90px;

  z-index: -1;

  width: 220px;
  height: 220px;

  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(20, 80, 255, 0.11),
    transparent 70%
  );
}

.wm-step-card:hover,
.wm-step-card:focus-within {
  z-index: 2;

  border-color: rgba(20, 80, 255, 0.35);

  box-shadow: 0 20px 44px rgba(0, 0, 91, 0.13);

  transform: translateY(-5px);
}

.wm-step-card:hover::before,
.wm-step-card:focus-within::before {
  transform: scaleX(1);
}


/* Schrittzahl */

.wm-step-card__number {
  position: absolute;
  top: 18px;
  left: 18px;

  z-index: 3;

  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: linear-gradient(
    135deg,
    var(--wm-steps-blue),
    var(--wm-steps-light)
  );

  border: 4px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 0 0 1px rgba(0, 0, 145, 0.14),
    0 8px 20px rgba(0, 0, 145, 0.22);

  font-size: 16px;
  font-weight: 950;
  line-height: 1;

  transition:
    transform 320ms ease,
    box-shadow 320ms ease;
}

.wm-step-card:hover .wm-step-card__number,
.wm-step-card:focus-within .wm-step-card__number {
  transform: scale(1.08);

  box-shadow:
    0 0 0 1px rgba(20, 80, 255, 0.22),
    0 12px 26px rgba(0, 0, 145, 0.3);
}


/* Icon */

.wm-step-card__icon {
  width: 72px;
  height: 72px;

  margin: 14px auto 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-steps-blue);

  background: linear-gradient(
    135deg,
    rgba(0, 0, 145, 0.06),
    rgba(20, 80, 255, 0.12)
  );

  border: 1px solid rgba(0, 0, 145, 0.15);
  border-radius: 50%;

  font-size: 31px;
  line-height: 1;

  transition:
    color 320ms ease,
    background 320ms ease,
    transform 320ms ease;
}

.wm-step-card:hover .wm-step-card__icon,
.wm-step-card:focus-within .wm-step-card__icon {
  color: #ffffff;

  background: linear-gradient(
    135deg,
    var(--wm-steps-blue),
    var(--wm-steps-light)
  );

  transform: rotate(-5deg) scale(1.05);
}


/* Kartentexte */

.wm-step-card h3 {
  width: 100%;

  margin: 0 0 14px;
  padding: 0 0 14px;

  position: relative;

  color: var(--wm-steps-blue);

  font-size: clamp(17px, 1.2vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.015em;

  text-align: left;
  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wm-step-card h3::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 40px;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--wm-steps-light),
    transparent
  );
}

.wm-step-card p {
  margin: 0;

  color: var(--wm-steps-muted);

  font-size: clamp(15px, 0.95vw, 17px);
  font-weight: 500;
  line-height: 1.62;

  text-align: left;
}


/* Pfeile zwischen den Karten */

.wm-step-arrow {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(0, 0, 145, 0.24);

  font-size: 34px;
  line-height: 1;

  transition:
    color 320ms ease,
    transform 320ms ease;
}

.wm-steps__grid:hover .wm-step-arrow {
  color: rgba(20, 80, 255, 0.55);
}

.wm-step-arrow i,
.wm-step-arrow svg {
  transition: transform 320ms ease;
}

.wm-step-arrow:hover i,
.wm-step-arrow:hover svg {
  transform: translateX(5px);
}


/* ==========================================================
   Tablet: zwei Karten pro Reihe
   ========================================================== */

@media (max-width: 1150px) {

  .wm-steps__inner {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .wm-steps__grid {
    grid-template-columns:
      minmax(0, 1fr)
      48px
      minmax(0, 1fr);

    gap: 24px 0;
  }

  .wm-step-card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .wm-step-arrow:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1;
  }

  .wm-step-card:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
  }

  .wm-step-arrow:nth-of-type(2) {
    display: none;
  }

  .wm-step-card:nth-of-type(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .wm-step-arrow:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .wm-step-card:nth-of-type(4) {
    grid-column: 3;
    grid-row: 2;
  }

  .wm-step-card {
    min-height: 270px;
  }

}


/* ==========================================================
   Smartphone: eine Karte pro Reihe
   ========================================================== */

@media (max-width: 700px) {

  .wm-steps__inner {
    padding-top: 48px;

    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-bottom: 70px;

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-steps__header {
    margin-bottom: 34px;
  }

  .wm-steps__eyebrow {
    font-size: 12px;
  }

  .wm-steps__eyebrow::before {
    width: 32px;
  }

  .wm-steps__header h2 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .wm-steps__grid {
    width: min(100%, 500px);

    margin-right: auto;
    margin-left: auto;

    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .wm-step-card {
    width: 100%;
    min-height: 0;

    padding: 28px 22px;
  }

  .wm-step-card__number {
    top: 16px;
    left: 16px;

    width: 40px;
    height: 40px;
  }

  .wm-step-card__icon {
    width: 66px;
    height: 66px;

    margin-bottom: 24px;

    font-size: 28px;
  }

  .wm-step-arrow {
    height: 34px;

    display: flex !important;

    font-size: 26px;

    transform: rotate(90deg);
  }

}


/* Sehr kleine Smartphones */

@media (max-width: 390px) {

  .wm-step-card {
    padding: 26px 18px;
  }

  .wm-step-card h3 {
    font-size: 17px;
  }

  .wm-step-card p {
    font-size: 14.5px;
  }

}


/* Bewegungsreduzierung */

@media (prefers-reduced-motion: reduce) {

  .wm-step-card,
  .wm-step-card::before,
  .wm-step-card__number,
  .wm-step-card__icon,
  .wm-step-arrow,
  .wm-step-arrow i,
  .wm-step-arrow svg {
    transition: none !important;
  }

  .wm-step-card:hover,
  .wm-step-card:focus-within,
  .wm-step-card:hover .wm-step-card__number,
  .wm-step-card:focus-within .wm-step-card__number,
  .wm-step-card:hover .wm-step-card__icon,
  .wm-step-card:focus-within .wm-step-card__icon,
  .wm-step-arrow:hover i,
  .wm-step-arrow:hover svg {
    transform: none !important;
  }

}
   Innerer Bereich – geringerer Abstand oben und unten
   ========================================================== */

.wm-steps__inner {
  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    clamp(28px, 3vw, 44px)
    clamp(50px, 6vw, 120px)
    clamp(34px, 3.5vw, 52px);

}


/* ==========================================================
   Überschrift – keine Begrenzung der Breite
   ========================================================== */

.wm-steps__header {
  width: 100%;
  max-width: none;

  margin: 0 0 clamp(26px, 2.8vw, 40px);

  text-align: left;
}

.wm-steps__header h2 {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  color: var(--wm-steps-dark);

  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 950;
  line-height: 1.03;
  letter-spacing: -0.035em;

  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}


/* ==========================================================
   Smartphone – ebenfalls deutlich geringere Abstände
   ========================================================== */

@media (max-width: 700px) {

  .wm-steps__inner {
    padding-top: 28px;

    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-bottom: 38px;

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-steps__header {
    width: 100%;
    max-width: none;

    margin-bottom: 26px;
  }

  .wm-steps__eyebrow {
    font-size: 12px;
  }

  .wm-steps__eyebrow::before {
    width: 32px;
  }

  .wm-steps__header h2 {
    width: 100%;
    max-width: none;

    font-size: clamp(32px, 9vw, 44px);
  }

  .wm-steps__grid {
    width: min(100%, 500px);

    margin-right: auto;
    margin-left: auto;

    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .wm-step-card {
    width: 100%;
    min-height: 0;

    padding: 28px 22px;
  }

  .wm-step-card__number {
    top: 16px;
    left: 16px;

    width: 40px;
    height: 40px;
  }

  .wm-step-card__icon {
    width: 66px;
    height: 66px;

    margin-bottom: 24px;

    font-size: 28px;
  }

  .wm-step-arrow {
    height: 34px;

    display: flex !important;

    font-size: 26px;

    transform: rotate(90deg);
  }
}
/* ==========================================================
   Innerer Bereich – geringerer Abstand oben und unten
   ========================================================== */

.wm-steps__inner {
  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    clamp(28px, 3vw, 44px)
    clamp(50px, 6vw, 120px)
    clamp(34px, 3.5vw, 52px);
}


/* ==========================================================
   Überschrift – keine Begrenzung der Breite
   ========================================================== */

.wm-steps__header {
  width: 100%;
  max-width: none;

  margin: 0 0 clamp(26px, 2.8vw, 40px);

  text-align: left;
}

.wm-steps__header h2 {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  color: var(--wm-steps-dark);

  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 950;
  line-height: 1.03;
  letter-spacing: -0.035em;

  text-transform: uppercase;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}


/* ==========================================================
   Smartphone – ebenfalls deutlich geringere Abstände
   ========================================================== */

@media (max-width: 700px) {

  .wm-steps__inner {
    padding-top: 28px;

    padding-right:
      calc(18px + env(safe-area-inset-right, 0px));

    padding-bottom: 38px;

    padding-left:
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-steps__header {
    width: 100%;
    max-width: none;

    margin-bottom: 26px;
  }

  .wm-steps__eyebrow {
    font-size: 12px;
  }

  .wm-steps__eyebrow::before {
    width: 32px;
  }

  .wm-steps__header h2 {
    width: 100%;
    max-width: none;

    font-size: clamp(32px, 9vw, 44px);
  }

  .wm-steps__grid {
    width: min(100%, 500px);

    margin-right: auto;
    margin-left: auto;

    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .wm-step-card {
    width: 100%;
    min-height: 0;

    padding: 28px 22px;
  }

  .wm-step-card__number {
    top: 16px;
    left: 16px;

    width: 40px;
    height: 40px;
  }

  .wm-step-card__icon {
    width: 66px;
    height: 66px;

    margin-bottom: 24px;

    font-size: 28px;
  }

  .wm-step-arrow {
    height: 34px;

    display: flex !important;

    font-size: 26px;

    transform: rotate(90deg);
  }
}
/* ==========================================================
   4-Schritte-Bereich – sehr schmale Außenabstände
   ========================================================== */

/* Joomla-/Astroid-Abstände um das Modul entfernen */
.astroid-module-position:has(.wm-steps),
.moduletable:has(.wm-steps),
.mod-custom:has(> .wm-steps) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Abschnitt selbst ohne zusätzliche Außenabstände */
.wm-steps {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Desktop und Tablet */
.wm-steps__inner {
  padding-top: 14px !important;
  padding-bottom: 16px !important;
}

/* Smartphone */
@media (max-width: 700px) {
  .wm-steps__inner {
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
}
/* ==========================================================
   Wagner Motoren – Kontaktkacheln
   Dezenter blauer Schleier oben rechts
   ========================================================== */

.rsform-block-kontaktdaten
.wm-contact-cards
.wm-contact-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse 58% 48% at 100% 0%,
      rgba(20, 80, 255, 0.09) 0%,
      rgba(20, 80, 255, 0.055) 24%,
      rgba(20, 80, 255, 0.022) 44%,
      transparent 68%
    ),
    #ffffff !important;
}


/* Sehr weicher zusätzlicher Lichtschein */

.rsform-block-kontaktdaten
.wm-contact-cards
.wm-contact-card::after {
  content: "";

  position: absolute;
  top: -85px;
  right: -85px;
  z-index: 0;

  width: 210px;
  height: 210px;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(20, 80, 255, 0.055) 0%,
      rgba(20, 80, 255, 0.025) 42%,
      transparent 72%
    );

  opacity: 0.8;

  transition:
    opacity 320ms ease,
    transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1);
}


/* Inhalte über dem Schleier */

.rsform-block-kontaktdaten
.wm-contact-cards
.wm-contact-card > * {
  position: relative;
  z-index: 1;
}


/* Hover nur minimal verstärken */

.rsform-block-kontaktdaten
.wm-contact-cards
.wm-contact-card:hover::after,
.rsform-block-kontaktdaten
.wm-contact-cards
.wm-contact-card:focus-within::after {
  opacity: 1;
  transform: scale(1.05);
}


/* Tablet */

@media (max-width: 1100px) {

  .rsform-block-kontaktdaten
  .wm-contact-cards
  .wm-contact-card {
    background:
      radial-gradient(
        ellipse 54% 44% at 100% 0%,
        rgba(20, 80, 255, 0.08) 0%,
        rgba(20, 80, 255, 0.04) 30%,
        rgba(20, 80, 255, 0.015) 48%,
        transparent 68%
      ),
      #ffffff !important;
  }

}


/* Smartphone */

@media (max-width: 599px) {

  .rsform-block-kontaktdaten
  .wm-contact-cards
  .wm-contact-card {
    background:
      radial-gradient(
        ellipse 50% 40% at 100% 0%,
        rgba(20, 80, 255, 0.07) 0%,
        rgba(20, 80, 255, 0.03) 34%,
        transparent 66%
      ),
      #ffffff !important;
  }

  .rsform-block-kontaktdaten
  .wm-contact-cards
  .wm-contact-card::after {
    top: -70px;
    right: -70px;

    width: 175px;
    height: 175px;
  }

}


/* Bewegungsreduzierung */

@media (prefers-reduced-motion: reduce) {

  .rsform-block-kontaktdaten
  .wm-contact-cards
  .wm-contact-card::after {
    transition: none !important;
  }

  .rsform-block-kontaktdaten
  .wm-contact-cards
  .wm-contact-card:hover::after,
  .rsform-block-kontaktdaten
  .wm-contact-cards
  .wm-contact-card:focus-within::after {

    transform: none !important;
  }

}
/* ==========================================================
   Wagner Motoren – Motorsuche und JFilters

   - gleiche linke Ausrichtung wie der Seiteninhalt
   - keine Hintergrundflächen
   - Wagner-Farben
   - passende Hover- und Fokuszustände
   - vollständig responsiv
   ========================================================== */


/* ----------------------------------------------------------
   1. Gemeinsame Ausrichtung
   ---------------------------------------------------------- */

.engine-selection-position {
  box-sizing: border-box;

  width: 100%;
  max-width: none;

  margin: 0;
  padding-right: var(--wm-start-content-gutter);
  padding-left: var(--wm-start-content-gutter);

  color: var(--wm-text, #11162a);
  background: transparent !important;
}


/* Astroid-Modulrahmen zurücksetzen */

.engine-selection-position.moduletable,
.engine-selection-position .mod-finder,
.engine-selection-position .mod-jfilters_filters,
.engine-selection-position .jfilters-filters-container {
  margin-right: 0;
  margin-left: 0;

  background: transparent !important;
  border: 0;
  box-shadow: none;
}


/* ==========================================================
   2. Motorsuche
   ========================================================== */

.engine-selection-position search {
  display: block;

  width: 100%;
  max-width: 760px;

  margin: 0 0 clamp(32px, 4vw, 54px);
  padding: 0;

  background: transparent !important;
}


/* Suchformular */

.engine-selection-position .mod-finder {
  position: relative;

  width: 100%;
  margin: 0;
  padding: 0;

  background: transparent !important;
}


/* Beschreibung über dem Suchfeld */

.engine-selection-position .mod-finder label.finder {
  display: block;

  width: 100%;
  margin: 0 0 12px;
  padding: 0;

  color: var(--wm-blue-dark, #00004f);

  font-size: clamp(15px, 1vw, 17px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.01em;

  text-align: left;
}


/* Suchfeld */

.engine-selection-position
.mod-finder
input.js-finder-search-query {
  box-sizing: border-box;

  width: 100%;
  min-height: 58px;

  margin: 0;
  padding: 15px 54px 15px 18px;

  color: var(--wm-text, #11162a);
  background: transparent !important;

  border: 1px solid rgba(0, 0, 145, 0.28);
  border-radius: 4px;

  box-shadow: none;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;

  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}


/* Suchsymbol rechts im Feld */

.engine-selection-position .mod-finder::after {
  content: "\f002";

  position: absolute;
  right: 19px;
  bottom: 18px;

  pointer-events: none;

  color: var(--wm-blue, #000091);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
  line-height: 1;

  transition:
    color 220ms ease,
    transform 220ms ease;
}


/* Platzhalter */

.engine-selection-position
.mod-finder
input.js-finder-search-query::placeholder {
  color: rgba(17, 22, 42, 0.52);
  opacity: 1;
}


/* Hover */

.engine-selection-position
.mod-finder
input.js-finder-search-query:hover {
  border-color: var(--wm-blue-light, #1450ff);

  box-shadow:
    0 0 0 1px rgba(20, 80, 255, 0.08);
}


/* Tastaturfokus */

.engine-selection-position
.mod-finder
input.js-finder-search-query:focus {
  outline: none;

  color: var(--wm-blue-dark, #00004f);

  border-color: var(--wm-blue-light, #1450ff);

  box-shadow:
    0 0 0 4px rgba(20, 80, 255, 0.12);
}

.engine-selection-position
.mod-finder:focus-within::after {
  color: var(--wm-blue-light, #1450ff);
  transform: scale(1.08);
}


/* ==========================================================
   3. Filteraufbau
   ========================================================== */

.engine-selection-position .mod-jfilters_filters {
  width: 100%;

  margin: 0;
  padding: 0;

  background: transparent !important;
}



/* Filter nebeneinander */

.engine-selection-position .jfilters-filters-container {
  display: grid;
  grid-template-columns:
    minmax(190px, 0.8fr)
    minmax(260px, 1.6fr)
    minmax(190px, 0.8fr);

  align-items: start;
  gap: clamp(24px, 3vw, 52px);

  width: 100%;
  margin: 0;
  padding: 0;

  background: transparent !important;
}


/* Einzelner Filterbereich */

.engine-selection-position .jfilters-filter-container {
  min-width: 0;

  margin: 0;
  padding: 0;

  background: transparent !important;
  border: 0;
  box-shadow: none;
}


/* ==========================================================
   4. Filterüberschriften
   ========================================================== */

.engine-selection-position .jfilters-filter-header {
  margin: 0 0 18px;
  padding: 0;

  background: transparent !important;
}


/* Aufklappschaltfläche */

.engine-selection-position
.jfilters-filter-header__toggle {
  position: relative;

  width: 100%;
  min-height: 48px;

  margin: 0;
  padding: 0 34px 12px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  color: var(--wm-blue, #000091);
  background: transparent !important;

  border: 0;
  border-bottom: 2px solid rgba(0, 0, 145, 0.16);
  border-radius: 0;

  box-shadow: none;

  font-size: clamp(16px, 1.15vw, 20px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.035em;

  text-align: left;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 220ms ease,
    border-color 220ms ease;
}


/* Kurze blaue Linie unter der Überschrift */

.engine-selection-position
.jfilters-filter-header__toggle::after {
  content: "";

  position: absolute;
  bottom: -2px;
  left: 0;

  width: 52px;
  height: 2px;

  background: var(--wm-blue-light, #1450ff);

  transition: width 220ms ease;
}


/* Pfeil */

.engine-selection-position
.jfilters-filter-header__toggle-icon {
  position: absolute;
  top: 50%;
  right: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-blue, #000091);

  font-size: 22px;
  line-height: 1;

  transform: translateY(-60%);

  transition:
    color 220ms ease,
    transform 220ms ease;
}


/* Geöffneter Filter */

.engine-selection-position
.jfilters-filter-header__toggle[aria-expanded="true"]
.jfilters-filter-header__toggle-icon {
  transform: translateY(-60%) rotate(180deg);
}


/* Überschrift Hover und Fokus */

.engine-selection-position
.jfilters-filter-header__toggle:hover,
.engine-selection-position
.jfilters-filter-header__toggle:focus-visible {
  color: var(--wm-blue-light, #1450ff);
  border-bottom-color: rgba(20, 80, 255, 0.34);
}

.engine-selection-position
.jfilters-filter-header__toggle:hover::after,
.engine-selection-position
.jfilters-filter-header__toggle:focus-visible::after {
  width: 82px;
}

.engine-selection-position
.jfilters-filter-header__toggle:hover
.jfilters-filter-header__toggle-icon,
.engine-selection-position
.jfilters-filter-header__toggle:focus-visible
.jfilters-filter-header__toggle-icon {
  color: var(--wm-blue-light, #1450ff);
}

.engine-selection-position
.jfilters-filter-header__toggle:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.18);
  outline-offset: 4px;
}


/* ==========================================================
   5. Filterlisten
   ========================================================== */

.engine-selection-position
.jfilters-filter-container__inner {
  width: 100%;

  margin: 0;
  padding: 0;

  background: transparent !important;
}


/* Listen zurücksetzen */

.engine-selection-position .jfilters-filter-list {
  width: 100%;

  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;

  background: transparent !important;

  list-style: none;
}


/* Modellliste bekommt einen begrenzten sichtbaren Bereich */

.engine-selection-position
#jfilters-filter-container__inner-556-65
.jfilters-filter-list {
  max-height: 320px;
  padding-right: 10px;

  overflow-y: auto;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(0, 0, 145, 0.3)
    transparent;
}


/* WebKit-Scrollbar */

.engine-selection-position
#jfilters-filter-container__inner-556-65
.jfilters-filter-list::-webkit-scrollbar {
  width: 6px;
}

.engine-selection-position
#jfilters-filter-container__inner-556-65
.jfilters-filter-list::-webkit-scrollbar-track {
  background: transparent;
}

.engine-selection-position
#jfilters-filter-container__inner-556-65
.jfilters-filter-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 145, 0.28);
  border-radius: 20px;
}


/* Listeneintrag */

.engine-selection-position
.jfilters-filter-list__item {
  min-width: 0;

  margin: 0;
  padding: 0;

  background: transparent !important;
}


/* Filterlink */

.engine-selection-position
.jfilters-item-link--button {
  min-height: 40px;

  padding: 9px 13px;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  color: var(--wm-blue-dark, #00004f) !important;
  background: transparent !important;

  border: 1px solid rgba(0, 0, 145, 0.2);
  border-radius: 3px;

  box-shadow: none;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;

  text-align: left;
  text-decoration: none !important;

  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}


/* Inhalt des Filterlinks */

.engine-selection-position
.jfilters-item__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-width: 0;
}


/* Anzahl */

.engine-selection-position
.jfilters-item__counter {
  color: var(--wm-muted, #667085);

  font-size: 12px;
  font-weight: 700;

  transition: color 220ms ease;
}


/* Hover */

.engine-selection-position
.jfilters-item-link--button:hover {
  color: var(--wm-blue-light, #1450ff) !important;
  background: transparent !important;

  border-color: var(--wm-blue-light, #1450ff);

  box-shadow:
    0 5px 14px rgba(0, 0, 145, 0.1);

  transform: translateY(-2px);
}

.engine-selection-position
.jfilters-item-link--button:hover
.jfilters-item__counter {
  color: var(--wm-blue-light, #1450ff);
}


/* Fokus */

.engine-selection-position
.jfilters-item-link--button:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.2);
  outline-offset: 2px;

  color: var(--wm-blue-light, #1450ff) !important;
  border-color: var(--wm-blue-light, #1450ff);
}


/* Aktiver Filter */

.engine-selection-position
.jfilters-filter-list__item.active
.jfilters-item-link--button,
.engine-selection-position
.jfilters-item-link--button.is-active,
.engine-selection-position
.jfilters-item-link--button[aria-current="true"] {
  color: var(--wm-blue, #000091) !important;
  background: transparent !important;

  border-color: var(--wm-blue, #000091);

  box-shadow:
    inset 3px 0 0 var(--wm-blue-light, #1450ff);
}


/* ==========================================================
   6. Tablet
   ========================================================== */

@media (max-width: 1100px) {

  .engine-selection-position {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .engine-selection-position
  .jfilters-filters-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .engine-selection-position
  .jfilters-filter-container:last-child {
    grid-column: 1 / -1;
  }

}


/* ==========================================================
   7. Smartphone
   ========================================================== */

@media (max-width: 650px) {

  .engine-selection-position {
    padding-right:
      calc(40px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(40px + env(safe-area-inset-left, 0px));
  }

  .engine-selection-position search {
    max-width: none;
    margin-bottom: 38px;
  }

  .engine-selection-position
  .mod-finder
  input.js-finder-search-query {
    min-height: 54px;
    padding-right: 48px;
    padding-left: 15px;

    font-size: 15px;
  }

  .engine-selection-position
  .mod-finder::after {
    right: 16px;
    bottom: 17px;

    font-size: 18px;
  }

  .engine-selection-position
  .jfilters-filters-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .engine-selection-position
  .jfilters-filter-container:last-child {
    grid-column: auto;
  }

  .engine-selection-position
  .jfilters-item-link--button {
    min-height: 38px;

    padding: 8px 11px;

    font-size: 13.5px;
  }

}


/* Sehr kleine Smartphones */

@media (max-width: 390px) {

  .engine-selection-position {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .engine-selection-position
  .jfilters-filter-list {
    gap: 7px;
  }

}


/* ==========================================================
   8. Bewegungsreduzierung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .engine-selection-position
  .mod-finder
  input.js-finder-search-query,

  .engine-selection-position
  .mod-finder::after,

  .engine-selection-position
  .jfilters-filter-header__toggle,

  .engine-selection-position
  .jfilters-filter-header__toggle::after,

  .engine-selection-position
  .jfilters-filter-header__toggle-icon,

  .engine-selection-position
  .jfilters-item-link--button,

  .engine-selection-position
  .jfilters-item__counter {
    transition: none !important;
  }

  .engine-selection-position
  .jfilters-item-link--button:hover,

  .engine-selection-position
  .mod-finder:focus-within::after {
    transform: none !important;
  }

}
/* ==========================================================
   Wagner Motoren – Motorsuche und Finder-Ergebnisse
   Ergänzung / Korrektur
   ========================================================== */


/* ----------------------------------------------------------
   1. Defektes Font-Awesome-Symbol entfernen
   ---------------------------------------------------------- */

.engine-selection-position .mod-finder::after {
  content: none !important;
  display: none !important;
}


/* Lupe als unabhängiges SVG */

.engine-selection-position .mod-finder::before {
  content: "";

  position: absolute;
  right: 18px;
  bottom: 17px;
  z-index: 2;

  width: 22px;
  height: 22px;

  pointer-events: none;

  background-color: var(--wm-blue, #000091);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 1 0 3.98 11.64l5.44 5.44a1 1 0 0 0 1.42-1.42l-5.44-5.44A6.5 6.5 0 0 0 9.5 3Zm0 2a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 1 0 3.98 11.64l5.44 5.44a1 1 0 0 0 1.42-1.42l-5.44-5.44A6.5 6.5 0 0 0 9.5 3Zm0 2a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  transition:
    background-color 220ms ease,
    transform 220ms ease;
}

.engine-selection-position .mod-finder:focus-within::before {
  background-color: var(--wm-blue-light, #1450ff);
  transform: scale(1.08);
}


/* ----------------------------------------------------------
   2. Suche sicher positionieren
   ---------------------------------------------------------- */

.engine-selection-position .mod-finder {
  position: relative;
}

.engine-selection-position
.mod-finder
input.js-finder-search-query {
  padding-right: 56px !important;
}


/* ==========================================================
   3. Joomla-Finder-Ergebnisse
   ========================================================== */

.com-finder.finder {
  box-sizing: border-box;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding-right: var(--wm-start-content-gutter);
  padding-left: var(--wm-start-content-gutter);

  color: var(--wm-text, #11162a);
  background: transparent !important;
}


/* Ergebniscontainer */

.com-finder .com-finder__results {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  background: transparent !important;
}


/* Ergebnisliste zurücksetzen */

.com-finder .com-finder__results-list {
  width: 100%;

  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;

  background: transparent !important;

  list-style: none;
}


/* Einzelnes Suchergebnis */

.com-finder .result__item {
  position: relative;
  min-width: 0;

  margin: 0;
  padding: 0;

  background: transparent !important;

  border: 0;
  border-bottom: 1px solid rgba(0, 0, 145, 0.14);

  box-shadow: none;

  transition:
    border-color 220ms ease,
    transform 220ms ease;
}


/* Ergebnisüberschrift */

.com-finder .result__title {
  width: 100%;

  margin: 0;
  padding: 0;

  font-size: inherit;
  line-height: inherit;
}


/* Ergebnislink */

.com-finder .result__title-link {
  position: relative;

  width: 100%;
  min-height: 62px;

  margin: 0;
  padding: 17px 42px 17px 0;

  display: flex;
  align-items: center;

  color: var(--wm-blue-dark, #00004f) !important;
  background: transparent !important;

  border: 0;
  box-shadow: none;

  font-size: clamp(15px, 1vw, 17px);
  font-weight: 800;
  line-height: 1.4;

  text-align: left;
  text-decoration: none !important;

  transition:
    color 220ms ease,
    padding-left 220ms ease;
}


/* Pfeil rechts */

.com-finder .result__title-link::after {
  content: "";

  position: absolute;
  top: 50%;
  right: 7px;

  width: 10px;
  height: 10px;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform:
    translateY(-50%)
    rotate(45deg);

  transition:
    right 220ms ease,
    border-color 220ms ease;
}


/* Kleine blaue Linie links */

.com-finder .result__title-link::before {
  content: "";

  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 0;

  width: 3px;

  background: var(--wm-blue-light, #1450ff);

  opacity: 0;
  transform: scaleY(0.45);
  transform-origin: center;

  transition:
    opacity 220ms ease,
    transform 220ms ease;
}


/* Hover */

.com-finder .result__item:hover {
  border-bottom-color: var(--wm-blue-light, #1450ff);
  transform: translateY(-2px);
}

.com-finder .result__title-link:hover {
  color: var(--wm-blue-light, #1450ff) !important;
  background: transparent !important;

  padding-left: 14px;
}

.com-finder .result__title-link:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.com-finder .result__title-link:hover::after {
  right: 1px;
}


/* Tastaturfokus */

.com-finder .result__title-link:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.2);
  outline-offset: 3px;

  color: var(--wm-blue-light, #1450ff) !important;
}


/* Textspan vollständig linksbündig */

.com-finder .result__title-text {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  text-align: left;

  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}


/* ==========================================================
   4. Seitennavigation
   ========================================================== */

.com-finder .com-finder__navigation,
.com-finder .search-pagination {
  width: 100%;

  margin: 34px 0 0;
  padding: 0;

  background: transparent !important;
}


/* Joomla-Pagination */

.com-finder .pagination {
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;

  list-style: none;
}

.com-finder .pagination a,
.com-finder .pagination span {
  min-width: 42px;
  min-height: 42px;

  padding: 9px 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-blue, #000091) !important;
  background: transparent !important;

  border: 1px solid rgba(0, 0, 145, 0.22);
  border-radius: 3px;

  text-decoration: none !important;

  transition:
    color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.com-finder .pagination a:hover,
.com-finder .pagination a:focus-visible {
  color: var(--wm-blue-light, #1450ff) !important;
  background: transparent !important;

  border-color: var(--wm-blue-light, #1450ff);

  transform: translateY(-2px);
}

.com-finder .pagination .active span,
.com-finder .pagination span.current {
  color: #ffffff !important;
  background: var(--wm-blue, #000091) !important;
  border-color: var(--wm-blue, #000091);
}


/* ==========================================================
   5. Tablet
   ========================================================== */

@media (max-width: 1100px) {

  .com-finder.finder {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .com-finder .com-finder__results-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

}


/* ==========================================================
   6. Smartphone
   ========================================================== */

@media (max-width: 650px) {

  .com-finder.finder {
    padding-right:
      calc(40px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(40px + env(safe-area-inset-left, 0px));
  }

  .com-finder .result__title-link {
    min-height: 58px;

    padding-top: 15px;
    padding-right: 32px;
    padding-bottom: 15px;

    font-size: 15px;
  }

  .com-finder .result__title-link::before {
    top: 14px;
    bottom: 14px;
  }

}


/* Sehr kleine Smartphones */

@media (max-width: 390px) {

  .com-finder.finder {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px));

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px));
  }

  .com-finder .result__title-link {
    font-size: 14.5px;
  }

}


/* ==========================================================
   7. Bewegungsreduzierung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .engine-selection-position .mod-finder::before,
  .com-finder .result__item,
  .com-finder .result__title-link,
  .com-finder .result__title-link::before,
  .com-finder .result__title-link::after,
  .com-finder .pagination a,
  .com-finder .pagination span {
    transition: none !important;
  }

  .engine-selection-position .mod-finder:focus-within::before,
  .com-finder .result__item:hover,
  .com-finder .pagination a:hover,
  .com-finder .pagination a:focus-visible {
    transform: none !important;
  }

}
/* ==========================================================
   Wagner Motoren – Korrektur Motorsuche und Filter
   Linke Kante + Löschen-Link
   ========================================================== */


/* ----------------------------------------------------------
   Suche und Filter am vorhandenen Astroid-Raster ausrichten
   ---------------------------------------------------------- */

.Pagecontent .engine-selection-position {
  box-sizing: border-box;

  width: 100%;
  max-width: none;

  margin-right: 0 !important;
  margin-left: 0 !important;

  padding-right: 0 !important;
  padding-left: 0 !important;

  background: transparent !important;
}


/* Auch innere Modulcontainer vollständig links ausrichten */

.Pagecontent .engine-selection-position > search,
.Pagecontent .engine-selection-position .mod-finder,
.Pagecontent .engine-selection-position .mod-jfilters_filters,
.Pagecontent .engine-selection-position .jfilters-filters-container,
.Pagecontent .engine-selection-position .jfilters-filter-container {
  margin-right: 0 !important;
  margin-left: 0 !important;

  padding-right: 0;
  padding-left: 0;

  background: transparent !important;
}


/* Suchbereich nicht künstlich schmaler oder versetzt anzeigen */

.Pagecontent .engine-selection-position search {
  width: 100%;
  max-width: none;

  margin-right: 0;
  margin-left: 0;
}


/* ----------------------------------------------------------
   Filterüberschriften und Listen linksbündig
   ---------------------------------------------------------- */

.Pagecontent
.engine-selection-position
.jfilters-filter-header,

.Pagecontent
.engine-selection-position
.jfilters-filter-header__toggle,

.Pagecontent
.engine-selection-position
.jfilters-filter-container__inner,

.Pagecontent
.engine-selection-position
.jfilters-filter-list {
  margin-left: 0 !important;
}


/* ==========================================================
   Löschen-Link im Wagner-Motoren-Design
   ========================================================== */

.Pagecontent
.engine-selection-position
.jfilters-item-link--clear {
  width: fit-content;
  min-height: 38px;

  margin: 0 0 14px;
  padding: 6px 0;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: var(--wm-blue, #000091) !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 0;

  box-shadow: none !important;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;

  text-align: left;
  text-decoration: none !important;

  transition:
    color 220ms ease,
    transform 220ms ease;
}


/* X-Zeichen */

.Pagecontent
.engine-selection-position
.jfilters-item-link--clear > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-blue-light, #1450ff);

  font-size: 20px;
  font-weight: 400;
  line-height: 1;

  transition:
    color 220ms ease,
    transform 220ms ease;
}


/* Mouseover */

.Pagecontent
.engine-selection-position
.jfilters-item-link--clear:hover {
  color: var(--wm-blue-light, #1450ff) !important;
  background: transparent !important;

  transform: translateX(3px);
}

.Pagecontent
.engine-selection-position
.jfilters-item-link--clear:hover > span {
  color: var(--wm-blue-light, #1450ff);
  transform: rotate(90deg);
}


/* Tastaturfokus */

.Pagecontent
.engine-selection-position
.jfilters-item-link--clear:focus-visible {
  color: var(--wm-blue-light, #1450ff) !important;

  outline: 3px solid rgba(20, 80, 255, 0.18);
  outline-offset: 3px;
}


/* Besucht-Zustand nicht violett oder rot darstellen */

.Pagecontent
.engine-selection-position
.jfilters-item-link--clear:visited {
  color: var(--wm-blue, #000091) !important;
}


/* Joomla- oder Template-Regeln für Gefahr-/Löschfarben überschreiben */

.Pagecontent
.engine-selection-position
a.jfilters-item-link--clear,
.Pagecontent
.engine-selection-position
a.jfilters-item-link--clear:not(.btn) {
  color: var(--wm-blue, #000091) !important;
  background-color: transparent !important;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 650px) {

  .Pagecontent .engine-selection-position {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .Pagecontent
  .engine-selection-position
  .jfilters-item-link--clear {
    margin-bottom: 12px;
    font-size: 14px;
  }

}


/* Bewegungsreduzierung */

@media (prefers-reduced-motion: reduce) {

  .Pagecontent
  .engine-selection-position
  .jfilters-item-link--clear,

  .Pagecontent
  .engine-selection-position
  .jfilters-item-link--clear > span {
    transition: none !important;
  }

  .Pagecontent
  .engine-selection-position
  .jfilters-item-link--clear:hover,

  .Pagecontent
  .engine-selection-position
  .jfilters-item-link--clear:hover > span {
    transform: none !important;
  }

}
/* ==========================================================
   Wagner Motoren – endgültige Ausrichtung Motorsuche/Filter
   ========================================================== */

/* Desktop: gleiche linke Kante wie Breadcrumb und Artikel */
@media (min-width: 1576px) {

  .Pagecontent .engine-selection-position {
    box-sizing: border-box;

    width: 100%;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 35px !important;
    padding-left: 35px !important;

    background: transparent !important;
  }

}


/* Unterhalb von 1576 px übernimmt das Astroid-Raster
   bereits den benötigten Seitenabstand. */


@media (max-width: 1575.98px) {

  .Pagecontent .engine-selection-position {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

}
/* Motorsuche wieder kompakter darstellen */

.Pagecontent .engine-selection-position search {
  width: 100%;
  max-width: 760px;
  margin-right: 0;
  margin-left: 0;
}

.Pagecontent .engine-selection-position .mod-finder {
  width: 100%;
  max-width: 600px;
}
/* ==========================================================
   Wagner Motoren – Joomla-Finder-Ergebnisseite

   - Beitragstext ausblenden
   - Typ, Autor und Sprache ausblenden
   - Ergebniszähler ausblenden
   - Zurück-Button kompakt darstellen
   - Suchbutton im Wagner-Design
   - responsive Ausrichtung
   ========================================================== */


/* ==========================================================
   1. Gesamter Suchbereich
   ========================================================== */

.com-finder.finder {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  color: var(--wm-text, #11162a);
  background: transparent !important;
}


/* ==========================================================
   2. Zurück-Bereich
   ========================================================== */

.engine-selection-position:has(#mod-custom571) {
  margin-bottom: clamp(36px, 4vw, 60px);
}


/* Modultitel */

.engine-selection-position:has(#mod-custom571) .module-title {
  margin: 0 0 18px;
  padding: 0;

  color: var(--wm-blue-dark, #00004f);

  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;

  text-align: left;
  text-transform: uppercase;
}


/* Zurück-Button nicht über die gesamte Breite */

#mod-custom571 {
  width: auto;
  max-width: 100%;

  margin: 0;
  padding: 0;
}

#mod-custom571 .wm-btn {
  width: auto !important;
  min-width: 190px;
  max-width: 100%;

  margin: 0;
  padding-right: 26px;
  padding-left: 26px;

  display: inline-flex !important;
  flex: 0 0 auto;

  white-space: nowrap;
}


/* Pfeil für Zurück-Richtung drehen */

#mod-custom571 .wm-btn-arrow {
  transform: rotate(180deg);
}

#mod-custom571 .wm-btn:hover .wm-btn-arrow,
#mod-custom571 .wm-btn:focus .wm-btn-arrow {
  transform:
    rotate(180deg)
    translateX(7px);
}


/* ==========================================================
   3. Suchformular
   ========================================================== */

.com-finder .com-finder__form {
  width: 100%;
  max-width: 920px;

  margin: 0 0 clamp(38px, 4vw, 58px);
  padding: 0;

  background: transparent !important;
}

.com-finder .js-finder-searchform,
.com-finder .com-finder__search {
  width: 100%;

  margin: 0 !important;
  padding: 0;

  background: transparent !important;
  border: 0;
}


/* Label */

.com-finder .com-finder__search .form-inline > label {
  display: block;

  width: 100%;
  margin: 0 0 12px !important;
  padding: 0;

  color: var(--wm-blue-dark, #00004f);

  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;

  text-align: left;
}


/* Eingabefeld und Button nebeneinander */

.com-finder .com-finder__search .input-group {
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;

  gap: 10px;
}


/* Awesomplete-Container */

.com-finder .com-finder__search .awesomplete {
  width: 100%;
  min-width: 0;

  display: block;
}


/* Suchfeld */

.com-finder
.com-finder__search
input.js-finder-search-query {
  box-sizing: border-box;

  width: 100%;
  min-height: 58px;

  margin: 0;
  padding: 15px 18px;

  color: var(--wm-text, #11162a);
  background: transparent !important;

  border: 1px solid rgba(0, 0, 145, 0.28);
  border-radius: 4px;

  box-shadow: none;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;

  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.com-finder
.com-finder__search
input.js-finder-search-query:hover {
  border-color: var(--wm-blue-light, #1450ff);
}

.com-finder
.com-finder__search
input.js-finder-search-query:focus {
  outline: none;

  border-color: var(--wm-blue-light, #1450ff);

  box-shadow:
    0 0 0 4px rgba(20, 80, 255, 0.12);
}


/* ==========================================================
   4. Suchen-Button im Wagner-Design
   ========================================================== */

.com-finder
.com-finder__search
button[type="submit"].btn {
  position: relative;
  isolation: isolate;

  min-width: 150px;
  min-height: 58px;

  margin: 0;
  padding: 15px 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  overflow: hidden;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--wm-blue, #000091) 0%,
      var(--wm-blue-light, #1450ff) 100%
    ) !important;

  border: 1px solid transparent !important;
  border-radius: 4px;

  box-shadow:
    0 10px 24px rgba(0, 0, 145, 0.24);

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;

  text-align: center;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform 280ms ease,
    box-shadow 280ms ease,
    background 280ms ease;
}


/* Glanzeffekt */

.com-finder
.com-finder__search
button[type="submit"].btn::before {
  content: "";

  position: absolute;
  top: 0;
  left: -130%;
  z-index: -1;

  width: 65%;
  height: 100%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.32),
      transparent
    );

  transform: skewX(-24deg);

  transition: left 650ms ease;
}


/* Hover */

.com-finder
.com-finder__search
button[type="submit"].btn:hover,
.com-finder
.com-finder__search
button[type="submit"].btn:focus-visible {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--wm-blue-dark, #00004f) 0%,
      #3d73ff 100%
    ) !important;

  box-shadow:
    0 16px 34px rgba(0, 0, 145, 0.36);

  transform: translateY(-2px);
}

.com-finder
.com-finder__search
button[type="submit"].btn:hover::before,
.com-finder
.com-finder__search
button[type="submit"].btn:focus-visible::before {
  left: 165%;
}

.com-finder
.com-finder__search
button[type="submit"].btn:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.26);
  outline-offset: 3px;
}


/* Suchsymbol */

.com-finder
.com-finder__search
button[type="submit"]
.icon-search {
  color: #ffffff;

  font-size: 17px;
  line-height: 1;
}


/* ==========================================================
   5. Nicht gewünschte Ergebnisinformationen ausblenden
   ========================================================== */

/* Beitragstext / Beschreibung */

.com-finder .result__description {
  display: none !important;
}


/* Typ ausblenden */

.com-finder
.result__taxonomy-item.result__taxonomy--Type {
  display: none !important;
}


/* Autor ausblenden */

.com-finder
.result__taxonomy-item.result__taxonomy--Author {
  display: none !important;
}


/* Sprache ausblenden */

.com-finder
.result__taxonomy-item.result__taxonomy--Language {
  display: none !important;
}


/* Ergebniszähler unter der Liste ausblenden */

.com-finder .com-finder__counter,
.com-finder .search-pages-counter {
  display: none !important;
}


/* Leere Navigation entfernen */

.com-finder
.com-finder__navigation:has(.com-finder__pagination:empty) {
  display: none;
}


/* ==========================================================
   6. Kategorie optional dezent darstellen
   ========================================================== */

.com-finder .result__taxonomy {
  margin: 8px 0 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  list-style: none;
}

.com-finder
.result__taxonomy-item.result__taxonomy--Category {
  margin: 0;
  padding: 0;

  color: var(--wm-muted, #667085);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.com-finder
.result__taxonomy-item.result__taxonomy--Category
> span {
  color: var(--wm-blue, #000091);
  font-weight: 800;
}


/* ==========================================================
   7. Ergebnisliste
   ========================================================== */

.com-finder .com-finder__results {
  width: 100%;

  margin: 0;
  padding: 0;

  background: transparent !important;
}

.com-finder .com-finder__results-list {
  width: 100%;

  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;

  list-style: none;
}


/* Einzelnes Ergebnis */

.com-finder .result__item {
  min-width: 0;

  margin: 0;
  padding: 0 0 14px;

  background: transparent !important;

  border: 0;
  border-bottom: 1px solid rgba(0, 0, 145, 0.14);

  box-shadow: none;
}


/* Titelabstand */

.com-finder .result__title {
  margin: 0;
  padding: 0;
}


/* Ergebnislink */

.com-finder .result__title-link {
  position: relative;

  width: 100%;
  min-height: 58px;

  padding: 15px 38px 15px 0;

  display: flex;
  align-items: center;

  color: var(--wm-blue-dark, #00004f) !important;
  background: transparent !important;

  font-size: clamp(15px, 1vw, 17px);
  font-weight: 800;
  line-height: 1.45;

  text-align: left;
  text-decoration: none !important;

  transition:
    color 220ms ease,
    padding-left 220ms ease;
}


/* Pfeil */

.com-finder .result__title-link::after {
  content: "";

  position: absolute;
  top: 50%;
  right: 7px;

  width: 9px;
  height: 9px;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform:
    translateY(-50%)
    rotate(45deg);

  transition: right 220ms ease;
}


/* Linke Akzentlinie */

.com-finder .result__title-link::before {
  content: "";

  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;

  width: 3px;

  background: var(--wm-blue-light, #1450ff);

  opacity: 0;
  transform: scaleY(0.45);

  transition:
    opacity 220ms ease,
    transform 220ms ease;
}


/* Hover */

.com-finder .result__title-link:hover {
  color: var(--wm-blue-light, #1450ff) !important;
  padding-left: 14px;
}

.com-finder .result__title-link:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.com-finder .result__title-link:hover::after {
  right: 1px;
}


/* Markierter Suchbegriff */

.com-finder mark {
  color: var(--wm-blue-dark, #00004f);
  background: rgba(20, 80, 255, 0.14);

  border-radius: 2px;

  font-weight: 900;
}


/* ==========================================================
   8. Responsive
   ========================================================== */

@media (max-width: 900px) {

  .com-finder .com-finder__form {
    max-width: none;
  }

  .com-finder .com-finder__results-list {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 650px) {

  .engine-selection-position:has(#mod-custom571) {
    margin-bottom: 42px;
  }

  #mod-custom571 .wm-btn {
    width: auto !important;
    min-width: 170px;
  }

  .com-finder .com-finder__search .input-group {
    grid-template-columns: 1fr;
  }

  .com-finder
  .com-finder__search
  button[type="submit"].btn {
    width: 100%;
    min-width: 0;
  }

  .com-finder .result__title-link {
    font-size: 15px;
  }

}


/* ==========================================================
   9. Bewegungsreduzierung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  #mod-custom571 .wm-btn-arrow,

  .com-finder
  .com-finder__search
  button[type="submit"].btn,

  .com-finder
  .com-finder__search
  button[type="submit"].btn::before,

  .com-finder .result__title-link,

  .com-finder .result__title-link::before,

  .com-finder .result__title-link::after {
    transition: none !important;
  }

  .com-finder
  .com-finder__search
  button[type="submit"].btn:hover,

  .com-finder
  .com-finder__search
  button[type="submit"].btn:focus-visible {
    transform: none !important;
  }

}
/* ==========================================================
   Finder-Ergebnisse – linke Kante korrigieren
   ========================================================== */

.Pagecontent .astroid-component-area .com-finder.finder {
  box-sizing: border-box;

  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;

  padding-right: 0 !important;
  padding-left: 0 !important;

  background: transparent !important;
}


/* Alle Finder-Bereiche ohne zusätzlichen Seitenversatz */

.Pagecontent .com-finder .com-finder__form,
.Pagecontent .com-finder .com-finder__results,
.Pagecontent .com-finder .com-finder__navigation,
.Pagecontent .com-finder .com-finder__results-list {
  width: 100%;
  max-width: none;

  margin-right: 0 !important;
  margin-left: 0 !important;

  padding-right: 0;
  padding-left: 0;
}


/* Suchformular weiterhin kompakt */

.Pagecontent .com-finder .com-finder__form {
  max-width: 920px;
}


/* Zurück-Modul auf dieselbe linke Kante setzen */

.Pagecontent .engine-selection-position:has(#mod-custom571) {
  margin-right: 0 !important;
  margin-left: 0 !important;

  padding-right: 0 !important;
  padding-left: 0 !important;
}


/* Smartphone */

@media (max-width: 900px) {

  .Pagecontent .com-finder .com-finder__form {
    max-width: none;
  }

}
/* ==========================================================
   Wagner Motoren – Finder-Seite endgültig links ausrichten

   Gleicht Zurück-Bereich und Suchergebnisse exakt an
   Breadcrumb und normalen Artikelinhalt an.
   ========================================================== */

@media (min-width: 1576px) {

  /* Zurück-Modul */
  .Pagecontent
  .engine-selection-position:has(#mod-custom571) {
    box-sizing: border-box;

    width: 100%;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 35px !important;
    padding-left: 35px !important;
  }


  /* Finder-Formular und Ergebnisse */
  .Pagecontent
  .astroid-component-area
  #jf_results
  > .com-finder.finder {
    box-sizing: border-box;

    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 35px !important;
    padding-left: 35px !important;

    background: transparent !important;
  }

}


/* Unterhalb der Desktop-Breite übernimmt das Astroid-Raster
   bereits die korrekten Seitenabstände. */

@media (max-width: 1575.98px) {

  .Pagecontent
  .engine-selection-position:has(#mod-custom571),

  .Pagecontent
  .astroid-component-area
  #jf_results
  > .com-finder.finder {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

}
/* ==========================================================
   Wagner Motoren – Austauschmotoren V3
   Joomla-ready, filterähnliches Design, responsive
   ========================================================== */

:root {
  --wm-engine-blue: #000091;
  --wm-engine-blue-dark: #00004f;
  --wm-engine-blue-light: #1450ff;
  --wm-engine-text: #11162a;
  --wm-engine-muted: #667085;
  --wm-engine-border: #d9def0;
  --wm-engine-white: #ffffff;
  --wm-engine-cta-gutter: clamp(18px, 2.5vw, 48px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ==========================================================
   Hauptbereich – vorhandenes Joomla-Raster verwenden
   ========================================================== */

.wm-engine-directory {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0 0 clamp(12px, 1.4vw, 22px);

  color: var(--wm-engine-text);
  background: var(--wm-engine-white);
}

.wm-engine-directory__inner {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   Einleitung – kompakt und linksbündig
   ========================================================== */

/* Austauschmotor CTA: Umschlag links; rechts Text und darunter der Button. */
@media (max-width: 680px) {
  .wm-engine-directory .wm-engine-cta__inner {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon content"
      "icon actions" !important;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
  }

  .wm-engine-directory .wm-engine-cta__content {
    grid-area: content !important;
    min-width: 0;
  }

  .wm-engine-directory .wm-engine-cta__icon {
    grid-area: icon !important;
    align-self: center;
    justify-self: start;
  }

  .wm-engine-directory .wm-engine-cta__actions {
    grid-area: actions !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .wm-engine-directory .wm-engine-cta__button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

.wm-engine-directory__heading {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0 0 clamp(22px, 2.2vw, 34px);
  padding: 0 0 15px;

  border-bottom: 1px solid rgba(0, 0, 145, 0.16);
}

.wm-engine-directory__heading::after {
  content: "";

  position: absolute;
  bottom: -1px;
  left: 0;

  width: 78px;
  height: 3px;

  background: var(--wm-engine-blue-light);
}

.wm-engine-directory__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 12px;

  color: var(--wm-engine-blue);

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wm-engine-directory__eyebrow::before {
  content: "";

  width: 32px;
  height: 3px;

  background: var(--wm-engine-blue-light);
}

.wm-engine-directory__title {
  margin: 0 0 10px;
  padding: 0;

  color: var(--wm-engine-blue);

  font-size: clamp(27px, 2.5vw, 42px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.wm-engine-directory__intro {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  color: var(--wm-engine-muted);

  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 600;
  line-height: 1.5;

  white-space: nowrap;
}


/* ==========================================================
   Otto- und Dieselgruppen – wie die Filterüberschriften
   ========================================================== */

.wm-engine-group {
  width: 100%;

  margin: 0 0 clamp(30px, 3vw, 46px);
  padding: 0;
}

.wm-engine-group__header {
  position: relative;

  width: 100%;

  margin: 0 0 16px;
  padding: 0 0 12px;

  border-bottom: 2px solid rgba(0, 0, 145, 0.14);
}

.wm-engine-group__header::after {
  content: "";

  position: absolute;
  bottom: -2px;
  left: 0;

  width: 78px;
  height: 3px;

  background: var(--wm-engine-blue-light);
}

.wm-engine-group__title {
  margin: 0 0 4px;
  padding: 0;

  color: var(--wm-engine-blue);

  font-size: clamp(21px, 1.55vw, 29px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wm-engine-group__description {
  margin: 0;
  padding: 0;

  color: var(--wm-engine-muted);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}


/* ==========================================================
   Kompakte Motorenkacheln im Filter-Look
   ========================================================== */

.wm-engine-directory__grid {
  width: 100%;

  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px 14px;

  list-style: none;
}

.wm-engine-directory__item {
  min-width: 0;

  opacity: 0;
  transform: translateY(10px);

  animation:
    wm-engine-item-in 420ms
    cubic-bezier(0.2, 0.75, 0.25, 1)
    forwards;

  animation-delay: calc(var(--wm-index, 0) * 28ms);
}

.wm-engine-directory__link {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 54px;

  padding: 7px 50px 7px 8px;

  display: flex;
  align-items: center;

  overflow: hidden;

  color: var(--wm-engine-blue-dark);
  background: transparent;

  border: 1px solid rgba(0, 0, 145, 0.2);
  border-radius: 4px;

  box-shadow: none;

  font-size: clamp(13px, 0.85vw, 15.5px);
  font-weight: 800;
  line-height: 1.3;

  text-decoration: none;

  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.wm-engine-directory__link::before {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background: var(--wm-engine-blue-light);

  opacity: 0;
  transform: scaleY(0.35);
  transform-origin: center;

  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.wm-engine-directory__text {
  min-width: 0;
  width: fit-content;
  max-width: 100%;

  padding: 7px 11px;

  color: inherit;
  background: var(--wm-engine-white);

  border: 1px solid rgba(17, 22, 42, 0.34);
  border-radius: 3px;

  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;

  transition:
    border-color 220ms ease,
    color 220ms ease;
}

.wm-engine-directory__arrow {
  position: absolute;
  top: 50%;
  right: 15px;

  width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-engine-blue);

  border: 1px solid rgba(0, 0, 145, 0.18);
  border-radius: 50%;

  transform: translateY(-50%);

  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms ease;
}

.wm-engine-directory__arrow::before {
  content: "";

  width: 7px;
  height: 7px;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: rotate(45deg) translate(-1px, 1px);
}

.wm-engine-directory__link:hover,
.wm-engine-directory__link:focus-visible {
  color: var(--wm-engine-blue-light);

  border-color: var(--wm-engine-blue-light);

  box-shadow: 0 7px 18px rgba(0, 0, 145, 0.09);

  transform: translateY(-2px);
}

.wm-engine-directory__link:hover::before,
.wm-engine-directory__link:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.wm-engine-directory__link:hover .wm-engine-directory__text,
.wm-engine-directory__link:focus-visible .wm-engine-directory__text {
  color: var(--wm-engine-blue);
  border-color: var(--wm-engine-blue-light);
}

.wm-engine-directory__link:hover .wm-engine-directory__arrow,
.wm-engine-directory__link:focus-visible .wm-engine-directory__arrow {
  color: var(--wm-engine-white);
  background: var(--wm-engine-blue-light);
  border-color: var(--wm-engine-blue-light);

  transform: translate(3px, -50%);
}

.wm-engine-directory__link:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.2);

  outline-offset: 2px;
}


/* ==========================================================
   Vollbreiter Anfrage-Banner
   ========================================================== */

.wm-engine-cta {
  position: relative;
  isolation: isolate;

  width: 100vw;
  max-width: none;

  margin:
    clamp(18px, 2vw, 28px)
    calc(50% - 50vw)
    clamp(10px, 1.2vw, 18px);

  overflow: hidden;

  color: var(--wm-engine-white);

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(20, 80, 255, 0.3),
      transparent 36%
    ),
    linear-gradient(
      105deg,
      var(--wm-engine-blue) 0%,
      #00006d 58%,
      var(--wm-engine-blue-dark) 100%
    );

  border-top: 2px solid rgba(88, 132, 255, 0.9);
  border-bottom: 2px solid rgba(20, 80, 255, 0.65);
}

.wm-engine-cta__inner {
  width: 100%;

  margin: 0;
  padding:
    clamp(16px, 1.6vw, 24px)
    var(--wm-engine-cta-gutter);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.wm-engine-cta__icon {
  width: 52px;
  height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--wm-engine-white);

  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;

  font-size: 21px;
  line-height: 1;

  transform-origin: 50% 50%;

  animation:
    wm-email-ring 1.8s ease-in-out 0.65s 1 both;
}

.wm-engine-cta:hover .wm-engine-cta__icon,
.wm-engine-cta:focus-within .wm-engine-cta__icon {
  animation:
    wm-email-ring 1.8s ease-in-out 0s 1 both;
}

.wm-engine-cta__content {
  min-width: 0;
}

.wm-engine-cta__title {
  margin: 0 0 4px;
  padding: 0;

  color: var(--wm-engine-white);

  font-size: clamp(17px, 1.3vw, 23px);
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.wm-engine-cta__text {
  margin: 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.84);

  font-size: clamp(12.5px, 0.82vw, 15px);
  font-weight: 600;
  line-height: 1.45;
}

.wm-engine-cta__button {
  position: relative;
  isolation: isolate;

  min-width: 184px;
  min-height: 50px;

  padding: 14px 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  overflow: hidden;

  color: var(--wm-engine-white);
  background: linear-gradient(
    135deg,
    #0624c9,
    var(--wm-engine-blue-light)
  );

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;

  box-shadow: 0 9px 24px rgba(0, 0, 50, 0.24);

  font-size: 12.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;

  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  transition:
    background 260ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}

.wm-engine-cta__button::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 60%;
  height: 100%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.34),
    transparent
  );

  transform: skewX(-24deg);

  transition: left 700ms ease;
}

.wm-engine-cta__button-arrow {
  width: 9px;
  height: 9px;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: rotate(45deg);

  transition: transform 260ms ease;
}

.wm-engine-cta__button:hover,
.wm-engine-cta__button:focus-visible {
  color: var(--wm-engine-white);

  background: linear-gradient(
    135deg,
    var(--wm-engine-blue-dark),
    #3d73ff
  );

  box-shadow: 0 15px 34px rgba(0, 0, 50, 0.34);

  transform: translateY(-2px);
}

.wm-engine-cta__button:hover::before,
.wm-engine-cta__button:focus-visible::before {
  left: 160%;
}

.wm-engine-cta__button:hover .wm-engine-cta__button-arrow,
.wm-engine-cta__button:focus-visible .wm-engine-cta__button-arrow {
  transform: translateX(5px) rotate(45deg);
}

.wm-engine-cta__button:focus-visible {
  outline: 3px solid rgba(132, 166, 255, 0.75);
  outline-offset: 3px;
}


/* Drei kurze Klingelbewegungen */

@keyframes wm-email-ring {
  0%,
  9%,
  18%,
  36%,
  45%,
  63%,
  72%,
  100% {
    transform: rotate(0deg);
  }

  4%,
  31%,
  58% {
    transform: rotate(-11deg) scale(1.03);
  }

  7%,
  34%,
  61% {
    transform: rotate(11deg) scale(1.03);
  }
}

@keyframes wm-engine-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 1180px) {
  .wm-engine-directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wm-engine-directory__intro {
    white-space: normal;
  }
}

@media (max-width: 780px) {
  .wm-engine-cta__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wm-engine-cta__actions {
    grid-column: 1 / -1;
  }

  .wm-engine-cta__button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .wm-engine-directory__heading {
    margin-bottom: 24px;
  }

  .wm-engine-directory__grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .wm-engine-directory__link {
    min-height: 50px;
    padding: 6px 46px 6px 7px;

    font-size: 13.5px;
  }

  .wm-engine-directory__text {
    padding: 6px 9px;
  }

  .wm-engine-directory__arrow {
    right: 12px;

    width: 23px;
    height: 23px;
  }

  .wm-engine-cta__inner {
    padding:
      17px
      calc(18px + env(safe-area-inset-right, 0px))
      17px
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .wm-engine-cta__icon {
    width: 46px;
    height: 46px;

    font-size: 19px;
  }
}

@media (max-width: 440px) {
  .wm-engine-cta__inner {
    grid-template-columns: 1fr;
  }

  .wm-engine-cta__actions {
    grid-column: auto;
  }
}


/* ==========================================================
   Bewegungsreduzierung
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .wm-engine-directory__item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .wm-engine-directory__link,
  .wm-engine-directory__link::before,
  .wm-engine-directory__text,
  .wm-engine-directory__arrow,
  .wm-engine-cta__icon,
  .wm-engine-cta__button,
  .wm-engine-cta__button::before,
  .wm-engine-cta__button-arrow {
    animation: none !important;
    transition: none !important;
  }

  .wm-engine-directory__link:hover,
  .wm-engine-directory__link:focus-visible,
  .wm-engine-directory__link:hover .wm-engine-directory__arrow,
  .wm-engine-directory__link:focus-visible .wm-engine-directory__arrow,
  .wm-engine-cta__button:hover,
  .wm-engine-cta__button:focus-visible {
    transform: none;
  }
}
/* ==========================================================
   Wagner Motoren – CTA endgültige Korrektur

   - links und rechts mit dem Content bündig
   - geringere Höhe
   - E-Mail-Symbol klingelt beim Hover dreimal
   ========================================================== */

.wm-engine-directory
.wm-engine-cta {
  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;

  margin-top: 12px !important;
  margin-right: 0 !important;
  margin-bottom: 10px !important;
  margin-left: 0 !important;

  border-radius: 0;
}


/* Wichtig: alten Full-Width-Ausbruch vollständig deaktivieren */

.wm-engine-directory
.wm-engine-cta {
  margin-inline: 0 !important;
}


/* Leiste flacher gestalten */

.wm-engine-directory
.wm-engine-cta__inner {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 8px 14px;

  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}


/* E-Mail-Kreis kompakter */

.wm-engine-directory
.wm-engine-cta__icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  font-size: 15px;

  animation: none !important;
}


/* Nur das E-Mail-Symbol bewegen */

.wm-engine-directory
.wm-engine-cta__icon i {
  display: inline-block;

  transform-origin: center center;

  animation: none;
}


/* Beim Mouseover exakt drei Klingelbewegungen */

.wm-engine-directory
.wm-engine-cta:hover
.wm-engine-cta__icon i,
.wm-engine-directory
.wm-engine-cta:focus-within
.wm-engine-cta__icon i {
  animation:
    wm-engine-email-ring 0.42s ease-in-out 3;
}


/* Eine Klingelbewegung */

@keyframes wm-engine-email-ring {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-14deg) scale(1.06);
  }

  40% {
    transform: rotate(14deg) scale(1.06);
  }

  60% {
    transform: rotate(-9deg);
  }

  80% {
    transform: rotate(9deg);
  }

}


/* Texte kompakter */

.wm-engine-directory
.wm-engine-cta__title {
  margin: 0 0 1px;

  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.12;
}

.wm-engine-directory
.wm-engine-cta__text {
  margin: 0;

  font-size: clamp(11.5px, 0.7vw, 13px);
  line-height: 1.3;
}


/* Button flacher */

.wm-engine-directory
.wm-engine-cta__button {
  min-width: 166px;
  min-height: 38px;

  padding: 9px 17px;

  font-size: 11.5px;
}


/* Tablet */

@media (max-width: 780px) {

  .wm-engine-directory
  .wm-engine-cta__inner {
    padding: 10px 12px;
  }

}


/* Smartphone */

@media (max-width: 680px) {

  .wm-engine-directory
  .wm-engine-cta {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }

  .wm-engine-directory
  .wm-engine-cta__inner {
    padding: 11px 12px;
  }

  .wm-engine-directory
  .wm-engine-cta__icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;
  }

  .wm-engine-directory
  .wm-engine-cta__button {
    min-height: 38px;
  }

}


/* Bewegungsreduzierung */

@media (prefers-reduced-motion: reduce) {

  .wm-engine-directory
  .wm-engine-cta:hover
  .wm-engine-cta__icon i,

  .wm-engine-directory
  .wm-engine-cta:focus-within
  .wm-engine-cta__icon i {
    animation: none !important;
  }

}
.com-content-article .astroid-article-text a.wm-engine-overview__link:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link),
.com-content-article .astroid-article-text a.wm-engine-overview__link:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):link,
.com-content-article .astroid-article-text a.wm-engine-overview__link:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):visited {
  color: #555 !important;
  font-weight: 700;
  text-decoration-line: none !important;
}

.com-content-article .astroid-article-text a.wm-engine-overview__link:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):hover,
.com-content-article .astroid-article-text a.wm-engine-overview__link:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):focus-visible {
  color: #fff !important;
  background-color: #000091 !important;
  text-decoration-line: none !important;
}
/*Austauschmotoren Links Fix*/
.engine-selection-position .mod-custom a:not([class*="wm-"]):not(.btn):not([class*="button"]):not([class*="jfilters"]),
.engine-selection-position .mod-custom a:not([class*="wm-"]):not(.btn):not([class*="button"]):not([class*="jfilters"]):link {
  color: var(--wm-blue, #000091) !important;
  font-weight: 700;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(0, 0, 145, 0.38) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease, background-color 180ms ease;
}

.engine-selection-position .mod-custom a:not([class*="wm-"]):not(.btn):not([class*="button"]):not([class*="jfilters"]):visited {
  color: var(--wm-blue-dark, #00004f) !important;
}

.engine-selection-position .mod-custom a:not([class*="wm-"]):not(.btn):not([class*="button"]):not([class*="jfilters"]):hover,
.engine-selection-position .mod-custom a:not([class*="wm-"]):not(.btn):not([class*="button"]):not([class*="jfilters"]):focus-visible {
  color: var(--wm-blue-light, #1450ff) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--wm-blue-light, #1450ff) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
  background-color: rgba(20, 80, 255, 0.07);
}
/* ==========================================================
   22. Motor-Detailseiten – Inhaltsbereich mit Fahrzeugkachel

   Der Content-Pluginbereich erzeugt das Zwei-Spalten-Layout
   selbst. Deshalb wird hier ausschließlich der Artikelinhalt
   formatiert. Keine globalen Eingriffe in .com-content-article
   und keine zweite Sidebar-/Grid-Struktur.
   ========================================================== */

.wm-engine-content,
.wm-engine-content *,
.wm-engine-content *::before,
.wm-engine-content *::after {
  box-sizing: border-box;
}

/*
 * Wichtig für die gleichmäßige Ausrichtung:
 * Kein zentriertes max-width innerhalb der linken Plugin-Spalte.
 * Der vorhandene Joomla-/Plugin-Container bestimmt die Breite.
 */
.wm-engine-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  color: var(--wm-text, #11162a);
}

.wm-engine-content > :first-child {
  margin-top: 0;
}

.wm-engine-content > :last-child {
  margin-bottom: 0;
}

/* Die eigentliche Seitenüberschrift bleibt Astroid überlassen. */
.wm-engine-content h2 {
  max-width: 100%;
  margin: 0 0 18px;
  color: var(--wm-blue, #000091);;
  font-size: clamp(28px, 2.35vw, 42px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-transform: none;
  hyphens: none;
}

.wm-engine-content .wm-intro {
  max-width: 78ch;
  margin: 0 0 16px;
  color: var(--wm-blue-dark);
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.68;
}

/* Hinweisbox */
.wm-engine-content .wm-alert {
  width: 100%;
  min-width: 0;
  margin: clamp(24px, 2.6vw, 36px) 0;
  padding: clamp(20px, 2vw, 28px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  color: var(--wm-text, #11162a);
  background: #f3f5f9;
  border: 1px solid rgba(0, 0, 145, 0.08);
  border-radius: 8px;
}

.wm-engine-content .wm-alert-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--wm-blue, #000091),
    var(--wm-blue-light, #1450ff)
  );
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}

.wm-engine-content .wm-alert h3 {
  margin: 0 0 7px;
  color: var(--wm-blue, #000091);
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 850;
  line-height: 1.3;
}

.wm-engine-content .wm-alert p {
  margin: 0;
  color: var(--wm-blue-dark);
  font-size: 15px;
  line-height: 1.6;
}

/* Kachelraster */
.wm-engine-content .wm-grid {
  width: 100%;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2vw, 26px);
}

.wm-engine-content .wm-card {
  min-width: 0;
  height: 100%;
  padding: clamp(20px, 2vw, 26px);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  color: var(--wm-text, #11162a);
  background: #ffffff;
  border: 1px solid var(--wm-border, #e2e6ee);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 50, 0.035);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.wm-engine-content .wm-card:hover,
.wm-engine-content .wm-card:focus-within {
  border-color: rgba(20, 80, 255, 0.34);
  box-shadow: 0 12px 30px rgba(0, 0, 80, 0.07);
}

.wm-engine-content .wm-card > i,
.wm-engine-content .wm-card > svg,
.wm-engine-content .wm-card .wm-card__icon {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  margin: 1px 0 0;
  color: var(--wm-blue, #000091);
  font-size: 30px;
  line-height: 1;
  text-align: center;
}

.wm-engine-content .wm-card > div,
.wm-engine-content .wm-card .wm-card__content {
  min-width: 0;
  flex: 1 1 auto;
}

.wm-engine-content .wm-card h3 {
  margin: 0 0 10px;

  color: var(--wm-blue, #000091);
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  hyphens: none;
}

.wm-engine-content .wm-card p {
  margin: 0 0 10px;
  color: var(--wm-blue-dark);
  font-size: 14px;
  line-height: 1.6;
}

.wm-engine-content .wm-card p:last-child {
  margin-bottom: 0;
}

.wm-engine-content .wm-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--wm-blue, #000091) !important;
  font-weight: 750;
  text-decoration: none !important;
}

.wm-engine-content .wm-link:hover,
.wm-engine-content .wm-link:focus-visible {
  color: var(--wm-blue-light, #1450ff) !important;
}

.wm-engine-content .wm-link:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.24);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .wm-engine-content {
    padding-top: 26px;
    padding-bottom: 34px;
  }

  .wm-engine-content .wm-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .wm-engine-content {
    padding-top: 22px;
    padding-bottom: 28px;
  }

  .wm-engine-content .wm-alert {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .wm-engine-content .wm-alert-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 19px;
  }

  .wm-engine-content .wm-card {
    padding: 20px 18px;
    gap: 15px;
  }

  .wm-engine-content .wm-card > i,
  .wm-engine-content .wm-card > svg,
  .wm-engine-content .wm-card .wm-card__icon {
    flex-basis: 38px;
    width: 38px;
    min-width: 38px;
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-engine-content .wm-card {
    transition: none !important;
  }
}

/* ==========================================================
   Wagner Motoren – Artikel-Tags
   ========================================================== */

.astroid-article-tags,
.astroid-article-tags.text-lg-end,
.astroid-article-tags.text-start {
  box-sizing: border-box;

  width: 100%;

  margin: 24px 0 10px !important;
  padding: 0 !important;

  text-align: left !important;
  background: transparent;
}

.astroid-article-tags .tags,
.astroid-article-tags ul.tags.list-inline {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px 12px;

  list-style: none;
}

.astroid-article-tags .tags > li,
.astroid-article-tags .tags .list-inline-item {
  margin: 0 !important;
  padding: 0 !important;
}


/* Tag-Link */

.astroid-article-tags .tags a.btn {
  position: relative;
  isolation: isolate;

  min-height: 38px;

  margin: 0;
  padding: 8px 17px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  color: var(--wm-blue, #000091) !important;
  background: transparent !important;

  border: 1px solid rgba(0, 0, 145, 0.42) !important;
  border-radius: 999px !important;

  box-shadow: none;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;

  text-decoration: none !important;

  transition:
    color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}


/* Blaue Hover-Fläche */

.astroid-article-tags .tags a.btn::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    135deg,
    var(--wm-blue, #000091),
    var(--wm-blue-light, #1450ff)

  );

  opacity: 0;
  transform: scale(0.86);

  transition:
    opacity 240ms ease,
    transform 240ms ease;
}


/* Mouseover und Tastaturfokus */

.astroid-article-tags .tags a.btn:hover,
.astroid-article-tags .tags a.btn:focus-visible {
  color: #ffffff !important;
  background: transparent !important;

  border-color: var(--wm-blue-light, #1450ff) !important;

  box-shadow: 0 8px 20px rgba(0, 0, 145, 0.2);

  transform: translateY(-2px);
}

.astroid-article-tags .tags a.btn:hover::before,
.astroid-article-tags .tags a.btn:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.astroid-article-tags .tags a.btn:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.22);
  outline-offset: 3px;
}


/* Besuchte Links */

.astroid-article-tags .tags a.btn:visited {
  color: var(--wm-blue, #000091) !important;
}

.astroid-article-tags .tags a.btn:visited:hover,
.astroid-article-tags .tags a.btn:visited:focus-visible {
  color: #ffffff !important;
}


/* Astroid-Container ausrichten */

.astroid-row:has(.astroid-article-tags) {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.astroid-row:has(.astroid-article-tags)
> .astroid-column {
  padding-right: 0 !important;
  padding-left: 0 !important;
}


/* Zielanker */

#wm-motorenliste {
  scroll-margin-top: 130px;
}


/* Smartphone */

@media (max-width: 680px) {

  .astroid-article-tags {
    margin-top: 20px !important;
  }

  .astroid-article-tags .tags {
    gap: 8px;
  }

  .astroid-article-tags .tags a.btn {
    min-height: 34px;
    padding: 7px 13px;

    font-size: 13px;
  }

  #wm-motorenliste {
    scroll-margin-top: 100px;
  }

}


/* Bewegungsreduzierung */

@media (prefers-reduced-motion: reduce) {

  .astroid-article-tags .tags a.btn,
  .astroid-article-tags .tags a.btn::before {
    transition: none !important;
  }

  .astroid-article-tags .tags a.btn:hover,
  .astroid-article-tags .tags a.btn:focus-visible {
    transform: none !important;
  }

}
/* ==========================================================
   Wagner Motoren – Links im Artikeltext

   - normale Textlinks werden unterstrichen
   - Buttons werden nicht unterstrichen
   - Bildlinks werden nicht unterstrichen
   - Links der Motorenauswahl werden nicht unterstrichen
   ========================================================== */

/* ----------------------------------------------------------
   1. Normale Links im Artikeltext
   ---------------------------------------------------------- */

.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link) {
  color: var(--wm-blue, #000091) !important;

  font-weight: 700;

  text-decoration-line: underline !important;
  text-decoration-color: rgba(0, 0, 145, 0.38) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;

  transition:
    color 180ms ease,
    text-decoration-color 180ms ease,
    background-color 180ms ease;
}


/* ----------------------------------------------------------
   2. Bereits besuchte normale Textlinks
   ---------------------------------------------------------- */

.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):visited {
  color: var(--wm-blue-dark, #00004f) !important;
}


/* ----------------------------------------------------------
   3. Hover bei normalen Textlinks
   ---------------------------------------------------------- */

.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):hover {
  color: var(--wm-blue-light, #1450ff) !important;

  text-decoration-line: underline !important;
  text-decoration-color: var(--wm-blue-light, #1450ff) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;

  background-color: rgba(20, 80, 255, 0.07);
}


/* ----------------------------------------------------------
   4. Tastaturfokus bei normalen Textlinks
   ---------------------------------------------------------- */

.com-content-article
  .astroid-article-text
  a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link):focus-visible {
  color: var(--wm-blue-light, #1450ff) !important;

  text-decoration-line: underline !important;
  text-decoration-color: var(--wm-blue-light, #1450ff) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;

  background-color: rgba(20, 80, 255, 0.10);

  outline: 3px solid rgba(20, 80, 255, 0.34);
  outline-offset: 3px;

  border-radius: 2px;
}


/* ----------------------------------------------------------
   5. Bildlinks nicht unterstreichen
   ---------------------------------------------------------- */

.com-content-article
  .astroid-article-text
  a:has(> img) {
  background: none !important;

  text-decoration: none !important;
  text-decoration-line: none !important;
}


/* ----------------------------------------------------------
   6. Links der Motorenauswahl niemals unterstreichen

   Gilt für:
   - Hersteller
   - Modell
   - Baujahr
   - Motor
   - weitere Links innerhalb der Fahrzeugauswahl
   ---------------------------------------------------------- */

#wm-motor-tags-copy a.wm-motor-tags-copy__link,
#wm-motor-tags-copy a.wm-motor-tags-copy__link:link,
#wm-motor-tags-copy a.wm-motor-tags-copy__link:visited,
#wm-motor-tags-copy a.wm-motor-tags-copy__link:hover,
#wm-motor-tags-copy a.wm-motor-tags-copy__link:focus,
#wm-motor-tags-copy a.wm-motor-tags-copy__link:focus-visible,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-copy__link,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-copy__link:link,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-copy__link:visited,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-copy__link:hover,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-copy__link:focus,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-copy__link:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
}


/* ----------------------------------------------------------
   7. Bewegungsreduzierung
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .com-content-article
    .astroid-article-text
    a:not(.wm-btn):not(.btn):not([class*="button"]):not(.wm-motor-tags-copy__link):not(.wm-motor-tags-backlink__link) {
    transition: none !important;
  }

  #wm-motor-tags-copy a.wm-motor-tags-copy__link {
    transition: none !important;
  }
}

/* ==========================================================
   Wagner Motoren – Zurück-Link der Motoren-Zuordnung FINAL

   Dieser Link ist aus sämtlichen allgemeinen Artikel-Linkregeln
   ausgeschlossen und wird in keinem Zustand unterstrichen.
   Alle anderen Links bleiben unverändert.
   ========================================================== */

.com-content-article
  .astroid-article-text
  a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:link,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:visited,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:hover,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:focus,
.com-content-article
  .astroid-article-text
  a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:focus-visible,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:link,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:visited,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:hover,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:focus,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: solid !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Auch die beiden enthaltenen Spans dürfen keine eigene Linie erhalten. */
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text > span,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text > span:hover,
a.wm-motor-tags-backlink__link.wm-motor-tags-backlink__link--text > span:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* ==========================================================
   Wagner Motoren – kompakte Motorenübersicht

   ERSETZT den bisherigen CSS-Block für:
   .wm-engine-directory
   .wm-engine-group
   .wm-engine-directory__grid
   .wm-engine-directory__item
   .wm-engine-directory__link

   Die zusätzliche HTML-Klasse .wm-engine-directory--compact
   kapselt die neue Darstellung, damit andere Bereiche der
   Webseite unverändert bleiben.
   ========================================================== */

.wm-engine-directory.wm-engine-directory--compact {
  --wm-engine-blue: var(--wm-blue, #000091);
  --wm-engine-blue-dark: var(--wm-blue-dark, #00004f);
  --wm-engine-blue-light: var(--wm-blue-light, #1450ff);
  --wm-engine-text: #424955;
  --wm-engine-muted: #697386;
  --wm-engine-border: rgba(0, 0, 145, 0.20);
  --wm-engine-button-border: rgba(60, 63, 68, 0.55);
  --wm-engine-background: #ffffff;

  width: 100%;
  margin: 0;
  padding: clamp(52px, 6vw, 88px) 0;
  color: var(--wm-engine-text);
  background: var(--wm-engine-background);
}

.wm-engine-directory.wm-engine-directory--compact,
.wm-engine-directory.wm-engine-directory--compact *,
.wm-engine-directory.wm-engine-directory--compact *::before,
.wm-engine-directory.wm-engine-directory--compact *::after {
  box-sizing: border-box;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__inner {
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__heading {
  margin: 0 0 clamp(42px, 5vw, 68px);
  padding: 0;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--wm-engine-blue);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--wm-engine-blue-light);
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__title {
  margin: 0 0 16px;
  padding: 0;
  color: var(--wm-engine-blue-dark);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-align: left;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__intro {
  max-width: 850px;
  margin: 0;
  padding: 0;
  color: var(--wm-engine-muted);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  text-align: left;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group {
  margin: 0 0 clamp(58px, 7vw, 96px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__header {
  position: relative;
  margin: 0 0 30px;
  padding: 26px 0 0;
  background: transparent;
  border: 0;
}

/* Dünne Linie mit blauem Startsegment – wie in der Vorlage. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background:
    linear-gradient(
      to right,
      var(--wm-engine-blue-light) 0,
      var(--wm-engine-blue-light) 104px,
      #d9dbea 104px,
      #d9dbea 100%
    );
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__title {
  margin: 0 0 7px;
  padding: 0;
  color: var(--wm-engine-blue-dark);
  font-size: clamp(25px, 2.2vw, 36px);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__description {
  margin: 0;
  padding: 0;
  color: var(--wm-engine-muted);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
}

/* Flexible Kacheln statt gleich breiter, großer Karten. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__grid {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 28px 22px;
  list-style: none;
  background: transparent;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 94px;
  margin: 0;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: #ffffff;
  border: 2px solid var(--wm-engine-border);
  border-radius: 6px;
  box-shadow: none;
  animation: none !important;
  transform: none;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item::before,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item::after {
  content: none !important;
  display: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 11px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--wm-engine-text) !important;
  background: #ffffff !important;
  border: 2px solid var(--wm-engine-button-border) !important;
  border-radius: 4px;
  box-shadow: none !important;
  font-size: clamp(16px, 1.18vw, 22px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  text-transform: none;
  white-space: nowrap;
  transform: none;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__text {
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none !important;
}

/* Pfeile aus der alten Kartendarstellung sicher ausblenden. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__arrow {
  display: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item:hover,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item:focus-within {
  border-color: rgba(20, 80, 255, 0.58);
  box-shadow: 0 12px 28px rgba(0, 0, 90, 0.10);
  transform: translateY(-2px);
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:hover,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:focus {
  color: var(--wm-engine-blue) !important;
  background: #f7f9ff !important;
  border-color: var(--wm-engine-blue-light) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 145, 0.10) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.34);
  outline-offset: 4px;
}

/* CTA unter der Liste bleibt kompakt und fügt sich in das Design ein. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-cta {
  margin-top: clamp(18px, 3vw, 42px);
}

@media (max-width: 980px) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    width: min(100% - 36px, 900px);
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__grid {
    gap: 18px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item {
    min-height: 86px;
    padding: 15px 18px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link {
    min-height: 50px;
    padding: 10px 17px;
    font-size: 17px;
  }
}

@media (max-width: 700px) {
  .wm-engine-directory.wm-engine-directory--compact {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    width: calc(100% - 32px);
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-group__header::before {
    background:
      linear-gradient(
        to right,
        var(--wm-engine-blue-light) 0,
        var(--wm-engine-blue-light) 72px,
        #d9dbea 72px,
        #d9dbea 100%
      );
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item {
    width: 100%;
    min-height: 0;
    padding: 12px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link {
    width: 100%;
    min-height: 52px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link {
    transition: none !important;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item:hover,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item:focus-within,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link:hover,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link:focus {
    transform: none !important;
  }
}
/* ==========================================================
   Wagner Motoren – kompakte Motorenübersicht

   ERSETZT den bisherigen CSS-Block für:
   .wm-engine-directory
   .wm-engine-group
   .wm-engine-directory__grid
   .wm-engine-directory__item
   .wm-engine-directory__link

   Die zusätzliche HTML-Klasse .wm-engine-directory--compact
   kapselt die neue Darstellung, damit andere Bereiche der
   Webseite unverändert bleiben.
   ========================================================== */

.wm-engine-directory.wm-engine-directory--compact {
  --wm-engine-blue: var(--wm-blue, #000091);
  --wm-engine-blue-dark: var(--wm-blue-dark, #00004f);
  --wm-engine-blue-light: var(--wm-blue-light, #1450ff);
  --wm-engine-text: #424955;
  --wm-engine-muted: #697386;
  --wm-engine-border: rgba(0, 0, 145, 0.20);
  --wm-engine-button-border: rgba(60, 63, 68, 0.55);
  --wm-engine-background: #ffffff;

  width: 100%;
  margin: 0;
  padding: clamp(52px, 6vw, 88px) 0;
  color: var(--wm-engine-text);
  background: var(--wm-engine-background);
}

.wm-engine-directory.wm-engine-directory--compact,
.wm-engine-directory.wm-engine-directory--compact *,
.wm-engine-directory.wm-engine-directory--compact *::before,
.wm-engine-directory.wm-engine-directory--compact *::after {
  box-sizing: border-box;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__inner {
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__heading {
  margin: 0 0 clamp(42px, 5vw, 68px);
  padding: 0;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--wm-engine-blue);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--wm-engine-blue-light);
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__title {
  margin: 0 0 16px;
  padding: 0;
  color: var(--wm-engine-blue-dark);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-align: left;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__intro {
  max-width: 850px;
  margin: 0;
  padding: 0;
  color: var(--wm-engine-muted);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  text-align: left;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group {
  margin: 0 0 clamp(58px, 7vw, 96px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__header {
  position: relative;
  margin: 0 0 30px;
  padding: 26px 0 0;
  background: transparent;
  border: 0;
}

/* Dünne Linie mit blauem Startsegment – wie in der Vorlage. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background:
    linear-gradient(
      to right,
      var(--wm-engine-blue-light) 0,
      var(--wm-engine-blue-light) 104px,
      #d9dbea 104px,
      #d9dbea 100%
    );
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__title {
  margin: 0 0 7px;
  padding: 0;
  color: var(--wm-engine-blue-dark);
  font-size: clamp(25px, 2.2vw, 36px);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__description {
  margin: 0;
  padding: 0;
  color: var(--wm-engine-muted);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
}

/* Flexible Kacheln statt gleich breiter, großer Karten. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__grid {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 28px 22px;
  list-style: none;
  background: transparent;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 94px;
  margin: 0;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: #ffffff;
  border: 2px solid var(--wm-engine-border);
  border-radius: 6px;
  box-shadow: none;
  animation: none !important;
  transform: none;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item::before,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item::after {
  content: none !important;
  display: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 11px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--wm-engine-text) !important;
  background: #ffffff !important;
  border: 2px solid var(--wm-engine-button-border) !important;
  border-radius: 4px;
  box-shadow: none !important;
  font-size: clamp(16px, 1.18vw, 22px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  text-transform: none;
  white-space: nowrap;
  transform: none;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__text {
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none !important;
}

/* Pfeile aus der alten Kartendarstellung sicher ausblenden. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__arrow {
  display: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item:hover,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item:focus-within {
  border-color: rgba(20, 80, 255, 0.58);
  box-shadow: 0 12px 28px rgba(0, 0, 90, 0.10);
  transform: translateY(-2px);
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:hover,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:focus {
  color: var(--wm-engine-blue) !important;
  background: #f7f9ff !important;
  border-color: var(--wm-engine-blue-light) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 145, 0.10) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.34);
  outline-offset: 4px;
}

/* CTA unter der Liste bleibt kompakt und fügt sich in das Design ein. */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-cta {
  margin-top: clamp(18px, 3vw, 42px);
}

@media (max-width: 980px) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    width: min(100% - 36px, 900px);
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__grid {
    gap: 18px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item {

    min-height: 86px;
    padding: 15px 18px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link {
    min-height: 50px;
    padding: 10px 17px;
    font-size: 17px;
  }
}

@media (max-width: 700px) {
  .wm-engine-directory.wm-engine-directory--compact {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    width: calc(100% - 32px);
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-group__header::before {
    background:
      linear-gradient(
        to right,
        var(--wm-engine-blue-light) 0,
        var(--wm-engine-blue-light) 72px,
        #d9dbea 72px,
        #d9dbea 100%
      );
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item {
    width: 100%;
    min-height: 0;
    padding: 12px;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link {
    width: 100%;
    min-height: 52px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link {
    transition: none !important;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item:hover,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item:focus-within,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link:hover,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link:focus {
    transform: none !important;
  }
}
/* ==========================================================
   WAGNER MOTOREN – MOTORLISTE WIE FAHRZEUGFILTER
   Diesen Block ganz ans Ende der custom.css setzen.
   ========================================================== */

.wm-engine-directory.wm-engine-directory--compact {
  --wm-list-blue: #1450ff;
  --wm-list-dark-blue: #00005b;
  --wm-list-text: #55585f;
  --wm-list-muted: #687083;
  --wm-list-outer-border: #d1d3f5;
  --wm-list-inner-border: #929292;

  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 56px 0 72px !important;
  overflow-x: clip !important;
  color: var(--wm-list-text) !important;
  background: #ffffff !important;
}

.wm-engine-directory.wm-engine-directory--compact,
.wm-engine-directory.wm-engine-directory--compact *,
.wm-engine-directory.wm-engine-directory--compact *::before,
.wm-engine-directory.wm-engine-directory--compact *::after {
  box-sizing: border-box !important;
}

/* Gleicher linker Seitenabstand wie beim Fahrzeugfilter */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 48px !important;
}

/* Überschrift */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__heading {
  width: 100% !important;
  margin: 0 0 44px !important;
  padding: 0 !important;
  transform: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__title {
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  overflow-wrap: break-word !important;
  color: var(--wm-list-dark-blue) !important;
  text-align: left !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__intro {
  max-width: 900px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wm-list-muted) !important;
  text-align: left !important;
}

/* Motorengruppen */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 64px !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__header {
  position: relative !important;
  width: 100% !important;
  margin: 0 0 26px !important;
  padding: 24px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__header::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 3px !important;
  background:
    linear-gradient(
      to right,
      var(--wm-list-blue) 0,
      var(--wm-list-blue) 104px,
      #d9dbea 104px,
      #d9dbea 100%
    ) !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--wm-list-dark-blue) !important;
  text-align: left !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__description {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wm-list-muted) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

/* Liste exakt wie der Fahrzeugfilter */
.wm-engine-directory.wm-engine-directory--compact

.wm-engine-directory__grid {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;


  display: flex !important;
  flex-flow: row wrap !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;

  gap: 14px 12px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;

  list-style: none !important;
  background: transparent !important;
  transform: none !important;
  animation: none !important;
}

/* Äußere Filterkachel */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item {
  position: relative !important;

  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 11px 13px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;

  background: #ffffff !important;
  border: 1px solid var(--wm-list-outer-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;

  transform: none !important;
  translate: none !important;
  animation: none !important;

  transition:
    border-color 150ms ease,
    background-color 150ms ease !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item::before,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item::after {
  content: none !important;
  display: none !important;
}

/* Innere Schaltfläche */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:link,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:visited {
  position: relative !important;

  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 28px !important;

  margin: 0 !important;
  padding: 4px 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;

  color: var(--wm-list-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--wm-list-inner-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  outline: 0;

  font-family: inherit !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;

  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;

  transform: none !important;
  translate: none !important;
  animation: none !important;

  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link::before,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link::after {
  content: none !important;
  display: none !important;
}

/* Text vollständig zurücksetzen */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__text {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;

  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;

  text-decoration: none !important;
  text-shadow: none !important;
}

/* Alte Pfeile entfernen */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__arrow {
  display: none !important;
}

/* Mouseover wie beim Filter */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item:hover,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__item:focus-within {
  background: #ffffff !important;
  border-color: var(--wm-list-blue) !important;
  box-shadow: none !important;
  transform: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:hover,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:focus {
  color: var(--wm-list-text) !important;
  background: #ffffff !important;
  border-color: var(--wm-list-blue) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__link:focus-visible {
  outline: 2px solid var(--wm-list-blue) !important;
  outline-offset: 2px !important;
}


/* Tablet */
@media (max-width: 1200px) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
}

/* Smartphone und schmale Ansichten */
@media (max-width: 760px) {
  .wm-engine-directory.wm-engine-directory--compact {
    padding-top: 44px !important;
    padding-bottom: 58px !important;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__grid {
    gap: 12px 10px !important;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item {
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 10px 11px !important;
  }

  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link:link,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link:visited {
    max-width: 100% !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__item,
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__link {
    transition: none !important;
  }
}
/* ==========================================================
   KORREKTUR: MOTORENÜBERSICHT SAUBER AM SEITENRASTER
   Der übergeordnete Joomla-Container liefert bereits
   den korrekten linken und rechten Seitenabstand.
   ========================================================== */

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Überschrift, Gruppen und CTA bleiben im gleichen Raster */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__heading,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group,
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-cta {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Verhindert horizontales Abschneiden und Überbreite */
.wm-engine-directory.wm-engine-directory--compact {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  overflow-x: hidden !important;
}

.wm-engine-directory.wm-engine-directory--compact
.wm-engine-directory__grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    width: 100% !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* Smartphone */
@media (max-width: 760px) {
  .wm-engine-directory.wm-engine-directory--compact
  .wm-engine-directory__inner {
    width: 100% !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
/* Zusätzliche lange Trennlinien in der Motorenübersicht entfernen */
.wm-engine-directory.wm-engine-directory--compact
.wm-engine-group__header::before {
  display: none !important;
  content: none !important;
}
/* ==========================================================
   Modellfilter Deutsch und Englisch scrollbar
   Keine sprachabhängige oder automatisch erzeugte ID verwenden
   ========================================================== */

.engine-selection-position
.jfilters-filters-container
> .jfilters-filter-container:nth-child(2)
.jfilters-filter-list {
  max-height: 320px;
  padding-right: 10px;

  overflow-x: hidden;
  overflow-y: auto !important;

  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(0, 0, 145, 0.3)
    transparent;
}


/* Chrome, Edge und Safari */

.engine-selection-position
.jfilters-filters-container
> .jfilters-filter-container:nth-child(2)
.jfilters-filter-list::-webkit-scrollbar {
  width: 6px;
}

.engine-selection-position
.jfilters-filters-container
> .jfilters-filter-container:nth-child(2)
.jfilters-filter-list::-webkit-scrollbar-track {
  background: transparent;
}

.engine-selection-position
.jfilters-filters-container
> .jfilters-filter-container:nth-child(2)
.jfilters-filter-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 145, 0.28);
  border-radius: 20px;
}

.engine-selection-position
.jfilters-filters-container
> .jfilters-filter-container:nth-child(2)
.jfilters-filter-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 145, 0.48);
}
/* ==========================================================
   Wagner Motoren – Beitragsschlagwörter VERBINDLICH

   Gleiche kompakte Darstellung wie die Tags „Passend für“.
   Dieser Block setzt auch höher spezifische Theme-Regeln zurück.
   ========================================================== */

html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
) {
  display: block !important;

  width: 100% !important;
  margin: 24px 0 10px !important;
  padding: 0 !important;

  text-decoration: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__label {
  display: block !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  color: var(--wm-text, #11162a) !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  gap: 12px 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  text-decoration: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Grundzustand, besuchte Links und Plugin-Regeln vollständig zurücksetzen */
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__list
> a.wm-article-tags__link,
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__list
> a.wm-article-tags__link:link,
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__list
> a.wm-article-tags__link:visited {
  all: unset !important;

  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0.42rem 0.8rem !important;

  color: var(--wm-blue, #000091) !important;
  background: var(--wm-white, #ffffff) !important;
  background-image: none !important;

  border: 1px solid rgba(0, 0, 145, 0.24) !important;
  border-bottom: 1px solid rgba(0, 0, 145, 0.24) !important;
  border-radius: 999px !important;

  box-shadow: none !important;

  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;

  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;

  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: solid !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;

  cursor: pointer !important;
  transform: none !important;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease !important;
}

/* Vollständig blauer Hover */
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__list
> a.wm-article-tags__link:hover,
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__list
> a.wm-article-tags__link:focus,
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
.wm-article-tags__list
> a.wm-article-tags__link:focus-visible {
  color: var(--wm-white, #ffffff) !important;
  background: var(--wm-blue, #000091) !important;
  background-image: none !important;

  border-color: var(--wm-blue, #000091) !important;

  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;

  box-shadow: none !important;
  transform: none !important;
}

/* Sämtliche Theme-Linien abschalten */
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
a.wm-article-tags__link::before,
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
a.wm-article-tags__link::after {
  content: none !important;
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Auch mögliche innere Elemente dürfen keine Linie erhalten */
html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
a.wm-article-tags__link
* {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body
.com-content-article
.astroid-article-text
:is(
  #wm-article-tags-23,
  .wm-article-tags.wm-article-tags--links-plain
)
a.wm-article-tags__link:focus-visible {
  outline: 3px solid rgba(20, 80, 255, 0.28) !important;
  outline-offset: 3px !important;
}

@media (max-width: 650px) {
  html body
  .com-content-article
  .astroid-article-text
  :is(
    #wm-article-tags-23,
    .wm-article-tags.wm-article-tags--links-plain
  )
  .wm-article-tags__list {
    gap: 10px 8px !important;
  }

  /* Keine erneute Vergrößerung auf Mobilgeräten */
  html body
  .com-content-article
  .astroid-article-text
  :is(
    #wm-article-tags-23,
    .wm-article-tags.wm-article-tags--links-plain
  )
  .wm-article-tags__list
  > a.wm-article-tags__link {
    min-height: 34px !important;
    padding: 0.42rem 0.8rem !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
  }
}
/* ==========================================================
   Zurück-zur-Motorenübersicht – linke Inhaltslinie
   Modul: mod-custom575
   ========================================================== */

#ba1-tkghnd6m6,
#ba1-tkghnd6m6 .bottom-a-1-position,
#ba1-tkghnd6m6 #mod-custom575 {
  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;

  padding-right: 0 !important;
  padding-left: 0 !important;
}

#ba1-tkghnd6m6 #mod-custom575 .wm-home-hero__actions {
  box-sizing: border-box;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding-top: 38px !important;
  padding-right: var(--wm-start-content-gutter) !important;
  padding-bottom: 0 !important;
  padding-left: var(--wm-start-content-gutter) !important;

  display: flex;
  justify-content: flex-start;
}

#ba1-tkghnd6m6 #mod-custom575 .wm-btn {
  margin: 0 !important;
}

/* Smartphone – gleiche Inhaltslinie wie Artikel und Schlagwörter */
@media (max-width: 650px) {
  #ba1-tkghnd6m6 #mod-custom575 .wm-home-hero__actions {
    padding-right:
      calc(40px + env(safe-area-inset-right, 0px)) !important;

    padding-left:
      calc(40px + env(safe-area-inset-left, 0px)) !important;
  }
}

@media (max-width: 390px) {
  #ba1-tkghnd6m6 #mod-custom575 .wm-home-hero__actions {
    padding-right:
      calc(24px + env(safe-area-inset-right, 0px)) !important;

    padding-left:
      calc(24px + env(safe-area-inset-left, 0px)) !important;
  }
}
/* ==========================================================
   VR6-Karte – Motorsymbol wiederherstellen
   ========================================================== */

.wm-engine-content .wm-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.wm-engine-content .wm-card__icon {
  width: 64px;
  min-width: 64px;
  min-height: 64px;

  display: flex !important;
  align-items: flex-start;
  justify-content: center;

  color: var(--wm-blue, #000091);
}

.wm-engine-content .wm-card__icon--engine {
  visibility: visible !important;
  opacity: 1 !important;
}

.wm-engine-content .wm-card__engine-image {
  display: block !important;

  width: 54px;
  height: 54px;

  background-color: currentColor;

  -webkit-mask-image:
    url("/images/2Austauschmotoren/Wagner%20Motoren%20Austauschmotor.webp");
  mask-image:
    url("/images/2Austauschmotoren/Wagner%20Motoren%20Austauschmotor.webp");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;


  -webkit-mask-size: contain;
  mask-size: contain;

  visibility: visible !important;
  opacity: 1 !important;
}

.wm-engine-content .wm-card__content {
  min-width: 0;
}

.wm-engine-content .wm-card__content h3 {
  margin-top: 0;
}

/* Smartphone */
@media (max-width: 650px) {
  .wm-engine-content .wm-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
  }

  .wm-engine-content .wm-card__icon {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  .wm-engine-content .wm-card__engine-image {
    width: 46px;
    height: 46px;
  }
}
/* ==========================================================
   Wagner Motoren – Generalüberholung-Kacheln

   Verwendet die vorhandenen Master-Klassen:
   .wm-contact-cards
   .wm-contact-cards__grid
   .wm-contact-card
   .wm-contact-card__icon
   .wm-contact-card__title
   .wm-contact-card__content

   Die blaue Ecke ist statisch und reagiert nicht auf Hover.
   ========================================================== */


/* Weißer Hintergrund hinter dem gesamten Kachelbereich */

.wm-contact-cards.wm-rebuild-cards {
  padding-top: clamp(28px, 3.5vw, 48px);
  padding-bottom: clamp(34px, 4vw, 58px);

  background: #ffffff;
}


/* Desktop: drei Kacheln pro Zeile */

.wm-rebuild-cards
.wm-contact-cards__grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


/* Kacheln mit statischer blauer Ecke rechts oben */

.wm-rebuild-cards
.wm-contact-card {
  min-height: 0;

  background:
    radial-gradient(
      ellipse 58% 48% at 100% 0%,
      rgba(20, 80, 255, 0.09) 0%,
      rgba(20, 80, 255, 0.055) 24%,
      rgba(20, 80, 255, 0.022) 44%,
      transparent 68%
    ),
    #ffffff !important;
}


/* Eventuell vorhandenen alten Eckeffekt deaktivieren */

.wm-rebuild-cards
.wm-contact-card::after {
  content: none !important;
  display: none !important;
}


/* Inhalt der Kacheln */

.wm-rebuild-cards
.wm-contact-card__content {
  font-size: clamp(15px, 0.92vw, 17px);
  line-height: 1.65;
}


/* Tablet: zwei Kacheln pro Zeile */

@media (max-width: 1000px) {
  .wm-rebuild-cards
  .wm-contact-cards__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* Smartphone: eine Kachel pro Zeile */

@media (max-width: 599px) {
  .wm-contact-cards.wm-rebuild-cards {
    padding-top: 24px;
    padding-bottom: 38px;
  }

  .wm-rebuild-cards
  .wm-contact-cards__grid {
    grid-template-columns: 1fr;
  }
}/* ==========================================================
/* ==========================================================
   Wagner Motoren – dezenter Leitsatz
   ========================================================== */

.com-content-article cite,
.wm-engine-content cite {
  display: block;

  margin: 24px 0;
  padding: 14px 18px;

  color: var(--wm-blue-dark, #00004f);

  background:
    linear-gradient(
      135deg,
      rgba(0, 0, 145, 0.055) 0%,
      rgba(20, 80, 255, 0.025) 100%
    );

  border: 1px solid rgba(0, 0, 145, 0.1);
  border-left: 3px solid var(--wm-blue, #000091);
  border-radius: 0 5px 5px 0;

  font-size: clamp(16px, 1.2vw, 19px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;

  text-wrap: balance;
  overflow-wrap: break-word;
}/* ==========================================================
   Wagner Motoren GmbH – Qualitätssiegel

   Wichtig:
   Dieser Block verändert ausschließlich das Siegel.
   Hersteller-, Modell- und Motorcode-Schriften werden
   ausdrücklich nicht überschrieben.
   ========================================================== */

.wm-engine-seal,
.wm-engine-seal *,
.wm-engine-seal *::before,
.wm-engine-seal *::after {
  box-sizing: border-box;
}

.wm-engine-seal {
  --wm-engine-seal-gap: 14px;

  position: fixed !important;
  z-index: 9100;

  right:
    max(
      var(--wm-engine-seal-gap),
      env(safe-area-inset-right, 0px)
    );

  bottom:
    var(
      --wm-engine-seal-bottom,
      calc(
        var(
          --wm-contact-cta-footer-offset,
          0px
        ) +
        var(
          --wm-contact-cta-height,
          86px
        ) +
        var(--wm-engine-seal-gap) +
        env(
          safe-area-inset-bottom,
          0px
        )
      )
    );

  width:
    clamp(
      118px,
      8.5vw,
      155px
    );

  max-width:
    calc(100vw - 28px);

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform-origin: right bottom;

  will-change:
    opacity,
    transform;
}

.wm-engine-seal[hidden] {
  display: none !important;
}


/* ==========================================================
   Sichtbarer und geschlossener Zustand
   ========================================================== */

.wm-engine-seal.is-visible {
  visibility: visible;
  pointer-events: auto;

  animation:
    wm-engine-seal-show
    560ms
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}

.wm-engine-seal.is-closing {
  visibility: visible;
  pointer-events: none;

  animation:
    wm-engine-seal-hide
    340ms
    ease-in
    both;
}


/* ==========================================================
   Verlinkung
   ========================================================== */

.wm-engine-seal__link,
.wm-engine-seal__link:link,
.wm-engine-seal__link:visited,
.wm-engine-seal__link:hover,
.wm-engine-seal__link:focus,
.wm-engine-seal__link:focus-visible,
.wm-engine-seal__link:active {
  position: relative;

  display: block;

  width: 100%;
  height: auto;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 50%;

  box-shadow: none !important;

  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;

  cursor: pointer;
  touch-action: manipulation;
}


/* ==========================================================
   Siegelbild
   ========================================================== */

.wm-engine-seal__image {
  display: block !important;

  width: 100% !important;
  height: auto !important;
  max-width: none !important;

  aspect-ratio: 1 / 1;
  object-fit: contain;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff;

  border:
    1px solid
    rgba(0, 0, 145, 0.14);

  border-radius: 50%;

  box-shadow:
    0 12px 30px
    rgba(0, 0, 79, 0.2),
    0 4px 12px
    rgba(0, 0, 0, 0.12);

  transition:
    transform 240ms ease,
    filter 240ms ease,
    box-shadow 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .wm-engine-seal__link:hover
  .wm-engine-seal__image {
    transform: scale(1.025);

    box-shadow:
      0 16px 36px
      rgba(0, 0, 79, 0.24),
      0 6px 16px
      rgba(0, 0, 0, 0.14);
  }
}


/* ==========================================================
   Mouseover-Text

   Inhalt wird sprachabhängig über JavaScript gesetzt:
   DE: Wir tauschen Ihren defekten Motor aus
   EN: We replace your defective engine
   ========================================================== */

.wm-engine-seal__link::after {
  content:
    attr(data-tooltip);

  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 5;

  width: max-content;

  max-width:
    min(
      290px,
      calc(100vw - 30px)
    );

  padding: 9px 12px;

  color: #ffffff;

  background:
    var(
      --wm-blue-dark,
      #00004f
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 5px;

  box-shadow:
    0 9px 24px
    rgba(0, 0, 79, 0.24);

  font-family:
    inherit;

  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate3d(
      0,
      6px,
      0
    );

  transition:
    opacity 170ms ease,
    visibility 170ms ease,
    transform 170ms ease;
}

.wm-engine-seal__link:hover::after,
.wm-engine-seal__link:focus-visible::after {
  opacity: 1;
  visibility: visible;

  transform:
    translate3d(
      0,
      0,
      0
    );
}

.wm-engine-seal__link:focus-visible {
  outline:
    3px solid
    rgba(20, 80, 255, 0.44) !important;

  outline-offset: 4px;
}


/* ==========================================================
   Schließen-Button
   ========================================================== */

.wm-engine-seal__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 7;

  width: 29px;
  height: 29px;

  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--wm-blue, #000091),
      var(--wm-blue-light, #1450ff)
    );

  border:
    1.5px solid
    rgba(255, 255, 255, 0.96);

  border-radius: 50%;

  box-shadow:
    0 5px 14px
    rgba(0, 0, 79, 0.28);

  cursor: pointer;
  touch-action: manipulation;

  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.wm-engine-seal__close:hover {
  transform:
    scale(1.08)
    rotate(5deg);

  box-shadow:
    0 7px 18px
    rgba(0, 0, 79, 0.34);
}

.wm-engine-seal__close:focus-visible {
  outline:
    3px solid
    rgba(20, 80, 255, 0.46);

  outline-offset: 3px;
}


/* Gezeichnetes X */

.wm-engine-seal__close-icon {
  position: relative;

  display: block;

  width: 14px;
  height: 14px;
}

.wm-engine-seal__close-icon::before,
.wm-engine-seal__close-icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 15px;
  height: 2px;

  background: #ffffff;
  border-radius: 2px;
}

.wm-engine-seal__close-icon::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

.wm-engine-seal__close-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


/* ==========================================================
   Animationen
   ========================================================== */

@keyframes wm-engine-seal-show {
  0% {
    opacity: 0;

    transform:
      translate3d(
        26px,
        20px,
        0
      )
      scale(0.78)
      rotate(5deg);
  }

  70% {
    opacity: 1;

    transform:
      translate3d(
        -2px,
        -1px,
        0
      )
      scale(1.025)
      rotate(-0.5deg);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1)
      rotate(0);
  }
}

@keyframes wm-engine-seal-hide {
  0% {
    opacity: 1;

    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        24px,
        16px,
        0
      )
      scale(0.8)
      rotate(4deg);
  }
}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 900px) {
  .wm-engine-seal {
    --wm-engine-seal-gap: 12px;

    width:
      clamp(
        112px,
        15vw,
        140px
      );
  }

  .wm-engine-seal__close {
    width: 28px;
    height: 28px;
  }
}


/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 650px) {
  .wm-engine-seal {
    --wm-engine-seal-gap: 9px;

    width:
      clamp(
        100px,
        28vw,
        118px
      );

    right:
      max(
        9px,
        env(
          safe-area-inset-right,
          0px
        )
      );
  }

  .wm-engine-seal__close {
    top: -1px;
    right: -1px;

    width: 27px;
    height: 27px;
  }

  .wm-engine-seal__close-icon {
    width: 13px;
    height: 13px;
  }

  .wm-engine-seal__close-icon::before,
  .wm-engine-seal__close-icon::after {
    width: 14px;
  }

  .wm-engine-seal__link::after {
    right: 0;

    max-width:
      min(
        250px,
        calc(100vw - 20px)
      );

    padding: 8px 10px;

    font-size: 13px;
  }
}


/* Sehr kleine Bildschirme */

@media (max-width: 380px) {
  .wm-engine-seal {
    width: 96px;
  }
}


/* Unter 300 Pixeln ausblenden */

@media (max-width: 299.98px) {
  .wm-engine-seal {
    display: none !important;
  }
}


/* ==========================================================
   Reduzierte Bewegungen
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .wm-engine-seal.is-visible,
  .wm-engine-seal.is-closing {
    animation: none;
  }

  .wm-engine-seal.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .wm-engine-seal.is-closing {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  .wm-engine-seal__image,
  .wm-engine-seal__close,
  .wm-engine-seal__link::after {
    transition: none;
  }
}

@media (max-width: 650px) {
  .com-content-article cite,
  .wm-engine-content cite {
    margin: 20px 0;
    padding: 12px 15px;

    font-size: 16px;
    line-height: 1.5;
  }
}


/* ==========================================================
   FINALER GRID-FIX: Motor reparieren mit sieben Beiträgen

   Gleiche Anordnung wie bei den sieben Serviceangeboten:
   Desktop groß: Intro + 3 Karten / danach 4 Karten
   Desktop klein: Intro (2 Spalten) + 1 Karte / danach 3 + 3
   Tablet:        2 Spalten
   Smartphone:    1 Spalte

   Dieser Abschlussblock muss am Dateiende stehen.
   ========================================================== */

body.motor-reparieren-alias
  #mod-custom472
  .wm-news-overview__grid
  > .wm-news-card:nth-of-type(7) {
  grid-area: card-7 !important;
}

body.motor-reparieren-alias
  #mod-custom472
  .wm-news-overview__grid {
  grid-template-columns:
    minmax(300px, 0.98fr)
    repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:
    "intro  card-1 card-2 card-3"
    "card-4 card-5 card-6 card-7" !important;
}

@media (max-width: 1399.98px) {
  body.motor-reparieren-alias
    #mod-custom472
    .wm-news-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "intro  intro  card-1"
      "card-2 card-3 card-4"
      "card-5 card-6 card-7" !important;
  }
}

@media (min-width: 640px) and (max-width: 999.98px) {
  body.motor-reparieren-alias
    #mod-custom472
    .wm-news-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "intro  intro"
      "card-1 card-2"
      "card-3 card-4"
      "card-5 card-6"
      "card-7 ." !important;
  }
}

@media (max-width: 639.98px) {
  body.motor-reparieren-alias
    #mod-custom472
    .wm-news-overview__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "intro"
      "card-1"
      "card-2"
      "card-3"
      "card-4"
      "card-5"
      "card-6"
      "card-7" !important;
  }
}
/* ==========================================================
   Wagner Motoren – News-Grid Englisch

   Englisches Modul: mod-custom473
   Body-Klasse:      news-alias

   Ergänzt die siebte News-Karte und bildet dieselbe
   ausgewogene Grid-Struktur wie auf der deutschen Seite.
   ========================================================== */


/* Siebte Karte einer eigenen Grid-Fläche zuweisen */

body.news-alias
#mod-custom473
.wm-news-overview__grid
> .wm-news-card:nth-of-type(7) {
  grid-area: card-7 !important;
}


/* Große Desktop-Bildschirme: vier Spalten */

body.news-alias
#mod-custom473
.wm-news-overview__grid {
  grid-template-columns:
    minmax(300px, 0.98fr)
    repeat(3, minmax(0, 1fr)) !important;

  grid-template-areas:
    "intro  card-1 card-2 card-3"
    "card-4 card-5 card-6 card-7" !important;
}


/* Normale Desktop- und Notebook-Bildschirme: drei Spalten */

@media (max-width: 1399.98px) {

  body.news-alias
  #mod-custom473
  .wm-news-overview__grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    grid-template-areas:
      "intro  intro  card-1"
      "card-2 card-3 card-4"
      "card-5 card-6 card-7" !important;
  }

}


/* Tablet: zwei Spalten */

@media (min-width: 640px) and (max-width: 999.98px) {

  body.news-alias
  #mod-custom473
  .wm-news-overview__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas:
      "intro  intro"
      "card-1 card-2"
      "card-3 card-4"
      "card-5 card-6"
      "card-7 ." !important;
  }

}


/* Smartphone: eine Spalte */

@media (max-width: 639.98px) {

  body.news-alias
  #mod-custom473
  .wm-news-overview__grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-areas:
      "intro"
      "card-1"
      "card-2"
      "card-3"
      "card-4"
      "card-5"
      "card-6"
      "card-7" !important;
  }

}
/* ==========================================================
   23. Wagner Motoren – Klaro und Cookie-Einstellungen
   Verwendet die bestehenden Farbvariablen der Website
   ========================================================== */
#klaro {
  --wm-cookie-width: 680px;
  --wm-cookie-gap: 20px;
  --wm-cookie-radius: 6px;
  --wm-cookie-layer: 100000;
}

/* Über Header und Telefonleiste */
#klaro .cookie-notice,
#klaro .cookie-modal {
  z-index: var(--wm-cookie-layer) !important;
}

/* Einfaches Feld: unten mittig */
#klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(
    var(--wm-cookie-gap) + env(safe-area-inset-bottom, 0px)
  ) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: var(--wm-cookie-width) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  max-height: calc(100vh - 64px);
  max-height: calc(
    100dvh - 64px - env(safe-area-inset-bottom, 0px)
  );
  overflow-y: auto;
  overscroll-behavior: contain;

  color: var(--wm-text) !important;
  background: var(--wm-white) !important;
  border: 1px solid var(--wm-border) !important;
  border-top: 3px solid var(--wm-blue) !important;
  border-radius: var(--wm-cookie-radius) !important;

  box-shadow:
    0 10px 32px
    color-mix(in srgb, var(--wm-blue-deep) 22%, transparent);

  font-family: inherit !important;
}

/* Banner-Inhalt */
#klaro .cookie-notice .cn-body {
  margin: 0 !important;
  padding: 22px 24px !important;
  background: transparent !important;
}

#klaro .cookie-notice .cn-body p {
  margin: 0 0 16px !important;
  color: var(--wm-text) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere;
}

/* Auswahl-Link oberhalb der Buttons */
#klaro .cookie-notice .cn-ok {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin: 0 !important;
}

#klaro .cookie-notice .cn-learn-more {
  align-self: center;
  margin: 0 !important;
  padding: 4px 0 !important;

  color: var(--wm-blue) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  text-decoration: underline !important;
  text-underline-offset: 3px;
}

#klaro .cookie-notice .cn-learn-more:hover {
  color: var(--wm-blue-light) !important;
}

/* Zwei gleich breite Entscheidungsbuttons */
#klaro .cookie-notice .cn-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Identische Darstellung: Ablehnen und Zustimmen */
#klaro .cookie-notice .cn-buttons .cm-btn {
  appearance: none;
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 18px !important;

  color: var(--wm-white) !important;
  background: var(--wm-gradient) !important;
  border: 2px solid var(--wm-blue) !important;
  border-radius: 4px !important;
  box-shadow: none !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: normal !important;

  cursor: pointer;
  touch-action: manipulation;
}

#klaro .cookie-notice .cn-buttons .cm-btn:hover,
#klaro .cookie-notice .cn-buttons .cm-btn:active {
  color: var(--wm-white) !important;
  background: var(--wm-blue-dark) !important;
  border-color: var(--wm-blue-dark) !important;
}

/* Cookie-Einstellungen im blauen Footer */
.wm-cookie-settings {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 10px 18px;

  color: var(--wm-white) !important;
  background: transparent !important;
  border: 1px solid var(--wm-white) !important;
  border-radius: 4px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;

  cursor: pointer;
  touch-action: manipulation;
}

.wm-cookie-settings:hover,
.wm-cookie-settings:active {
  color: var(--wm-blue) !important;
  background: var(--wm-white) !important;
}

/* Tastaturbedienung */
#klaro .cookie-notice .cm-btn:focus-visible,
#klaro .cookie-notice .cn-learn-more:focus-visible,
.wm-cookie-settings:focus-visible {
  outline: 3px solid var(--wm-blue-light) !important;
  outline-offset: 4px !important;
}

/* Smartphone */
@media (max-width: 480px) {
  #klaro {
    --wm-cookie-gap: 12px;
  }

  #klaro .cookie-notice:not(.cookie-modal-notice) {
    width: calc(100% - 24px) !important;
  }

  #klaro .cookie-notice .cn-body {
    padding: 18px !important;
  }

  #klaro .cookie-notice .cn-buttons {
    gap: 10px !important;
  }
}

/* Sehr schmale Displays: beide Buttons untereinander */
@media (max-width: 360px) {
  #klaro .cookie-notice .cn-buttons {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================
   Wagner Motoren – Klaro-Einstellungsfenster
   ========================================================== */

/* Hintergrund hinter dem Fenster */
#klaro .cookie-modal .cm-bg {
  background: var(--wm-blue-deep) !important;
  opacity: 0.75 !important;
}

/* Fenster */
#klaro .cookie-modal .cm-modal {
  color: var(--wm-text) !important;
  background: var(--wm-white) !important;
  border: 1px solid var(--wm-border) !important;
  border-top: 4px solid var(--wm-blue) !important;
  border-radius: 6px !important;

  box-shadow:
    0 16px 48px
    color-mix(in srgb, var(--wm-blue-deep) 30%, transparent);

  font-family: inherit !important;
}

/* Kopf, Inhalt und Fußbereich */
#klaro .cookie-modal .cm-header,
#klaro .cookie-modal .cm-body,
#klaro .cookie-modal .cm-footer {
  color: var(--wm-text) !important;
  background: var(--wm-white) !important;
  border-color: var(--wm-border) !important;
}

/* Überschriften und Dienstnamen */
#klaro .cookie-modal .cm-header h1,
#klaro .cookie-modal .cm-title,
#klaro .cookie-modal .cm-list-title {
  color: var(--wm-blue) !important;
}

/* Beschreibungstexte */
#klaro .cookie-modal p,
#klaro .cookie-modal .cm-list-description {
  color: var(--wm-text) !important;
}

/* Links und aufklappbare Dienstliste */
#klaro .cookie-modal a,
#klaro .cookie-modal .cm-caret,
#klaro .cookie-modal .cm-list-title button {
  color: var(--wm-blue) !important;
}

#klaro .cookie-modal a:hover,
#klaro .cookie-modal .cm-list-title button:hover {
  color: var(--wm-blue-light) !important;
}

/* Schalter: ausgeschaltet */
#klaro .cookie-modal .cm-switch .slider {
  background: var(--wm-border) !important;
}

#klaro .cookie-modal .cm-switch .slider::before {
  background: var(--wm-white) !important;
}

/* Schalter: eingeschaltet */
#klaro .cookie-modal input:checked + label .cm-switch .slider,
#klaro .cookie-modal input:checked + .cm-switch .slider {
  background: var(--wm-blue-light) !important;
}

/* Alle Entscheidungsbuttons gleich gestalten */
#klaro .cookie-modal .cm-footer .cm-btn {
  min-height: 44px;
  padding: 12px 18px !important;

  color: var(--wm-white) !important;
  background: var(--wm-gradient) !important;
  border: 2px solid var(--wm-blue) !important;
  border-radius: 4px !important;
  box-shadow: none !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center;
  white-space: normal;

  cursor: pointer;
}

#klaro .cookie-modal .cm-footer .cm-btn:hover,
#klaro .cookie-modal .cm-footer .cm-btn:active {
  color: var(--wm-white) !important;
  background: var(--wm-blue-dark) !important;
  border-color: var(--wm-blue-dark) !important;
}

/* Schließen-Button */
#klaro .cookie-modal .hide {
  color: var(--wm-blue) !important;
  background: transparent !important;
}

#klaro .cookie-modal .hide svg {
  stroke: currentColor !important;
}

/* Klaro-Hinweis */
#klaro .cookie-modal .cm-powered-by,
#klaro .cookie-modal .cm-powered-by a {
  color: var(--wm-muted) !important;
}

/* Sichtbarer Tastaturfokus */
#klaro .cookie-modal button:focus-visible,
#klaro .cookie-modal a:focus-visible {
  outline: 3px solid var(--wm-blue-light) !important;
  outline-offset: 3px !important;
}

#klaro .cookie-modal input:focus-visible + label .cm-switch {
  outline: 3px solid var(--wm-blue-light);
  outline-offset: 3px;
}

/* Footer: Cookie-Button mit vorhandenem Master-Design */
.wm-btn.wm-cookie-settings {
  --wm-btn-blue: var(--wm-blue);
  --wm-btn-blue-dark: var(--wm-blue-dark);
  --wm-btn-blue-light: var(--wm-blue-light);

  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  margin-top: 16px;
  padding: 12px 20px;

  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: normal;
}