/* ═══════════════════════════════════════════════════════════════
   Gestufte Geräteauswahl — abs-steuergeraete.de
   Namespace: absx-   ·   Verhalten steckt in absx.js
   Farben aus dem Theme: Rot #bf1414 · Panel #f4f4f4 · Rahmen #ddd
   ═══════════════════════════════════════════════════════════════ */

.absx {
    --absx-red:   #bf1414;
    --absx-red-d: #9c1010;
    --absx-panel: #f4f4f4;
    --absx-line:  #ddd;
    --absx-text:  #525252;
    --absx-dark:  #323232;
    font-family: 'Open Sans', arial, helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--absx-text);
}
.absx *, .absx *::before, .absx *::after { box-sizing: border-box; }

/* ── Schutz gegen wpautop ─────────────────────────────────────────
   WordPress setzt beim Speichern automatisch <br> zwischen die
   Kacheln und leere <p> zwischen die Inhalte. Beides sind im Raster
   eigene Zellen und würden das Layout auseinanderziehen — hier
   werden sie unschädlich gemacht. Nicht entfernen.               */
.absx br,
.absx > p:not([class]),
.absx-tabs > p,
.absx-group > p,
.absx-content > p:not([class]) { display: none; }

/* ── Dunkler Auswahl-Balken (wie .auswahl-info im Theme) ─────── */
.absx-info {
    background: #222;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 10px 12px;
    margin: 0 0 12px;
}
/* Nur die oberste Ebene bekommt den dunklen Balken. Die Ebenen darunter
   sind schlichte Schritt-Überschriften mit feiner Linie.            */
.absx-info--sub {
    background: transparent;
    color: var(--absx-dark);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 0 0 9px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--absx-line);
}

/* ── Kachel-Reihe ────────────────────────────────────────────── */
.absx-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.absx-tab {
    position: relative;
    display: block;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: var(--absx-panel);
    border: 1px solid var(--absx-line);
    border-top: 4px solid var(--absx-line);
    color: var(--absx-dark);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    padding: 16px 12px 14px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.absx-tab:hover {
    background: #fff;
    border-top-color: var(--absx-red);
    color: #000;
}
/* Gewählte Kachel: rot hinterlegt, weiße Schrift */
.absx-tab[aria-selected="true"] {
    background: var(--absx-red);
    border-color: var(--absx-red);
    border-top-color: var(--absx-red-d);
    color: #fff;
    font-weight: 600;
}
.absx-tab:focus-visible { outline: 2px solid var(--absx-red); outline-offset: 2px; }

/* Verbindungs-Pfeil vom aktiven Tab zum Inhalt darunter */
.absx-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 0; height: 0;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--absx-red);
    z-index: 2;
}

