/* LD Tools (ABS) – module Selection: new look of the vehicle selection (Lorens Digital, 2026-10-08). Loaded only on the home page
   and on the make pages (LD_Selection::is_target). Built from the approved local demo ld-home-demo 1.3.1. */

/* ═════════ home page: make tiles with PKW / Motorrad cards (markup from LD_Selection::home_html) ═════════ */
.ldx{--ldx-red:#bf1414;--ldx-brd:#e3e5e8;margin:10px 0 30px;padding:24px;background:#f6f7f8;border:1px solid var(--ldx-brd);border-radius:8px;
	font-family:"Open Sans",arial,helvetica,sans-serif;color:#323232;}
.ldx,.ldx *{box-sizing:border-box;}
.ldx svg,.ldx svg *{color:inherit !important;}
.ldx svg path{fill:none !important;}
.ldx-head{text-align:center;margin-bottom:16px;}
.ldx .ldx-title{margin:0 0 6px;padding:0;border:0;background:none;color:#323232;font-size:22px;font-weight:700;line-height:1.3;text-transform:none;}
.ldx .ldx-sub{margin:0;color:#6b7280;font-size:14px;line-height:1.5;}

/* PKW / Motorrad switch without JavaScript: hidden radio buttons, the cards are their labels */
.ldx .ldx-radio{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;}
.ldx-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,220px));justify-content:center;gap:14px;margin:0 auto 22px;}
.ldx .ldx-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;margin:0;padding:18px 14px 16px;
	background:#fff;border:1px solid var(--ldx-brd);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);color:#323232;cursor:pointer;
	font:700 18px/1.2 "Open Sans",arial,sans-serif;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s;}
