ins Markup,
das Theme rückt jedes li um 27px ein (".content ul li").
Beides wird hier unschädlich gemacht. Nicht entfernen. */
/* Nur direkte Kinder ausblenden —
INNERHALB von Texten sind
gewollt und müssen sichtbar bleiben. */
.absp > br,
.absp > p:not([class]),
.absp-infobox > br,
.absp-tabs > br,
.absp-tabs > p,
.absp .absp-fehler > br,
.absp .absp-fehler > p,
.absp-panel > br,
.absp-panel > p:not([class]) { display: none; }
.absp .absp-fehler,
.absp .absp-schritte,
.absp .absp-zahlung { margin: 0; padding: 0; }
.absp .absp-fehler li,
.absp .absp-schritte li,
.absp .absp-zahlung li { margin: 0; padding: 0; }
/* Das Theme setzt "* { color: #525252 }" — trifft jedes Element
direkt, deshalb erben Kinder sonst keine Farbe. */
.absp-tab *, .absp-fehler-btn * { color: inherit; }
/* ══ Infobox mit der Fehlerliste ═══════════════════════════════ */
.absp-infobox {
background: var(--absp-panel);
border: 1px solid var(--absp-line);
padding: 12px 14px 14px;
margin: 0 0 15px;
}
.absp-infobox-titel {
display: block;
color: var(--absp-title);
font-size: 14px;
font-weight: 600;
line-height: 21px;
margin: 0 0 8px;
}
.absp-infobox-titel--fuss { margin: 10px 0 0; }
/* Aufforderung unter der Überschrift — ohne sie ist nicht erkennbar,
dass die Zeilen anklickbar sind. */
.absp-infobox-hinweis {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: var(--absp-text);
}
.absp-infobox-hinweis::before {
content: '\2193';
margin-right: 6px;
color: var(--absp-red);
font-weight: 700;
}
.absp-infobox-titel a { color: #3b4997; text-decoration: underline; font-weight: 400; }
/* Info-Zeichen ohne Icon-Font */
.absp-infobox-titel::before {
content: 'i';
display: inline-block;
width: 15px; height: 15px;
margin-right: 7px;
border-radius: 50%;
background: var(--absp-title);
color: #fff;
font-size: 10px;
font-weight: 700;
font-style: normal;
line-height: 15px;
text-align: center;
vertical-align: 1px;
}
/* ── Fehlerliste ─────────────────────────────────────────────────
Mehrfachauswahl: jede Zeile ist ein Kästchen zum Ankreuzen.
Baugruppen trennen die Liste in Abschnitte. */
.absp .absp-fehler {
list-style: none;
margin: 0;
padding: 0;
}
.absp .absp-fehler li { display: block; margin: 0; padding: 0; }
/* Abschnitts-Überschrift einer Baugruppe */
.absp .absp-fehler li.absp-fehler-gruppe {
display: block;
margin: 14px 0 6px;
padding: 4px 10px;
background: rgba(191, 20, 20, 0.08);
border-left: 3px solid var(--absp-red);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--absp-red);
text-transform: uppercase;
}
.absp .absp-fehler li.absp-fehler-gruppe:first-child { margin-top: 0; }
/* Eine wählbare Zeile */
.absp-fehler-btn {
position: relative;
display: block;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 1px solid transparent;
font-family: inherit;
font-size: 14px;
line-height: 1.45;
color: var(--absp-text);
text-align: left;
padding: 7px 10px 7px 36px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Kästchen */
.absp-fehler-btn::before {
content: '';
position: absolute;
left: 10px; top: 9px;
width: 15px; height: 15px;
background: #fff;
border: 1px solid #b8b8b8;
}
/* Haken im Kästchen */
.absp-fehler-btn::after {
content: '';
position: absolute;
left: 14px; top: 12px;
width: 8px; height: 4px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) scale(0.6);
opacity: 0;
transition: opacity .12s ease, transform .12s ease;
}
.absp-fehler-btn:hover {
background: #fff;
border-color: var(--absp-line);
color: #000;
}
.absp-fehler-btn:hover::before { border-color: var(--absp-red); }
.absp-fehler-btn:focus-visible { outline: 2px solid var(--absp-red); outline-offset: 1px; }
.absp-fehler-btn[aria-pressed="true"] {
background: #fff;
border-color: var(--absp-line);
color: #000;
font-weight: 600;
}
.absp-fehler-btn[aria-pressed="true"]::before {
background: var(--absp-red);
border-color: var(--absp-red);
}
.absp-fehler-btn[aria-pressed="true"]::after {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
/* Fehlercode am Zeilenanfang */
.absp-fehler-btn b {
font-weight: 700;
color: var(--absp-dark);
white-space: nowrap;
}
.absp-fehler-btn[aria-pressed="true"] b { color: var(--absp-red); }
/* Hinweiszeile, wenn ein Fehler gewählt wurde */
.absp-auswahl-hinweis {
display: none;
margin: 12px 0 0;
padding: 8px 10px;
background: #fff;
border: 1px solid var(--absp-line);
border-left: 3px solid var(--absp-red);
font-size: 13px;
}
.absp-auswahl-hinweis b { color: var(--absp-red); }
.absp--gewaehlt .absp-auswahl-hinweis { display: block; }
.absp-auswahl-zuruecksetzen {
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
padding: 0 0 0 8px;
font-family: inherit;
font-size: 12px;
color: #3b4997;
text-decoration: underline;
cursor: pointer;
}
/* ══ Die drei Tabs ═════════════════════════════════════════════ */
.absp-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0 0 14px;
padding: 0;
list-style: none;
}
.absp-tab {
display: block;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: var(--absp-panel);
border: 1px solid var(--absp-line);
color: var(--absp-dark);
font-family: inherit;
font-size: 14px;
line-height: 21px;
text-align: center;
padding: 12px 0 0;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.absp-tab:hover { border-color: var(--absp-red); }
.absp-tab:focus-visible { outline: 2px solid var(--absp-red); outline-offset: 2px; }
.absp-tab[aria-selected="true"] {
background: var(--absp-red);
border-color: var(--absp-red);
color: #fff;
}
/* Symbol aus dem Theme, weiße Variante auf der roten Kachel */
.absp-tab-bild {
display: block;
height: 68px;
margin: 0 auto 8px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.absp-tab--reparatur .absp-tab-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/reparatur.png"); }
.absp-tab--austausch .absp-tab-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/austausch.png"); }
.absp-tab--vorort .absp-tab-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/vor_ort.png"); }
.absp-tab--reparatur[aria-selected="true"] .absp-tab-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/reparatur_weiss.png"); }
.absp-tab--austausch[aria-selected="true"] .absp-tab-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/austausch_weiss.png"); }
.absp-tab--vorort[aria-selected="true"] .absp-tab-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/vor_ort_weiss.png"); }
.absp-tab-name { display: block; font-weight: 600; }
.absp-tab-info {
display: block;
margin: 6px 10px;
padding: 5px 10px;
background: #e8e8e8;
color: #000;
font-size: 12px;
line-height: 18px;
}
.absp-tab[aria-selected="true"] .absp-tab-info {
background: rgba(255,255,255,0.22);
color: #fff;
}
.absp-tab-preis {
display: block;
padding: 6px 4px 10px;
font-size: 15px;
font-weight: 700;
color: var(--absp-red);
}
.absp-tab[aria-selected="true"] .absp-tab-preis { color: #fff; }
.absp-tab-zusatz {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: 400;
color: #7d7d7d;
}
.absp-tab[aria-selected="true"] .absp-tab-zusatz { color: rgba(255,255,255,0.85); }
/* ══ Infofeld unter den Tabs ═══════════════════════════════════ */
.absp-panel {
display: none;
background: var(--absp-panel);
border: 1px solid var(--absp-line);
border-top: 8px solid var(--absp-red);
padding: 20px 22px 24px;
}
.absp-panel--aktiv { display: block; }
/* ── Zweispaltig wie im Theme: links Titel/Bild/Preis, rechts der
Ablauf. Unter 780px Fensterbreite wieder untereinander. */
@media (min-width: 781px) {
.absp-panel--aktiv {
display: grid;
grid-template-columns: minmax(165px, 33%) 1fr;
gap: 8px 24px;
align-items: start;
}
}
.absp-links { text-align: center; }
.absp-rechts { min-width: 0; }
.absp-panel-titel {
margin: 0 0 14px;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
color: var(--absp-text);
text-align: center;
}
.absp-panel-bild {
height: 74px;
margin: 0 auto 14px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.absp-panel--reparatur .absp-panel-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/reparatur_gr.png"); }
.absp-panel--austausch .absp-panel-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/austausch_gr.png"); }
.absp-panel--vorort .absp-panel-bild { background-image: url("https://www.abs-steuergeraete.de/wp-content/themes/ABS-Steuergeraete/images/vor_ort_gr.png"); }
.absp-preisbox { text-align: center; margin: 0 0 18px; }
.absp-preis {
display: inline-block;
background: var(--absp-red);
color: #fff;
font-size: 21px;
font-weight: 600;
line-height: 1.4;
padding: 3px 18px;
}
/* Zuschlag zum Preis, z. B. "+ 200,00 € Kaution" — wird vom Skript
gefüllt und ausgeblendet, wenn der Fehler keinen Zuschlag hat. */
.absp-preis-zusatz-wert {
display: block;
margin-top: 5px;
font-size: 14px;
font-weight: 600;
color: var(--absp-red);
}
.absp-preis-mwst {
display: block;
margin-top: 6px;
font-size: 13px;
}
.absp-garantie {
display: block;
margin-top: 10px;
color: var(--absp-red);
font-weight: 700;
}
/* Ablauf-Liste */
.absp .absp-schritte {
counter-reset: absp-schritt;
list-style: none;
margin: 0 0 14px;
}
.absp .absp-schritte li {
position: relative;
display: block;
padding: 0 0 9px 26px;
font-size: 13px;
line-height: 1.6;
}
.absp .absp-schritte li::before {
counter-increment: absp-schritt;
content: counter(absp-schritt) ".";
position: absolute;
left: 0; top: 0;
width: 18px;
text-align: right;
color: #8a8a8a;
font-variant-numeric: tabular-nums;
}
.absp-schritte b { color: var(--absp-dark); }
.absp-schritte a { color: var(--absp-dark); font-weight: 700; text-decoration: underline; }
.absp-merker { margin: 0 0 16px; font-size: 13px; line-height: 1.7; }
.absp-merker b { color: var(--absp-red); }
/* Grüner Handlungsknopf wie im Theme.
Der umgebende Absatz braucht die Klasse absp-cta-zeile — sonst
greift die wpautop-Sperre oben ("p:not([class])") und der Knopf
verschwindet. */
.absp-cta-zeile { margin: 0 0 4px; }
.absp-cta {
display: inline-block;
background: var(--absp-green);
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
padding: 9px 18px;
transition: background .15s ease;
}
.absp-cta:hover { background: #368400; color: #fff; text-decoration: none; }
.absp-cta::before { content: '\2192'; margin-right: 8px; }
/* Der Zahlungsblock des Themes arbeitet mit float:left auf den
Icons. Ohne Aufheben klappt sein Container auf 20px zusammen und
die Icons hängen unten aus dem Kasten heraus — genau dann fehlt
der Abstand nach unten. */
.absp-zahlung-block { overflow: hidden; margin-top: 16px; }
.absp-zahlung-block::after { content: ''; display: block; clear: both; }
/* Zahlungsarten (eigenständige Fassung ohne Theme-Include) */
.absp-zahlung-titel {
margin: 18px 0 7px;
color: var(--absp-title);
font-size: 13px;
font-weight: 600;
}
.absp .absp-zahlung { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.absp .absp-zahlung li {
display: block;
border: 1px solid var(--absp-line);
background: #fff;
padding: 6px 11px;
font-size: 12px;
color: #444;
}
/* ══ Teilenummer prüfen ════════════════════════════════════════ */
.absp-suche {
background: var(--absp-panel);
border: 1px solid var(--absp-line);
border-top: 4px solid var(--absp-red);
padding: 16px 18px 18px;
margin: 16px 0 0;
}
.absp-suche-titel {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: var(--absp-title);
}
.absp-suche-text { margin: 0 0 12px; font-size: 13px; line-height: 1.55; }
.absp-suche-label {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.absp-suche-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.absp-suche-feld {
flex: 1 1 200px;
min-width: 0;
height: 40px;
padding: 0 12px;
background: #fff;
border: 1px solid #c4c4c4;
border-radius: 0;
font-family: inherit;
font-size: 15px;
letter-spacing: 0.04em;
color: var(--absp-dark);
-webkit-appearance: none;
appearance: none;
}
.absp-suche-feld:focus {
outline: none;
border-color: var(--absp-red);
box-shadow: inset 0 0 0 1px var(--absp-red);
}
.absp-suche-knopf {
flex: 0 0 auto;
height: 40px;
padding: 0 20px;
background: var(--absp-red);
border: 1px solid var(--absp-red);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease;
}
.absp-suche-knopf:hover { background: var(--absp-red-d); border-color: var(--absp-red-d); }
/* Ergebnis */
.absp-suche-ergebnis {
display: none;
margin-top: 12px;
padding: 11px 13px 11px 40px;
position: relative;
background: #fff;
border: 1px solid var(--absp-line);
font-size: 13px;
line-height: 1.55;
}
.absp-suche-ergebnis--ja,
.absp-suche-ergebnis--fast,
.absp-suche-ergebnis--nein,
.absp-suche-ergebnis--kurz { display: block; }
.absp-suche-ergebnis::before {
position: absolute;
left: 13px; top: 11px;
width: 17px; height: 17px;
border-radius: 50%;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 17px;
text-align: center;
}
.absp-suche-ergebnis--ja { border-left: 3px solid #2e8b2e; }
.absp-suche-ergebnis--ja::before { content: '\2713'; background: #2e8b2e; }
.absp-suche-ergebnis--fast { border-left: 3px solid #d08300; }
.absp-suche-ergebnis--fast::before { content: '?'; background: #d08300; }
.absp-suche-ergebnis--nein { border-left: 3px solid var(--absp-red); }
.absp-suche-ergebnis--nein::before { content: '!'; background: var(--absp-red); }
.absp-suche-ergebnis--kurz { border-left: 3px solid #b0b0b0; color: #6b6b6b; }
.absp-suche-ergebnis--kurz::before { content: 'i'; background: #b0b0b0; }
/* Gesamtliste zum Aufklappen */
.absp-nummern-alle {
margin-top: 12px;
padding: 0;
background: none;
border: 0;
font-family: inherit;
font-size: 13px;
color: #3b4997;
text-decoration: underline;
cursor: pointer;
}
.absp .absp-nummern {
list-style: none;
margin: 10px 0 0;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--absp-line);
max-height: 240px;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 4px 12px;
}
.absp .absp-nummern[hidden] { display: none; }
.absp .absp-nummern li {
display: block;
margin: 0;
padding: 2px 0;
font-size: 13px;
color: var(--absp-dark);
}
.absp .absp-nummern li span { color: #8a8a8a; font-size: 11px; }
.absp-suche-kontakt { margin: 12px 0 0; font-size: 13px; }
.absp-suche-kontakt a { color: #3b4997; text-decoration: underline; }
/* Varianten- und Kombinationsblöcke sind nur Datenspeicher */
.absp-varianten,
.absp-kombi { display: none !important; }
/* ══ Mobil ═════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.absp-infobox { padding: 10px 10px 12px; }
/* Kästchen und Haken müssen zusammen verschoben werden, sonst
sitzt der Haken neben dem Kästchen. */
.absp-fehler-btn { font-size: 13px; padding: 7px 8px 7px 32px; }
.absp-fehler-btn::before { left: 8px; top: 8px; }
.absp-fehler-btn::after { left: 12px; top: 11px; }
.absp .absp-fehler li.absp-fehler-gruppe { margin: 12px 0 5px; padding: 4px 8px; }
.absp-tabs { gap: 6px; }
.absp-tab { padding: 10px 0 0; font-size: 13px; }
.absp-tab-bild { height: 46px; margin-bottom: 6px; }
.absp-tab-info { margin: 5px 5px; padding: 4px 4px; font-size: 11px; }
.absp-tab-preis { font-size: 14px; padding: 5px 2px 8px; }
.absp-panel { padding: 16px 12px 18px; }
.absp-links { margin-bottom: 14px; }
.absp-panel-titel { font-size: 18px; }
.absp-panel-bild { height: 60px; }
.absp-suche { padding: 14px 12px 16px; }
.absp-suche-knopf { flex: 1 1 100%; }
.absp .absp-nummern { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .absp * { transition-duration: .01ms !important; } }
/* ══ Solange nichts gewählt ist: keine Preise zeigen ═══════════
Der Preis des Beitrags sagt noch nichts über den Reparatur-
umfang aus und verwirrt den Kunden mehr, als er hilft. Erst
wenn er einen Fehlercode angeklickt hat, erscheint der Preis,
der wirklich zu seiner Auswahl gehört.
Die Klasse absp--gewaehlt setzt das Skript, sobald mindestens
ein Fehlercode angeklickt ist — hier wird nur darauf reagiert.
Soll der Preis doch von Anfang an sichtbar sein: diesen ganzen
Abschnitt bis zum Ende der Datei löschen. */
.absp:not(.absp--gewaehlt) .absp-tab-preis-wert,
.absp:not(.absp--gewaehlt) .absp-tab-zusatz,
.absp:not(.absp--gewaehlt) .absp-preis,
.absp:not(.absp--gewaehlt) .absp-preis-zusatz-wert,
.absp:not(.absp--gewaehlt) .absp-preis-kaution,
.absp:not(.absp--gewaehlt) .absp-preis-mwst { display: none !important; }
/* Statt des Preises ein Hinweis auf der Kachel */
.absp:not(.absp--gewaehlt) .absp-tab-preis::after {
content: 'Preis nach Auswahl';
display: block;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
}
/* … und im geöffneten Infofeld */
.absp:not(.absp--gewaehlt) .absp-preisbox::before {
content: 'Bitte oben die ausgelesenen Fehlercodes anklicken — Preis und Reparaturumfang erscheinen dann hier.';
display: block;
margin: 0 0 12px;
padding: 9px 11px;
background: #fff;
border: 1px solid var(--absp-line);
border-left: 3px solid var(--absp-red);
font-size: 13px;
line-height: 1.5;
text-align: left;
color: var(--absp-text);
}
@media (max-width: 640px) {
.absp:not(.absp--gewaehlt) .absp-tab-preis::after { font-size: 11px; }
}
/* ══ Gesperrter Tab ════════════════════════════════════════════
Manche Fehler schließen einen Weg aus — z. B. ist bei einem
Kurzschluss keine Reparatur möglich. Das Skript setzt dann
aria-disabled="true" auf die Kachel (gesteuert über 'aus' in
der Fehlerliste). Ein blasser Tab mit Preis daneben wirft nur
Fragen auf, deshalb steht dort der Grund statt einer Zahl.
Nicht gewünscht? Diesen Abschnitt löschen — die Kachel ist
dann weiterhin gesperrt, zeigt aber wieder ihren Preis. */
.absp-tab[aria-disabled="true"] .absp-tab-preis-wert,
.absp-tab[aria-disabled="true"] .absp-tab-zusatz { display: none; }
.absp-tab[aria-disabled="true"] .absp-tab-preis::after {
content: 'bei dieser Auswahl nicht möglich';
display: block;
font-size: 11px;
font-weight: 600;
line-height: 1.35;
}
/* ══ Prüfblock im Teilenummern-Kasten ══════════════════════════
Das Skript hängt den Block "Ist Ihre Nummer dabei?" unter die
Teilenummern. Dieser Kasten setzt seine Nummern in Spalten —
ohne die Regeln hier würde der Block mit hineinfließen und die
Überschrift neben der letzten Spalte landen.
column-span greift, wenn der Kasten mit CSS-Spalten arbeitet,
clear/float, wenn er die Nummern nebeneinander schwimmen lässt.
Beides zusammen deckt beide Bauweisen ab. */
.absp--im-kasten {
-webkit-column-span: all;
column-span: all;
clear: both;
float: none;
width: 100%;
margin: 18px 0 0;
/* Der Kasten kann Text zentrieren oder einrücken — hier gilt
wieder die normale Ausrichtung. */
text-align: left;
}
/* Im Kasten ist der dicke rote Strich zu laut: Der Block steht
dort nicht für sich, sondern gehört sichtbar dazu. */
.absp--im-kasten .absp-suche {
margin: 0;
background: none;
border: 0;
border-top: 1px solid var(--absp-line);
padding: 16px 0 0;
}