/* ── Icons: liegen im CSS, damit im Editor kein SVG stehen muss ─
      Klasse an der Kachel steuert das Bild:
      absx-tab--abs · --getriebe · --kamera · --chip · --hydraulik  */
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .absx-tab--abs::before,
    .absx-tab--getriebe::before,
    .absx-tab--kamera::before,
    .absx-tab--chip::before,
    .absx-tab--hydraulik::before {
        content: '';
        display: block;
        height: 62px;
        margin: 0 auto 10px;
        background-color: #9a9a9a;
        -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 .15s ease;
    }
    .absx-tab:hover::before { background-color: var(--absx-red); }
    .absx-tab[aria-selected="true"]::before { background-color: #fff; }
}
.absx-tab--abs::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2219%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2212%22%20stroke-dasharray%3D%224%204%22%2F%3E%3Cpath%20d%3D%22M24%205v6M24%2037v6M5%2024h6M37%2024h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2219%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2212%22%20stroke-dasharray%3D%224%204%22%2F%3E%3Cpath%20d%3D%22M24%205v6M24%2037v6M5%2024h6M37%2024h6%22%2F%3E%3C%2Fsvg%3E"); }
.absx-tab--getriebe::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M12%2010v28M24%2010v28M36%2010v28M12%2014h24%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2240%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2240%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2240%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M12%2010v28M24%2010v28M36%2010v28M12%2014h24%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2240%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2240%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2240%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.absx-tab--kamera::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Crect%20x%3D%225%22%20y%3D%2213%22%20width%3D%2230%22%20height%3D%2222%22%2F%3E%3Cpath%20d%3D%22M35%2022l8-5v14l-8-5z%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Crect%20x%3D%225%22%20y%3D%2213%22%20width%3D%2230%22%20height%3D%2222%22%2F%3E%3Cpath%20d%3D%22M35%2022l8-5v14l-8-5z%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2224%22%20r%3D%226%22%2F%3E%3C%2Fsvg%3E"); }
.absx-tab--chip::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%2222%22%20height%3D%2222%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Cpath%20d%3D%22M19%2013V7M29%2013V7M19%2041v-6M29%2041v-6M13%2019H7M13%2029H7M41%2019h-6M41%2029h-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%2222%22%20height%3D%2222%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Cpath%20d%3D%22M19%2013V7M29%2013V7M19%2041v-6M29%2041v-6M13%2019H7M13%2029H7M41%2019h-6M41%2029h-6%22%2F%3E%3C%2Fsvg%3E"); }
.absx-tab--hydraulik::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M24%205c7%209%2011%2014%2011%2020a11%2011%200%2001-22%200c0-6%204-11%2011-20z%22%2F%3E%3Cpath%20d%3D%22M18%2027a6%206%200%20006%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M24%205c7%209%2011%2014%2011%2020a11%2011%200%2001-22%200c0-6%204-11%2011-20z%22%2F%3E%3Cpath%20d%3D%22M18%2027a6%206%200%20006%206%22%2F%3E%3C%2Fsvg%3E"); }

/* ── Echte Kategorie-Bilder aus dem Theme ────────────────────────
   Für ABS und Getriebe liegen im Theme fertige PNGs (100×68), je
   einmal normal und einmal in Weiß für die rote Auswahl. Sie
   ersetzen hier die CSS-Masken. Kamera/Chip/Hydraulik haben kein
   Theme-Bild und bleiben als Masken-Icon.
   Weitere Bilder ergänzen: Klasse anlegen, beide URLs eintragen. */