.ldx .ldx-tab:hover{border-color:var(--ldx-red);box-shadow:0 8px 20px -10px rgba(191,20,20,.55);transform:translateY(-2px);}
.ldx #ldx-pkw:focus-visible ~ .ldx-tabs .ldx-tab--pkw,.ldx #ldx-moto:focus-visible ~ .ldx-tabs .ldx-tab--moto{outline:2px solid var(--ldx-red);outline-offset:3px;}
.ldx-tab-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fbecee;color:var(--ldx-red);transition:background .15s,color .15s;}
.ldx .ldx-tab svg{width:36px;height:36px;stroke-width:1.6;}
.ldx-tab-label{display:block;}
.ldx-count{display:inline-block;padding:2px 10px;border-radius:12px;background:#f3f4f6;color:#6b7280;font-size:12px;font-weight:600;line-height:18px;}
/* selected card */
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto{border:2px solid var(--ldx-red);padding:17px 13px 15px;background:#fff;box-shadow:0 10px 24px -12px rgba(191,20,20,.6);}
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw .ldx-tab-ico,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto .ldx-tab-ico{background:var(--ldx-red);color:#fff;}
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw .ldx-tab-label,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto .ldx-tab-label{color:var(--ldx-red);}
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw .ldx-count,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto .ldx-count{background:#fbecee;color:var(--ldx-red);}
/* small pointer from the selected card to the makes below */
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw::after,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;margin-left:-7px;background:#fff;
	border-right:2px solid var(--ldx-red);border-bottom:2px solid var(--ldx-red);transform:rotate(45deg);}

.ldx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.ldx .ldx-grid--moto,.ldx #ldx-moto:checked ~ .ldx-grid--pkw{display:none;}
.ldx #ldx-moto:checked ~ .ldx-grid--moto{display:grid;}
.ldx .ldx-make{display:flex;align-items:center;gap:8px;min-height:62px;padding:12px 12px 12px 16px;background:#fff;border:1px solid var(--ldx-brd);border-radius:6px;
	color:#323232 !important;text-decoration:none !important;transition:border-color .15s,box-shadow .15s,transform .15s;}
.ldx .ldx-make:hover,.ldx .ldx-make:focus-visible{border-color:var(--ldx-red);box-shadow:0 6px 16px -8px rgba(191,20,20,.55);outline:none;transform:translateY(-1px);}
.ldx-name{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.25;}
.ldx .ldx-chev{flex:0 0 auto;width:16px;height:16px;color:var(--ldx-red) !important;stroke-width:2.4;transition:transform .15s;}
.ldx-make:hover .ldx-chev{transform:translateX(2px);}
.ldx .ldx-make--kontakt{background:#fbecee;border-color:var(--ldx-red);color:var(--ldx-red) !important;}

@media (max-width:767px){
	.ldx{padding:16px 12px;}
	.ldx .ldx-title{font-size:19px;}
	.ldx .ldx-sub{font-size:13px;}
	.ldx-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
	.ldx .ldx-tab{min-height:124px;padding:14px 8px 12px;font-size:16px;gap:6px;}
	.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto{padding:13px 7px 11px;}
	.ldx-tab-ico{width:52px;height:52px;}
	.ldx .ldx-tab svg{width:30px;height:30px;}
	.ldx-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
	.ldx .ldx-make{min-height:54px;padding:10px 10px 10px 12px;}
	.ldx-name{font-size:13px;}
}

/* ═════════ make pages: category → gearbox type → model in the same style ═════════
   Two layouts: new .absx (Audi, VW, Seat, Skoda) and old ul.tabs + .fahrzeugmodel-auswahl. ":root body" keeps the
   specificity of the tested demo selectors. */
:root body { --ldn-red: #bf1414; --ldn-tint: #fbecee; --ldn-soft: #fdf4f5; --ldn-brd: #e3e5e8; --ldn-panel: #f6f7f8; --ldn-text: #323232; --ldn-grey: #6b7280; }

/* ═════════ new layout (.absx) ═════════ */

/* step headings instead of the black bar */
:root body .absx .absx-info { background: none; color: var(--ldn-text); font-size: 22px; font-weight: 700; line-height: 1.3; padding: 0; margin: 4px 0 16px; border: 0; }
:root body .absx .absx-info--sub { font-size: 16px; color: var(--ldn-text); padding: 0; margin: 4px 0 14px; border: 0; }
:root body .absx .absx-h { color: var(--ldn-text); font-size: 16px; font-weight: 700; text-align: center; margin: 6px 0 14px; }

/* level 1 – category: large cards, icon in a circle above the label */
:root body .absx > .absx-group > .absx-tabs { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); max-width: 680px; margin: 0 auto; gap: 12px; }
:root body .absx .absx-tab {
	background: radial-gradient(circle at 50% 50px, var(--ldn-tint) 34px, transparent 35px), #fff;
	border: 1px solid var(--ldn-brd); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
	padding: 98px 12px 18px; color: var(--ldn-text); font-size: 16px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
:root body .absx .absx-tab:hover { background: radial-gradient(circle at 50% 50px, var(--ldn-tint) 34px, transparent 35px), #fff; border-color: var(--ldn-red); box-shadow: 0 8px 20px -10px rgba(191,20,20,.55); transform: translateY(-2px); color: var(--ldn-text); }
:root body .absx .absx-tab[aria-selected="true"] {
	background: radial-gradient(circle at 50% 50px, var(--ldn-red) 34px, transparent 35px), #fff;
	border: 2px solid var(--ldn-red); padding: 97px 11px 17px; color: var(--ldn-red); box-shadow: 0 10px 24px -12px rgba(191,20,20,.6);
}
:root body .absx .absx-tab .absx-tab-label { font-weight: 700; }
:root body .absx .absx-tab .absx-tab-label span { color: var(--ldn-grey) !important; font-size: 12px; font-weight: 600; }
:root body .absx .absx-tab[aria-selected="true"] .absx-tab-label span { color: var(--ldn-red) !important; }
/* pointer from the selected card to the next step */
:root body .absx .absx-tab[aria-selected="true"]::after {
	bottom: -9px; width: 14px; height: 14px; margin-left: -7px; border: 0; background: #fff;
	border-right: 2px solid var(--ldn-red); border-bottom: 2px solid var(--ldn-red); transform: rotate(45deg);
}

/* opened step: light panel, no thick red edge */
:root body .absx .absx-content { background: var(--ldn-panel); border: 1px solid var(--ldn-brd); border-radius: 10px; padding: 20px; margin-top: 16px; }
:root body .absx .absx-content .absx-content { background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 20px; }

/* level 2 – gearbox type (and other sub-groups): medium cards */
:root body .absx .absx-content .absx-tabs { gap: 10px; }
:root body .absx .absx-content .absx-tab {
	background: radial-gradient(circle at 50% 40px, var(--ldn-tint) 26px, transparent 27px), #fff;
	padding: 82px 10px 14px; font-size: 14px; border-top: 1px solid var(--ldn-brd);
}
:root body .absx .absx-content .absx-tab:hover { background: radial-gradient(circle at 50% 40px, var(--ldn-tint) 26px, transparent 27px), #fff; border-color: var(--ldn-red); }
:root body .absx .absx-content .absx-tab[aria-selected="true"] {
	background: radial-gradient(circle at 50% 40px, var(--ldn-red) 26px, transparent 27px), var(--ldn-soft);
	border: 2px solid var(--ldn-red); padding: 81px 9px 13px;
}
:root body .absx .absx-content .absx-tab[aria-selected="true"]::after { background: var(--ldn-soft); }

/* "Getriebetyp wählen | Fahrzeugmodell wählen": segmented switch like the home page */
:root body .absx .absx-switch { width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 4px; gap: 4px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
:root body .absx .absx-switch-btn { border: 0 !important; border-radius: 6px; padding: 9px 18px; background: transparent; color: var(--ldn-text); }
:root body .absx .absx-switch-btn:hover { color: var(--ldn-red); }
:root body .absx .absx-switch-btn.is-active { background: var(--ldn-red); color: #fff; }

/* level 2 in the model view: model + years (buttons) – compact cards */
/* (1.0.1) model + years like the model tiles: text left, years below, red arrow right – the arrow points down when the model is open */
:root body .absx .absx-tabs--modelle { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
:root body .absx .absx-content .absx-tab--modell {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; min-height: 62px;
	padding: 10px 30px 10px 14px; background: #fff; border: 1px solid var(--ldn-brd); border-radius: 6px; box-shadow: none; transform: none;
}
:root body .absx .absx-content .absx-tab--modell:hover { background: #fff; border-color: var(--ldn-red); box-shadow: 0 6px 16px -8px rgba(191,20,20,.55); transform: translateY(-1px); }
:root body .absx .absx-content .absx-tab--modell[aria-selected="true"] { background: var(--ldn-soft); border: 2px solid var(--ldn-red); padding: 9px 29px 9px 13px; box-shadow: none; }
:root body .absx .absx-tab--modell .absx-tab-label { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ldn-text); }
:root body .absx .absx-tab--modell .absx-tab-years { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; color: var(--ldn-grey) !important; opacity: 1; }
:root body .absx .absx-tab--modell:hover .absx-tab-label, :root body .absx .absx-tab--modell[aria-selected="true"] .absx-tab-label { color: var(--ldn-red); }
:root body .absx .absx-tab--modell[aria-selected="true"] .absx-tab-years { color: var(--ldn-grey); }
:root body .absx .absx-content .absx-tab--modell::after,
:root body .absx .absx-content .absx-tab--modell[aria-selected="true"]::after {
	content: ""; position: absolute; left: auto; right: 12px; top: 50%; bottom: auto; width: 8px; height: 8px; margin: -5px 0 0;
	background: none; border: 0; border-right: 2px solid var(--ldn-red); border-bottom: 2px solid var(--ldn-red); transform: rotate(-45deg); transition: transform .15s;
}
:root body .absx .absx-content .absx-tab--modell:hover::after { transform: translateX(2px) rotate(-45deg); }
:root body .absx .absx-content .absx-tab--modell[aria-selected="true"]::after { margin-top: -7px; transform: rotate(45deg); }

/* level 3 – models: tiles like the make tiles on the home page (name + year, red chevron) */
:root body .absx .absx-models { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
:root body .absx .absx-model {
	position: relative; justify-content: center; align-items: flex-start; text-align: left; min-height: 62px;
	padding: 10px 30px 10px 14px; background: #fff; border: 1px solid var(--ldn-brd); border-radius: 6px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
:root body .absx .absx-model::after {
	content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
	border-right: 2px solid var(--ldn-red); border-bottom: 2px solid var(--ldn-red); transform: rotate(-45deg); transition: transform .15s;
}
:root body .absx .absx-model:hover { background: #fff; border-color: var(--ldn-red); box-shadow: 0 6px 16px -8px rgba(191,20,20,.55); transform: translateY(-1px); }
:root body .absx .absx-model:hover::after { transform: translateX(2px) rotate(-45deg); }
:root body .absx .absx-model-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ldn-text); }
:root body .absx .absx-model-year, :root body .absx .absx-model-code { font-size: 12px; line-height: 1.4; color: var(--ldn-grey); }
:root body .absx .absx-model:hover .absx-model-name { color: var(--ldn-red); }
:root body .absx .absx-model:hover .absx-model-year, :root body .absx .absx-model:hover .absx-model-code { color: var(--ldn-grey); }

/* fault list, placeholders */
:root body .absx .absx-faults { border: 1px solid var(--ldn-brd); border-radius: 8px; }
:root body .absx .absx-soon { border-radius: 8px; }

/* ═════════ old layout (ul.tabs + .fahrzeugmodel-auswahl, 48 make pages) ═════════ */

/* category tabs → large cards (theme icon PNG on a circle) */
:root body .entry-content > ul.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 4px; padding: 0; }
:root body .entry-content > ul.tabs::before, :root body .entry-content > ul.tabs::after { content: none; }
:root body .entry-content > ul.tabs { height: auto !important; }
:root body .entry-content > ul.tabs > li { flex: 0 1 200px; min-width: 0; float: none; height: auto !important; margin: 0 !important; padding: 0 !important; }
:root body .entry-content > ul.tabs > li:not(:has(> a)), :root body ul.tabs-content ul.tabs > li:not(:has(> a)) { display: none !important; }
:root body .entry-content > ul.tabs > li > a {
	position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	width: 100% !important; height: auto !important; min-height: 160px; padding: 18px 12px 16px !important; margin: 0;
	background: radial-gradient(circle at 50% 54px, var(--ldn-tint) 36px, transparent 37px), #fff !important;
	border: 1px solid var(--ldn-brd) !important; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
	color: var(--ldn-text) !important; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; top: 0;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
:root body .entry-content > ul.tabs > li > a:hover { border-color: var(--ldn-red) !important; box-shadow: 0 8px 20px -10px rgba(191,20,20,.55); transform: translateY(-2px); }
:root body .entry-content > ul.tabs > li > a > span {
	width: auto !important; height: auto !important; margin: 0 !important; padding: 84px 0 0 !important;
	background-position: center 14px !important; background-size: 56px auto !important; color: inherit !important;
}
:root body .entry-content > ul.tabs > li > a.active {
	background: radial-gradient(circle at 50% 54px, var(--ldn-red) 36px, transparent 37px), #fff !important;
	border: 2px solid var(--ldn-red) !important; padding: 17px 11px 15px !important; color: var(--ldn-red) !important;
	box-shadow: 0 10px 24px -12px rgba(191,20,20,.6);
}
:root body .entry-content > ul.tabs > li > a.active::after {
	content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: #fff;
	border-right: 2px solid var(--ldn-red); border-bottom: 2px solid var(--ldn-red); transform: rotate(45deg);
}

/* black info bar ("Bitte treffen Sie eine Auswahl") → step heading, like .absx */
:root body .entry-content > .auswahl-info { background: none !important; color: var(--ldn-text) !important; font-size: 22px; font-weight: 700; line-height: 1.3; text-align: center; padding: 0 !important; margin: 4px 0 16px !important; }
:root body .entry-content > .auswahl-info i { color: var(--ldn-text) !important; }
:root body ul.tabs-content .auswahl-info { background: none !important; color: var(--ldn-text) !important; font-size: 16px; font-weight: 700; text-align: center; padding: 0 !important; margin: 0 0 14px !important; }
:root body ul.tabs-content .auswahl-info i { color: var(--ldn-text) !important; }

/* nested tabs inside a category (e.g. /mercedes/: Automatik-getriebe → Getriebesteuergeräte / Schieberkasten): medium cards */
:root body ul.tabs-content ul.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; height: auto !important; margin: 0 0 4px; padding: 0; }
:root body ul.tabs-content ul.tabs::before, :root body ul.tabs-content ul.tabs::after { content: none; }
:root body ul.tabs-content ul.tabs > li { flex: 0 1 170px; min-width: 0; float: none; height: auto !important; margin: 0 !important; padding: 0 !important; }
:root body ul.tabs-content ul.tabs > li > a {
	position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
	width: 100% !important; height: auto !important; min-height: 130px; padding: 14px 10px 12px !important; margin: 0; top: 0;
	background: radial-gradient(circle at 50% 44px, var(--ldn-tint) 28px, transparent 29px), #fff !important;
	border: 1px solid var(--ldn-brd) !important; border-radius: 8px; color: var(--ldn-text) !important; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
:root body ul.tabs-content ul.tabs > li > a:hover { border-color: var(--ldn-red) !important; box-shadow: 0 6px 16px -8px rgba(191,20,20,.55); transform: translateY(-1px); }
:root body ul.tabs-content ul.tabs > li > a > span {
	width: auto !important; height: auto !important; margin: 0 !important; padding: 68px 0 0 !important;
	background-position: center 12px !important; background-size: 44px auto !important; color: inherit !important;
}
:root body ul.tabs-content ul.tabs > li > a.active {
	background: radial-gradient(circle at 50% 44px, var(--ldn-red) 28px, transparent 29px), var(--ldn-soft) !important;
	border: 2px solid var(--ldn-red) !important; padding: 13px 9px 11px !important; color: var(--ldn-red) !important;
}
:root body ul.tabs-content ul.tabs > li > a.active::after {
	content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: var(--ldn-soft);
	border-right: 2px solid var(--ldn-red); border-bottom: 2px solid var(--ldn-red); transform: rotate(45deg);
}
:root body ul.tabs-content ul.tabs-content { background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: 20px !important; }

/* opened category: light panel */
:root body .entry-content > ul.tabs-content {
	background: var(--ldn-panel) !important; border: 1px solid var(--ldn-brd) !important; border-radius: 10px; padding: 20px !important; margin-top: 18px !important;
}

/* models → tiles like the make tiles (name + year, red chevron) */
:root body .search-filter-results div.fahrzeugmodel-auswahl {
	position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
	min-height: 62px !important; height: auto !important; padding: 10px 30px 10px 14px !important;
	background: #fff !important; border: 1px solid var(--ldn-brd) !important; border-radius: 6px; box-shadow: none;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
:root body .search-filter-results div.fahrzeugmodel-auswahl::after {
	content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
	border-right: 2px solid var(--ldn-red); border-bottom: 2px solid var(--ldn-red); transform: rotate(-45deg); transition: transform .15s;
}
:root body .search-filter-results div.fahrzeugmodel-auswahl:hover {
	background: #fff !important; border-color: var(--ldn-red) !important; box-shadow: 0 6px 16px -8px rgba(191,20,20,.55); transform: translateY(-1px);
}
:root body .search-filter-results div.fahrzeugmodel-auswahl:hover::after { transform: translateX(2px) rotate(-45deg); }
:root body .search-filter-results div.fahrzeugmodel-auswahl h2 { margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ldn-text) !important; text-align: left; }
:root body .search-filter-results div.fahrzeugmodel-auswahl p { margin: 2px 0 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: var(--ldn-grey) !important; text-align: left; }
:root body .search-filter-results div.fahrzeugmodel-auswahl:hover h2 { color: var(--ldn-red) !important; }
:root body .search-filter-results div.fahrzeugmodel-auswahl:hover p { color: var(--ldn-grey) !important; }
:root body .search-filter-results div.fahrzeugmodel-auswahl img { display: none; }
:root body .search-filter-results a, :root body .search-filter-results a * { text-decoration: none !important; }

/* same grid as the .absx models: width from the content column (no fixed 630 px), empty <p> from wpautop hidden */
:root body ul.tabs-content .rechts:has(> .search-filter-results) { display: block !important; width: auto !important; float: none; }
:root body .search-filter-results { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: stretch; }
:root body .search-filter-results > p:not(:has(.fahrzeugmodel-auswahl)), :root body .search-filter-results > style { display: none; }
:root body .search-filter-results > a, :root body .search-filter-results > p > a { display: flex; min-width: 0; }
:root body .search-filter-results > div:not(.fahrzeugmodel-auswahl), :root body .search-filter-results > .pagination { grid-column: 1 / -1; }
:root body .search-filter-results div.fahrzeugmodel-auswahl { flex: 1 1 auto; width: auto !important; margin: 0 !important; float: none !important; }

/* ═════════ icons: the theme drawings as red masks (white on the selected card), exactly in the middle of the circle ═════════
   (coloured photos like /mercedes/ Getriebesteuergeräte / Schieberkasten stay as they are) */
:root body .absx .absx-tab--abs { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/abs-steuergeraet-kategorie.png"); }
:root body .absx .absx-tab--getriebe { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/getriebe-steuergeraete-kategorie.png"); }
:root body .absx .absx-tab:is(.absx-tab--abs, .absx-tab--getriebe)::before {
	background-image: none !important; -webkit-mask: var(--ldn-ico) center / contain no-repeat !important; mask: var(--ldn-ico) center / contain no-repeat !important;
}
:root body .absx .absx-tab:is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before {
	position: absolute; left: 50%; top: 50px; width: 50px; height: 34px !important; margin: -17px 0 0 -25px !important; flex: none !important;
	background-color: var(--ldn-red) !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-position: center !important; mask-position: center !important;
}
:root body .absx .absx-content .absx-tab:is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before { top: 40px; width: 38px; height: 26px !important; margin: -13px 0 0 -19px !important; }
:root body .absx .absx-tab[aria-selected="true"]::before { background-color: #fff !important; }
:root body .absx .absx-tab--abs::before { transform: scale(.94); }   /* the ABS drawing fills its whole picture – optically as big as the others */

:root body ul.tabs span.abs-steuergerate { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/abs-steuergeraet-kategorie.png"); }
:root body ul.tabs span.modul-steuergeraete { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/modul-steuergeraete-kategorie.png"); }
:root body ul.tabs span.getriebe-steuergeraete { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/getriebe-steuergeraete-kategorie.png"); }
:root body ul.tabs span.waehlhebel-steuergeraete { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/waehhebel-reparatur-kategorie.png"); }
:root body ul.tabs span.kamera-steuergeraete { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/kamera-steuergeraete-kategorie-2.png"); }
:root body ul.tabs span.pkw { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/pkw_kategorie.png"); }
:root body ul.tabs span.motorrad { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/motorrad_kategorie.png"); }
:root body ul.tabs span.einspritzduesen { --ldn-ico: url("/wp-content/themes/ABS-Steuergeraete/images/einspritzduesen-kategorie.png"); }
:root body ul.tabs > li > a > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen) { background-image: none !important; position: static !important; }
:root body ul.tabs > li > a > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before {
	content: ""; position: absolute; left: 50%; top: 54px; width: 52px; height: 35px; margin: -17.5px 0 0 -26px;
	-webkit-mask: var(--ldn-ico) center / contain no-repeat; mask: var(--ldn-ico) center / contain no-repeat; background: var(--ldn-red);
}
:root body ul.tabs-content ul.tabs > li > a > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before { top: 44px; width: 40px; height: 27px; margin: -13.5px 0 0 -20px; }
:root body ul.tabs > li > a.active > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before { background: #fff; }
:root body ul.tabs > li > a > span.abs-steuergerate::before { transform: scale(.94); }

/* ═════════ phone ═════════ */
@media (max-width: 767px) {
	:root body .absx .absx-info { font-size: 18px; }
	:root body .entry-content > ul.tabs { gap: 8px; }
	:root body .entry-content > ul.tabs > li { flex: 1 1 0; min-width: 0; }
	:root body .entry-content > ul.tabs > li > a { width: auto; min-height: 132px; font-size: 13px; padding: 14px 6px 12px !important;
		background: radial-gradient(circle at 50% 46px, var(--ldn-tint) 30px, transparent 31px), #fff !important; }
	:root body .entry-content > ul.tabs > li > a.active { padding: 13px 5px 11px !important;
		background: radial-gradient(circle at 50% 46px, var(--ldn-red) 30px, transparent 31px), #fff !important; }
	:root body .entry-content > ul.tabs > li > a > span { padding-top: 72px !important; background-position: center 14px !important; background-size: 46px auto !important; }
	:root body .entry-content > ul.tabs > li > a > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before { top: 46px; width: 42px; height: 29px; margin: -14.5px 0 0 -21px; }
	:root body .entry-content > ul.tabs-content { padding: 12px !important; }
	:root body .entry-content > ul.tabs > li > a, :root body ul.tabs-content ul.tabs > li > a { width: 100% !important; }
	:root body ul.tabs-content ul.tabs > li { flex: 1 1 0; min-width: 0; }
	:root body .entry-content > .auswahl-info { font-size: 18px; }
	:root body .search-filter-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	:root body .search-filter-results div.fahrzeugmodel-auswahl { padding: 9px 26px 9px 11px !important; }
	:root body .absx .absx-content { padding: 14px 12px; }
	:root body .absx .absx-models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	:root body .absx .absx-model { padding: 9px 26px 9px 11px; }
	:root body .absx .absx-tabs--modelle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	:root body .absx .absx-content .absx-tab--modell { padding: 9px 26px 9px 11px; }
	:root body .absx .absx-content .absx-tab--modell[aria-selected="true"] { padding: 8px 25px 8px 10px; }
}

/* .absx on phones (theme: ≤ 640 px): 3 category cards in a row; sub-levels stay rows (they open right under the chosen row) */
@media (max-width: 640px) {
	:root body .absx > .absx-group > .absx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
	:root body .absx > .absx-group > .absx-tabs > .absx-tab {
		padding: 73px 4px 10px; background: radial-gradient(circle at 50% 38px, var(--ldn-tint) 26px, transparent 27px), #fff; border-width: 1px;
	}
	:root body .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"] {
		padding: 72px 3px 9px; background: radial-gradient(circle at 50% 38px, var(--ldn-red) 26px, transparent 27px), #fff; border-width: 2px;
	}
	:root body .absx > .absx-group > .absx-tabs > .absx-tab .absx-tab-label { font-size: 12px; }

	:root body .absx .absx-content .absx-tab:not(.absx-tab--modell) {
		padding: 10px 12px 10px 56px !important; border: 1px solid var(--ldn-brd) !important; border-radius: 8px;
		background: radial-gradient(circle at 30px 50%, var(--ldn-tint) 19px, transparent 20px), #fff;
	}
	:root body .absx .absx-content .absx-tab:not(.absx-tab--modell)[aria-selected="true"] {
		padding: 9px 11px 9px 55px !important; border: 2px solid var(--ldn-red) !important;
		background: radial-gradient(circle at 30px 50%, var(--ldn-red) 19px, transparent 20px), var(--ldn-soft);
	}
	:root body .absx .absx-content .absx-tab:not(.absx-tab--modell) .absx-tab-label { font-size: 14px; }
	:root body .absx .absx-content .absx-tab:not(.absx-tab--modell)[aria-selected="true"]::after { left: 30px; }
	:root body .absx > .absx-group > .absx-tabs > .absx-tab:is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before { top: 38px; width: 38px; height: 26px !important; margin: -13px 0 0 -19px !important; }
	:root body .absx .absx-content .absx-tab:not(.absx-tab--modell):is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before { left: 30px; top: 50%; width: 28px; height: 19px !important; margin: -9.5px 0 0 -14px !important; }
}

/* ═════════ (1.0.2) level 1 selected = fully red like the selected service card on the product pages (version C) ═════════
   white circle (20 % white) with the white icon, white label / count, red pointer – home PKW / Motorrad, .absx categories,
   old layout categories. Lower levels (gearbox type, model) stay light. */
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto{background:var(--ldx-red);border-color:var(--ldx-red);color:#fff;}
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw .ldx-tab-ico,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto .ldx-tab-ico{background:rgba(255,255,255,.2);color:#fff;}
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw .ldx-tab-label,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto .ldx-tab-label{color:#fff;}
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw .ldx-count,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto .ldx-count{background:rgba(255,255,255,.22);color:#fff;}
.ldx #ldx-pkw:checked ~ .ldx-tabs .ldx-tab--pkw::after,.ldx #ldx-moto:checked ~ .ldx-tabs .ldx-tab--moto::after{background:var(--ldx-red);border:0;border-radius:0 0 3px 0;bottom:-7px;}

:root body .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"] {
	background: radial-gradient(circle at 50% 50px, rgba(255,255,255,.2) 34px, transparent 35px), var(--ldn-red); color: #fff;
}
:root body .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"] .absx-tab-label { color: #fff !important; }
:root body .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"] .absx-tab-label span { color: rgba(255,255,255,.85) !important; }
:root body .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"]::after { background: var(--ldn-red); border: 0; border-radius: 0 0 3px 0; bottom: -7px; }

:root body .entry-content > ul.tabs > li > a.active {
	background: radial-gradient(circle at 50% 54px, rgba(255,255,255,.2) 36px, transparent 37px), var(--ldn-red) !important; color: #fff !important;
}
:root body .entry-content > ul.tabs > li > a.active::after { background: var(--ldn-red); border: 0; border-radius: 0 0 3px 0; bottom: -7px; }
@media (max-width: 767px) {
	:root body .entry-content > ul.tabs > li > a.active { background: radial-gradient(circle at 50% 46px, rgba(255,255,255,.2) 30px, transparent 31px), var(--ldn-red) !important; }
}
@media (max-width: 640px) {
	:root body .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"] { background: radial-gradient(circle at 50% 38px, rgba(255,255,255,.2) 26px, transparent 27px), var(--ldn-red); }
}

/* ═════════ (1.0.3) no circles behind the icons on any level – only the icon, larger: red, white on the red (selected) card ═════════ */
.ldx .ldx-tabs .ldx-tab .ldx-tab-ico{width:auto;height:auto;background:none !important;}
.ldx .ldx-tab svg{width:58px;height:58px;stroke-width:1.5;}
:root:root body .absx .absx-tab, :root:root body .entry-content > ul.tabs > li > a, :root:root body ul.tabs-content ul.tabs > li > a { background-image: none !important; }
:root body .absx .absx-tab:is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before { width: 78px; height: 54px !important; margin: -27px 0 0 -39px !important; }
:root body .absx .absx-content .absx-tab:is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before { width: 60px; height: 42px !important; margin: -21px 0 0 -30px !important; }
:root body ul.tabs > li > a > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before { width: 78px; height: 54px; margin: -27px 0 0 -39px; }
:root body ul.tabs-content ul.tabs > li > a > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before { width: 60px; height: 42px; margin: -21px 0 0 -30px; }
@media (max-width:767px){
	.ldx .ldx-tab svg{width:46px;height:46px;}
	:root body .entry-content > ul.tabs > li > a > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before { width: 62px; height: 42px; margin: -21px 0 0 -31px; }
}
@media (max-width: 640px) {
	:root body .absx > .absx-group > .absx-tabs > .absx-tab:is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before { width: 58px; height: 40px !important; margin: -20px 0 0 -29px !important; }
	:root body .absx .absx-content .absx-tab:not(.absx-tab--modell):is(.absx-tab--abs, .absx-tab--getriebe, .absx-tab--kombi, .absx-tab--kamera, .absx-tab--chip, .absx-tab--hydraulik)::before { width: 38px; height: 26px !important; margin: -13px 0 0 -19px !important; }
}
/* lower levels: the selected card stays light → icon stays red (white only on the fully red first level) */
:root body .absx .absx-content .absx-tab[aria-selected="true"]::before { background-color: var(--ldn-red) !important; }
:root body ul.tabs-content ul.tabs > li > a.active > span:is(.abs-steuergerate, .modul-steuergeraete, .getriebe-steuergeraete, .waehlhebel-steuergeraete, .kamera-steuergeraete, .pkw, .motorrad, .einspritzduesen)::before { background: var(--ldn-red); }
/* the speedometer drawing (square, thin lines) looks smaller than the others at the same box */
:root body .absx .absx-tab--kombi::before { transform: scale(1.3); }