.absx-tab--abs::before,
.absx-tab--getriebe::before {
    content: '';
    display: block;
    height: 62px;
    margin: 0 auto 10px;
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-image: none !important;
            mask-image: none !important;
}
.absx-tab--abs::before      { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/abs-steuergeraet-kategorie.png"); }
.absx-tab--getriebe::before { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/getriebe-steuergeraete-kategorie.png"); }

/* Gewählte Kachel ist rot → weiße Bildvariante */
.absx-tab[aria-selected="true"].absx-tab--abs::before      { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/abs-steuergeraet-kategorie_weiss.png"); }
.absx-tab[aria-selected="true"].absx-tab--getriebe::before { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/getriebe-steuergeraete-kategorie_weiss.png"); }

/* ── Fehlercode-Vorschau direkt auf der Kachel ───────────────── */
.absx-tab-label {
    display: block;
    font-weight: 600;
    overflow-wrap: break-word;   /* lange Wörter wie "Getriebesteuergerät" */
}

/* Die style.css des Themes setzt "* { color: #525252 }" — das trifft das
   Label direkt, deshalb erbt es die Farbe des Buttons nicht. Mit
   "color: inherit" gewinnt wieder der Zustand der Kachel.            */
.absx-tab .absx-tab-label,
.absx-tab .absx-tab-codes { color: inherit; }
.absx-tab[aria-selected="true"] .absx-tab-label { font-weight: 700; }
.absx-tab-codes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dotted #c8c8c8;
}
/* Beschriftung, damit klar ist, wofür die Kürzel stehen.
   Steht im CSS, damit im Editor-Markup nichts geändert werden muss. */
.absx-tab-codes::before {
    content: 'Fehlercodes';
    flex: 1 0 100%;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.absx-tab[aria-selected="true"] .absx-tab-codes::before { color: rgba(255,255,255,0.85); }
.absx-code {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--absx-line);
    color: var(--absx-red);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    white-space: nowrap;
}
.absx-code--plain {
    color: #6b6b6b;
    font-weight: 400;
    background: transparent;
    border-style: dashed;
}
.absx-tab[aria-selected="true"] .absx-tab-codes { border-top-color: rgba(255,255,255,0.45); }
.absx-tab[aria-selected="true"] .absx-code { background: #fff; border-color: #fff; color: var(--absx-red); }
.absx-tab[aria-selected="true"] .absx-code--plain {
    background: transparent;
    border-color: rgba(255,255,255,0.65);
    color: #fff;
}

/* ── Ebenen im geöffneten Inhalt heben sich vom Panel ab ────────
   Der Inhaltskasten ist grau. Stünden die Kacheln darin ebenfalls
   grau, verschwimmt alles ineinander — deshalb dort weiß.
   Reihenfolge beachten: die Auswahl-Regel muss NACH :hover stehen,
   sonst überschreibt der Hover-Ton das Rot.                      */
.absx-content .absx-tab { background: #fff; }
.absx-content .absx-tab:hover { background: #fdf5f5; border-top-color: var(--absx-red); }
.absx-content .absx-tab[aria-selected="true"] { background: var(--absx-red); }

/* Fehlerbild-Auswahl bekommt eine rötliche Oberkante, damit sie sich
   auch von der Getriebe-Auswahl darüber unterscheidet.            */
.absx-tabs:has(.absx-tab-codes) > .absx-tab { border-top-color: rgba(191, 20, 20, 0.4); }
.absx-tabs:has(.absx-tab-codes) > .absx-tab:hover { border-top-color: var(--absx-red); }
.absx-tabs:has(.absx-tab-codes) > .absx-tab[aria-selected="true"] { border-top-color: var(--absx-red-d); }

/* ── Aufklappender Inhalt (Theme: .tabs-content) ─────────────── */
.absx-panel {
    display: grid;
    grid-template-rows: 0fr;          /* zu = Standard, auch ohne JS kein Aufblitzen */
    transition: grid-template-rows .3s ease;
}
.absx-panel[hidden] { display: none; }
.absx-panel > .absx-panel-in { overflow: hidden; min-height: 0; }
.absx-panel--open { grid-template-rows: 1fr; }

/* ── Vorrang vor der älteren absx-Komponente im Theme ─────────────
   Die style.css des Themes enthält eine frühere Auswahl (.absx-wrap,
   .absx-modeBtn, .absx-kindBtn …), die zufällig ebenfalls eine Klasse
   .absx-panel benutzt — mit "max-height: 0 !important" und der Klasse
   .is-open. Diese Regeln würden unser Panel dauerhaft zuhalten.
   Der Selektor .absx .absx-panel ist spezifischer und gewinnt.
   Nicht entfernen, solange die alten Regeln im Theme stehen.     */
.absx .absx-panel {
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    transition: grid-template-rows .3s ease !important;
}

.absx-content {
    background: var(--absx-panel);
    border: 1px solid var(--absx-line);
    border-top: 8px solid var(--absx-red);
    padding: 18px 20px 20px;
    margin-top: 11px;
}
/* Tiefere Ebenen bekommen KEINEN eigenen Kasten mehr — sonst sieht es
   nach Rahmen im Rahmen im Rahmen aus. Sie laufen als weitere Schritte
   in derselben Breite weiter.                                        */
.absx-content .absx-content {
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 18px;
}

/* ── Überschriften & Fehlerliste ─────────────────────────────── */
.absx-h {
    font-size: 15px;
    font-weight: 600;
    color: #c01616;
    margin: 0 0 12px;
    line-height: 1.4;
}
.absx .absx-faults {
    margin: 0;
    padding: 2px 16px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--absx-line);
}
/* Ohne Aufzählungspunkt — die Listen im Theme haben ebenfalls keine.
   Die Zeilen trennt eine feine Linie, der Fehlercode steht fett vorn.

   Die Selektoren beginnen mit ".absx ", weil das Theme mit
   ".content ul li { padding: 0 0 0 27px }" sonst eine Einrückung
   erzwingt — die Liste stünde eingerückt statt bündig.
   Das ".absx" davor bitte nicht entfernen.                          */
.absx .absx-faults li {
    padding: 9px 0;
    border-bottom: 1px solid #ececec;
}
.absx .absx-faults li:last-child { border-bottom: none; }
.absx-faults b { color: var(--absx-dark); font-weight: 700; }
/* Abstand, wenn nach der Fehlerliste noch die Fahrzeugauswahl folgt */
.absx-faults + .absx-h { margin-top: 20px; }

/* ── Fahrzeug-Kacheln — Darstellung wie auf der Live-Seite ──────
   Vorbild: div.fahrzeugmodel-auswahl → weißer Kasten mit 3px rotem
   Rahmen, Modellname 19px rot, Baujahr klein grau, Hover füllt rot. */
.absx .absx-models {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* li dehnt sich, der Link füllt es aus → gleich hohe Kacheln je Reihe,
   auch wenn ein Modellname zweizeilig umbricht                      */
.absx .absx-models li { margin: 0; padding: 0; list-style: none; display: flex; }
.absx-model {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border: 3px solid #c01414;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease;
}
.absx-model:hover { background: #c01414; text-decoration: none; }
.absx-model:focus-visible { outline: 2px solid #c01414; outline-offset: 2px; }
.absx-model-name {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 28.5px;
    color: #c01616;
}
.absx-model-year {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    color: #666;
}
.absx-model:hover .absx-model-name,
.absx-model:hover .absx-model-year { color: #fff; }

/* ── Platzhalter „Inhalt folgt" ──────────────────────────────── */
.absx-soon {
    background: #fff;
    border: 1px dashed #c9c9c9;
    padding: 18px 20px;
    text-align: center;
    color: #6b6b6b;
}
.absx-soon strong { display: block; color: var(--absx-dark); font-size: 14px; margin-bottom: 3px; }

/* ── Mobil ───────────────────────────────────────────────────────
   Erste Ebene: Kacheln mit Symbol oben, drei nebeneinander.
   Alle Ebenen darunter: kompakte Zeilen mit Symbol links, der
   Inhalt klappt direkt unter der gewählten Zeile auf.            */
@media (max-width: 640px) {
    .absx-group { display: flex; flex-direction: column; gap: 8px; }
    .absx-tabs { display: contents; }

    /* Oberster Balken schlanker, Unterebenen bleiben schlichte Zeilen */
    .absx-info { font-size: 14px; padding: 8px 10px; margin-bottom: 8px; }
    .absx-info--sub { font-size: 13px; padding: 0 0 6px; margin-bottom: 9px; }

    /* Kachel → kompakte Zeile */
    .absx-tab {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 12px;
        text-align: left;
        padding: 11px 14px;
        border-top-width: 1px;
        border-left: 4px solid var(--absx-line);
    }
    .absx-tab:hover { border-top-color: var(--absx-line); border-left-color: var(--absx-red); }
    .absx-tab[aria-selected="true"] {
        border-top-color: var(--absx-red);
        border-left-color: var(--absx-red-d);
    }
    .absx-tab--abs::before, .absx-tab--getriebe::before, .absx-tab--kamera::before,
    .absx-tab--chip::before, .absx-tab--hydraulik::before {
        flex: 0 0 30px;
        height: 30px;
        margin: 0;
    }
    .absx-tab-label { flex: 1 1 auto; font-size: 15px; }
    .absx-tab-codes {
        flex: 1 0 100%;
        justify-content: flex-start;
        margin: 8px 0 0 42px;
        padding-top: 8px;
    }

    /* Getroffene Wahl in den Unterebenen wird etwas schmaler, damit
       der aktuelle Schritt nach oben rückt. Alle Alternativen
       bleiben sichtbar.                                          */
    .absx-content .absx-tabs:not(:has(.absx-tab-codes)) .absx-tab[aria-selected="true"] {
        padding: 8px 12px;
        column-gap: 9px;
        border-left-width: 3px;
    }
    .absx-content .absx-tabs:not(:has(.absx-tab-codes)) .absx-tab[aria-selected="true"]::before {
        flex: 0 0 22px; height: 22px;
    }
    .absx-content .absx-tabs:not(:has(.absx-tab-codes)) .absx-tab[aria-selected="true"] .absx-tab-label {
        font-size: 14px;
    }

    /* Pfeil sitzt über dem Icon statt mittig */
    .absx-tab[aria-selected="true"]::after {
        left: 26px; bottom: -8px;
        border-top-width: 8px; border-left-width: 8px; border-right-width: 8px;
        margin-left: -8px;
    }

    /* ── Kachel-Ebenen ───────────────────────────────────────────
       Zwei Ebenen werden als Kacheln mit Symbol oben dargestellt:
       die Hauptübersicht (erste Ebene) und die Fehlerbild-Auswahl
       (erkennbar an den Fehlercodes auf der Kachel). Dadurch
       unterscheiden sie sich klar von den Zeilen dazwischen.     */
    .absx > .absx-group > .absx-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .absx-tabs:has(.absx-tab-codes) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .absx > .absx-group > .absx-tabs > .absx-tab,
    .absx-tabs:has(.absx-tab-codes) > .absx-tab {
        display: block;
        text-align: center;
        padding: 12px 6px 10px;
        border-top-width: 4px;
        border-left-width: 1px;
        border-left-color: var(--absx-line);
    }
    .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"],
    .absx-tabs:has(.absx-tab-codes) > .absx-tab[aria-selected="true"] {
        border-left-color: var(--absx-red);
    }
    .absx > .absx-group > .absx-tabs > .absx-tab::before,
    .absx-tabs:has(.absx-tab-codes) > .absx-tab::before {
        flex: none;
        height: 34px;
        margin: 0 auto 8px;
    }
    .absx > .absx-group > .absx-tabs > .absx-tab .absx-tab-label,
    .absx-tabs:has(.absx-tab-codes) > .absx-tab .absx-tab-label {
        font-size: 12px;
        line-height: 1.3;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: anywhere;
    }
    /* Fehlercodes auf der Kachel bleiben sichtbar, auch nach der Wahl */
    .absx-tabs:has(.absx-tab-codes) > .absx-tab .absx-tab-codes {
        justify-content: center;
        margin: 9px 0 0;
        padding-top: 8px;
    }
    /* Pfeil dieser Kacheln mittig */
    .absx > .absx-group > .absx-tabs > .absx-tab[aria-selected="true"]::after,
    .absx-tabs:has(.absx-tab-codes) > .absx-tab[aria-selected="true"]::after {
        left: 50%; margin-left: -8px;
    }
    /* Inhalt der ersten Ebene folgt unter der ganzen Reihe */
    .absx > .absx-group > .absx-panel > .absx-panel-in > .absx-content { margin-top: 3px; }

    /* Inhalt: flacher Rahmen, rote Kante links zeigt die Ebene */
    .absx-content {
        margin-top: 0;
        padding: 12px 11px 14px;
        border-top-width: 4px;
        border-left: 3px solid var(--absx-red);
    }
    .absx-h { font-size: 14px; margin-bottom: 9px; }

    /* Tiefere Ebenen ohne eigenen Kasten — volle Breite bleibt erhalten */
    .absx-content .absx-content {
        padding: 0;
        border: 0;
        margin-top: 14px;
    }
    .absx .absx-faults { padding: 2px 11px; }
    .absx .absx-faults li { padding: 8px 0; }
    /* Modelle zweispaltig */
    .absx .absx-models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .absx-model { padding: 5px 4px; border-width: 2px; }
    .absx-model-name { font-size: 16px; line-height: 24px; }
    .absx-model-year { font-size: 12px; line-height: 17px; }

    /* Theme-Bilder in den Zeilen der Unterebenen kleiner */
    .absx-content .absx-tabs:not(:has(.absx-tab-codes)) .absx-tab--abs::before,
    .absx-content .absx-tabs:not(:has(.absx-tab-codes)) .absx-tab--getriebe::before {
        height: 30px; margin: 0;
    }
}
@media (prefers-reduced-motion: reduce) { .absx * { transition-duration: .01ms !important; } }