/* custom.css — generiert aus legacy-head.css + pixel-imperium.css + farben-child.css + typografie-child.css (2026-10-27).
Quelle: pixltec-betrieb/pixel-imperium/relaunch-2026/theme/ — hier nie direkt editieren. */
/* =============================================================================
PIXEL IMPERIUM — Bestands-CSS aus dem head-Feld (Stand 16.08.2026)
Das ist der erste style-Block aus EasyTemplate360 → Einstellungen → Global →
„Eigener head-Inhalt", unverändert herausgelöst — Anpassungen aus der Zeit vor
dem Relaunch (Tabs volle Breite, Suchfeld, Beschreibung, Fokusring …).
Wird zusammen mit pixel-imperium.css nach
templates/pixelimperium_child/themes/child/css/custom.css ausgerollt
(deploy-custom-css.sh). Nie im Backend direkt editieren.
============================================================================= */
/* ========= Global ========= */
.et-blog-title,
.creation-date { display:none }
.et-item-box-title.productbox-title { font-weight:700 }
/* Search header */
#search-header{
background-color:#f0f0f0;
border:1px solid #ccc;
border-radius:25px;
padding:.5rem 1rem;
box-sizing:border-box;
}
/* ========= Product detail: Tabs full width ========= */
#content-wrapper .container .et-productdetail-information-wrapper nav.tab-navigation{
width:100%!important;
max-width:none!important;
display:block!important;
}
#content-wrapper .container .et-productdetail-information-wrapper nav.tab-navigation :is(
.tab-navigation-inner,
ul.nav,
ul.nav-tabs,
ul[role="tablist"]
){
width:100%!important;
max-width:none!important;
}
#content-wrapper .container .et-productdetail-information-wrapper nav.tab-navigation :is(
.tab-content,
[id^="tab-content"]
){
width:100%!important;
max-width:none!important;
margin-left:0!important;
padding-left:0!important;
}
/* ========= Product detail: Description full width ========= */
#content-wrapper #tab-description,
#content-wrapper #tab-description .tab-pane,
#content-wrapper #tab-description .desc{
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
}
#content-wrapper #tab-description :is(.col,[class*="col-"]){
flex:0 0 100%!important;
max-width:100%!important;
width:100%!important;
}
#tab-description .pi-wrap{
max-width:none!important;
width:100%!important;
margin:0 0 16px!important;
box-sizing:border-box;
}
/* ========= TAB: Documents (mehrsprachig) ========= */
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten){
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
margin:0!important;
max-width:none!important;
}
/* Documents: Wrapper (ohne Außenrahmen) */
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles{
max-width:none!important;
width:100%!important;
box-sizing:border-box;
margin:0 0 16px;
padding:18px;
background:#fff;
}
/* Documents: Flex-Layout + robustes Spacing (gap bei Ihnen unreliable) */
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles.card-columns{
float:none!important;
display:flex!important;
flex-wrap:wrap;
justify-content:flex-start;
align-items:stretch;
column-count:initial!important;
column-gap:initial!important;
gap:0!important;
margin:-30px!important; /* Abstand = 30px */
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles.card-columns>.card{
margin:30px!important; /* Abstand = 30px */
}
/* Documents: Einzelne Dokument-Kachel */
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles .card{
flex:0 1 260px;
min-width:220px;
max-width:300px;
border:1px solid rgba(0,0,0,.10)!important;
border-radius:14px!important;
background:#fff;
box-shadow:0 1px 0 rgba(0,0,0,.02);
text-align:center;
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles .card .card-body{
padding:16px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles .card .card-body .row{
order:1;
width:100%;
margin:0;
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles .card-title{
order:2;
display:block!important;
margin:0!important;
font-size:14px;
font-weight:800;
line-height:1.2;
white-space:normal;
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles a.text-decoration-none-util{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px;
border-radius:12px;
text-decoration:none;
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles a .text-decoration-underline{
display:none!important;
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles a img[alt="PDF"]{
width:48px!important;
height:48px!important;
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles .card:hover{
border-color:rgba(0,171,170,.35)!important;
box-shadow:0 2px 0 rgba(0,0,0,.03);
}
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles a.text-decoration-none-util:focus{
outline:2px solid rgba(0,171,170,.45);
outline-offset:2px;
}
/* ========= TAB: Technical data / Attributes (2-Spalten Grid) ========= */
#tab-attributes{
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
margin:0!important;
}
#tab-attributes .table-responsive{
overflow:visible;
max-width:none!important;
width:100%!important;
box-sizing:border-box;
margin:0 0 16px;
}
/* Attributes: Tabelle als Grid-Container */
#tab-attributes table{
display:block!important;
width:100%!important;
max-width:none!important;
box-sizing:border-box;
background:#fff;
border:1px solid rgba(0,0,0,.10);
border-radius:14px;
box-shadow:0 1px 0 rgba(0,0,0,.02);
padding:10px;
}
#tab-attributes thead{ display:none!important }
#tab-attributes tbody{
display:grid!important;
grid-template-columns:1fr 1fr;
gap:10px 14px;
width:100%;
}
/* Attributes: Jede Zeile = Kachel (nur sauber, wenn 2 | vorhanden sind) */
#tab-attributes tbody tr{
display:grid!important;
grid-template-columns:1fr 1fr;
gap:10px;
align-items:start;
border:1px solid rgba(0,0,0,.08);
border-radius:12px;
padding:10px 12px;
background:#fff;
}
#tab-attributes tbody td{
display:block!important;
border:0!important;
padding:0!important;
}
#tab-attributes tbody td:first-child{
font-weight:800;
white-space:nowrap;
}
#tab-attributes tbody td:last-child{
white-space:normal;
}
#tab-attributes tbody tr:hover{
border-color:rgba(0,171,170,.35);
background:rgba(0,171,170,.04);
}
/* Attributes: Links neutral */
#tab-attributes a{ color:inherit; text-decoration:none }
#tab-attributes a:hover{ color:#00abaa; text-decoration:underline }
@media (max-width:900px){
#tab-attributes tbody{ grid-template-columns:1fr!important }
}
/* Attributes: kein Sonderstyling für .attr-contents (ist ein | ) */
#tab-attributes tbody tr.attr-contents{
margin:0!important;
max-width:none!important;
}
/* ========= GPSR / Produktsicherheit ========= */
.hr-sect.h3.mb-4{
text-align:left!important;
justify-content:flex-start!important;
align-items:center!important;
padding-left:12px!important;
border-left:4px solid #00abaa!important;
background:none!important;
box-shadow:none!important;
}
.hr-sect.h3.mb-4::before,
.hr-sect.h3.mb-4::after{
content:none!important;
display:none!important;
border:0!important;
background:none!important;
}
.row.gpsr-compliance{
margin-left:0!important;
margin-right:0!important;
max-width:none!important;
width:100%!important;
box-sizing:border-box;
margin-top:0!important;
margin-bottom:16px!important;
padding:16px 18px;
background:#fff;
border:1px solid rgba(0,0,0,.10);
border-radius:14px;
box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.row.gpsr-compliance>[class*="col"]{
padding-left:12px!important;
padding-right:12px!important;
}
.gpsr-compliance .product-manufacturer{ margin:0!important }
.gpsr-compliance .product-manufacturer>strong{
display:block;
margin-bottom:6px;
font-weight:800;
}
.gpsr-compliance .product-manufacturer-manufacturer{
font-size:13px;
line-height:1.45;
color:inherit;
}
.gpsr-compliance a{
color:#00abaa;
font-weight:700;
text-decoration:none;
}
.gpsr-compliance a:hover{ text-decoration:underline }
/* ========= Vaterartikel: Buybox + Lieferstatus ausblenden (Trigger: Add-to-basket ist disabled) ========= */
/* Menge/Warenkorb-Block weg */
#quantity-grp.choose_quantity:has(button[name="inWarenkorb"][disabled]){
display:none !important;
}
/* Add-to-cart-Wrapper + kompletter Stock/Lieferstatus-Wrapper weg */
html:has(#quantity-grp.choose_quantity button[name="inWarenkorb"][disabled]) #add-to-cart,
html:has(#quantity-grp.choose_quantity button[name="inWarenkorb"][disabled]) .stock-information.stock-information-p.pb-0{
display:none !important;
}
html:has(#quantity-grp.choose_quantity button[name="inWarenkorb"][disabled]) .stock-information.stock-information-mobile.stock-information-p{
display:none !important;
}
/* =============================================================================
PIXEL IMPERIUM — globales Stylesheet, Relaunch 2026 „Hybrid"
Quelle der Wahrheit. Deployment-Ziel seit 16.08.2026: custom.css des
Child-Templates, per deploy-custom-css.sh (zusammen mit legacy-head.css).
Bis zum Go-live des Childs liegt der Inhalt zusätzlich im head-Feld
(EasyTemplate360 → Einstellungen → Global → „Eigener head-Inhalt"), weil das
Feld global ist. Nie im Backend direkt editieren.
ACHTUNG: In dieser Datei darf nirgends die Zeichenfolge aus Kleiner-Zeichen,
Schrägstrich und dem Wort style stehen — auch nicht im Kommentar. Der
HTML-Parser beendet daran den Style-Block, und der Rest der Datei wird
stillschweigend verworfen (am 14.08.2026 genau so passiert: 323 von 5.000
Zeichen kamen an, die Seite sah trotzdem „fast richtig" aus).
TEIL 1: Artikelbeschreibung.
Die Formsprache stammt aus der Beschreibung von „WS2811 Pixel String 12mm 5V
IP68" (Thorsten, 08/2026) — Karten, 2:1-Raster, Akzentbalken, Hinweisboxen.
Sie lag dort als style-Block IM Artikel; hier steht sie einmal für alle
Artikel und alle Sprachen. Optik unverändert übernommen, gehärtet in drei
Punkten: Linkkontrast (AA), Größen in rem statt px, sichtbarer Tastaturfokus.
Weitere Teile (Hero, Listing, Checkout …) folgen wellenweise.
============================================================================= */
:root {
--pi-ink: #0b0e10;
--pi-stage: #14181c;
--pi-paper: #ffffff;
--pi-work: #f3f5f6;
--pi-line: rgba(0, 0, 0, .10);
--pi-txt: #22282c;
--pi-muted: #5b666d;
--pi-teal: #00abaa; /* Flächen, Rahmen, Akzentbalken */
--pi-teal-deep: #007a79; /* Textfarbe — 5,17:1 auf Weiß, AA erfüllt */
--pi-glow: #2fd4d2; /* nur auf dunklen Flächen */
--pi-radius: 14px;
/* Bahnschrift ist nicht frei einbettbar (siehe design-tokens.md Kap. 2).
Bis eine lizenzfreie Alternative eingebunden ist, greift der Fallback. */
--pi-font-display: 'D-DIN', 'Bahnschrift', 'Segoe UI', Arial, sans-serif; /* D-DIN selbst gehostet im Child (16.08.2026) */
--pi-font-mono: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
}
/* =============================================================================
ARTIKELBESCHREIBUNG — Komponenten
Aufhänger ist .pi-wrap um die gesamte Beschreibung.
Die Breite von .pi-wrap wird hier bewusst NICHT gesetzt: Der alte
Custom-Head-Block erzwingt `#tab-description .pi-wrap{max-width:none
!important}`. Sobald dieser Block abgelöst ist (Child-Template), kann hier
eine Maximalbreite gesetzt werden.
============================================================================= */
.pi-wrap { color: var(--pi-txt); }
/* Bilder in der Beschreibung (z. B. Polbelegung xConnect®) nie breiter als die Karte — sonst scrollt mobil die Seite quer */
.pi-wrap img { max-width: 100%; height: auto; }
/* --- Karte: Grundbaustein der Beschreibung --------------------------------- */
.pi-wrap .pi-card {
background: var(--pi-paper);
border: 1px solid var(--pi-line);
border-radius: var(--pi-radius);
padding: 18px;
margin: 0 0 16px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.pi-wrap .pi-hero { padding: 22px 20px; }
/* --- Raster: breite Hauptkarte, schmale Nebenkarte ------------------------- */
.pi-wrap .pi-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
}
.pi-wrap .pi-grid > .pi-card { margin-bottom: 0; }
.pi-wrap .pi-grid + .pi-grid,
.pi-wrap .pi-grid + .pi-card { margin-top: 16px; }
/* --- Überschriften --------------------------------------------------------- */
.pi-wrap .pi-h2 {
font-family: var(--pi-font-display);
margin: 0 0 .35em;
font-size: 1.875rem;
line-height: 1.15;
color: var(--pi-ink);
}
.pi-wrap .pi-h3 {
font-family: var(--pi-font-display);
margin: 0 0 .5em;
font-size: 1.25rem;
line-height: 1.25;
color: var(--pi-ink);
}
.pi-wrap .pi-h4 {
margin: .9em 0 .5em;
font-size: 1rem;
line-height: 1.25;
color: var(--pi-teal-deep);
}
/* Akzentbalken — das Wiedererkennungszeichen der Beschreibungen */
.pi-wrap .pi-accent {
padding-left: 12px;
border-left: 4px solid var(--pi-teal);
}
/* --- Fließtext ------------------------------------------------------------- */
.pi-wrap .pi-lead { margin: 0; font-size: 1rem; line-height: 1.55; }
.pi-wrap p { line-height: 1.55; }
.pi-wrap .pi-mut { color: var(--pi-muted); }
/* --- Listen ---------------------------------------------------------------- */
.pi-wrap .pi-ul { margin: 0; padding-left: 18px; }
.pi-wrap .pi-ul li { margin: 6px 0; line-height: 1.5; }
/* --- Hinweisbox ------------------------------------------------------------ */
.pi-wrap .pi-callout {
margin-top: 12px;
margin-bottom: 24px; /* sonst klebt die nächste Abschnitts-Eyebrow direkt an der Box (MADRIX-Lizenzen, 11.10.2026) */
padding: 12px;
border-radius: 12px;
background: rgba(0, 171, 170, .08);
border: 1px solid rgba(0, 171, 170, .25);
}
/* --- Datentabelle ---------------------------------------------------------- */
.pi-wrap .pi-tablewrap { overflow-x: auto; }
.pi-wrap .pi-table { width: 100%; border-collapse: collapse; }
.pi-wrap .pi-table th,
.pi-wrap .pi-table td {
padding: 10px;
border-bottom: 1px solid var(--pi-line);
text-align: left;
vertical-align: top;
}
.pi-wrap .pi-table thead th { background: rgba(0, 0, 0, .03); font-weight: 700; }
.pi-wrap .pi-table tbody th { color: var(--pi-muted); font-weight: 600; width: 38%; }
/* --- Verweise -------------------------------------------------------------- */
.pi-wrap .pi-note { margin: 10px 0 0; }
.pi-wrap a { color: var(--pi-teal-deep); font-weight: 600; text-decoration: none; }
.pi-wrap a:hover { text-decoration: underline; }
/* --- FAQ als aufklappbare Blöcke ------------------------------------------- */
.pi-wrap .pi-faq {
border-top: 1px solid var(--pi-line);
padding: 10px 0;
}
.pi-wrap .pi-faq:first-of-type { border-top: 0; }
.pi-wrap .pi-faq summary {
cursor: pointer;
font-weight: 700;
list-style: none;
}
.pi-wrap .pi-faq summary::-webkit-details-marker { display: none; }
/* Den Ring liefert die globale Fokusregel am Dateiende; hier bleibt nur die
Abrundung, damit er der Zeile folgt (WCAG 2.4.7). */
.pi-wrap .pi-faq summary:focus-visible { border-radius: 4px; }
.pi-wrap .pi-faqc { margin-top: 8px; line-height: 1.55; }
/* --- Mobil ----------------------------------------------------------------- */
@media (max-width: 900px) {
.pi-wrap .pi-grid { grid-template-columns: 1fr; }
.pi-wrap .pi-grid > .pi-card { margin-bottom: 16px; }
.pi-wrap .pi-h2 { font-size: 1.5rem; }
.pi-wrap .pi-h3 { font-size: 1.15rem; }
/* Datentabelle bricht um statt seitwärts zu scrollen. Die Tabellenstruktur
bleibt erhalten (nicht auf display:block umstellen) — sonst verlieren
Screenreader die Zuordnung Merkmal→Wert. */
.pi-wrap .pi-table { font-size: .9rem; }
.pi-wrap .pi-table th,
.pi-wrap .pi-table td { padding: 8px; }
.pi-wrap .pi-table tbody th { width: 42%; }
}
/* =============================================================================
ERWEITERUNG (UX-Review 14.08.2026)
Neue Bausteine, die das bestehende System ergänzen. Jeder Baustein löst ein
benanntes Finding aus dem Review — siehe doku/ux-review-artikelbeschreibung.md.
Bestehende Klassen bleiben unverändert.
============================================================================= */
/* --- F1: Sprungmarken -------------------------------------------------------
Ab etwa fünf Karten findet man einen Abschnitt nicht mehr durch Scrollen.
Entspricht der Anker-Navigation aus Mockup 03. */
.pi-wrap .pi-toc {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.pi-wrap .pi-toc a {
display: inline-block;
padding: 8px 14px; /* ergibt ≥ 24 px Klickziel, WCAG 2.2 SC 2.5.8 */
border: 1px solid var(--pi-line);
border-radius: 999px;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
}
.pi-wrap .pi-toc a:hover { border-color: var(--pi-teal); text-decoration: none; }
/* --- F2: Merkmal-Chips ------------------------------------------------------
Die drei bis fünf Entscheidungsmerkmale auf einen Blick, bevor der Fließtext
beginnt. Für „Techniker Thomas", der vergleicht statt liest. */
.pi-wrap .pi-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pi-wrap .pi-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 171, 170, .10);
border: 1px solid rgba(0, 171, 170, .30);
color: var(--pi-teal-deep);
font-size: .85rem;
font-weight: 600;
}
/* --- F3: Bild-Text-Wechsel --------------------------------------------------
Der Baustein, der bei Advatek die Seite trägt und hier bisher ganz fehlt.
Bild und Text nebeneinander, im Wechsel der Seiten (Modifikator --flip). */
.pi-wrap .pi-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: center;
}
.pi-wrap .pi-media--flip > :first-child { order: 2; }
.pi-wrap .pi-figure { margin: 0; }
.pi-wrap .pi-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
/* KEIN Hintergrund: Artikelbilder sind quadratisch und werden unten in der
Höhe begrenzt. Ein gefärbter Hintergrund wird dadurch zu sichtbaren Balken
links und rechts vom Produkt (am 14.08.2026 live so passiert). */
}
/* Artikelbilder sind quadratisch und haben viel Rand. In einer breiten Spalte
wirkt das Gerät dadurch verloren — Höhe begrenzen, Seitenverhältnis wahren. */
.pi-wrap .pi-media .pi-figure img {
max-height: 300px; /* 380 → 300 (17.08.2026): die Bildspalte war halb leer */
object-fit: contain;
}
/* Bild schmaler, Text breiter (17.08.2026, UX-Review Beschreibung im Child, Paket A). Bei --flip steht das Bild
per order:2 in der zweiten Spalte, deshalb dort die Spalten getauscht. Mobil (unten) bleibt 1fr. */
.pi-wrap .pi-media { grid-template-columns: 2fr 3fr; }
.pi-wrap .pi-media--flip { grid-template-columns: 3fr 2fr; }
/* --- Lesbarkeit im Child (17.08.2026, doku/ux-review-beschreibung-child-2026-08-17.md, Paket A) ---------- */
/* Sprungziele frei vom fixierten ET360-Header (Desktop 100 + 51 px, mobil 55 px) — vorher lag die Ziel-Überschrift
bei 19 px unter dem Header, der Sprung wirkte wie „nichts passiert". */
#tab-description [id], .pi-wrap [id] { scroll-margin-top: 10.5rem; }
@media (max-width: 991.98px) { #tab-description [id], .pi-wrap [id] { scroll-margin-top: 4.5rem; } }
/* Fließtext wie Listen und Tabelle: ET360 setzt p je Breakpoint auf 14 px (16 px erst ab 1458 px). */
.pi-wrap p { font-size: inherit; } /* = 16,5 px wie li/td (1rem wären 16 px) */
.pi-wrap .pi-lead { font-size: 1.1rem; } /* Einstieg leicht betont */
/* Zeilenlänge: Text höchstens 46em (≈ 88 Zeichen); Karten und Raster bleiben breit. */
.pi-wrap .pi-lead, .pi-wrap p, .pi-wrap .pi-steps li, .pi-wrap .pi-faqc, .pi-wrap .pi-ul, .pi-wrap .pi-fit { max-width: 46em; } /* ≈ 88 Zeichen; Mockup 03 nennt 56em (≈ 110), Optimum 50–75, Obergrenze ~90 */
/* Abschnitts-Kicker über den Ankerzielen: dasselbe Wort wie im Inhaltsverzeichnis, damit der Sprung sichtbar
ankommt (Mono-Eyebrow wie auf der Produktseite). …
… */
.pi-wrap .pi-section { margin: 0 0 16px; padding: 0; } /* ET360 gibt global 64 px padding-top */
.pi-wrap .pi-section > .pi-card:last-child, .pi-wrap .pi-section > .pi-grid { margin-bottom: 0; }
.pi-wrap .pi-kicker {
margin: 0 0 8px;
font-family: var(--pi-font-mono);
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pi-muted);
}
.pi-wrap .pi-figure figcaption {
margin-top: 8px;
font-size: .85rem;
color: var(--pi-muted);
}
/* --- F4: Nummerierte Schritte ----------------------------------------------
Für Aufbau- und Anschlussfolgen. Mono-Ziffer in Teal, wie in design-tokens.md
für die Steps-Komponente festgelegt. */
.pi-wrap .pi-steps { list-style: none; margin: 0; padding: 0; counter-reset: pi-step; }
.pi-wrap .pi-steps > li {
counter-increment: pi-step;
position: relative;
padding-left: 44px;
margin: 0 0 14px;
line-height: 1.55;
}
.pi-wrap .pi-steps > li::before {
content: counter(pi-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-family: var(--pi-font-mono);
font-size: .85rem;
font-weight: 700;
color: var(--pi-teal-deep);
border: 1px solid rgba(0, 171, 170, .30);
border-radius: 8px;
padding: 2px 8px;
}
/* --- F5: Hinweis gegen Warnung unterscheiden --------------------------------
Bisher sehen Hinweis und Warnung identisch aus. Gleiche Optik signalisiert
gleiche Bedeutung (Gestaltgesetz der Ähnlichkeit) — hier ist sie verschieden.
Farbe ist nie der einzige Träger: die Box beginnt mit einem Wort. */
.pi-wrap .pi-callout--warn {
background: rgba(245, 158, 11, .10);
border-color: rgba(245, 158, 11, .40);
}
/* Ratgeber (.pi-katext): dort sind alle Warnungen Strom-Warnungen (230 V, Elektrofachkraft) — deshalb das
Warnzeichen ISO 7010 W012 „Warnung vor elektrischer Spannung" davor (User 23.10.2026). Nur Schmuck, der Text
trägt die Aussage. Grafik: Wikimedia Commons File:ISO_7010_W012.svg, gemeinfrei. Nicht auf Artikel-Callouts
ausweiten — dort warnt --warn auch vor Nicht-Elektrischem (z. B. Montage auf Aluminiumplatte). */
.pi-katext .pi-callout--warn,
.pi-netz-warn .pi-callout--warn { /* + Netzteil-Kategorien 79/80/129, child-tpl/widgets/category_banner.tpl */
position: relative;
min-height: 28px;
padding-left: 52px;
}
.pi-katext .pi-callout--warn::before,
.pi-netz-warn .pi-callout--warn::before {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 28px;
height: 25px;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 524' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m300 16 284 492h-568z' fill='%23F9A800' stroke-width='32' stroke='%23000' stroke-linejoin='round'/%3E%3Cpath d='m278 164-50 177 77-41-19 119-16-22 15 72 41-61-23 14 45-164-80 43 59-137'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* --- F6: Abschluss-Band -----------------------------------------------------
Nach der FAQ endete die Beschreibung bisher im Nichts; der nächste Schritt
lag nur ganz oben in der Kaufbox. Dunkle Zone = Aktion (Hybrid-Zonenregel). */
.pi-wrap .pi-cta {
margin: 16px 0 0;
padding: 20px;
border-radius: var(--pi-radius);
background: var(--pi-ink);
color: #e7edf0;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
}
.pi-wrap .pi-cta p { margin: 0; max-width: 52ch; }
.pi-wrap .pi-cta a {
display: inline-block;
padding: 12px 20px;
border-radius: 8px;
background: var(--pi-teal);
color: #00302f; /* Buttontext auf Teal, lt. design-tokens.md */
font-weight: 700;
text-decoration: none;
}
.pi-wrap .pi-cta a:hover { background: var(--pi-glow); text-decoration: none; }
/* Fokusring: siehe globale Regel am Dateiende — sie trägt auf dieser dunklen
Fläche mit 3,75:1 und muss nicht je Bauteil wiederholt werden. */
/* --- F7: FAQ sichtbar aufklappbar ------------------------------------------
`list-style:none` hat das Dreieck entfernt, ohne Ersatz — man sieht der Zeile
nicht an, dass sie sich öffnet. Chevron als Signifier, Klickziel auf 44 px. */
.pi-wrap .pi-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px; /* Fitts + WCAG 2.2 SC 2.5.8 */
}
.pi-wrap .pi-faq summary::after {
content: "";
flex: 0 0 auto;
width: 10px;
height: 10px;
border-right: 2px solid var(--pi-teal-deep);
border-bottom: 2px solid var(--pi-teal-deep);
transform: rotate(45deg);
transition: transform .15s ease;
}
.pi-wrap .pi-faq[open] summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
.pi-wrap .pi-faq summary::after { transition: none; }
}
/* --- F8: Eignung und Abgrenzung ---------------------------------------------
„Wofür ist das gedacht — und wofür ausdrücklich nicht." Beantwortet die Frage,
an der ein Technikkäufer sonst abspringt oder falsch bestellt (Fehlervermeidung,
H5). Das Zeichen trägt die Bedeutung, nicht die Farbe — sonst wäre es für
Farbfehlsichtige und Screenreader wertlos (WCAG 1.4.1). */
.pi-wrap .pi-fit { list-style: none; margin: 0; padding: 0; }
.pi-wrap .pi-fit li { position: relative; padding-left: 28px; margin: 8px 0; line-height: 1.5; }
.pi-wrap .pi-fit li::before {
position: absolute;
left: 0;
top: 0;
font-weight: 700;
}
.pi-wrap .pi-fit--yes li::before { content: "\2713"; color: #15803d; } /* Haken */
.pi-wrap .pi-fit--no li::before { content: "\2715"; color: #b91c1c; } /* Kreuz */
/* --- F9: Kennzahl-Kacheln ---------------------------------------------------
Die zwei bis vier Zahlen, auf die es bei der Auswahl ankommt, groß und
vergleichbar — statt sie im Fließtext zu suchen (H6/H7). */
.pi-wrap .pi-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin: 0 0 4px;
}
.pi-wrap .pi-fact {
background: var(--pi-work);
border: 1px solid var(--pi-line);
border-radius: 12px;
padding: 14px;
}
.pi-wrap .pi-fact .v {
font-family: var(--pi-font-display);
font-size: 1.6rem;
line-height: 1.1;
color: var(--pi-ink);
display: block;
}
.pi-wrap .pi-fact .l { color: var(--pi-muted); font-size: .88rem; }
/* --- Erweiterung: Mobil ----------------------------------------------------- */
@media (max-width: 900px) {
.pi-wrap .pi-media { grid-template-columns: 1fr; }
.pi-wrap .pi-media--flip > :first-child { order: 0; } /* Bild bleibt oben */
.pi-wrap .pi-cta { flex-direction: column; align-items: flex-start; }
.pi-wrap .pi-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.pi-wrap .pi-fact .v { font-size: 1.35rem; }
}
/* =============================================================================
ÜBERGANG — entfällt, sobald SKU 10121 auf die Kartenform umgestellt ist
Erste Fassung vom 14.08.2026 (einspaltig). Bleibt nur so lange stehen, wie
noch ein Artikel den Wrapper .pi-desc trägt.
============================================================================= */
.pi-desc { color: var(--pi-txt); line-height: 1.6; }
.pi-desc .pi-section { margin: 0 0 2.2em; padding: 0; }
.pi-desc .pi-section:last-child { margin-bottom: 0; }
.pi-desc h2 {
font-family: var(--pi-font-display);
font-size: 1.45rem; line-height: 1.25; color: var(--pi-ink); margin: 0 0 .5em;
}
.pi-desc p { margin: 0 0 .9em; max-width: 62ch; }
.pi-desc .pi-lead { font-size: 1.05rem; }
.pi-desc .pi-mut { color: var(--pi-muted); }
.pi-desc a { color: var(--pi-teal-deep); }
.pi-desc .pi-scroll { overflow-x: auto; margin: 0 0 .9em; }
.pi-desc .pi-tech { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; }
.pi-desc .pi-tech th,
.pi-desc .pi-tech td { padding: 10px 16px; border-bottom: 1px solid #e1e6e8; text-align: left; vertical-align: top; }
.pi-desc .pi-tech th { width: 34%; font-weight: 600; color: var(--pi-muted); background: var(--pi-work); }
.pi-desc .pi-tech tr:last-child th,
.pi-desc .pi-tech tr:last-child td { border-bottom: 0; }
.pi-desc .pi-compat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 .9em; }
.pi-desc .pi-compat .pi-box { border: 1px solid #e1e6e8; border-radius: 10px; padding: 16px; }
.pi-desc .pi-compat .pi-box b { display: block; margin-bottom: 4px; }
.pi-desc .pi-compat .pi-box span { font-size: .9rem; color: var(--pi-muted); }
.pi-desc .pi-list { list-style: none; padding: 0; margin: 0 0 .9em; max-width: 62ch; display: grid; gap: 8px; }
.pi-desc .pi-list li { position: relative; padding-left: 26px; }
.pi-desc .pi-list li::before {
content: ""; position: absolute; left: 4px; top: .55em;
width: 8px; height: 8px; border-radius: 50%; background: var(--pi-teal);
}
.pi-desc .pi-faq { margin: 0 0 .9em; max-width: 62ch; }
.pi-desc .pi-faq > dt { font-weight: 600; color: var(--pi-ink); margin-top: 1em; }
.pi-desc .pi-faq > dt:first-child { margin-top: 0; }
.pi-desc .pi-faq > dd { margin: .25em 0 0; }
@media (max-width: 700px) {
.pi-desc .pi-compat { grid-template-columns: 1fr; }
.pi-desc h2 { font-size: 1.3rem; }
.pi-desc .pi-tech { min-width: 0; font-size: .9rem; }
.pi-desc .pi-tech th { width: 42%; }
.pi-desc .pi-tech th,
.pi-desc .pi-tech td { padding: 8px 10px; }
}
/* =============================================================================
BFSG — Tastaturfokus, global (WCAG 2.4.7 sichtbarer Fokus, 1.4.11 Kontrast)
Gilt für die ganze Seite, nicht nur für die Beschreibung. Steht bewusst ganz
am Ende: Sie soll jede Fokusregel gewinnen, auch die eigenen weiter oben.
Gemessen am 16.08.2026 auf der Live-Produktseite (tools/bfsg-pruefen.mjs),
87 fokussierbare Elemente Desktop / 81 mobil:
· 9 Elemente ganz OHNE Ring — Suchfeld, Vergleichen, Merken, Slider-Pfeile,
Mengenfeld. theme.css schaltet ihn dort per `outline:0` ab
(`.form-control:focus`, `.btn:focus`), und diese Regeln sind mit zwei
Klassen spezifischer als ein blankes `:focus-visible`.
· 5 Elemente mit 3-px-Ring in --pi-teal auf Weiß: 2,84:1, knapp unter 3:1.
· 1 Element mobil mit dem Template-Ring #101010 auf gleichfarbig dunklem
Grund: 1,00:1, also unsichtbar.
Warum ZWEI Farben und nicht eine: Eine einzige Ringfarbe kann die drei
Flächen dieses Shops nicht zugleich bedienen. Der Shop hat Weiß (Arbeit),
Teal (Fußzeile mobil, Kaufbutton) und Fast-Schwarz (Kopfleiste, CTA-Karte).
#2fd4d2 (glow) Weiß 1,83 Teal 1,64 #0b0e10 10,6
#00abaa (teal) Weiß 2,84 — #0b0e10 6,8
#007a79 (teal-deep) Weiß 5,17 Teal 1,82 #0b0e10 3,75
#0b0e10 (ink) Weiß 19,6 Teal 6,83 #0b0e10 1,00
Für ein Bestehen auf Teal (L=0,32) müsste die Farbe unter L=0,073 liegen;
dieselbe Farbe fällt dann auf Fast-Schwarz durch. Rechnerisch gibt es die
eine Farbe also nicht — der zweifarbige Ring ist keine Geschmacksfrage.
Deshalb: dunkler Kern direkt am Bauteil, heller Hof außen herum. Auf jeder
Fläche trägt mindestens einer der beiden, und beide stehen mit 10,6:1
zueinander. WCAG 2.4.13 sieht genau diese Zweifarbigkeit vor.
design-tokens.md Kap. 6 nennt pauschal „3 px --glow" — das trägt nur auf
dunklen Flächen und ist dort entsprechend eingeschränkt.
Warum !important, sonst in diesem Stylesheet nirgends benutzt: Der Ring muss
Template- und Plugin-Regeln schlagen, die ihn abschalten, und deren
Selektoren sind weder vollständig bekannt (Plugins) noch stabil (Update).
Ein Nachbauen der Selektorliste wäre bei jedem Template-Update erneut fällig.
Die Alternative — je Bauteil eine eigene Regel — hat genau die Lücken
erzeugt, die oben gemessen sind.
outline-offset bleibt 0: Kern und Hof sollen als zwei saubere 3-px-Ringe
aneinandergrenzen. Wird der Hof von einem `overflow:hidden`-Vorfahren
beschnitten, bleibt der Kern am Bauteil stehen — der Fokus verschwindet also
nie ganz.
============================================================================= */
:focus-visible {
outline: 3px solid var(--pi-ink) !important;
outline-offset: 0 !important;
box-shadow: 0 0 0 6px var(--pi-glow) !important;
}
/* Warnzeichen ISO 7010 W012 „Warnung vor elektrischer Spannung" — gemeinfrei (Wikimedia Commons File:ISO_7010_W012.svg,
„Public domain" + „PD-shape", geprüft 23.09.2026); Kopie in theme/icons/iso7010-w012.svg. Rein schmückend (::before), die
Überschrift bzw. der Text „Hinweis:" trägt die Aussage. */
.pi-wrap #sicherheit .pi-h3::before{content:"";display:inline-block;width:1.35em;height:1.18em;margin-right:.45em;vertical-align:-.18em;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 600 524' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m300 16 284 492h-568z' fill='%23F9A800' stroke-width='32' stroke='%23000' stroke-linejoin='round'/%3E%3Cpath d='m278 164-50 177 77-41-19 119-16-22 15 72 41-61-23 14 45-164-80 43 59-137'/%3E%3C/svg%3E") no-repeat center/contain}
/* Breite Bildschirme: ET360 endet bei .container 1320px (ab 1458px Fenster) — auf 2560er/3440er Monitoren wirkte der Shop wie
eine schmale Insel. Vierte Stufe 1600px ab 1760px Fenster (24.09.2026, per Playwright auf Start/Kategorie/Artikel geprüft). */
@media (min-width:1760px){.container{max-width:1600px}}
/* Kopfzeile (ab 1232px): ET360 teilt sie in drei gleich breite Spalten — die Suche klebte links in der Mitte, die Symbole
standen mittig in ihrer Spalte statt am rechten Rand. Jetzt Logo bündig links, Suche mittig (max. 680px), Symbole bündig
rechts; Suchfeld und Lupe als eine Pille (vorher runder Input + eckiger Knopf). Darunter bleibt das mobile Layout. */
@media (min-width:1232px){
.et-widget-headermain .et-header-main-wrapper{gap:40px}
.et-widget-headermain .et-header-main-logo{flex:1 1 0;min-width:max-content;max-width:none;width:auto}
.et-widget-headermain .et-header-main-search{flex:0 1 680px;max-width:none;width:auto;justify-content:center}
.et-widget-headermain .et-header-main-search #search{width:100%;max-width:680px}
.et-widget-headermain .et-header-main-account-basket{flex:1 1 0;min-width:max-content;max-width:none;width:auto;justify-content:flex-end!important}
.et-widget-headermain .et-header-main-search .input-group{background:#f0f0f0;border:1px solid #ccc;border-radius:25px;overflow:hidden;flex-wrap:nowrap}
.et-widget-headermain #search-header{background:transparent;border:0;border-radius:0;box-shadow:none}
.et-widget-headermain .et-header-main-search .input-group-append .btn{background:transparent;border:0;box-shadow:none;padding:0 1.1rem}
}
/* Hauptmenü ab 1458px auf Inhaltsbreite, Punkte über die volle Breite verteilt — erster Text bündig mit dem Logo, letzter mit
dem Warenkorb (-30px = Innenabstand der Menüpunkte). Unter 1458px bleibt es randlos: bei 1140px passten sonst nicht alle
acht Punkte in eine Zeile. */
@media (min-width:1458px){
#et-menu-main-wrapper > .container-fluid{max-width:1320px;margin-inline:auto}
#et-menu-main-wrapper .et-menu-main-center > .menu-item-row{justify-content:space-between;margin-inline:-30px;width:calc(100% + 60px);max-width:none}
}
@media (min-width:1760px){ #et-menu-main-wrapper > .container-fluid{max-width:1600px} }
/* Menüschrift wie in allen Mockups (.mainnav): Body-Schrift 600 / .92rem, Hover = 3px Teal-Unterstrich + --teal-deep.
Ersetzt 700/16,5px und das ET360-Hover #00abaa auf Weiß (unter AA-Kontrast). D-DIN bleibt Überschriften/Preisen vorbehalten
(ui-ux-Review 24.09.2026: A/B brachen auf FR bei 1458px um). */
#et-menu-main-wrapper .et-menu-item-title,
#et-menu-main-wrapper .et-menu-item-title span{font-family:var(--pi-font-body)!important;font-weight:600!important;font-size:.92rem!important;color:var(--pi-txt,#22282c)}
#et-menu-main-wrapper .et-menu-item-title{border-bottom:3px solid transparent;padding-bottom:4px}
#et-menu-main-wrapper .et-menu-item:is(:hover,:focus-within,.et-menu-open) .et-menu-item-title{border-bottom-color:var(--pi-teal,#00abaa)}
#et-menu-main-wrapper .et-menu-item:is(:hover,:focus-within,.et-menu-open) .et-menu-item-title span{color:var(--pi-teal-deep,#007a79)}
/* Schwarzer Balken oben wie Mockup 01 (.topbar): Body-Schrift normal statt fett (ET360 setzt font-weight:bold inline),
#dfe7ea statt Reinweiß, Hover/Fokus --pi-glow. Rechts der B2B-Einstieg (child-tpl/widgets/header_usp.tpl) in 600 + Glow. */
.et-widget-headerusp{font-size:.83rem}
.et-widget-headerusp .et-header-usp-left{flex:1 1 auto}
.et-widget-headerusp .et-header-usp-text-item a,
.et-widget-headerusp .et-header-usp-text-item .et-textfield{color:#dfe7ea!important;font-weight:400!important;text-decoration:none}
.et-widget-headerusp .et-header-usp-text-item i{color:#aeb9bf}
.et-widget-headerusp .et-header-usp-text-item.pi-usp-b2b{margin-left:auto}
/* Unter 1458px passen drei USP-Texte + B2B nicht in allen Sprachen in eine Zeile (FR/ES brachen um) — der B2B-Hinweis steht
dann ohnehin unter jedem Artikelpreis. Seit 14.10.2026 steht dort statt nichts die Kurzform (C3). */
.et-widget-headerusp .pi-b2b-kurz{display:none}
@media (max-width:1457.98px){.et-widget-headerusp .pi-b2b-lang{display:none}.et-widget-headerusp .pi-b2b-kurz{display:inline}}
.et-widget-headerusp .et-header-usp-text-item.pi-usp-b2b a{color:#2fd4d2!important;font-weight:600!important}
.et-widget-headerusp .et-header-usp-text-item a:is(:hover,:focus-visible),
.et-widget-headerusp .et-header-usp-text-item a:is(:hover,:focus-visible) .et-textfield{color:#2fd4d2!important;text-decoration:underline}
/* Sprachwahl (child-tpl/snippets/language_dropdown.tpl): Globus vor dem Kürzel, Menü mit Sprachnamen statt Kürzeln. */
.language-dropdown .pi-lang-globe{margin-right:.35em;font-size:.95em}
.language-dropdown .dropdown-menu .link-lang{white-space:nowrap}
/* FR-Menü (Texte ~1312px) passte bei 1232–1365px nicht in eine Zeile, ET360 zeigte den Überlauf-Pfeil. Nur FR und nur
unterhalb der bündigen Stufe: Innenabstand der Menüpunkte 30→20px (8 × 20px = 160px Luft). */
@media (min-width:1232px) and (max-width:1457.98px){html[lang^="fr"] #et-menu-main-wrapper .et-menu-item-link{padding-left:20px;padding-right:20px}}
/* =============================================================================
Footer im Relaunch-Stil (Mockup mockups/footer/, Variante B, User 27.09.2026).
Inhalte kommen aus ET360: Newsletter-Widget (.pi-footer-nl) und FooterBoxes (.pi-footer, 5 Boxen:
Über uns · Sortiment · Service · Rechtliches · Zahlarten). Hier nur Optik.
============================================================================= */
#footer{background:#0b0e10}
#footer .pi-footer-nl,#footer .pi-footer{color:#aeb9bf}
@media (min-width:1760px){#footer .pi-footer .container-md,#footer .pi-footer-nl .container{max-width:1600px}}
/* Newsletter: Text links, Formular rechts, Trennlinie */
#footer .pi-footer-nl{border-bottom:1px solid #252c31}
#footer .pi-footer-nl .et-newsletter-content-wrapper{flex:0 0 100%;max-width:100%}
@media (min-width:992px){
#footer .pi-footer-nl .et-newsletter-content{display:grid;grid-template-columns:1fr minmax(360px,520px);gap:8px 48px;align-items:center;text-align:left}
#footer .pi-footer-nl .et-newsletter-content > *{text-align:left}
#footer .pi-footer-nl .et-newsletter-headline{grid-column:1}
#footer .pi-footer-nl form{grid-column:2;grid-row:1 / span 2}
#footer .pi-footer-nl .et-newsletter-description{grid-column:1}
}
#footer .pi-footer-nl .et-newsletter-headline,#footer .pi-footer-nl .et-newsletter-headline *{font-family:var(--pi-font-display);font-weight:700;color:#fff;font-size:1.45rem;text-align:left!important}
#footer .pi-footer-nl .et-newsletter-description,#footer .pi-footer-nl .et-newsletter-description *{color:#aeb9bf!important;font-weight:400!important;text-align:left!important;font-size:1rem}
#footer .pi-footer-nl input[type=email]{background:#14181c;border-color:#252c31;color:#fff}
#footer .pi-footer-nl input[type=email]::placeholder{color:#7e8c93}
/* Spalten */
#footer .pi-footer .et-footer-boxes-wrapper{padding-top:48px}
#footer .pi-footer .et-footer-box-headline{font-family:var(--pi-font-display);color:#fff!important;font-size:1rem;letter-spacing:.04em;font-weight:700}
#footer .pi-footer a{color:#aeb9bf}
#footer .pi-footer a:hover,#footer .pi-footer a:focus-visible{color:#2fd4d2;text-decoration:underline}
#footer .pi-footer .et-footer-box-link{margin-bottom:6px}
.pi-foot-chip{display:inline-block;background:#fff;border-radius:10px;padding:10px 14px;margin-bottom:16px}
.pi-foot-chip img{height:46px;width:auto;display:block}
.pi-foot-about p{margin:0 0 14px;max-width:34ch}
.pi-foot-contact a{color:#dfe7ea!important}
.pi-foot-social{display:flex;gap:10px;margin-top:6px}
.pi-foot-social a{display:inline-flex;width:40px;height:40px;border:1px solid #252c31;border-radius:10px;align-items:center;justify-content:center;color:#dfe7ea!important;font-size:18px;text-decoration:none!important}
.pi-foot-social a:hover,.pi-foot-social a:focus-visible{border-color:#2fd4d2;color:#2fd4d2!important}
#footer .pi-footer .et-footer-box-withdrawal .btn,#footer .pi-footer .et-footer-box-withdrawal a{margin-top:10px;background:transparent;border:1px solid #2fd4d2;color:#2fd4d2;border-radius:10px;font-weight:600}
/* 5. Box = Zahlartenzeile über die volle Breite */
#footer .pi-footer .et-footer-box:nth-child(5){flex:0 0 100%;max-width:100%;border-top:1px solid #252c31;margin-top:16px;padding-top:22px}
.pi-foot-pay{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.pi-foot-eyebrow{font-family:var(--pi-font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#7e8c93}
.pi-pay-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pi-pay-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;height:34px;min-width:58px;padding:5px 10px}
.pi-pay-chip img{max-height:22px;width:auto;display:block}
.pi-pay-text{border:1px solid #252c31;border-radius:6px;height:34px;display:inline-flex;align-items:center;padding:0 12px;color:#dfe7ea;font-size:.85rem;font-weight:600}
.pi-foot-ship{margin-left:auto;color:#aeb9bf}
/* Rechtsleiste */
#footer #vat-credits{background:#0b0e10;color:#7e8c93;border-top:1px solid #252c31;padding:10px 0 12px}
@media (min-width:1760px){#footer #vat-credits .container{max-width:1600px}}
#footer #vat-credits a{color:#aeb9bf}
@media (max-width:767.98px){
#footer .pi-footer .et-footer-boxes-wrapper{padding-top:28px}
.pi-foot-ship{margin-left:0}
#footer .pi-footer .et-footer-box-heading{border-bottom:1px solid #252c31}
}
#footer #vat-credits .container,#footer #vat-credits .row,#footer #vat-credits [class*=col-]{background:transparent!important;color:#7e8c93}
#footer .pi-footer-nl .et-newsletter-content{max-width:none;width:100%}
@media (min-width:992px){#footer .pi-footer-nl form{justify-self:end;width:100%;max-width:520px}}
/* Widerrufs-Link (letzter Textlink der Spalte Service, JTL-Seite Online-Widerrufsformular) als Button — Beschriftung je
Sprache im ET360-Widget, weil die JTL-Sprachvariable global.withdrawalForm in FR/ES/IT/NL fehlt (Stand 27.09.2026) */
#footer .pi-footer .et-footer-box:nth-child(3) .et-footer-box-textlink:last-child a{display:inline-block;margin-top:12px;border:1px solid #2fd4d2;color:#2fd4d2!important;border-radius:10px;padding:8px 16px;font-weight:600;text-decoration:none!important}
#footer .pi-footer .et-footer-box:nth-child(3) .et-footer-box-textlink:last-child a:hover,#footer .pi-footer .et-footer-box:nth-child(3) .et-footer-box-textlink:last-child a:focus-visible{background:#2fd4d2;color:#0b0e10!important}
.pi-pay-chip--text{gap:7px;color:#22282c;font-size:.82rem;font-weight:700;letter-spacing:.01em}
.pi-pay-chip--text i{color:#007a79;font-size:.95rem}
#footer #vat-credits .row{align-items:center}
#footer #vat-credits .row > div{padding-top:2px;padding-bottom:2px}
#footer #vat-credits .footnote-vat,#footer #vat-credits .small{font-size:.8rem;margin:0}
/* UX-Review 27.09.: Fluchtlinie Newsletter = Spalten, ruhigerer Rhythmus, kein Leerstreifen am Handy */
#footer .pi-footer-nl .container > .row{margin-left:0;margin-right:0}
#footer .pi-footer-nl .et-newsletter-content-wrapper{padding-left:10px;padding-right:10px}
#footer .pi-footer-nl .container,#footer .pi-footer .container-md{padding-left:10px;padding-right:10px}
#footer .pi-footer-nl .et-newsletter-wrapper{padding-top:28px;padding-bottom:28px}
#footer .pi-footer .et-footer-boxes-wrapper{padding-top:36px}
#footer .pi-footer .et-footer-box:nth-child(5){padding-bottom:18px}
@media (max-width:767.98px){#footer .pi-footer .et-footer-box:nth-child(5) .et-footer-box-heading{display:none}#footer .pi-footer .et-footer-box:nth-child(4){border-bottom:0}}
#footer .pi-footer-nl .et-newsletter-content{padding-left:0!important;padding-right:0!important}
#footer .pi-footer-nl .et-newsletter-content-wrapper{padding-left:0}
@media (max-width:767.98px){#footer .pi-footer .et-footer-box:nth-child(5){border-top:0;margin-top:0}}
/* Rechtsleiste unten: eine ruhige Zeile — links Preishinweis (bündig mit den Spalten), rechts „Powered by JTL-Shop"
(Lizenzpflicht ohne BrandFree, bleibt sichtbar). Leere Markenspalte des Templates ausgeblendet. */
#footer #vat-credits{padding:14px 0 16px}
#footer #vat-credits .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;margin:0}
#footer #vat-credits .row > .order-2.order-md-1:empty,#footer #vat-credits .row > div:first-child:not(:has(*)):not(:has(a)){display:none}
#footer #vat-credits .row > div{flex:0 1 auto;max-width:none;width:auto;padding:0;text-align:left!important}
#footer #vat-credits .footnote-vat,#footer #vat-credits #system-credits{font-size:.78rem;line-height:1.5;color:#7e8c93}
#footer #vat-credits a{color:#aeb9bf;text-decoration:underline;text-underline-offset:2px}
#footer #vat-credits a:hover{color:#2fd4d2}
@media (max-width:767.98px){#footer #vat-credits .row{justify-content:flex-start}}
#footer .pi-footer,#footer .pi-footer .container-md,#footer .pi-footer .et-footer-boxes-wrapper{padding-bottom:0!important;margin-bottom:0!important}
#footer .pi-footer .et-footer-box:nth-child(5){padding-bottom:26px}
#footer .pi-footer .et-footer-box:nth-child(5) .et-footer-box-content,#footer .pi-footer .et-footer-box:nth-child(5) .et-footer-content-collapser{margin-bottom:0;padding-bottom:0}
/* 27.09. User: Abstand zur Rechtszeile zu groß — durchgehende Trennlinie weg, Zeile rückt an die Zahlarten (Nähe statt Linie) */
#footer #vat-credits{border-top:0;padding:4px 0 20px}
#footer .pi-footer .et-footer-box:nth-child(5){padding-bottom:12px}
#footer .pi-footer .et-footer-box:nth-child(5){margin-bottom:0}
#footer .pi-footer-nl{border-bottom:0}
@media (min-width:768px){#footer .pi-footer .et-footer-boxes-wrapper{padding-top:0}}
#footer .pi-footer-nl .et-newsletter-content{padding-bottom:0!important}
#footer .pi-footer-nl .newsletter-email-wrapper{margin-bottom:0}
@media (max-width:767.98px){#footer .pi-footer .et-footer-boxes-wrapper{padding-top:4px}#footer .pi-footer-nl .et-newsletter-wrapper{padding-bottom:12px}}
/* Zahlungsseite (JTL-Link 71, Inhalt aus tools/zahlungsseite/build.py) — Mockup 13, 27.09.2026 */
.pi-paypage{--pp-line:rgba(0,0,0,.10);--pp-ink:#0b0e10;--pp-teal:#00abaa;--pp-deep:#007a79;margin-bottom:40px}
.pi-paypage .pi-pp-lead{max-width:880px;font-size:1.05rem;margin:0 0 22px}
.pi-paypage .pi-pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:16px;margin:0 0 10px}
.pi-paypage .pi-pm{background:#fff;border:1px solid var(--pp-line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.pi-paypage .pi-pm--b2b{border-left:5px solid var(--pp-teal)}
.pi-paypage .pi-pm-logo{height:36px;display:flex;align-items:center;gap:8px}
.pi-paypage .pi-pm-logo img{max-height:30px;width:auto}
.pi-paypage .pi-pm-txt{font-family:var(--pi-font-mono,Consolas,monospace);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pp-deep);display:flex;align-items:center;gap:8px}
.pi-paypage .pi-pm-txt svg{width:30px;height:30px}
.pi-paypage .pi-pm h3{margin:0;font-family:var(--pi-font-display,'D-DIN',Bahnschrift,'Segoe UI',sans-serif);font-weight:600;font-size:1.15rem;color:var(--pp-ink)}
.pi-paypage .pi-pm p{margin:0;font-size:.95rem}
.pi-paypage .pi-pm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.pi-paypage .pi-pm-tag{font-size:.78rem;border-radius:999px;padding:2px 10px;background:#e6f6f6;color:#005b5a}
.pi-paypage .pi-pm-lim{background:#fff3dc;color:#8a4f00}
.pi-paypage h2{font-family:var(--pi-font-display,'D-DIN',Bahnschrift,'Segoe UI',sans-serif);font-weight:600;font-size:1.45rem;color:var(--pp-ink);margin:34px 0 12px}
.pi-paypage .pi-pp-det details{background:#fff;border:1px solid var(--pp-line);border-radius:12px;margin:0 0 10px;padding:0 20px}
.pi-paypage .pi-pp-det summary{list-style:none;cursor:pointer;padding:15px 0;font-family:var(--pi-font-display,'D-DIN',Bahnschrift,'Segoe UI',sans-serif);font-weight:600;font-size:1.05rem;color:var(--pp-ink);display:flex;justify-content:space-between;gap:12px}
.pi-paypage .pi-pp-det summary::-webkit-details-marker{display:none}
.pi-paypage .pi-pp-det summary::after{content:"+";color:var(--pp-deep);font-size:1.4rem;line-height:1}
.pi-paypage .pi-pp-det details[open] summary::after{content:"\2013"}
.pi-paypage .pi-pp-det summary:focus-visible{outline:2px solid var(--pp-teal);outline-offset:2px}
.pi-paypage .pi-pp-det details p{margin:0 0 14px}
.pi-paypage a{color:var(--pp-deep)}
.pi-paypage .pi-pp-contact{margin-top:28px;background:#fff;border:1px solid var(--pp-line);border-radius:14px;padding:18px 22px}
.pi-paypage h1{margin:0 0 10px}
/* ==== Kasse neu — Etappe 1a (Mockup 14, freigegeben 27.09.2026). Nur Kassenseiten (body.is-checkout). ==== */
body.is-checkout #content{background:#f3f5f6}
body.is-checkout #checkout .et-boxed-content{background:#fff;border:1px solid #e1e6e8;border-radius:12px;padding:22px 24px;margin-bottom:18px}
body.is-checkout #checkout h1{font-family:var(--pi-font-display);font-weight:600;color:#0b0e10}
body.is-checkout #checkout .h3{font-family:var(--pi-font-display);font-weight:600;font-size:1.2rem;color:#0b0e10}
/* Kopf: ausgegraute Icons weg (Konto, Merkliste, Warenkorb, Sprache, ShopVote) */
body.is-checkout .et-header-checkout .et-header-main-account-basket > *{display:none!important}
/* Stepper Desktop: nummerierte Kreise */
body.is-checkout .checkout-steps .breadcrumb{counter-reset:pistep;background:none;padding:0;margin:0 0 18px;gap:6px;flex-wrap:wrap;align-items:center}
body.is-checkout .checkout-steps .breadcrumb-item{counter-increment:pistep;display:flex;align-items:center;gap:8px;color:#5b666d;font-size:.95rem;padding:0}
body.is-checkout .checkout-steps .breadcrumb-item::before{content:counter(pistep);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid #c9d1d5;font-weight:700;font-size:.8rem;padding:0;color:inherit;float:none}
body.is-checkout .checkout-steps .breadcrumb-item:has(~ .active){color:#007a79}
body.is-checkout .checkout-steps .breadcrumb-item:has(~ .active)::before{content:"✓";background:#e6f6f6;border-color:#007a79}
body.is-checkout .checkout-steps .breadcrumb-item.active{color:#0b0e10;font-weight:600}
body.is-checkout .checkout-steps .breadcrumb-item.active::before{background:#00abaa;border-color:#00abaa;color:#00302f}
body.is-checkout .checkout-steps .breadcrumb-divider{display:none}
body.is-checkout .checkout-steps .breadcrumb-item:not(:last-child)::after{content:"";width:34px;height:1.5px;background:#c9d1d5;margin-left:6px}
body.is-checkout .checkout-steps .breadcrumb-link{color:inherit;text-decoration:none}
/* Auswahlzeilen Versand + Zahlung */
body.is-checkout .checkout-shipping-form-options .custom-control,
body.is-checkout .checkout-payment-method > .custom-control{border:1.5px solid #e1e6e8;border-radius:10px;padding:14px 16px 14px 46px;margin-bottom:10px;background:#fff;transition:border-color .15s}
body.is-checkout .checkout-shipping-form-options .custom-control:hover,
body.is-checkout .checkout-payment-method > .custom-control:hover{border-color:#b9c4c8}
body.is-checkout .checkout-shipping-form-options .custom-control:has(input:checked),
body.is-checkout .checkout-payment-method > .custom-control:has(input:checked){border-color:#007a79;background:#f3fbfb}
body.is-checkout .checkout-payment-method > .custom-control .custom-control-label,
body.is-checkout .checkout-shipping-form-options .custom-control-label{width:100%}
body.is-checkout .checkout-payment-method .custom-control-label::before,
body.is-checkout .checkout-payment-method .custom-control-label::after,
body.is-checkout .checkout-shipping-form-options .custom-control-label::before,
body.is-checkout .checkout-shipping-form-options .custom-control-label::after{left:-30px}
body.is-checkout .checkout-payment-method .custom-control-label > .row{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;flex-wrap:nowrap;margin:0}
body.is-checkout .checkout-payment-method .custom-control-label > .row > .col{flex:0 1 auto;max-width:none;width:auto;padding:0}
body.is-checkout .checkout-payment-method .custom-control-label > .row > .col:first-child{flex:0 0 auto;margin-left:14px}
body.is-checkout .checkout-payment-method .payment-methods-image-title{max-height:26px;width:auto;margin:0}
body.is-checkout .checkout-payment-method-note,body.is-checkout .checkout-payment-method-note small{font-size:.9rem;color:#5b666d}
body.is-checkout .checkout-payment-options > [role=group]{display:flex;flex-direction:column}
body.is-checkout .checkout-payment-options .checkout-payment-method{padding-left:0;padding-right:0}
/* Reihenfolge: PayPal, Wero, Karte, Google Pay, Apple Pay, SEPA (PayPal), Rechnungskauf, Vorkasse, Rechnung (B2B), Amazon Pay.
Seit 27.10.2026 (User) PayPal zuerst; vorher Karte zuerst wegen Vorauswahl (27.09.2026), die greift nicht mehr. */
body.is-checkout .checkout-payment-method:has(#payment-za_ppc_paypal_input){order:1}
body.is-checkout .checkout-payment-method:has(#payment614){order:2}
body.is-checkout .checkout-payment-method:has(#payment96){order:3}
body.is-checkout .checkout-payment-method:has(#payment398){order:4}
body.is-checkout .checkout-payment-method:has(#payment399){order:5}
body.is-checkout .checkout-payment-method:has(#payment-za_ppc_sepa_input){order:6}
body.is-checkout .checkout-payment-method:has(#payment135){order:7}
body.is-checkout .checkout-payment-method:has(#payment1){order:8}
body.is-checkout .checkout-payment-method:has(#payment3){order:9}
body.is-checkout .checkout-payment-method:has(#payment76){order:10}
/* Knöpfe im Relaunch-Stil */
body.is-checkout #checkout .btn-primary,body.is-checkout #cart-checkout-btn,body.is-checkout .basket-summary .btn{border-radius:10px;font-weight:600;font-size:1.02rem;padding:13px 18px;text-transform:none}
body.is-checkout #cart-checkout-btn::first-letter,body.is-checkout #checkout .btn-primary::first-letter{text-transform:uppercase}
/* Seitenleiste */
body.is-checkout .basket-summary .basket-summary-total{border-top:1px solid #e1e6e8;padding-top:10px;margin-top:6px;font-size:1.1rem}
body.is-checkout .basket-summary .et-basket-sidebar-delivery{color:#5b666d;font-size:.9rem;margin-top:10px}
/* Handy: feste Leiste mit Summe + Weiter */
@media (max-width:991.98px){
body.is-checkout #checkout .cart-summary{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:1030;margin:0;transform:none!important}
body.is-checkout #checkout .cart-summary .basket-summary{border-radius:0;border-width:1px 0 0;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 18px rgba(0,0,0,.08);display:grid;grid-template-columns:1fr 1.3fr;gap:4px 14px;align-items:center}
body.is-checkout #checkout .cart-summary .basket-summary > .row:not(.basket-summary-total){display:none}
body.is-checkout #checkout .cart-summary .basket-summary-total{border:0;margin:0;padding:0;display:block;font-size:.85rem}
body.is-checkout #checkout .cart-summary .basket-summary-total > .col{max-width:none;width:auto;padding:0;text-align:left!important;flex:none}
body.is-checkout #checkout .cart-summary .basket-summary-total .total-sum{font-size:1.15rem;display:block}
body.is-checkout #checkout .cart-summary .basket-summary > .btn,body.is-checkout #checkout .cart-summary #cart-checkout-btn{margin:0}
body.is-checkout #content{padding-bottom:90px}
}
/* Korrektur 1a: col-12 hat flex-basis 100 % — in der Spalten-Flexbox wäre das die Höhe */
body.is-checkout .checkout-payment-options{display:block;margin:0}
body.is-checkout .checkout-payment-options > [role=group]{width:100%}
body.is-checkout .checkout-payment-options .checkout-payment-method{flex:0 0 auto;max-width:100%;width:100%}
/* Handy: nur der ET360-Stepper, der Desktop-Stepper erst ab lg */
@media (max-width:991.98px){body.is-checkout .checkout-steps{display:none!important}}
/* Kasse neu — Etappe 1b: Zahlart-Zeile mit Name, Beschreibung, Logo rechts (child-tpl/checkout/inc_payment_methods.tpl) */
body.is-checkout .pi-pm-label{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
body.is-checkout .pi-pm-text{display:flex;flex-direction:column;gap:2px;min-width:0}
body.is-checkout .pi-pm-name{font-weight:600;color:#0b0e10;font-size:1rem}
/* Logos seit 27.10.2026 aus dem Unzer-Icon-Satz, die SVGs bringen ihren eigenen Rahmen mit — kein zweiter Rahmen, einheitlich 30 px */
body.is-checkout .pi-pm-logo{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:32px}
body.is-checkout .pi-pm-logo img{height:30px!important;max-height:30px!important;width:auto;margin:0}
/* SEPA-Zeile baut das PayPal-Plugin selbst: Logo gegen das Unzer-SEPA-Icon tauschen, Hinweistext je Sprache */
body.is-checkout #za_ppc_sepa_img img{display:none!important}
body.is-checkout #za_ppc_sepa_img::before{content:"";display:block;width:50px;height:30px;background:url(/plugins/s360_unzer_shop5/paymentmethod/images/SEPA.svg) center/contain no-repeat}
body.is-checkout #za_ppc_sepa .pi-pm-text::after{display:block;font-size:.9rem;color:#5b666d;font-weight:400;content:"Lastschrift von Ihrem Bankkonto – abgewickelt über PayPal, ohne PayPal-Konto."}
html[lang=en] body.is-checkout #za_ppc_sepa .pi-pm-text::after{content:"Direct debit from your bank account – processed by PayPal, no PayPal account needed."}
html[lang=fr] body.is-checkout #za_ppc_sepa .pi-pm-text::after{content:"Prélèvement sur votre compte bancaire – traité par PayPal, sans compte PayPal."}
html[lang=nl] body.is-checkout #za_ppc_sepa .pi-pm-text::after{content:"Incasso van uw bankrekening – afgehandeld door PayPal, zonder PayPal-account."}
html[lang=es] body.is-checkout #za_ppc_sepa .pi-pm-text::after{content:"Domiciliación desde su cuenta bancaria, gestionada por PayPal, sin cuenta PayPal."}
html[lang=it] body.is-checkout #za_ppc_sepa .pi-pm-text::after{content:"Addebito sul conto bancario, gestito da PayPal, senza account PayPal."}
/* eingeklapptes PayPal-Zusatzfeld darf keinen Platz belegen */
body.is-checkout .funding-fields-container:not(.show){display:none!important}
body.is-checkout .checkout-payment-method > .custom-control{margin-bottom:10px!important}
body.is-checkout .ppc-checkout-payment-method .pi-pm-logo .funding-name,body.is-checkout .ppc-checkout-payment-method .ppc-option-img + .funding-name{display:none!important}
/* Kasse neu — Etappe 2: Prüfen & Bestellen. Merkmale (Kurzauswahl, child-tpl/checkout/inc_order_items.tpl) als Fließtext */
body.is-checkout .order-items-product-data .characteristic{display:inline;font-size:.84rem;color:#5b666d;line-height:1.5}
body.is-checkout .order-items-product-data .characteristic + .characteristic::before{content:" · ";color:#9aa4aa}
body.is-checkout .order-items-product-data .characteristic .et-product-data-label{color:#5b666d}
/* Gewährleistungs-Mitteilung (Anh. I DVO 2025/1960): vollständig sichtbar, nur schmaler */
body.is-checkout .warranty-label-checkout img{width:100%;max-width:520px;height:auto;display:block}
/* Handy Schritt 4: AGB-Hinweis + „Zahlungspflichtig bestellen“ in der festen Leiste */
@media (max-width:991.98px){
body.is-checkout #checkout .cart-summary .basket-summary .order-submit{grid-column:1 / -1;font-size:.78rem;line-height:1.35}
body.is-checkout #checkout .cart-summary .basket-summary .order-submit .btn{margin-top:6px}
}
/* Handy Schritt 4: Artikel volle Breite, Menge + Summe darunter */
@media (max-width:991.98px){
body.is-checkout .checkout-items-item > .checkout-items-item-main{flex:0 0 100%;max-width:100%}
body.is-checkout .checkout-items-item > .checkout-items-item-quantity,
body.is-checkout .checkout-items-item > .checkout-items-item-price{flex:0 0 50%;max-width:50%;margin-top:6px}
body.is-checkout .checkout-items-item > .checkout-items-item-quantity{text-align:left!important;color:#5b666d}
}
@media (max-width:991.98px){
body.is-checkout #checkout .cart-summary .basket-summary-total{display:flex;gap:8px;align-items:baseline}
body.is-checkout #checkout .cart-summary .basket-summary-total .total-sum{display:inline;font-size:1.1rem}
body.is-checkout #checkout .cart-summary .basket-summary .order-submit{margin:0}
body.is-checkout #checkout .cart-summary .basket-summary .order-submit > *{margin-bottom:0}
body.is-checkout #checkout .cart-summary .basket-summary .order-submit .btn{margin-top:6px;padding:11px 16px}
}
@media (max-width:991.98px){body.is-checkout #checkout .cart-summary{bottom:0!important;height:auto!important;max-height:none!important;padding:0!important}}
@media (max-width:991.98px){body.is-checkout .smoothscroll-top{display:none!important}}
/* Kasse neu — Seitenleiste: Mini-Warenkorb, Versandzeile, Kontakt (child-tpl/widgets/snippets/checkout_sidebar.tpl) */
body.is-checkout .pi-mini{border-bottom:1px solid #e1e6e8;padding-bottom:10px;margin-bottom:10px}
body.is-checkout .pi-mini-item{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;margin-bottom:8px;font-size:.86rem;line-height:1.3}
body.is-checkout .pi-mini-img{width:44px;height:44px;border:1px solid #e1e6e8;border-radius:6px;background:#f1f4f5 center/contain no-repeat}
body.is-checkout .pi-mini-name small{display:block;color:#5b666d}
body.is-checkout .pi-mini-price{white-space:nowrap}
body.is-checkout .pi-mini-more summary{cursor:pointer;color:#007a79;font-weight:600;font-size:.86rem;margin-bottom:8px}
body.is-checkout .pi-mini-edit{font-size:.84rem;color:#007a79}
body.is-checkout .pi-ship-row{font-size:.95rem;color:#22282c}
body.is-checkout .pi-side-help{font-size:.84rem;color:#5b666d;margin-top:10px;padding-top:10px;border-top:1px solid #e1e6e8}
@media (max-width:991.98px){body.is-checkout #checkout .cart-summary .pi-mini,body.is-checkout #checkout .cart-summary .pi-side-help{display:none}}
/* ==== Warenkorb neu (Mockup 15, freigegeben 27.09.2026). Nur ET360-Warenkorb-Widget. ==== */
#content:has(.et-widget-standardbasket){background:#f3f5f6}
.et-widget-standardbasket .et-boxed-content{background:#fff;border:1px solid #e1e6e8;border-radius:12px;padding:20px 22px;margin-bottom:16px}
.et-widget-standardbasket .basket_wrapper > form > .et-boxed-content{background:none;border:0;padding:0}
.et-widget-standardbasket .basket-heading{font-family:var(--pi-font-display);font-weight:600;font-size:1.8rem;color:#0b0e10;margin:6px 0 16px}
/* Positionen als Karten */
.et-widget-standardbasket .cart-items-body{display:grid;grid-template-columns:96px 1fr auto;grid-template-areas:"img main qty" "img main price" "img acts price";column-gap:18px;row-gap:6px;background:#fff;border:1px solid #e1e6e8;border-radius:12px;padding:16px 18px;margin:0 0 12px}
.et-widget-standardbasket .cart-items-body > .col{max-width:none;width:auto;padding:0;flex:none}
.et-widget-standardbasket .cart-items-body > .cart-items-image{display:block!important;grid-area:img}
.et-widget-standardbasket .cart-items-body > .cart-items-image img{width:96px;height:96px;object-fit:contain;border:1px solid #e1e6e8;border-radius:8px;background:#fff}
.et-widget-standardbasket .cart-items-body > div:has(> .cart-items-name){grid-area:main}
.et-widget-standardbasket .cart-items-body > .cart-items-quantity{grid-area:qty;justify-self:end}
.et-widget-standardbasket .cart-items-body > .cart-items-single-price{display:none!important}
.et-widget-standardbasket .cart-items-body > .cart-items-price{grid-area:price;justify-self:end;align-self:end;font-weight:700;font-size:1.05rem;color:#0b0e10}
.et-widget-standardbasket .cart-items-body > .cart-items-delete{grid-area:acts;display:flex;gap:14px;align-items:center;padding:0}
.et-widget-standardbasket .cart-items-body > .col:has(> hr){display:none}
.et-widget-standardbasket .cart-items-name{font-weight:600;font-size:1.02rem;color:#0b0e10}
.et-widget-standardbasket .cart-items-product-data{font-size:.84rem;color:#5b666d;margin:2px 0 0}
.et-widget-standardbasket .cart-items-product-data .weight{display:none}
.et-widget-standardbasket .cart-items-delete .btn-link{font-size:.84rem;color:#5b666d;padding:0}
.et-widget-standardbasket .pi-dlv{font-size:.84rem;margin-top:3px}
.et-widget-standardbasket .pi-dlv::before{content:"● "}
.et-widget-standardbasket .pi-dlv-ok{color:#1e7b34}.et-widget-standardbasket .pi-dlv-late{color:#a8610b}
.et-widget-standardbasket .pi-shipnote{background:#fff8e6;border:1px solid #f0d27a;border-radius:12px;padding:12px 16px;font-size:.92rem;margin-bottom:12px}
/* Menge −/+ (pi.js), Aktualisieren-Knopf aus */
.et-widget-standardbasket .pi-qty{display:inline-flex;flex-wrap:nowrap;align-items:stretch;border:1px solid #e1e6e8;border-radius:8px;overflow:hidden;width:auto}
.et-widget-standardbasket .pi-qty .input-group-append{display:none}
.et-widget-standardbasket .pi-qty input{width:52px;flex:none;border:0;text-align:center;height:36px;-moz-appearance:textfield}
.et-widget-standardbasket .pi-qty input::-webkit-inner-spin-button,.et-widget-standardbasket .pi-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.et-widget-standardbasket .pi-qty-btn{border:0;background:#f3f5f6;width:36px;font-weight:700;font-size:1.05rem;cursor:pointer;color:#0b0e10}
.et-widget-standardbasket .pi-qty-btn:hover{background:#e6f6f6}
.et-widget-standardbasket .pi-qty-btn:focus-visible{outline:2px solid #00abaa;outline-offset:-2px}
/* Aufklapper Versandrechner / Gutschein */
.et-widget-standardbasket details.pi-fold{background:#fff;border:1px solid #e1e6e8;border-radius:12px;padding:12px 18px;margin-bottom:12px}
.et-widget-standardbasket details.pi-fold > summary{cursor:pointer;color:#007a79;font-weight:600;font-size:.95rem}
.et-widget-standardbasket details.pi-fold > .et-boxed-content,.et-widget-standardbasket details.pi-fold > form{border:0;padding:12px 0 0;margin:0}
.et-widget-standardbasket details.pi-fold .h3,.et-widget-standardbasket details.pi-fold h2,.et-widget-standardbasket details.pi-fold .shipping-calculator-heading{display:none}
/* Seitenleiste */
.et-widget-standardbasket .basket-summary .basket-summary-total{border-top:1px solid #e1e6e8;padding-top:10px;margin-top:6px;font-size:1.1rem}
.et-widget-standardbasket #cart-checkout-btn{border-radius:10px;font-weight:600;font-size:1.02rem;padding:13px 18px}
.et-widget-standardbasket .pi-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.et-widget-standardbasket .pi-chips span{border:1px solid #e1e6e8;border-radius:6px;padding:3px 8px;font-size:.76rem;color:#22282c;background:#fff}
.et-widget-standardbasket .pi-side-help{font-size:.84rem;color:#5b666d;margin-top:10px;padding-top:10px;border-top:1px solid #e1e6e8}
.et-widget-standardbasket .et-basket-sidebar-delivery{color:#5b666d;font-size:.9rem;margin-top:10px}
@media (max-width:991.98px){
.et-widget-standardbasket .cart-items-body{grid-template-columns:64px 1fr;grid-template-areas:"img main" "acts acts" "qty price"}
.et-widget-standardbasket .cart-items-body > .cart-items-image img{width:64px;height:64px}
.et-widget-standardbasket .cart-items-body > .cart-items-quantity{justify-self:start}
.et-widget-standardbasket .et-basket-goto-checkout{position:fixed;left:0;right:0;bottom:0;z-index:1030;margin:0;background:#fff;border-top:1px solid #e1e6e8;box-shadow:0 -6px 18px rgba(0,0,0,.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.et-widget-standardbasket .et-basket-goto-checkout-delivery{display:none}
.et-widget-standardbasket .et-basket-goto-checkout-total .total-sum{display:block;font-weight:700;font-size:1.15rem;color:#0b0e10}
.et-widget-standardbasket .et-basket-goto-checkout .btn{border-radius:10px;font-weight:600}
#content:has(.et-widget-standardbasket){padding-bottom:90px}
body:has(.et-widget-standardbasket) .smoothscroll-top{display:none!important}
}
/* JTL-Meldung „Folgende Artikel sind in der gewählten Menge nicht verfügbar …“ (Alert-Key orderAmountStock) im Warenkorb aus:
dieselbe Information steht schon je Artikel (orange Lieferzeit), in der Seitenleiste und im Hinweis „Gesammelter Versand“
(User 27.09.2026). Nur ausgeblendet — Einstellung global_lieferverzoegerung_anzeigen bleibt an, weil sie auch den
Verzögerungshinweis in der Bestellbestätigung speist. */
.alert[data-key="orderAmountStock"]{display:none!important}
#alert-list:has(.alert[data-key="orderAmountStock"]):not(:has(.alert:not([data-key="orderAmountStock"]))){display:none}
/* =============================================================================
Kontaktseite nach Mockup 16 (child-tpl/contact/*.tpl), 13.10.2026
Seitenkopf dunkel, darunter Formular-Karte + Seitenleiste auf Arbeitsgrau.
========================================================================== */
/* Seitenkopf sitzt im Inhaltscontainer → per 100vw randlos ziehen */
.pi-khead{background:var(--pi-stage);color:#d6dde0;width:100vw;margin-left:calc(50% - 50vw);margin-bottom:0}
/* Alter CMS-Inhalt der Kontaktseite (Einwilligungstext + Zammad-Popup-Knopf) nur dort aus, wo das neue Layout steht */
.et-widget-cmscontent:has(.pi-kontakt) .cms-content-wrapper > .col-12 > :is(p,h1,style){display:none}
.pi-khead{padding:0}
.pi-khead-in{max-width:1240px;margin:0 auto;padding:34px 24px 36px}
.pi-khead .pi-eyebrow{font-family:var(--pi-font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-glow);margin:0 0 6px}
.pi-khead h1{font-family:var(--pi-font-display);color:#fff;font-size:clamp(2rem,4vw,2.8rem);line-height:1.15;margin:0}
.pi-khead .pi-khead-lead{max-width:640px;margin:8px 0 0;font-size:1.05rem}
.pi-kontakt{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;padding:40px 0 56px}
.pi-kontakt .pi-k-card{background:#fff;border:1px solid #e1e6e8;border-radius:12px;padding:26px 28px}
.pi-kontakt h2{font-family:var(--pi-font-display);font-size:1.45rem;color:var(--pi-ink);margin:0 0 4px}
.pi-kontakt h3{font-family:var(--pi-font-display);font-size:1.1rem;color:var(--pi-ink);margin:0 0 8px}
.pi-k-lead{color:var(--pi-muted);font-size:.95rem;margin:0 0 18px}
.pi-k-req{font-size:.85rem;color:var(--pi-muted);margin:0 0 18px}
.pi-k-star{color:#b11835;font-weight:700}
.pi-k-opt{font-weight:400;color:var(--pi-muted);font-size:.88rem}
.pi-k-f{margin-bottom:18px}
.pi-k-f > label{display:block;font-weight:600;font-size:.95rem;color:var(--pi-ink);margin-bottom:6px}
.pi-k-form .form-control{font-size:1rem;color:var(--pi-txt);background:#fff;border:1.5px solid #b9c4c8;border-radius:10px;padding:12px 14px;min-height:48px;height:auto}
.pi-k-form textarea.form-control{min-height:150px;resize:vertical}
.pi-k-form .form-control:hover{border-color:#8d9aa0}
.pi-k-form .form-control:focus{border-color:var(--pi-teal-deep);box-shadow:none;outline:3px solid var(--pi-ink);outline-offset:2px}
.pi-k-help{font-size:.85rem;color:var(--pi-muted);margin:5px 0 0}
.pi-k-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pi-k-reveal{border-left:3px solid var(--pi-teal);padding-left:14px}
.pi-k-err{display:flex;gap:6px;align-items:flex-start;color:#b11835;font-size:.88rem;font-weight:600;margin:6px 0 0}
.pi-k-err::before{content:"!";display:inline-grid;place-items:center;flex:0 0 18px;height:18px;border-radius:50%;background:#b11835;color:#fff;font-size:.75rem}
.pi-k-f.is-bad .form-control{border-color:#b11835;background:#fffafb}
.pi-k-summary{background:#fad5db;border:1px solid #f0a9b6;border-radius:10px;padding:14px 16px;margin:0 0 20px;color:#b11835}
.pi-k-summary strong{display:block;margin-bottom:4px}
.pi-k-summary a{color:#b11835;font-weight:600;margin-right:10px}
.pi-k-captcha{margin:4px 0 18px}
.pi-k-privacy{font-size:.84rem;color:var(--pi-muted);margin:0 0 12px}
.pi-k-privacy a{color:var(--pi-teal-deep)}
.pi-k-send{min-height:52px;border-radius:10px;font-weight:700;font-size:1.05rem}
.pi-k-side{display:flex;flex-direction:column;gap:18px}
.pi-k-side .pi-k-card{padding:22px 24px}
.pi-k-way{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:12px 0;border-top:1px solid #e1e6e8}
.pi-k-way:first-of-type{border-top:0;padding-top:0}
.pi-k-way small{display:block;color:var(--pi-muted);font-size:.86rem}
.pi-k-way a{text-decoration:none}
.pi-k-way a strong{color:var(--pi-teal-deep)}
.pi-k-ico{width:38px;height:38px;border-radius:9px;background:var(--pi-work);display:grid;place-items:center;color:var(--pi-teal-deep);font-family:var(--pi-font-mono);font-weight:700}
.pi-k-steps{list-style:none;counter-reset:s;margin:0;padding:0}
.pi-k-steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;padding:8px 0;font-size:.93rem}
.pi-k-steps li::before{content:"0" counter(s);font-family:var(--pi-font-mono);color:var(--pi-teal-deep);font-weight:700}
.pi-k-quick a{text-decoration:none!important;display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid #e1e6e8;text-decoration:none;color:var(--pi-ink);font-size:.95rem}
.pi-k-quick a:first-of-type{border-top:0}
.pi-k-quick a::after{content:"\2192";color:var(--pi-teal-deep)}
.pi-k-quick a:hover{color:var(--pi-teal-deep)}
@media (max-width:991.98px){
.pi-kontakt{grid-template-columns:1fr;gap:22px;padding:24px 0 36px}
.pi-kontakt .pi-k-card{padding:20px 18px}
.pi-k-row{grid-template-columns:1fr;gap:0}
}
/* =============================================================================
Startseite Fassung 3 (Mockup mockup-pixlite-zentrale.html), 14.10.2026
Nur Widgets mit pi-*-Klassen im Grid home_main; alte Startseiten-Widgets unberührt.
========================================================================== */
/* Einstieg: Text links auf dunkler Fläche, Bild rechts; mobil Text über Bild */
.pi-hero-home .et-main-slider-slide-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--pi-ink);min-height:440px}
.pi-hero-home .et-main-slider-slide-content>picture{order:2;display:block!important;position:relative!important;min-height:260px;height:100%}
.pi-hero-home .et-main-slider-slide-image{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:78% center}
.pi-hero-home .et-main-slider-slide-positioner{position:static;transform:none;order:1;display:flex;align-items:center;width:auto;height:auto;padding:0}
.pi-hero-home .et-main-slider-slide-backdrop{background:transparent!important;padding:48px 44px;max-width:none;width:100%}
.pi-hero-home .et-main-slider-slide-text .h4{font-family:var(--pi-font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pi-glow);margin:0 0 12px}
.pi-hero-home .et-main-slider-slide-text h1{font-family:var(--pi-font-display);font-size:clamp(2rem,3.4vw,3rem);line-height:1.12;color:#fff;margin:0 0 16px}
.pi-hero-home .et-main-slider-slide-text p{color:#dfe7ea;font-size:1.08rem;max-width:40ch;margin:0 0 22px}
.pi-hero-home .et-main-slider-slide-cta{display:flex;flex-wrap:wrap;gap:12px}
.pi-hero-home .et-main-slider-slide-cta .btn{min-height:48px;display:inline-flex;align-items:center}
.pi-hero-home .et-main-slider-slide-cta .btn-secondary{background:transparent;border:1px solid #aeb9bf;color:#fff}
.pi-hero-home .et-main-slider-slide-cta .btn-secondary:hover{border-color:var(--pi-glow);color:var(--pi-glow);background:transparent}
@media (max-width:991.98px){
.pi-hero-home .et-main-slider-slide-content{grid-template-columns:1fr;min-height:0}
.pi-hero-home .et-main-slider-slide-content>picture{aspect-ratio:16/9;min-height:0}
.pi-hero-home .et-main-slider-slide-backdrop{padding:28px 20px 32px}
}
/* Infoleiste */
.pi-infobar{background:var(--pi-work)!important;color:var(--pi-txt)!important;border-bottom:1px solid var(--pi-line);padding:16px 0!important}
.pi-infobar .et-usps-item-icon,.pi-infobar .et-usps-item-icon i{color:var(--pi-teal-deep)!important;font-size:1.5rem}
.pi-infobar .et-usps-item-content,.pi-infobar .et-usps-item-content *{color:var(--pi-txt)!important}
.pi-infobar .et-usps-item-content>:first-child{font-weight:700;font-size:1rem;margin:0}
.pi-infobar .et-usps-item-content>:nth-child(2){color:var(--pi-muted)!important;font-size:.88rem;margin:0}
/* Controller-Wahl: zwei Wege, Bild links */
.pi-paths .et-text-before{color:var(--pi-muted);margin:-4px 0 18px}
.pi-paths .et-content-box-content{border:1px solid var(--pi-line);border-left:4px solid var(--pi-teal);border-radius:var(--pi-radius);background:#fff;height:100%}
.pi-paths .et-content-box-content:hover{border-color:var(--pi-teal)}
.pi-paths .et-content-box-content>a{display:grid!important;grid-template-columns:130px 1fr;gap:18px;align-items:center;padding:16px 20px;height:auto}
.pi-paths .et-content-box-image{width:130px!important;height:110px!important;min-height:0!important;aspect-ratio:auto!important}
.pi-paths .et-content-box-text-wrapper{padding:0!important}
.pi-paths .et-content-box-image{margin:0}
.pi-paths .et-content-box-image img{max-height:110px;width:100%;object-fit:contain}
.pi-paths .et-content-box-text-wrapper h3{font-size:1.1rem;margin:0 0 6px}
.pi-paths .et-content-box-text-wrapper p{color:var(--pi-muted);margin:0 0 6px;font-size:.95rem}
.pi-paths .et-content-box-text-wrapper .pi-price{color:var(--pi-teal-deep);font-weight:700;margin:0}
@media (max-width:575.98px){.pi-paths .et-content-box-content>a{grid-template-columns:84px 1fr;gap:12px}}
/* Sortiment, Ratgeber: gleich breite Kacheln */
@media (min-width:992px){
.pi-sortiment .et-content-box{flex:0 0 25%;max-width:25%}
.pi-ratgeber .et-content-box,.pi-refs .et-content-box{flex:0 0 33.333%;max-width:33.333%}
}
.pi-sortiment .et-content-box-content,.pi-ratgeber .et-content-box-content{border:1px solid var(--pi-line);border-radius:var(--pi-radius);background:#fff;overflow:hidden;height:100%}
.pi-sortiment .et-content-box-content:hover,.pi-ratgeber .et-content-box-content:hover{border-color:var(--pi-teal)}
.pi-sortiment .et-content-box-image,.pi-ratgeber .et-content-box-image{aspect-ratio:16/10;background:#fff;display:flex;align-items:center;justify-content:center;margin:0}
.pi-sortiment .et-content-box-image img,.pi-ratgeber .et-content-box-image img{width:100%;height:100%;object-fit:contain;padding:10px}
.pi-sortiment .et-content-box-text-wrapper,.pi-ratgeber .et-content-box-text-wrapper{padding:14px 16px 18px}
.pi-sortiment h3,.pi-ratgeber h3{font-size:1.1rem;margin:0 0 6px}
.pi-sortiment .et-content-box-text-wrapper p,.pi-ratgeber .et-content-box-text-wrapper p{color:var(--pi-muted);font-size:.93rem;margin:0}
.pi-intro .et-textblock-text,.pi-intro p{max-width:80ch}
/* Projekt (HtmlPlain) und Projektbeispiele: dunkel, randlos */
.pi-projekt,.pi-refs{background:var(--pi-stage)!important;color:#dfe7ea;width:100vw;margin-left:calc(50% - 50vw)}
.pi-projekt{padding:56px 0 24px}
.pi-projekt .container,.pi-projekt .pi-projekt-grid{background:transparent!important}
.pi-projekt h2{color:#fff!important;font-family:var(--pi-font-display);margin:0 0 12px}
.pi-projekt-main p,.pi-projekt-main span{color:#dfe7ea!important}
.pi-projekt-main .pi-person span{color:#aeb9bf!important}
.pi-projekt-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.pi-projekt-main p{max-width:52ch}
.pi-projekt-card{background:#fff;color:var(--pi-txt);border-radius:var(--pi-radius);padding:24px}
.pi-projekt-card h3{font-size:1.15rem;margin:0 0 6px}
.pi-projekt-card p{color:var(--pi-muted)}
.pi-projekt-card hr{border:0;border-top:1px solid var(--pi-line);margin:18px 0}
.pi-person{display:flex;gap:14px;align-items:center;margin-top:22px}
.pi-person img{width:64px;height:64px;border-radius:50%;border:2px solid var(--pi-glow);object-fit:cover;flex:none}
.pi-person div{display:grid}
.pi-person strong{color:#fff}
.pi-person span{color:#aeb9bf;font-size:.9rem}
.pi-refs{padding:8px 0 48px!important}
.pi-refs h2{color:#fff;font-family:var(--pi-font-mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}
.pi-refs .et-content-box-content{border:1px solid #252c31;border-radius:var(--pi-radius);overflow:hidden;background:var(--pi-stage);height:100%}
.pi-refs .et-content-box-image{aspect-ratio:16/10;margin:0}
.pi-refs .et-content-box-image img{width:100%;height:100%;object-fit:cover}
.pi-refs .et-content-box-text-wrapper{padding:12px 14px}
.pi-refs h3{color:#fff;font-size:1rem;margin:0 0 4px}
.pi-refs .et-content-box-text-wrapper p{color:#aeb9bf;font-size:.9rem;margin:0}
@media (max-width:991.98px){.pi-projekt-grid{grid-template-columns:1fr}}
/* Startseite Fassung 3, mobil: Infoleiste zweispaltig, Controller-Wege mit kleinem Bild */
@media (max-width:575.98px){
.pi-infobar .et-usps-item{flex:0 0 50%;max-width:50%}
.pi-infobar .et-usps-item-icon,.pi-infobar .et-usps-item-icon i{font-size:1.2rem}
.pi-paths .et-content-box-image{width:84px!important;height:72px!important}
/* 24.10.2026 (UX-Validierung 6, P3): Sortiment zweispaltig mit 150-px-Bild statt einspaltig (1.914 → ~609 px Höhe) */
.pi-sortiment .row>[class*=col]{flex:0 0 50%;max-width:50%}
.pi-sortiment .et-content-box-image{aspect-ratio:auto!important;height:150px!important}
.pi-sortiment .et-content-box-image img{height:150px!important}
.pi-sortiment .et-content-box-text-wrapper{padding:10px 10px 12px}
.pi-sortiment h3{font-size:1rem}
.pi-sortiment .et-content-box-text-wrapper p{font-size:.85rem}
}
/* C2: Kopf-Symbole mobil mit 44 × 44 px Klickfläche (WCAG 2.5.8), Symbolgröße unverändert — gilt shopweit */
@media (max-width:991.98px){
header .account-icon-dropdown>.nav-link,
header .cart-icon-dropdown>.nav-link,
header .et-header-main-mobile-menu .nav-link{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* 14.10.2026 (UX-Validierung v2): Logo-Link und Konto/Wunschzettel im Mobilmenü ebenfalls 44 px */
header #logo>a{display:inline-flex;align-items:center;min-height:44px}
.et-menu-mobile-account-wishlist-compare a.link-discreet{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* 23.10.2026 (UX-Validierung v4, P1): Zugeklapptes Mobilmenü liegt nur seitlich verschoben und fing 13 Tabstopps
unsichtbar ab (WCAG 2.4.7/2.4.3). ET360 setzt beim Öffnen .active bzw. .active-transition. */
#et-menu-mobile-wrapper:not(.active):not(.active-transition){visibility:hidden}
/* 23.10.2026 (UX-Validierung v5, P3, WCAG 2.5.8 / Fitts): Desktop-Kopfsymbole Konto/Wunschzettel waren 15/17 px breit. 44 px
hätten die Symbole sichtbar auseinandergeschoben; 34 px mit negativem Außenabstand vergrößern nur die Klickfläche (Mittelpunkte
36 px auseinander, keine Überlappung). Mobil „Menü schließen“ 23×36 → 44×44. */
@media (min-width:992px){header .account-icon-dropdown>.nav-link.nav-link-custom,header .nav-item.dropdown>.nav-link[aria-label="Wunschzettel"]{min-width:34px;min-height:42px;margin-left:-9px;margin-right:-9px;display:inline-flex;align-items:center;justify-content:center}}
.et-menu-mobile-close-trigger{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* 23.10.2026: ET360-Option „Hauptkategorie-Titel“ in den Menü-Widgets an, damit Kategorieseiten im Desktop-Megamenü per
Tastatur erreichbar sind. Mobil gibt es dafür schon „… anzeigen“ — dort den Titel ausblenden, sonst doppelt. */
#et-menu-mobile-wrapper .et-menu-category-main{display:none}
/* 23.10.2026 (UX-Validierung v4, P2): Cookie-Banner mobil „Mini“ — „Ablehnen“ nicht trennen (Shop-weite Silbentrennung
et-text-hyphens); Fingerabdruck-Knopf (Einwilligung erneut öffnen) von links unten weg, er lag auf Inhalten. Rechts über
„Nach oben“. Selektoren über Container-ID bzw. Teilklassen, die Klassen sind Build-Hashes des Plugins. */
#ws_eu-cookie-container{-webkit-hyphens:manual;hyphens:manual}
[class*="_mini_buttonContainer_"] button{white-space:nowrap;padding-left:12px;padding-right:12px}
#ws_eu-cookie-openConsentManagerButton-container svg{left:auto!important;right:16px!important;bottom:76px!important}
/* Kaufpfad 15.10.2026 (UX-Validierung, P2/P3) */
/* Summe in der Warenkorb-Box nicht umbrechen (€ landete allein in der nächsten Zeile) */
.row:has(> .col > .price_label) > .col:last-child{white-space:nowrap}
/* Unterkategorie ohne Bild als kompakter Link-Chip statt leerer, mittiger Kachel (Kategorieseite: Produkte rücken hoch).
Anker: JTL/ET360 setzt .et-subcategory-title-no-image (kein verschachteltes :has, das verwirft der Browser). */
.et-widget-subcategories:has(.et-subcategory-title-no-image){padding-top:0!important;padding-bottom:0!important}
.et-sub-categories-wrapper:has(.et-subcategory-title-no-image){justify-content:flex-start!important;margin-top:0;margin-bottom:.5rem}
.et-sub-categories-wrapper > .col:has(.et-subcategory-title-no-image){flex:0 0 auto;width:auto;max-width:100%;padding-top:0;padding-bottom:0}
.et-sub-category:has(.et-subcategory-title-no-image){margin:0;padding:0}
.et-sub-category-link-wrapper:has(.et-subcategory-title-no-image){display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:.4em 1em;
border:1px solid #dfe4e7;border-radius:999px;background:#fff}
.et-sub-category-link-wrapper .et-subcategory-title-no-image{font-size:1rem;margin:0;font-weight:600;text-align:left}
.et-sub-category-link-wrapper .et-subcategory-title-no-image::after{content:" →";color:#007a79}
.et-sub-category-link-wrapper:has(.et-subcategory-title-no-image):hover{border-color:#007a79}
.et-widget-subcategories:has(.et-subcategory-title-no-image) > .container-fluid{max-width:1140px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
/* Kasse mobil (Nachmessung Kaufpfad 16.10.2026): ET360 macht unter lg die ganze Summenspalte zur festen Leiste unten —
der Versandfrei-Hinweis haftete mit (~190 statt ~90 px) und fing Taps aufs Formular ab. Hinweis bleibt im Warenkorb. */
@media (max-width:991.98px){
body.is-checkout .cart-summary.et-sticky-affix .basket-summary-notice{display:none}
body.is-checkout{scroll-padding-bottom:110px}
/* Shopvote-Siegel/Banner (extern, fixed unten) verdeckte bei 768–991 px den „Weiter“-Knopf — in der Kasse ausblenden */
body.is-checkout [id^="sv-rbadge"], body.is-checkout [class^="sv-rbadge"], body.is-checkout [id^="sv-vbadge"], body.is-checkout [class^="sv-vbadge"]{display:none!important}
}
/* Mengenhinweis: Warenkorbmenge > freier Bestand (child-tpl/snippets/pi_mengenhinweis.tpl, 17.10.2026) */
.alert.pi-mengenhinweis{background:#fff4d6;border:1px solid #f0c36d;color:#5c4400;line-height:1.5;margin-top:8px}
.pi-mengenhinweis--kurz{margin:8px 0 0;padding:6px 10px;border-radius:4px;background:#fff4d6;border:1px solid #f0c36d;color:#5c4400;font-size:13px;line-height:1.4;white-space:normal}
/* Ersatzhinweis bei Bestand 0 (snippets/pi_ersatzhinweis.tpl, 17.10.2026) */
.pi-ersatzhinweis{margin:12px 0 0;padding:10px 14px;border-radius:4px;background:#e8f6f6;border:1px solid #9fd6d6;color:#1f3b3b;line-height:1.5}
.pi-ersatzhinweis p{margin:0 0 4px}
.pi-ersatzhinweis ul{margin:0;padding-left:1.2em}
.pi-ersatzhinweis a{font-weight:600}
/* =============================================================================
Produktseite: Galerie vor dem Slider-Start sichtbar (SEO M1, 18.10.2026)
ET360 setzt .carousel.slick-smooth-loading bis zur slick-Initialisierung auf opacity:0. Das erste Galeriebild
(LCP-Element, eager + fetchpriority=high in child-tpl/productdetails/image.tpl) war dadurch 5,3 s geladen, aber
unsichtbar. Weitere Bilder blendet ET360 vor dem Start ohnehin per display:none aus. seo/2026-10-17-messung.md
========================================================================== */
#gallery.product-images.slick-smooth-loading:not(.slick-initialized){opacity:1}
/* slick rundet die Folienbreite auf ganze Pixel auf (Math.ceil, 254,66 → 255 px). Das neu gezeichnete Bild war dadurch
minimal größer und wurde bei der Initialisierung (~8,8 s) zum neuen LCP-Kandidaten, obwohl es seit 4,4 s sichtbar war.
Gleiche Aufrundung schon vor dem Start (Messung 18.10.2026). */
#gallery.product-images:not(.slick-initialized) .js-gallery-images{width:round(up,100%,1px);flex-shrink:0}
/* Seit theme.css blockierend lädt (18.10.2026): #gallery beschneidet das 255-px-Bild vorher auf 254,66 px, die gezählte
Fläche lag dadurch knapp unter der nach dem Start → wieder neuer LCP-Kandidat. Vor dem Start ist nur Bild 1 sichtbar. */
#gallery.product-images:not(.slick-initialized){overflow:visible}
/* Startseite: ET360 begrenzt den Slider bis zur slick-Initialisierung auf max-height 350–400px mit overflow:hidden.
Mobil steht im Hero erst der Text (~500 px), das Bild (LCP-Element) darunter wurde dadurch bis zum Slider-Start
abgeschnitten (Render Delay 5,8 s, Lighthouse 18.10.2026) und die Höhe sprang beim Start auf. Der Hero hat eine Folie,
weitere blendet ET360 vor dem Start ohnehin per display:none aus. seo/2026-10-17-messung.md */
.et-widget-mainslider.pi-hero-home .et-main-slider:not(.slick-initialized){max-height:none;line-height:0}
/* line-height wie ET360 nach dem Start (.slick-slider{line-height:0}, Folie normal): sonst ist der Block vorher 19 px höher,
das Bild rutscht beim Start nach oben und wird als größerer LCP-Kandidat neu gezählt (Messung 18.10.2026) */
.et-widget-mainslider.pi-hero-home .et-main-slider:not(.slick-initialized) .et-main-slider-slide{line-height:normal}
/* Produktseite: Variationsauswahl (Pixelanzahl, Anschlussart, Kabelfarbe). ET360 blendet select.selectpicker bis zum Start von
bootstrap-select per display:none aus — jede Zeile war vorher 0 px hoch, danach 41 px (Feld), der Rest der
Kaufbox sprang nach unten (CLS 0,057 mobil, 20.10.2026). Platz vorab reservieren; nach dem Start füllt das Feld ihn aus. */
#product-offer dd.form-group:has(> select.selectpicker){min-height:41px}
/* Ratgeber-Übersicht /ratgeber (Kategorie 126, 21.10.2026): Die Übersicht zeigt alle Ratgeber als Karten; das ET360-Widget
„Unterkategorien" hängt darunter dieselben Links noch einmal als Chips an. Nur dort ausblenden — Marker-Klasse
.pi-ratgeber-uebersicht steht im Kategorietext (tools/ratgeber-uebersicht-126.py). Ohne :has() bleiben die Chips sichtbar. */
body:has(.pi-ratgeber-uebersicht) .et-widget-subcategories{display:none}
/* 23.10.2026 (UX-Validierung Startseite v4, P3): Font Awesome Brands (75 KB) lud auf jeder Seite nur für Facebook und
Instagram im Fuß. Beide als SVG-Maske in Textfarbe — die Schriftdatei wird dann nicht mehr angefordert. */
.fab.fa-facebook-f,.fab.fa-instagram{font-family:inherit!important}
.fab.fa-facebook-f::before,.fab.fa-instagram::before{content:""!important;font-family:inherit!important;display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask:var(--pi-ico) center/contain no-repeat;mask:var(--pi-ico) center/contain no-repeat}
.fab.fa-facebook-f::before{--pi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.9.3-1.6 1.6-1.6h1.7V4.4c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.2H7.4V14h2.7v8z'/%3E%3C/svg%3E")}
.fab.fa-instagram::before{--pi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='.6' fill='%23000'/%3E%3C/svg%3E")}
/* Produktliste mobil: 2 Kacheln je Zeile (ET360-Listen-Widget xs = 2, seit 25.10.2026). Der Artikelname darf dort 3 statt 2 Zeilen
haben, sonst fällt bei langen Namen genau das Unterscheidende weg (z. B. „… (12V) – 12 mm“). */
@media (max-width:575.98px){.product-list .productbox .text-clamp-2{-webkit-line-clamp:3;line-clamp:3}}
/* farben-child.css — Farb-Overrides des Child-Templates, GENERIERT von build-farben-child.py
aus der kompilierten ET360-theme.css. Nicht von Hand editieren; Soll-Werte stehen in
design-tokens.md, Herleitung in doku/farbkonzept-abgleich-et360.md.
Abgeleitete Regeln: 155. */
.form-check-input[disabled]~.form-check-label,.form-check-input:disabled~.form-check-label{color:#5b666d}
.btn-link:hover{color:#007a79;text-decoration:none}
.dropdown-item:hover,.dropdown-item:focus{color:#007a79;text-decoration:none;background-color:#fff}
.dropdown-item.active,.dropdown-item:active{color:#007a79;text-decoration:none;background-color:#fff}
.breadcrumb-item.active{color:#007a79}
.page-link:hover,.page-text:hover{z-index:2;color:#007a79;text-decoration:none;background-color:rgba(0,0,0,0);border-color:#dee2e6}
.page-item.active .page-link,.page-item.active .page-text{z-index:3;color:#007a79;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}
.page-item.disabled .page-link,.page-item.disabled .page-text{color:#5b666d;pointer-events:none;cursor:auto;background-color:rgba(0,0,0,0);border-color:#e1e6e8}
.text-muted{color:#5b666d !important}
.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.bs-placeholder[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse),.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:active{color:#5b666d}
a.give-consent-preview:focus-visible{color:#007a79;text-decoration:none}
.tt-dropdown-menu .tt-suggestion.tt-cursor,.tt-dropdown-menu .tt-suggestion:hover,.tt-menu .tt-suggestion.tt-cursor,.tt-menu .tt-suggestion:hover{cursor:pointer;text-decoration:none;outline:0;background-color:#fff;color:#007a79}
.tt-dropdown-menu .tt-suggestion.tt-cursor a,.tt-dropdown-menu .tt-suggestion:hover a,.tt-menu .tt-suggestion.tt-cursor a,.tt-menu .tt-suggestion:hover a{color:#007a79}
.text-muted-util{color:#5b666d}
h4,.h4{color:#007a79;font-weight:bold;font-style:normal;text-decoration:none;margin-bottom:.625em}
.slick-slide a:focus{color:#007a79;text-decoration:none}
.jqcloud-word a:hover{color:#007a79 !important}
.box-link-wrapper i.snippets-filter-item-icon-right{color:#5b666d}
.badge-outline-secondary{border-color:#00abaa;background-color:#fff;color:#007a79}
.badge-circle:hover,.badge-circle:focus,.badge-circle-1:hover,.badge-circle-1:focus{background-color:#007a79;border-color:#007a79;color:#fff;opacity:1}
.basket-summary .tax{color:#5b666d}
.btn-primary,.btn-default{box-shadow:none;background-color:#00abaa;border-color:#007a79;color:#00302f}
.btn-primary:not(:disabled):not(.disabled):not(.et-hover-underline):hover,.btn-default:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-primary:not(:disabled):not(.disabled).et-hover-underline:hover,.btn-default:not(:disabled):not(.disabled).et-hover-underline:hover{box-shadow:none;background-color:#00abaa;text-decoration:underline;border-color:#007a79;color:#00302f}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):focus,.show>.btn-primary.dropdown-toggle,.show>.btn-primary[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse),.btn-default:not(:disabled):not(.disabled):active,.btn-default:not(:disabled):not(.disabled).active,.btn-default:not(:disabled):not(.disabled):focus,.show>.btn-default.dropdown-toggle,.show>.btn-default[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#00abaa;border-color:#007a79;color:#00302f}
.btn-primary:disabled,.btn-primary.disabled,.btn-default:disabled,.btn-default.disabled{box-shadow:none;background-color:#e1e6e8;border-color:#e1e6e8;color:#5b666d}
.btn-outline-primary,.btn-outline-default{box-shadow:none;background-color:#fff;border-color:#00abaa;color:#007a79}
.btn-outline-primary:not(:disabled):not(.disabled):not(.et-hover-underline):hover,.btn-outline-default:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-primary:not(:disabled):not(.disabled).et-hover-underline:hover,.btn-outline-default:not(:disabled):not(.disabled).et-hover-underline:hover{box-shadow:none;text-decoration:underline;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):focus,.show>.btn-outline-primary.dropdown-toggle,.show>.btn-outline-primary[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse),.btn-outline-default:not(:disabled):not(.disabled):active,.btn-outline-default:not(:disabled):not(.disabled).active,.btn-outline-default:not(:disabled):not(.disabled):focus,.show>.btn-outline-default.dropdown-toggle,.show>.btn-outline-default[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-primary:disabled,.btn-outline-primary.disabled,.btn-outline-default:disabled,.btn-outline-default.disabled{box-shadow:none;background-color:#fff;border-color:#e1e6e8;color:#5b666d}
.btn-secondary{box-shadow:none;background-color:#00abaa;border-color:#007a79;color:#00302f}
.btn-secondary:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-secondary:not(:disabled):not(.disabled).et-hover-underline:hover{box-shadow:none;background-color:#00abaa;text-decoration:underline;border-color:#007a79;color:#00302f}
.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):focus,.show>.btn-secondary.dropdown-toggle,.show>.btn-secondary[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#00abaa;border-color:#007a79;color:#00302f}
.btn-secondary:disabled,.btn-secondary.disabled{box-shadow:none;background-color:#e1e6e8;border-color:#e1e6e8;color:#5b666d}
.btn-outline-secondary{box-shadow:none;background-color:#fff;border-color:#00abaa;color:#007a79}
.btn-outline-secondary:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-secondary:not(:disabled):not(.disabled).et-hover-underline:hover{box-shadow:none;text-decoration:underline;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):focus,.show>.btn-outline-secondary.dropdown-toggle,.show>.btn-outline-secondary[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-secondary:disabled,.btn-outline-secondary.disabled{box-shadow:none;background-color:#fff;border-color:#e1e6e8;color:#5b666d}
.btn-cart{box-shadow:none;background-color:#000;border-color:#000;color:#fff}
.btn-cart:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-cart:not(:disabled):not(.disabled):active,.btn-cart:not(:disabled):not(.disabled).active,.btn-cart:not(:disabled):not(.disabled):focus,.show>.btn-cart.dropdown-toggle,.show>.btn-cart[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#00abaa;border-color:#007a79;color:#00302f}
.btn-cart:disabled,.btn-cart.disabled{box-shadow:none;background-color:#e1e6e8;border-color:#e1e6e8;color:#5b666d}
.btn-outline-cart{box-shadow:none;background-color:#fff;border-color:#000;color:#000}
.btn-outline-cart:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-cart:not(:disabled):not(.disabled):active,.btn-outline-cart:not(:disabled):not(.disabled).active,.btn-outline-cart:not(:disabled):not(.disabled):focus,.show>.btn-outline-cart.dropdown-toggle,.show>.btn-outline-cart[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-cart:disabled,.btn-outline-cart.disabled{box-shadow:none;background-color:#fff;border-color:#e1e6e8;color:#5b666d}
.btn-checkout{box-shadow:none;background-color:#000;border-color:#000;color:#fff}
.btn-checkout:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-checkout:not(:disabled):not(.disabled):active,.btn-checkout:not(:disabled):not(.disabled).active,.btn-checkout:not(:disabled):not(.disabled):focus,.show>.btn-checkout.dropdown-toggle,.show>.btn-checkout[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#00abaa;border-color:#007a79;color:#00302f}
.btn-checkout:disabled,.btn-checkout.disabled{box-shadow:none;background-color:#e1e6e8;border-color:#e1e6e8;color:#5b666d}
.btn-outline-checkout{box-shadow:none;background-color:#fff;border-color:#000;color:#000}
.btn-outline-checkout:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-checkout:not(:disabled):not(.disabled):active,.btn-outline-checkout:not(:disabled):not(.disabled).active,.btn-outline-checkout:not(:disabled):not(.disabled):focus,.show>.btn-outline-checkout.dropdown-toggle,.show>.btn-outline-checkout[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-outline-checkout:disabled,.btn-outline-checkout.disabled{box-shadow:none;background-color:#fff;border-color:#e1e6e8;color:#5b666d}
.btn-danger{box-shadow:none;background-color:#fad5db;border-color:#fad5db;color:#b11835}
.btn-outline-danger{box-shadow:none;background-color:#fff;border-color:#b11835;color:#b11835}
.btn-info{box-shadow:none;background-color:#fff;border-color:#fff;color:#fff}
.btn-outline-info{box-shadow:none;background-color:#fff;border-color:#fff;color:#fff}
.btn-warning{box-shadow:none;background-color:#fff3cd;border-color:#fff3cd;color:#896a06}
.btn-outline-warning{box-shadow:none;background-color:#fff;border-color:#896a06;color:#896a06}
.btn-success{box-shadow:none;background-color:#00abaa;border-color:#00abaa;color:#000}
.btn-outline-success{box-shadow:none;background-color:#fff;border-color:#000;color:#000}
.btn-light{box-shadow:none;background-color:#f5f5f5;border-color:#f5f5f5;color:#181819}
.btn-outline-light{box-shadow:none;background-color:#fff;border-color:#f5f5f5;color:#f5f5f5}
.btn-dark{box-shadow:none;background-color:#181819;border-color:#181819;color:#f5f5f5}
.btn-outline-dark{box-shadow:none;background-color:#fff;border-color:#181819;color:#181819}
.btn-icon-primary{box-shadow:none;background-color:#fff;border-color:#00abaa;color:#007a79}
.btn-icon-primary:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-icon-primary:not(:disabled):not(.disabled).et-hover-underline:hover{box-shadow:none;text-decoration:underline;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-icon-primary:not(:disabled):not(.disabled):active,.btn-icon-primary:not(:disabled):not(.disabled).active,.btn-icon-primary:not(:disabled):not(.disabled):focus,.show>.btn-icon-primary.dropdown-toggle,.show>.btn-icon-primary[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-icon-primary:disabled,.btn-icon-primary.disabled{box-shadow:none;background-color:#fff;border-color:#e1e6e8;color:#5b666d}
.btn-icon-secondary{box-shadow:none;background-color:#fff;border-color:#00abaa;color:#007a79}
.btn-icon-secondary:not(:disabled):not(.disabled):not(.et-hover-underline):hover{box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-icon-secondary:not(:disabled):not(.disabled).et-hover-underline:hover{box-shadow:none;text-decoration:underline;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-icon-secondary:not(:disabled):not(.disabled):active,.btn-icon-secondary:not(:disabled):not(.disabled).active,.btn-icon-secondary:not(:disabled):not(.disabled):focus,.show>.btn-icon-secondary.dropdown-toggle,.show>.btn-icon-secondary[data-toggle=collapse]:not(.navbar-toggler):not(.et-collapse){box-shadow:none;background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-icon-secondary:disabled,.btn-icon-secondary.disabled{box-shadow:none;background-color:#fff;border-color:#e1e6e8;color:#5b666d}
.direct-advertising{margin-top:-1rem;margin-bottom:1rem;color:#5b666d}
a:not(.btn):hover{color:#007a79;text-decoration:underline}
a:not(.btn):focus{color:#007a79;text-decoration:underline}
a:not(.btn):active{color:#007a79;text-decoration:underline}
a:not(.btn).link-discreet:hover{color:#007a79;text-decoration:none}
a:not(.btn).link-discreet:focus{color:#007a79;text-decoration:none}
a:not(.btn).link-discreet:active{color:#007a79;text-decoration:none}
a:not(.btn).nav-link:hover,a:not(.btn)[data-toggle=dropdown]:hover,a:not(.btn).dropdown-item:hover{color:#007a79;text-decoration:none}
a:not(.btn).nav-link:focus,a:not(.btn)[data-toggle=dropdown]:focus,a:not(.btn).dropdown-item:focus{color:#007a79;text-decoration:none}
a:not(.btn).nav-link:active,a:not(.btn)[data-toggle=dropdown]:active,a:not(.btn).dropdown-item:active{color:#007a79;text-decoration:none}
.form-icon-trigger-label:hover{color:#007a79}
.et-menu .et-menu-main-left,.et-menu .et-menu-main-right{box-shadow:none;z-index:1}
.et-menu .et-menu-main-center{display:flex;flex-direction:row;align-items:center;box-shadow:none;z-index:1}
.et-menu .et-menu-main-basket .cart-dropdown .dropdown-cart-item-remove{font-size:small;color:#5b666d;margin-top:10px;flex-basis:49%}
.author-meta{text-align:center;color:#5b666d;font-size:small}
.blog-details-comments-list-meta{color:#5b666d}
.blog-comments-header .pagination-wrapper,.blog-comments-footer .pagination-wrapper{border:0 none;color:#5b666d}
.page-item.disabled{color:#5b666d}
.page-item.active{font-weight:700;color:#007a79}
@media(min-width: 834px){.pagination .dropdown-item.active{background-color:rgba(0,0,0,0);color:#007a79}}
@media(max-width: 833.98px){.pagination .dropdown-item.active .page-link,.pagination .dropdown-item.active .page-text,.pagination .dropdown-item:active .page-link,.pagination .dropdown-item:active .page-text{color:#007a79}}
.et-item-box .estimated-delivery .status-text{color:#5b666d}
.et-item-box .delivery-status .status-text{color:#5b666d}
.et-item-list .estimated-delivery .status-text{color:#5b666d}
.et-item-list .delivery-status .status-text{color:#5b666d}
#cfg-container .cfg-footnote{text-align:center;margin-top:1.8rem;color:#5b666d}
#configuration-table .vat_info{color:#5b666d}
.variations .custom-radio:hover,.variations .custom-radio:focus{color:#007a79;text-decoration:none;background-color:#fff}
.estimated-delivery{color:#5b666d;cursor:pointer;display:inline-block}
.vat_info{color:#5b666d}
.smoothscroll-top{position:fixed;opacity:0;visibility:hidden;overflow:hidden;z-index:1030;right:1rem;bottom:-1rem;transition:all .5s ease-in-out;transition-delay:.2s;font-size:32px;color:#5b666d}
#TwoFAwrapper{padding:10px;border:1px solid #e1e6e8}
.et-widget-cmscontent .blog-preview-author{color:#5b666d;font-size:small}
.et-widget-headermain .cart-dropdown .dropdown-cart-item-remove{font-size:small;color:#5b666d;margin-top:10px;flex-basis:49%}
.et-hotspot-banner-hotspot-content{display:flex;padding:10px;border:1px solid #fff;min-width:var(--et-hotspot-banner-content-width);max-width:var(--et-hotspot-banner-content-width);gap:10px;overflow:hidden;position:relative;flex-direction:column;background-color:#fff;box-shadow:none;cursor:initial}
.et-hotspot-banner-stock{color:#5b666d;font-size:small}
.et-menu-category-show-subsubcategories{color:#5b666d;cursor:pointer}
.et-menu-category-show-subsubcategories:hover,.et-menu-category-show-subsubcategories:focus{color:#007a79}
.et-widget-news .et-news-overview .btn{padding:0;font-weight:700;color:#5b666d}
.et-widget-news .et-news-overview .btn:hover{color:#007a79}
.et-widget-news .et-news-overview .btn:active{color:#007a79}
.et-widget-newsletter .et-newsletter-content .form-control{box-shadow:none}
.et-productdetail-wrapper .product-essential-info-row{display:flex;flex-flow:row wrap;color:#5b666d}
.et-productdetail-wrapper .info-essential{color:#5b666d}
.et-productdetail-information-wrapper .reviews .pagination-wrapper{border:0 none;color:#5b666d;margin-bottom:4.6875rem}
.et-productdetail-information-wrapper .review-author,.et-productdetail-information-wrapper .review-date{color:#5b666d;display:inline-block}
.et-product-list-filter-top-wrapper .et-product-list-filter-layout a.active{color:#007a79}
.et-product-list-filter-top-wrapper .et-product-list-filter-productsperpage a.active{color:#007a79}
.et-product-list-filter-top-wrapper a.et-active-filter:hover,.et-product-list-filter-top-wrapper a.et-active-filter-clear:hover{color:#007a79}
.et-product-list-filter-top-wrapper .et-product-list-filter-category-tree .et-categories-mega-main-category .et-categories-level-0.current{color:#007a79}
.et-product-list-filter-top-wrapper .et-product-list-filter-category-tree .subcategory-wrapper a.current{color:#007a79;font-weight:700}
.et-product-list-filter-top-wrapper .et-product-list-filter-category-tree a.et-categories-mega-show-all{margin-top:10px;display:block;color:#5b666d}
.et-product-list-filter-top-wrapper .et-product-list-filter-category-tree a.et-categories-mega-show-all:hover{color:#007a79}
.et-product-list-filter-left-wrapper .et-product-list-filter-layout a:hover,.et-product-list-filter-left-wrapper .et-product-list-filter-layout a:active,.et-product-list-filter-left-wrapper .et-product-list-filter-layout a:focus{color:#007a79}
.et-product-list-filter-left-wrapper .et-product-list-filter-layout a.active{color:#007a79}
.et-product-list-filter-left-wrapper a.et-active-filter:hover,.et-product-list-filter-left-wrapper a.et-active-filter-clear:hover{color:#007a79}
.et-product-list-filter-left-wrapper .et-product-list-filter-category-tree .et-categories-mega-main-category .et-categories-level-0.current{color:#007a79}
.et-product-list-filter-left-wrapper .et-product-list-filter-category-tree .subcategory-wrapper a.current{color:#007a79;font-weight:700}
.et-product-list-filter-left-wrapper .et-product-list-filter-category-tree a.et-categories-mega-show-all{margin-top:10px;display:block;color:#5b666d}
.et-product-list-filter-left-wrapper .et-product-list-filter-category-tree a.et-categories-mega-show-all:hover{color:#007a79}
.et-filters-active #et-product-list-filter-modal-trigger-mobile{color:#007a79}
.et-product-list-filter-item .et-product-list-filter-sort a.active{color:#007a79}
.badge{border-color:#e1e6e8;background-color:rgba(0,0,0,0);color:#5b666d}
.et-widget-socialmedia .et-socialmedia-links-link:not(.nav-link):not([data-toggle=dropdown]):not(.dropdown-item):not(.btn):hover{color:#007a79}
.et-widget-standardbasket .et-basket-goto-checkout-total .tax_label{font-weight:normal;font-size:small;margin-left:5px;color:#5b666d}
.et-widget-standardcheckout .checkout-steps-mobile .nav .breadcrumb-link{background:#fff;border:1px solid #00abaa;color:#007a79;width:22px;height:22px;text-align:center;text-decoration:none;border-radius:50%}
.et-widget-standardcheckout .checkout-steps-mobile .nav .breadcrumb-label{color:#007a79;flex:1 1 100%;text-align:center;margin-top:8px}
.et-widget-standardcheckout .checkout-shipping-form-options .desc{font-weight:normal;color:#5b666d}
.et-widget-standardcheckout .checkout-confirmation .order-items-product-data{color:#5b666d}
.et-widget-standardcheckout .checkout-confirmation .notice{color:#5b666d}
.et-widget-standardcheckout .checkout-confirmation .custom-control-label{cursor:pointer;color:#5b666d;font-size:13px}
.et-widget-standardcheckoutcomplete .order_process .order-items-product-data{color:#5b666d}
.et-widget-standardcheckoutcomplete .order_process .notice{color:#5b666d}
#lpa-confirm-order-form .order-items-product-data{color:#5b666d}
.jtl-search-color a.color{height:24px;width:24px;border:1px solid #e1e6e8;cursor:pointer;display:block}
.order-details-data .order-details-data-item{color:#5b666d;display:block;font-size:.75rem}
/* ---- Handregeln (nicht aus theme.css ableitbar) ---- */
/* Eine CTA-Familie: Warenkorb/Kasse wie Primär, Sekundär als Outline */
.btn-primary,.btn-default,.btn-cart,.btn-checkout{background-color:#00abaa;border-color:#007a79;color:#00302f;box-shadow:none}
.btn-secondary,.btn-outline-primary,.btn-outline-default,.btn-outline-secondary,.btn-outline-cart,.btn-outline-checkout{background-color:#ffffff;border-color:#007a79;color:#007a79;box-shadow:none}
.btn-primary:focus,.btn-primary.focus,.btn-default:focus,.btn-default.focus,.btn-cart:focus,.btn-cart.focus,.btn-checkout:focus,.btn-checkout.focus,.btn-secondary:focus,.btn-secondary.focus{background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-secondary:not(:disabled):not(.disabled):not(.et-hover-underline):hover,.btn-outline-primary:not(:disabled):not(.disabled):not(.et-hover-underline):hover,.btn-outline-default:not(:disabled):not(.disabled):not(.et-hover-underline):hover,.btn-outline-secondary:not(:disabled):not(.disabled):not(.et-hover-underline):hover,.btn-outline-cart:not(:disabled):not(.disabled):not(.et-hover-underline):hover,.btn-outline-checkout:not(:disabled):not(.disabled):not(.et-hover-underline):hover{background-color:#007a79;border-color:#007a79;color:#ffffff}
.btn-primary:disabled,.btn-primary.disabled,.btn-default:disabled,.btn-default.disabled,.btn-cart:disabled,.btn-cart.disabled,.btn-checkout:disabled,.btn-checkout.disabled,.btn-secondary:disabled,.btn-secondary.disabled{background-color:#e1e6e8;border-color:#e1e6e8;color:#5b666d;box-shadow:none}
/* Signalfarben: Teal ist keine Statusfarbe */
.alert-success{color:#0f6b3f;background-color:#e3f5ea;border-color:#9bd8b0}
.alert-success .alert-link{color:#0f6b3f}
.badge-success,.badge.badge-success{background-color:#0f6b3f;border-color:#0f6b3f;color:#ffffff}
.bg-success{background-color:#0f6b3f !important}
.alert-info{color:#22282c;background-color:#f3f5f6;border-color:#e1e6e8}
/* Text-Tokens */
h4,.h4{color:#007a79}
.et-widget-footerboxes .et-footer-box-headline,.et-widget-footerboxes h4,.et-widget-footerboxes .h4{color:#2fd4d2} /* --glow auf dunklem Footer (10,6:1), teal-deep wäre dort 4,1:1 */
.badge-secondary{color:#00302f}
/* Zonen und Ribbons — gefahrlose Regeln aus tools/farben-compile-diff.py (keine Widget-Flächen,
keine Regeln, die spätere theme.css-Regeln aushebeln): Tabellenlinien, Boxen, Overlays */
.table th,.table td{border-top:1px solid #e1e6e8}
.table thead th{border-bottom:2px solid #e1e6e8}
.table-bordered,.table-bordered th,.table-bordered td{border-color:#e1e6e8}
.et-boxed-content{background:#f3f5f6;color:#22282c}
.comparelist .table tbody td:first-child{background-color:#f3f5f6;color:#22282c}
.carousel-thumbnails .productbox-image-wrapper{border-color:#e1e6e8}
.carousel-thumbnails .slick-active .productbox-image-wrapper{border-color:#007a79}
#cfg-container-tab-panes{border-bottom:2px solid #e1e6e8}
.badge.badge-info{color:#22282c;background-color:#f3f5f6;border-color:#e1e6e8}
.ribbon-4,.ribbon-5,.ribbon-6,.ribbon-7,.ribbon-9{background-color:#f3f5f6;color:#22282c;border-color:#e1e6e8}
.ribbon-3,.ribbon-8{background-color:#0f6b3f;border-color:#0f6b3f;color:#ffffff}
/* Nicht-Text-Kontrast 1.4.11 (3:1 gegen Weiß): Aktiv-Marker und Zähler auf teal-deep */
.tab-navigation .nav-link::after{border-color:#007a79}
.et-productdetail-information-wrapper.et-layout-tabs .nav-tabs .nav-link::after{border-color:#007a79}
.et-productdetail-information-wrapper .et-productdetails-info-list-nav .list-group-item.et-current-link{border-bottom-color:#007a79}
.et-product-list-filter-item .btn.active{border-bottom-color:#007a79}
.et-menu.et-hover-style-bottomBar .et-menu-item:after,.et-menu.et-hover-style-bottomBar .et-menu-overflow-trigger:after{border-bottom-color:#007a79}
.fa-sup,.et-count-badge{background-color:#007a79;color:#ffffff}
.badge-circle,.badge-circle-1,.badge-check .badge-circle{background-color:#007a79;border-color:#007a79}
.badge-check{border-color:#007a79}
/* =============================================================================
PIXEL IMPERIUM — Typografie des Child-Templates (design-tokens.md, Abschnitt 2)
Vierter Teil von custom.css (deploy-custom-css.sh). Wirkt nur im Child.
Display : D-DIN (SIL OFL 1.1, Datto Inc.; selbst gehostet unter
templates/pixelimperium_child/themes/child/fonts/, Lizenz liegt daneben)
→ H1–H3, Preise, Zahlen. DIN-Charakter wie Bahnschrift, aber überall gleich.
Body : Segoe UI / system-ui — Systemschrift, kein Webfont, kein Consent nötig.
Mono : Consolas / Cascadia Mono / ui-monospace → Eyebrows, Art-Nr., technische Labels.
ET360 setzt seine Schriften unter .wf-active/.wf-disabled (Webfont-Loader-Zustände) mit
Spezifität 0,1,1 — die Selektoren hier sind absichtlich dieselben, stehen später in der
Kaskade und gewinnen deshalb ohne !important. Größen: ET360 setzt px je Breakpoint mit
0,0,1; die rem-/clamp-Werte hier stehen später und gelten für alle Breiten.
Beim Go-live: ET360 → Schriftarten → „Font-Einbindung: keine" (dann lädt der Loader
Archivo Black gar nicht mehr; bis dahin lädt er sie nach Consent unnötig mit).
============================================================================= */
@font-face{font-family:'D-DIN';src:url('/templates/pixelimperium_child/themes/child/fonts/D-DIN.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'D-DIN';src:url('/templates/pixelimperium_child/themes/child/fonts/D-DIN-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'D-DIN';src:url('/templates/pixelimperium_child/themes/child/fonts/D-DIN-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'D-DIN Condensed';src:url('/templates/pixelimperium_child/themes/child/fonts/D-DINCondensed.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'D-DIN Condensed';src:url('/templates/pixelimperium_child/themes/child/fonts/D-DINCondensed-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
html:root{ /* html:root schlägt das später eingebettete :root des head-Felds (pixel-imperium.css) */
--pi-font-display:'D-DIN','Bahnschrift','Segoe UI',Arial,sans-serif;
--pi-font-body:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
--pi-font-mono:'Consolas','Cascadia Mono',ui-monospace,monospace;
}
/* ---- Body: Systemschrift, 16,5 px / 1,55 (Mockup 03) ---- */
.wf-active body,.wf-disabled body,.wf-inactive body,.wf-loading body,body{
font-family:var(--pi-font-body);
font-size:16.5px;
line-height:1.55;
}
.wf-active p,.wf-disabled p,.wf-inactive p,.wf-loading p,p{font-family:inherit}
/* ---- Überschriften: Display, Größen aus Mockup 03 ---- */
.wf-active h1,.wf-disabled h1,.wf-inactive h1,.wf-loading h1,h1,
.wf-active .h1,.wf-disabled .h1,.wf-inactive .h1,.wf-loading .h1,.h1,
.wf-active h2,.wf-disabled h2,.wf-inactive h2,.wf-loading h2,h2,
.wf-active .h2,.wf-disabled .h2,.wf-inactive .h2,.wf-loading .h2,.h2,
.wf-active h3,.wf-disabled h3,.wf-inactive h3,.wf-loading h3,h3,
.wf-active .h3,.wf-disabled .h3,.wf-inactive .h3,.wf-loading .h3,.h3,
.wf-active h4,.wf-disabled h4,.wf-inactive h4,.wf-loading h4,h4,
.wf-active .h4,.wf-disabled .h4,.wf-inactive .h4,.wf-loading .h4,.h4,
.wf-active h5,.wf-disabled h5,.wf-inactive h5,.wf-loading h5,h5,
.wf-active .h5,.wf-disabled .h5,.wf-inactive .h5,.wf-loading .h5,.h5,
.wf-active h6,.wf-disabled h6,.wf-inactive h6,.wf-loading h6,h6,
.wf-active .h6,.wf-disabled .h6,.wf-inactive .h6,.wf-loading .h6,.h6,
.wf-active .product-matrix .product-matrix-title,.wf-disabled .product-matrix .product-matrix-title{
font-family:var(--pi-font-display);
font-weight:700;
line-height:1.15;
letter-spacing:-.01em;
}
h1,.h1{font-size:1.9rem}
h2,.h2,.product-matrix .product-matrix-title{font-size:1.45rem}
h3,.h3,.sidepanel-left .box-normal .box-normal-link{font-size:1.15rem}
h4,.h4{font-size:1.05rem}
h5,.h5,h6,.h6{font-size:1rem}
/* ---- Preise und Zahlen: Display ---- */
.price,.price_wrapper .price,.bulk-price,.basket-summary .price,.et-basket-goto-checkout-total,
.product-price,.price-unit,.et-price{
font-family:var(--pi-font-display);
font-variant-numeric:tabular-nums lining-nums;
}
.price_wrapper .price.h1{font-size:2rem;font-weight:700}
/* ---- Artikelnummer, GTIN, HAN: Mono-Label (Eyebrow-Muster) ---- */
.product-sku,.product-gtin,.product-han,.et-productdetail-wrapper .product-essential-info-row{
font-family:var(--pi-font-mono);
font-size:.82rem;
letter-spacing:.04em;
}
/* Eine Zeile „ARTIKELNUMMER 10121 · GTIN … · HAN …" (Markup aus child-tpl/productdetails/details.tpl) */
.pi-meta{display:flex;flex-wrap:wrap;column-gap:.6em;margin:.15rem 0 0;font-size:.75rem;color:var(--pi-muted,#5b666d);line-height:1.6}
.pi-meta > span{white-space:nowrap}
.pi-meta > span + span::before{content:"·";margin-right:.6em}
.pi-meta .pi-meta-label{text-transform:uppercase;letter-spacing:.08em}
.pi-meta a{color:inherit;text-decoration:underline}
/* Eyebrow „HERSTELLER · SERIE" statt Herstellerlogo */
.pi-eyebrow,.et-productdetail-wrapper .product-manufacturer.pi-eyebrow{font-family:var(--pi-font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pi-muted,#5b666d);margin:0 0 .35rem;padding:0;border:0}
.pi-eyebrow a,.pi-eyebrow a:hover,.et-productdetail-wrapper .product-manufacturer.pi-eyebrow a{display:inline;font-weight:400;color:inherit;text-decoration:none}
.pi-eyebrow a:hover{color:var(--pi-teal-deep,#007a79)}
.pi-eyebrow .pi-eyebrow-sep{margin:0 .35em}
/* Kurzbeschreibung: als Nutzen-Bullets, wenn die WaWi eine Liste liefert (Mockup .buy .short) */
.product-info-inner .shortdesc{color:var(--pi-muted,#5b666d)}
.product-info-inner .shortdesc ul{margin:0;padding-left:1.2em} /* Abstand nach oben macht .shortdesc-wrapper (.9rem), sonst doppelt */
.product-info-inner .shortdesc li{padding:2px 0}
/* ---- Kaufbox wie im Mockup: Preis + B2B-Hinweis + Staffeltabelle → Menge/Warenkorb → Beratungs-CTA →
„oder direkt bezahlen" + Express-Buttons → Verfügbarkeit → Vertrauens-Chips ----
ET360 baut zwei Spalten (Preis links, Buttons rechts). display:contents löst Zeile und Spalten auf, die
Bausteine werden Flex-Kinder von .product-offer und lassen sich per order sortieren. Neue Elemente kommen aus
child-tpl/productdetails/{details,basket,price}.tpl. Die Box selbst ist die Karte aus dem Mockup (.pricebox). */
.product-offer,.et-productdetail-wrapper .product-offer{display:flex;flex-direction:column;margin:1.1rem 0 .75rem;padding:1.1rem 1.25rem;border:1px solid var(--pi-line,#e1e6e8);border-radius:10px;background:var(--pi-paper,#fff)}
/* Kopf der Spalte: Abstände wie im Mockup (Eyebrow → Titel → Meta-Zeile → Bullets → Karte) */
.et-productdetail-wrapper .product-title{margin-bottom:.25rem}
.product-info-inner .shortdesc-wrapper{margin-top:.9rem}
/* Preiszeile wie im Mockup: „699,99 € inkl. 19 % MwSt., zzgl. Versand" in EINER Zeile, darunter B2B-Hinweis, dann
Steuerzone/Lieferland (der OSS-Block hängt zur Laufzeit per Plugin-JS in .price_wrapper), dann die Staffeltabelle.
.price_wrapper wird Flex-Zeile mit Umbruch; alles außer Preis, Preis-Label („ab") und MwSt.-Zeile nimmt die volle Breite. */
.product-offer .price_wrapper{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;row-gap:0;margin-bottom:0}
.product-offer .price_wrapper > *{flex:0 0 100%;min-width:0}
.product-offer .price_wrapper > .price_label,.product-offer .price_wrapper > .price.h1{flex:0 0 auto;margin:0}
.product-offer .price_wrapper > .price-note{display:contents}
.product-offer .price_wrapper .price-note > *{flex:0 0 100%;min-width:0}
.product-offer .price_wrapper .vat_info{flex:0 1 auto;order:0;font-size:.78rem}
.product-offer .price_wrapper .base-price{order:1;margin-top:.1rem}
.product-offer .price_wrapper .pi-b2b-hint{order:2}
.product-offer .price_wrapper .suggested-price,.product-offer .price_wrapper .yousave{order:2}
.product-offer .price_wrapper > .ws5_oss_articlewrapper{order:3;margin:.15rem 0 0}
.product-offer .price_wrapper .bulk-prices,.et-productdetail-wrapper .bulk-prices{order:4;margin-top:0} /* Abstand macht die Tabelle (.75rem) */
.pi-b2b-hint{margin:.4rem 0 0;font-size:.85rem;line-height:1.4}
/* ET360 setzt a:not(.btn):link auf Unterstreichung + Textfarbe (0,2,1) — deshalb hier mit :link/:visited überschreiben:
ruhiger Teal-Link ohne Unterstreichung, Pfeil bleibt im Text (geschütztes Leerzeichen davor), Hover unterstreicht */
.pi-b2b-hint a,.pi-b2b-hint a:link,.pi-b2b-hint a:visited,.pi-b2b-hint a:not(.btn):link{color:var(--pi-teal-deep,#007a79);text-decoration:none;font-weight:600}
.pi-b2b-hint a:hover,.pi-b2b-hint a:focus-visible,.pi-b2b-hint a:not(.btn):hover{color:var(--pi-teal-deep,#007a79);text-decoration:underline;text-underline-offset:.15em}
/* Steuerzone/Lieferland in derselben Größe wie der B2B-Hinweis (Plugin setzt .btn-link auf 1rem) */
.product-offer .ws5_oss_articlewrapper,.product-offer .ws5_oss_articlewrapper .ws5_oss_article_text,.product-offer .ws5_oss_articlewrapper .ws5_oss_article_span,.product-offer .ws5_oss_articlewrapper .btn-link{font-size:.85rem;line-height:1.4;padding:0;margin:0}
.product-offer .ws5_oss_articlewrapper .ws5_oss_articleImg{transform:scale(.85);transform-origin:left center}
/* Steuerzone/Lieferland im selben Link-Stil wie der B2B-Hinweis (Plugin: unterstrichen, Textfarbe) */
.product-offer .ws5_oss_articlewrapper .ws5_oss_article_text.btn-link,.product-offer .ws5_oss_articlewrapper .ws5_oss_article_text > span,.product-offer .ws5_oss_articlewrapper .ws5_oss_article_span{color:var(--pi-teal-deep,#007a79);text-decoration:none;font-weight:600}
.product-offer .ws5_oss_articlewrapper .ws5_oss_article_text.btn-link:hover,.product-offer .ws5_oss_articlewrapper .ws5_oss_article_text > span:hover{text-decoration:underline;text-underline-offset:.15em}
/* Steuerzone/Lieferland ist eine Einstellung, kein Angebot: grau und normal, damit es sich vom B2B-Link unterscheidet (UX-Review 27.09.2026, Ähnlichkeit) */
.product-offer .ws5_oss_articlewrapper .ws5_oss_article_text.btn-link,.product-offer .ws5_oss_articlewrapper .ws5_oss_article_text > span,.product-offer .ws5_oss_articlewrapper .ws5_oss_article_span{color:var(--pi-muted,#5b666d);font-weight:400}
.product-offer .et-details-offer-row,.product-offer .et-details-offer-data,.product-offer .et-details-offer-buy-area{display:contents}
.product-offer .price_wrapper{order:1}
.product-offer .product-buy,.et-productdetail-wrapper .product-offer #add-to-cart{order:3;margin-top:1rem} /* ET360 setzt #add-to-cart auf 0 */
.product-offer .stock-information{order:2} /* Desktop- und Mobilfassung (ET360 blendet je Breite eine ein); seit 27.09.2026 VOR dem Kaufen:
Lieferzeit/Versandkosten sind Entscheidungsinformation (UX-Review Produktseite oben, Gestaltgesetz Nähe) */
.product-offer #ws5_oss_articleExclude_hintWrapper,.product-offer #ws5_oss_articleExclude_data{order:4}
/* Menge + Warenkorb: eine Zeile in voller Breite, Button füllt */
#add-to-cart{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .75rem;align-items:stretch}
#add-to-cart .basket-form-inline{display:contents}
#add-to-cart #quantity-grp{grid-column:1 / -1;width:100%}
#quantity-grp .input-group-append:last-child{flex:1 1 auto}
#quantity-grp .input-group-append:last-child .btn{width:100%}
/* Express-Zahlung: Amazon Pay und PayPal nebeneinander, gleiche Höhe */
#add-to-cart .lpa-button.lpa-button-pay{grid-column:1;margin:0;display:flex;align-items:center}
#add-to-cart .lpa-button.lpa-button-pay .lpa-button-content.row{margin:0;width:100%}
#add-to-cart > .row:has(#ppc-paypal-button-custom-productDetails-wrapper){grid-column:2;margin:0;display:flex;align-items:center}
#add-to-cart #ppc-paypal-button-custom-productDetails-wrapper{flex:0 0 100%;max-width:100%;margin-left:0;padding:0}
#add-to-cart #ppc-paypal-button-custom-productDetails-wrapper .btn{margin-bottom:0;height:100%;min-height:45px}
/* PayPal-SDK-Container neben Amazon Pay (Spalte 2), seit „Später bezahlen" im Plugin aus ist (16.08.2026) nur noch
ein Button; volle Breite bekäme er nur wieder, wenn zwei SDK-Buttons darin stünden — dann Plugin prüfen */
#add-to-cart > .row:has(#paypal-button-productDetails-container){grid-column:2;margin:0;display:flex;align-items:center}
#add-to-cart #paypal-button-productDetails-container{flex:0 0 100%;max-width:100%;padding:0}
/* Die Consent-Button-Zeile von PayPal ist nach erteiltem Consent leer (Wrapper d-none), belegt aber sonst Spalte 2 */
#add-to-cart > .row:has(#ppc-paypal-button-custom-productDetails-wrapper.d-none){display:none}
/* Amazon-Pay-Zelle: Knopf in voller Zellbreite und 43 px wie PayPal (Plugin schreibt 45 px inline → !important);
die SEPA-Unterzeile im Shadow-DOM blendet js/custom.js aus (Weg B, 16.08.2026). Verhältnis 43:228 liegt in Amazons
erlaubtem Rahmen (1:10 … 1:2,6). */
#add-to-cart .lpa-button.lpa-button-pay{align-items:center}
#add-to-cart .lpa-button-content-cols .lpa-button-container{margin:0;max-width:none;height:43px !important;min-height:43px !important} /* Breite setzt custom.js in px */
#add-to-cart #ppc-productDetails-horizontal-container{margin:0}
#add-to-cart #ppc-productDetails-horizontal-container #productDetails-ppc-paypal-standalone-button,#add-to-cart #ppc-productDetails-horizontal-container > div{padding-left:0;padding-right:0} /* ET360 setzt die ID doppelt (2,0,0) → hier drei IDs */
/* Amazon Pay füllt seine Zelle (das Plugin rückt den Button mit offset-md-6 nach rechts) */
#add-to-cart .lpa-button-content-cols{flex:0 0 100%;max-width:100%;margin-left:0;padding:0}
#add-to-cart .lpa-button.lpa-button-pay .lpa-button-wrapper,#add-to-cart .lpa-button.lpa-button-pay .lpa-button-content.row{width:100%}
#add-to-cart .lpa-button-content-cols .lpa-button-container{margin:0 auto}
/* Amazon Pay erst nach Einwilligung (23.10.2026, Quellen im EU-Cookie-Plugin unter „Zahlungsanbieter“): ohne Einwilligung
liefert das Plugin die Skripte mit data-src statt src aus, die Amazon-Zelle bliebe leer → ausblenden, PayPal volle Breite.
Nach Einwilligung (Banner oder Zahlungsanbieter-Banner in der Kasse) erscheint der Knopf beim nächsten Seitenaufruf. */
html:has(script[data-src*="payments-amazon.com/checkout.js"]) .lpa-button.lpa-button-pay{display:none!important} /* schlägt #add-to-cart … {display:flex} */
html:has(script[data-src*="payments-amazon.com/checkout.js"]) #add-to-cart > .row:has(#ppc-paypal-button-custom-productDetails-wrapper),
html:has(script[data-src*="payments-amazon.com/checkout.js"]) #add-to-cart > .row:has(#paypal-button-productDetails-container){grid-column:1 / -1}
/* Beratungs-CTA (Outline, volle Breite) und die Zeile „oder direkt bezahlen" — beide aus basket.tpl, beide
Grid-Kinder von #add-to-cart; die Zeile erscheint nur, wenn danach wirklich ein Express-Button folgt */
#add-to-cart .pi-cta-beratung{grid-column:1 / -1;justify-self:start;margin:.15rem 0 0;padding:.35rem 0;font-weight:600;font-size:.95rem;
border:0;background:none;color:var(--pi-teal-deep,#007a79);border-radius:4px;display:inline-flex;align-items:center;gap:.45rem;min-height:44px}
/* Seit 27.09.2026 Textlink statt Outline-Knopf in Warenkorb-Breite (UX-Review: vier gleich starke Knöpfe, Hick's Law) */
#add-to-cart .pi-cta-beratung::before{content:"";flex:none;width:1.15rem;height:1.15rem;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center/contain no-repeat}
#add-to-cart .pi-cta-beratung:hover,#add-to-cart .pi-cta-beratung:focus-visible{background:none;color:var(--pi-teal-deep,#007a79);text-decoration:underline;text-underline-offset:.15em}
#add-to-cart .pi-cta-beratung:focus-visible{outline:2px solid var(--pi-teal,#00abaa);outline-offset:2px}
#add-to-cart .pi-express-label{display:none;grid-column:1 / -1;margin-top:.35rem;font-size:.78rem;color:var(--pi-muted,#5b666d)}
#add-to-cart:has(.lpa-button-pay, #ppc-paypal-button-custom-productDetails-wrapper:not(.d-none), #paypal-button-productDetails-container) .pi-express-label{display:block}
/* Reihenfolge im Grid unabhängig davon, wo die Plugins ihre Buttons einhängen (Amazon Pay hängt sich in
.basket-form-inline, PayPal ans Ende von #add-to-cart): Menge/Warenkorb → Zeile → Amazon | PayPal → Beratungs-Link (seit 27.09.2026) */
#add-to-cart #quantity-grp{order:1}
#add-to-cart .pi-cta-beratung{order:5}
#add-to-cart .pi-express-label{order:3}
#add-to-cart .lpa-button.lpa-button-pay,#add-to-cart > .row:has(#ppc-paypal-button-custom-productDetails-wrapper),#add-to-cart > .row:has(#paypal-button-productDetails-container){order:4}
/* Wunschzettel / Vergleichsliste: zwei Icon-Buttons (2,4 rem) oben rechts in der Kaufbox neben dem Preis — UX-Variante
V2 (Jakob's Law: gelernte Position; ein Sekundär-Band weniger), User 17.08.2026, siehe
doku/vergleich-10121/aktionen-varianten.html. Markup = JTL-Badge-Snippets (.badge-circle-1, Tooltip, aria-label);
ET360 färbt die Badges teal-gefüllt mit 44 px und Opacity .8 → hier Ghost-Stil: Papier, feine Linie, Icon in Teal-Deep;
Hover/Fokus hellt, „auf der Liste" (.on-list) füllt. Absolut positioniert, DOM-Reihenfolge (Ende der Karte) bleibt;
die MwSt.-Angabe reserviert rechts die Knopfbreite, damit nichts überlappt (mobil bricht sie unter den Preis um). */
.product-offer,.et-productdetail-wrapper .product-offer{position:relative}
.product-offer .price_wrapper .vat_info{margin-right:6rem} /* reserviert die Knopfbreite in der ersten Zeile; passt es nicht, bricht die MwSt.-Angabe unter den Preis um (Flex-Wrap zählt Außenabstände mit) */
.product-offer .pi-actions{position:absolute;top:1.05rem;right:1.25rem;margin:0;padding:0;border:0;display:flex;gap:.5rem}
.product-offer .pi-actions .badge,.product-offer .pi-actions .badge-circle-1{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;min-width:2.75rem;margin:0;padding:0;border:1.5px solid var(--pi-line,#e1e6e8);border-radius:50%;background:var(--pi-paper,#fff);color:var(--pi-teal-deep,#007a79);opacity:1;box-shadow:none;font-size:1rem;line-height:1;transform:none;transition:border-color .15s,background-color .15s}
.product-offer .pi-actions .badge:hover,.product-offer .pi-actions .badge:focus-visible{border-color:var(--pi-teal-deep,#007a79);background:#e6f6f6;color:var(--pi-teal-deep,#007a79)}
.product-offer .pi-actions .badge:focus-visible{outline:3px solid var(--pi-ink,#0b0e10);outline-offset:2px}
.product-offer .pi-actions .badge.on-list{background:var(--pi-teal-deep,#007a79);border-color:var(--pi-teal-deep,#007a79);color:#fff} /* liegt schon auf der Liste */
@media (max-width:661.98px){
#add-to-cart{grid-template-columns:1fr}
#add-to-cart .lpa-button.lpa-button-pay,#add-to-cart > .row:has(#ppc-paypal-button-custom-productDetails-wrapper),#add-to-cart > .row:has(#paypal-button-productDetails-container){grid-column:1}
}
/* Verfügbarkeit als eine Zeile: „● Sofort verfügbar · Lieferzeit: 2 - 6 Werktage" (Texte/Zeiten aus JTL) */
.product-offer .stock-information,.et-productdetail-wrapper .product-info .stock-information{margin:.75rem 0 0}
.et-productdetail-wrapper .product-info .stock-information.stock-information-p{padding:0}
.product-offer .stock-information .delivery-status > ul{display:flex;flex-wrap:wrap;align-items:center;column-gap:.9rem;row-gap:.2rem;margin:0}
.product-offer .stock-information .delivery-status > ul > li{margin:0}
.product-offer .stock-information .status,.product-offer .stock-information .estimated-delivery{font-size:.9rem}
.product-offer .stock-information .status-icon{margin-right:.35rem}
.product-offer .stock-information .status-2 .status-icon{color:#1c7c33}
/* Netzanschluss-Hinweis (details.tpl, Attribut netzanschluss) direkt unter dem Warenkorb-Knopf: gleiche order wie
.product-buy, im DOM danach. Warnfarbe wie .pi-callout--warn; Farbe ist nie allein Träger — der Text beginnt mit „Hinweis:". */
.product-offer .pi-netzhinweis{order:3;margin:.75rem 0 0;padding:.6rem .8rem .6rem 2.6rem;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 600 524' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m300 16 284 492h-568z' fill='%23F9A800' stroke-width='32' stroke='%23000' stroke-linejoin='round'/%3E%3Cpath d='m278 164-50 177 77-41-19 119-16-22 15 72 41-61-23 14 45-164-80 43 59-137'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.75rem .7rem;background-size:1.4rem auto;border-radius:8px;background-color:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.40);font-size:.85rem;line-height:1.45;color:var(--pi-ink,#1d2327)}
/* Derselbe Hinweis in Warenkorb und Bestellübersicht (li in .cart-items-product-data / inc_order_items) */
li.pi-netzhinweis{list-style:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 600 524' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m300 16 284 492h-568z' fill='%23F9A800' stroke-width='32' stroke='%23000' stroke-linejoin='round'/%3E%3Cpath d='m278 164-50 177 77-41-19 119-16-22 15 72 41-61-23 14 45-164-80 43 59-137'/%3E%3C/svg%3E");margin:.5rem 0;padding:.45rem .6rem .45rem 2.1rem;border-radius:6px;background-color:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.40);font-size:.8rem;line-height:1.4;background-repeat:no-repeat;background-position:.55rem .5rem;background-size:1.15rem auto}
/* Vertrauens-Chips (details.tpl, custom.pi_trust_chips) am Ende der Box */
.product-offer .pi-trust{order:6;display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.product-offer .pi-trust li{background:var(--pi-work,#f3f5f6);border:1px solid var(--pi-line,#e1e6e8);border-radius:99px;padding:.25em .8em;font-size:.78rem;color:var(--pi-muted,#5b666d)}
/* Verfügbarkeit + Lieferzeit als Kasten mit zwei Zeilen (snippets/pi_verfuegbarkeit.tpl, Mockup 11, 27.09.2026):
runder Status-Kreis links, fette Zeile + graue Unterzeile, rechts „Andere Lieferländer". Das ET360-Icon im Status
entfällt (der Kreis übernimmt), Farbe folgt dem JTL-Lagerstatus (2 grün, sonst orange). */
.product-offer .pi-avail{border:1px solid var(--pi-line,#e1e6e8);border-radius:10px;overflow:hidden}
.product-offer .pi-av-row{display:grid;grid-template-columns:2.1rem 1fr auto;align-items:center;gap:.25rem .75rem;padding:.7rem .85rem}
.product-offer .pi-av-row + .pi-av-row{border-top:1px solid var(--pi-line,#e1e6e8)}
.product-offer .pi-av-ico{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:#fff3dc;color:#a8610b}
.product-offer .pi-av-ico svg{width:1.1rem;height:1.1rem}
.product-offer .pi-av-st2 .pi-av-ico{background:#e3f5ea;color:#1a7f3c}
.product-offer .pi-av-ship .pi-av-ico{background:var(--pi-work,#f3f5f6);color:var(--pi-ink,#0b0e10)}
.product-offer .pi-av-main{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.product-offer .pi-av-main b,.product-offer .pi-avail .status,.product-offer .pi-avail .status-text{font-family:var(--pi-font-display,'D-DIN',Arial,sans-serif);font-weight:600;font-size:1rem;color:var(--pi-ink,#0b0e10)}
.product-offer .pi-av-st2 .status,.product-offer .pi-av-st2 .status-text{color:#1a7f3c}
.product-offer .pi-av-st1 .status,.product-offer .pi-av-st1 .status-text{color:#9c5a0b}
.product-offer .pi-avail .status-icon{display:none}
.product-offer .pi-avail .delivery-status > ul{display:block}
.product-offer .pi-av-main small{font-size:.85rem;color:var(--pi-muted,#5b666d)}
.product-offer .pi-av-sub > span{white-space:nowrap} /* „RMA-Service" nicht am Bindestrich trennen (390 px, 28.09.2026) */
.product-offer .pi-av-side{font-size:.85rem;white-space:nowrap}
.product-offer .pi-av-side a,.product-offer .pi-av-side a:link,.product-offer .pi-av-side a:visited{color:var(--pi-teal-deep,#007a79)}
@media (max-width:520px){.product-offer .pi-av-side{grid-column:2}}
/* Rechtsinfo-Leiste am Ende der Kaufbox (snippets/pi_rechtsinfo.tpl, Mockup 11, 27.09.2026): Kacheln im Raster,
Symbole als data-URI — EU-Schild (offizielles Symbol aus der Kommissionsvorlage, shop-jtl/assets/eu-label),
durchgestrichene Tonne (Anlage 3 ElektroG, stiftung ear, lizenzfrei), Hersteller, Warnzeichen ISO 7010 W001. */
.product-offer .pi-legal{order:7;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--pi-line,#e1e6e8)}
.product-offer .pi-legal-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem;margin:0}
.product-offer .pi-legal-links button,.product-offer .pi-legal-links a{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100%;display:flex;align-items:center;gap:.8rem;
background:var(--pi-work,#f3f5f6);border:1px solid transparent;border-radius:10px;padding:.65rem .8rem;transition:border-color .15s,background-color .15s}
.product-offer .pi-legal-links button:hover,.product-offer .pi-legal-links a:hover{background:var(--pi-paper,#fff);border-color:var(--pi-teal,#00abaa)}
.product-offer .pi-legal-links button:focus-visible,.product-offer .pi-legal-links a:focus-visible{outline:2px solid var(--pi-teal,#00abaa);outline-offset:2px}
.pi-legal-ico{flex:none;width:2.2rem;height:2.6rem;background:center/contain no-repeat}
.pi-legal-ico-gew{background-image:url("data:image/png;base64,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")}
.pi-legal-ico-weee{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 733.73 743.95'%3E%3Cdefs%3E%3Cstyle%3E.cls-1,.cls-2,.cls-3,.cls-5,.cls-6{fill:none;stroke:%231a171b;}.cls-1,.cls-2{stroke-width:23.34px;}.cls-2{stroke-linejoin:round;}.cls-3{stroke-width:28.01px;}.cls-4{fill:%231a171b;}.cls-5{stroke-width:16.34px;}.cls-6{stroke-width:14px;}%3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='175.43 127.2 542.59 127.2 502.89 555.56'/%3E%3Cpolyline class='cls-2' points='210.16 132.16 251.51 633.29 449.97 633.29'/%3E%3Cpath class='cls-3' d='M726.2,709.52A47.58,47.58,0,1,0,678.63,662a47.57,47.57,0,0,0,47.57,47.57Z' transform='translate(-227 -48.89)'/%3E%3Cpath class='cls-4' d='M726.59,683.83A19.85,19.85,0,1,0,706.74,664a19.84,19.84,0,0,0,19.85,19.84Z' transform='translate(-227 -48.89)'/%3E%3Cpolygon class='cls-4' points='332.55 244.63 332.55 290.94 466.51 290.94 466.51 244.63 332.55 244.63 332.55 244.63'/%3E%3Cpolygon class='cls-5' points='527.7 176.82 527.7 241.32 592.2 241.32 592.2 176.82 527.7 176.82 527.7 176.82'/%3E%3Cpolygon class='cls-4' points='241.58 57.74 241.58 130.51 281.28 130.51 281.28 57.74 241.58 57.74 241.58 57.74'/%3E%3Cpolygon class='cls-4' points='254.81 639.9 254.81 672.98 292.85 672.98 292.85 639.9 254.81 639.9 254.81 639.9'/%3E%3Cpolygon class='cls-6' points='345.78 52.78 345.78 89.17 436.74 89.17 436.74 52.78 345.78 52.78 345.78 52.78'/%3E%3Cpath class='cls-4' d='M791.92,187.67A25.64,25.64,0,1,0,766.28,162a25.64,25.64,0,0,0,25.64,25.63Z' transform='translate(-227 -48.89)'/%3E%3Cpath class='cls-1' d='M432.2,174.44s13.23-59.54,142.23-59.54m205.08,59.54S749.74,114.9,667.05,114.9' transform='translate(-227 -48.89)'/%3E%3Cpath class='cls-6' d='M232.08,53.71,928.36,788M955.65,53.71,259.37,788' transform='translate(-227 -48.89)'/%3E%3C/svg%3E");background-position:center;background-size:contain;background-repeat:no-repeat}
.pi-legal-ico-maker{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='9' fill='%2300abaa'/%3E%3Cpath d='M9 30V18l6 4v-4l6 4v-4l6 4V11h4v19z' fill='%23fff'/%3E%3Crect x='8' y='30' width='24' height='2' rx='1' fill='%23fff'/%3E%3C/svg%3E")}
.pi-legal-ico-safety{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20 2.5L38 33.5H2z' fill='%23f9dd16' stroke='%230b0e10' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='18.2' y='12' width='3.6' height='12' rx='1.5' fill='%230b0e10'/%3E%3Ccircle cx='20' cy='28.3' r='2.1' fill='%230b0e10'/%3E%3C/svg%3E")}
.pi-legal-lbl{display:flex;flex-direction:column;line-height:1.25}
.pi-legal-lbl b{font:600 .95rem var(--pi-font-display,'D-DIN',Arial,sans-serif);color:var(--pi-ink,#0b0e10)}
.pi-legal-lbl small{font-size:.8rem;color:var(--pi-muted,#5b666d);margin-top:.15rem}
.pi-legal-modal .pi-legal-notice{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.pi-legal-modal .pi-weee{display:grid;grid-template-columns:4.5rem 1fr;gap:1.25rem;align-items:start}
.pi-legal-modal .pi-weee-bin{display:block;width:4.5rem;height:4.6rem}
.pi-legal-modal .pi-weee-steps{margin:0;padding-left:1.2rem}
.pi-legal-modal .pi-weee-steps li{margin:0 0 .6rem}
.pi-legal-modal .pi-weee-steps b{display:block;font-family:var(--pi-font-display,'D-DIN',Arial,sans-serif);color:var(--pi-ink,#0b0e10)}
.pi-legal-modal .pi-weee-regnr{margin:.75rem 0 0;font-size:.85rem;color:var(--pi-muted,#5b666d)}
.pi-legal-modal .pi-maker .product-manufacturer{margin-bottom:1rem}
.pi-legal-modal .pi-maker .small{font-size:.95rem}
@media (max-width:520px){.pi-legal-modal .pi-weee{grid-template-columns:1fr}}
/* Rechtskacheln mobil einzeilig (UX-Review 27.09.2026): Symbol + Titel, 48 px, Unterzeile entfällt */
@media (max-width:575.98px){
.product-offer .pi-legal-links{gap:.35rem}
.product-offer .pi-legal-links button,.product-offer .pi-legal-links a{padding:.35rem .7rem;min-height:48px;gap:.7rem}
.product-offer .pi-legal-ico{width:1.6rem;height:1.9rem}
.product-offer .pi-legal-lbl small{display:none}
}
/* Galerie läuft am Desktop mit, solange die Kaufbox länger ist (UX-Review 27.09.2026) — der Kopf ist dort nicht fixiert */
@media (min-width:992px){.et-productdetail-wrapper .product-detail > .product-gallery{position:sticky;top:1rem;align-self:flex-start}}
/* sticky bildet einen Stapelkontext: das Vollbild der Galerie (#image_wrapper.fullscreen, fixed, z 10000) lag sonst UNTER der
Kaufbox-Spalte (User 11.10.2026, MADRIX AURA 32). Im Vollbild die Spalte nach ganz oben holen. */
.et-productdetail-wrapper .product-detail > .product-gallery:has(> .gallery-with-action.fullscreen){z-index:10000}
/* SHOPVOTE: unter 576 px ersetzt das Widget das Siegel durch eine fixierte Leiste am unteren Rand (#sv-rbadge-rb1fxb), die Inhalt
und Kaufknopf verdeckt (WCAG 2.2 SC 2.4.11). Der 8. createVBadge-Parameter (17.08.2026) blendet nur das Siegel aus, nicht die Leiste. */
@media (max-width:575.98px){#sv-rbadge-rb1fxb,.sv-rbadge-rb1fxb{display:none !important}}
/* Mobile Kaufleiste (pi.js Abschnitt 9): Preis + Warenkorb, sichtbar solange der echte Warenkorb-Knopf nicht im Bild ist */
.pi-buybar{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;align-items:center;gap:.75rem;
padding:.55rem 1rem calc(.55rem + env(safe-area-inset-bottom,0px));background:var(--pi-paper,#fff);border-top:1px solid var(--pi-line,#e1e6e8);
box-shadow:0 -6px 18px rgba(11,14,16,.08);transform:translateY(110%);transition:transform .2s ease}
.pi-buybar.is-on{transform:none}
.pi-buybar-price{flex:1 1 auto;min-width:0;font:600 1.25rem/1.1 var(--pi-font-display,'D-DIN',Arial,sans-serif);color:var(--pi-ink,#0b0e10);white-space:nowrap}
.pi-buybar-price small{display:block;font:400 .72rem/1.2 var(--pi-font-body,system-ui,sans-serif);color:var(--pi-muted,#5b666d)}
.pi-buybar-btn{flex:0 0 auto;min-height:48px;padding:0 1.25rem;border:0;border-radius:8px;background:var(--pi-teal,#00abaa);color:var(--pi-ink,#0b0e10);font:600 1rem var(--pi-font-display,'D-DIN',Arial,sans-serif)}
.pi-buybar-btn:focus-visible{outline:3px solid var(--pi-ink,#0b0e10);outline-offset:2px}
body.pi-buybar-on .smoothscroll-top{bottom:5.25rem}
/* Consent-Knopf (ws_eu-cookie, fixiert bottom 20 px, Klassenname gehasht) über die Leiste heben */
body.pi-buybar-on #ws_eu-cookie-openConsentManagerButton-container [class*="openConsentManagerButton"]{bottom:5.25rem !important;transition:bottom .2s ease}
/* Mobil kleiner und dezent (UX-Validierung 23.10.2026, P3, Entscheidung User): verdeckte ~50 px Zeilenende. 40 px, 6 px vom Rand,
70 % Deckkraft (Symbol ≈ #7c7c7c auf Weiß, ≥ 3:1 nach WCAG 1.4.11), voll bei Berührung/Fokus. Bleibt einziger Weg zum Widerruf. */
@media (max-width:767.98px){
#ws_eu-cookie-openConsentManagerButton-container svg{width:40px !important;height:40px !important;right:6px !important;opacity:.7;transition:opacity .2s ease,bottom .2s ease}
#ws_eu-cookie-openConsentManagerButton-container svg:hover,#ws_eu-cookie-openConsentManagerButton-container svg:focus{opacity:1}
}
@media (min-width:768px){.pi-buybar{display:none}}
@media (prefers-reduced-motion:reduce){.pi-buybar{transition:none}}
/* ---- Staffelpreise (Markup aus child-tpl/productdetails/price.tpl: tr > td Label | td Preis) ----
Mockup: „ab 1 Stück | ab 10 Stück | ab 20 Stück" als Kopf, Preis darunter, Grundpreis (VPE) ganz
klein darunter — nur wo JTL ihn liefert. Wörter/Einheit kommen aus dem Template (JTL-Sprachen).
Desktop immer Spalten (bei 570 px Kaufbox tragen bis 6 Spalten), mobil Zeilen. */
.bulk-prices table.table{display:block;width:100%;margin:.75rem 0 0;font-size:.85rem;border:1px solid var(--pi-line,#e1e6e8);border-radius:6px;overflow:hidden;border-collapse:separate;border-spacing:0}
.bulk-prices thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bulk-prices tbody{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:minmax(0,1fr)}
.bulk-prices tbody tr{display:contents}
.bulk-prices tbody td{padding:.45rem .5rem;border:0;text-align:center;min-width:0;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--pi-line,#e1e6e8)}
.bulk-prices tbody tr:first-child td{border-left:0}
.bulk-prices tbody td:first-child{grid-row:1;font-weight:600;color:var(--pi-txt,#22282c);background:var(--pi-work,#f3f5f6);border-bottom:1px solid var(--pi-line,#e1e6e8);white-space:nowrap}
.bulk-prices tbody td:last-child{grid-row:2;flex-flow:row wrap;align-items:baseline;column-gap:.15rem;line-height:1.3;padding-top:.55rem;padding-bottom:.55rem}
.bulk-prices tbody .bulk-price{font-family:var(--pi-font-display);font-weight:700;font-size:.95rem;white-space:nowrap}
.bulk-prices tbody .footnote-reference{color:var(--pi-muted,#5b666d);order:1}
.bulk-prices tbody .bulk-base-price{order:2;flex-basis:100%;text-align:center;font-family:var(--pi-font-body);font-weight:400;font-size:.72rem;color:var(--pi-muted,#5b666d);white-space:nowrap}
/* Grundpreisangabe am Hauptpreis */
.price_wrapper .base-price,.price_wrapper .base_price{font-family:var(--pi-font-mono);font-size:.82rem;letter-spacing:.02em;color:var(--pi-muted,#5b666d);margin-top:.15rem}
@media (max-width:661.98px){
.bulk-prices tbody{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:minmax(7rem,auto) 1fr}
.bulk-prices tbody td{border-left:0;border-top:1px solid var(--pi-line,#e1e6e8)}
.bulk-prices tbody tr:first-child td{border-top:0}
.bulk-prices tbody td:first-child{grid-row:auto;grid-column:1;justify-content:flex-start;text-align:left;border-bottom:0}
.bulk-prices tbody td:last-child{grid-row:auto;grid-column:2;justify-content:flex-end;text-align:right;border-left:1px solid var(--pi-line,#e1e6e8)}
.bulk-prices .bulk-base-price{text-align:right}
}
/* ---- Mengenfeld in der Kaufbox: bei 16,5 px Grundschrift quetschte der Warenkorb-Button das
Eingabefeld auf 36 px (Padding links 15 px → die „1" verschwand). Feste Mindestbreite,
zentriert, kompakter Button. ---- */
/* Menge und Warenkorb wie im Mockup: zwei getrennte, runde Elemente (Radius 8) mit Abstand — links die Menge als
Pille „[ 1 | Stück ]" (Einheit lesbar, hellgrau hinterlegt), rechts der Button in voller Restbreite. Bootstrap klebt
die input-group zusammen; die #id-Selektoren hier gewinnen gegen dessen Eck-Regeln. */
#quantity-grp.input-group{flex-wrap:nowrap;gap:0;align-items:stretch;border:0;border-radius:0;background:transparent} /* ET360 zieht sonst einen eckigen Rahmen um die ganze Gruppe; Abstand nur vor dem Button (unten), sonst klafft die Pille */
#quantity-grp .form-control.quantity{flex:0 0 3.4rem;min-width:3.4rem;height:auto;padding:.55rem .35rem;text-align:center;font-family:var(--pi-font-display);font-size:1.05rem;font-weight:700;border:1.5px solid var(--pi-line,#e1e6e8);border-right:0;border-radius:8px 0 0 8px;box-shadow:none}
#quantity-grp .form-control.quantity:not(.has-unit){border-right:1.5px solid var(--pi-line,#e1e6e8);border-radius:8px}
#quantity-grp .input-group-append:has(.unit){margin-left:0} /* Einheit sitzt bündig an der Menge */
#quantity-grp .input-group-text.unit{height:auto;padding:0 .7rem 0 .55rem;font-size:.9rem;color:var(--pi-muted,#5b666d);background:var(--pi-work,#f3f5f6);border:1.5px solid var(--pi-line,#e1e6e8);border-left:0;border-radius:0 8px 8px 0;white-space:nowrap}
#quantity-grp .input-group-append:last-child{margin-left:.6rem}
#quantity-grp .input-group-append > .btn,#quantity-grp .btn-cart{border-radius:8px;padding:.7rem 1rem;font-size:1rem;font-weight:600;white-space:nowrap;min-height:2.85rem}
#quantity-grp .form-control.quantity:focus-visible{outline:3px solid var(--pi-ink,#0b0e10);outline-offset:0;box-shadow:0 0 0 6px var(--pi-glow,#2fd4d2);position:relative;z-index:1}
/* ---- Abschnitte statt Reiter (Paket C, 17.08.2026, doku/paket-c-plan.md) ------------------------------------------
Listen-Modus im Child (child-tpl/widgets/product_detail_information.tpl); ET360s vertikale Listen-Nav wird per
Klassentausch (…/snippets/product_detail_information_list.tpl) zur waagerechten, klebenden Anker-Leiste unter dem
fixierten Header (Desktop 100 + 51 px, mobil 55 px); Inhalt volle Breite; Abschnitte mit echter H2. */
.et-productdetails-info-list > .pi-anchorbar-col{flex:0 0 100%;max-width:100%;position:sticky;top:var(--pi-header-h,151px);z-index:20;background:var(--pi-paper,#fff);border-bottom:1px solid var(--pi-line,#e1e6e8);margin:0 0 1.25rem;padding:0}
.pi-anchorbar{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.15rem;overflow-x:auto;scrollbar-width:none;border:0;border-radius:0;box-shadow:none;background:transparent}
.pi-anchorbar::-webkit-scrollbar{display:none}
.pi-anchorbar > a.list-group-item{flex:0 0 auto;width:auto;margin:0;padding:.8em .8em;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--pi-muted,#5b666d);font-size:.86rem;font-weight:600;line-height:1.3;white-space:nowrap;text-decoration:none} /* 9 Einträge passen so in 1140 px */
.pi-anchorbar > a.list-group-item:hover,.pi-anchorbar > a.list-group-item:focus-visible{color:var(--pi-teal-deep,#007a79);border-bottom-color:var(--pi-teal,#00abaa);background:transparent;text-decoration:none}
.pi-anchorbar > a.list-group-item.pi-active{color:var(--pi-ink,#0b0e10);border-bottom-color:var(--pi-teal,#00abaa)}
.pi-anchorbar > a.list-group-item .icon{display:none}
.et-productdetails-info-list > .pi-infolist-content{flex:0 0 100%;max-width:100%}
.et-productdetails-info-list-item-content{margin-bottom:2.5rem}
.pi-list-h2,.et-productdetails-info-list-item-content .et-productdetails-info-list-item-headline,.et-product-slider-headline .et-widget-headline{font-family:var(--pi-font-display);font-size:1.45rem;font-weight:700;margin:0 0 .9rem;padding:0 0 0 12px;border:0;border-left:4px solid var(--pi-teal,#00abaa);color:var(--pi-ink,#0b0e10);line-height:1.25} /* wie .pi-accent (C6, 17.08.2026) — ET360 setzt eine dicke Unterlinie; Produktslider-Überschrift „Passendes Zubehör“ seit 11.10.2026 mit (User) */
.et-productdetails-info-list-item-content .et-productdetails-info-list-item-headline::after,.et-productdetails-info-list-item-content .et-productdetails-info-list-item-headline::before{display:none}
/* Produktslider mit weniger als 2 Artikeln (z. B. Zubehör vor der Zuordnung) blendet pi.js aus */
.et-widget-productslider.pi-slider--leer{display:none}
/* Sprungziele frei von Header + Leiste (~44 px): überschreibt die 10.5rem/4.5rem aus pixel-imperium.css */
/* Header-Höhe misst pi.js (fixierte Kopfelemente: 151 px Desktop, 65 px Tablet, 55 px mobil) und setzt --pi-header-h; die
Fallbacks gelten ohne JS. Leiste ≈ 41 px + Luft = 3.25rem */
/* --pi-anchor-extra = Header-Anteil, den ET360s scroll-padding-top NICHT schon abdeckt (pi.js), sonst 0 */
#tab-description [id],.pi-wrap [id],.et-productdetails-info-list [id],.et-productdetails-info-list-item-content{scroll-margin-top:calc(var(--pi-anchor-extra,151px) + 3.25rem)}
@media (max-width:991.98px){
.et-productdetails-info-list > .pi-anchorbar-col{top:var(--pi-header-h,55px)}
#tab-description [id],.pi-wrap [id],.et-productdetails-info-list [id],.et-productdetails-info-list-item-content{scroll-margin-top:calc(var(--pi-anchor-extra,55px) + 3.25rem)}
}
/* Überlauf sichtbar machen (UX-Review 17.08., P2 #2): bei Platzmangel Verlaufskante + Pfeil rechts, beim Zurückscrollen
Kante links; pi.js setzt die Klassen nach scrollWidth/scrollLeft. Ohne JS: einfach scrollbar. */
.et-productdetails-info-list > .pi-anchorbar-col::before,.et-productdetails-info-list > .pi-anchorbar-col::after{content:"";position:absolute;top:0;bottom:1px;width:3.5rem;pointer-events:none;opacity:0;transition:opacity .15s}
.et-productdetails-info-list > .pi-anchorbar-col::after{right:0;background:linear-gradient(90deg,rgba(255,255,255,0),var(--pi-paper,#fff) 55%)}
.et-productdetails-info-list > .pi-anchorbar-col::before{left:0;background:linear-gradient(270deg,rgba(255,255,255,0),var(--pi-paper,#fff) 55%)}
.et-productdetails-info-list > .pi-anchorbar-col.pi-anchorbar--more::after,.et-productdetails-info-list > .pi-anchorbar-col.pi-anchorbar--start::before{opacity:1}
.pi-anchorbar-more{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:1.6rem;height:1.6rem;border-radius:50%;background:var(--pi-paper,#fff);color:var(--pi-teal-deep,#007a79);font-size:1.15rem;line-height:1.55rem;text-align:center;border:1px solid var(--pi-line,#e1e6e8);cursor:pointer;z-index:1;display:none;padding:0}
.pi-anchorbar--more > .pi-anchorbar-more{display:block}
/* Der Artikel-TOC (.pi-toc) steckt nach pi.js in der Leiste */
.pi-toc.pi-toc--merged{display:none}
/* GPSR-Block „Angaben zur Produktsicherheit" (ET360-Snippet im Merkmal-Abschnitt): Adressen standen in .small (13 px)
mit 800 — wirkte wie eine fremde Schrift (User 17.08.2026). Auf Seitenschrift und -gewicht ziehen. */
.gpsr-compliance .product-manufacturer-manufacturer,.gpsr-compliance .product-manufacturer-responsibleperson{font-size:.95rem;line-height:1.55;color:var(--pi-txt,#22282c)}
.gpsr-compliance strong{font-weight:600}
/* Seit 11.10.2026 ausgeblendet (User): dieselben Angaben stehen im Badge „Herstellerinformationen" der Rechtsinfo-Leiste
(snippets/pi_rechtsinfo.tpl, Modal an der Kaufbox) — Art. 19 GPSR verlangt sie einmal eindeutig und gut sichtbar, nicht doppelt.
Nur ausblenden, nicht das Plugin jtl_gpsr abschalten: es liefert $gpsrManufacturer/$gpsrResponsiblePerson fürs Modal.
Der Rechts-Check (shop-jtl/recht-check) prüft täglich, dass Badge und Modal-Inhalt vorhanden sind. */
#tab-attributes .gpsr-compliance,#tab-attributes .hr-sect:has(+ .gpsr-compliance){display:none!important} /* inkl. Überschrift „Angaben zur Produktsicherheit" */
/* Dokumente als Liste (child-tpl/productdetails/mediafile.tpl, Paket C5): Name + Meta, Zielkennzeichnung; ET360-Kartenraster aus */
:is(#tab-Documents,#tab-Dokumente,#tab-Documentos,#tab-Documenti,#tab-Documenten) .mediafiles.card-columns,.mediafiles.card-columns{column-count:initial!important;-webkit-column-count:initial!important;display:block!important;margin:0!important;gap:0!important} /* legacy-head.css (Live-Kachelraster) setzt dieselbe ID-Regel mit !important auf flex/-30px */
.pi-doc{border-bottom:1px solid var(--pi-line,#e1e6e8)}
.pi-doc:first-child{border-top:1px solid var(--pi-line,#e1e6e8)}
.pi-doc-link,a.pi-doc-link:link,a.pi-doc-link:visited{display:flex;align-items:center;gap:.9rem;padding:.7rem .25rem;color:var(--pi-txt,#22282c);text-decoration:none} /* ET360: a:not(.btn):link ist unterstrichen */
.pi-doc-link:hover,.pi-doc-link:focus-visible{text-decoration:none;background:var(--pi-work,#f3f5f6)}
.pi-doc-icon{flex:0 0 3rem;height:2.6rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--pi-line,#e1e6e8);border-radius:8px;color:var(--pi-teal-deep,#007a79);background:var(--pi-paper,#fff)}
.pi-doc-icon i{font-size:1.35rem;line-height:1} /* Font-Awesome-Symbol (fa-file-pdf / fa-external-link-alt / fa-download) statt Textkürzel (User 17.08.2026) */
.pi-doc-link:hover .pi-doc-icon{border-color:var(--pi-teal,#00abaa);background:var(--pi-teal-soft,#e6f7f7)}
.pi-doc-body{display:flex;flex-direction:column;min-width:0}
.pi-doc-name{font-weight:600}
.pi-doc-link:hover .pi-doc-name{color:var(--pi-teal-deep,#007a79);text-decoration:underline;text-underline-offset:.15em}
.pi-doc-meta{font-size:.82rem;color:var(--pi-muted,#5b666d)}
/* Kategorietext „Kompatible Pixel für PixLite Mk3" (.pi-katext): ET360 klemmt Kategoriebeschreibungen per JS auf 100 px mit
„Mehr lesen" (UX 17.08.2026: der Text IST der Inhalt). Für .pi-katext: nicht klemmen, Toggle weg; die lange Tabelle
steckt stattdessen in einem bewussten . */
.et-category-banner-description:has(.pi-katext){height:auto!important;max-height:none!important;overflow:visible!important;column-count:1!important}
.et-category-banner-backdrop:has(.pi-katext) .et-shorten-to-more,.et-category-banner-content:has(.pi-katext) .et-shorten-to-more{display:none!important}
/* Verteilerseiten ohne eigene Artikel (html.pi-verteiler, setzt child-tpl/layout/header.tpl): Entscheidungshilfe .pi-wrap
ebenfalls nicht klemmen (UX-Validierung 23.10.2026). Mit Produktliste bleibt die Klemmung (Entscheidung 15.10.2026). */
html.pi-verteiler .et-category-banner-description:has(.pi-wrap){height:auto!important;max-height:none!important;overflow:visible!important}
html.pi-verteiler .et-category-banner-backdrop:has(.pi-wrap) .et-shorten-to-more,html.pi-verteiler .et-category-banner-content:has(.pi-wrap) .et-shorten-to-more{display:none!important}
/* Kategorietitel: Endabstand aus theme.css (h1 .625em) schon beim ersten Bild — die Inline-Kritisch-CSS hat nur 10px, theme.css
kommt asynchron, der Text samt Produktliste rutschte dann um 9px (CLS Listenseiten bis 0,24, 23.10.2026). */
/* 404-Seite (Spezialseite kLink 72, Inhalt in tlinksprache, 6 Sprachen, 23.10.2026): Suche und Bereichs-Links statt nur Sitemap */
.pi-404 h1{margin:0 0 .5rem}
.pi-404-suche{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 1.25rem}
.pi-404-suche label{flex-basis:100%;margin:0;font-weight:600}
.pi-404-suche .twitter-typeahead{flex:1 1 14rem;max-width:30rem} /* JTL hängt die Suchvorschläge an jedes Feld qs und packt es dabei ein */
.pi-404-suche input{width:100%;min-height:44px;padding:.5rem .75rem;border:1px solid var(--pi-line,#c9d1d4);border-radius:6px;font:inherit}
.pi-404-suche .btn{min-height:44px}
.pi-404-wege{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pi-404-wege a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:1px solid var(--pi-line,#e1e6e8);border-radius:999px;font-weight:600;text-decoration:none}
.pi-404-wege a:hover,.pi-404-wege a:focus-visible{border-color:var(--pi-teal-deep,#007a79);color:var(--pi-teal-deep,#007a79)}
.pi-404-kontakt{margin:0}
.pi-nulltreffer{margin-top:1.5rem}.pi-nulltreffer-lead{margin:0 0 .6rem;font-weight:600} /* Suche ohne Treffer, child-tpl/widgets/search_result_banner.tpl */
.et-category-banner-title{margin-bottom:.625em}
/* Listenseiten Desktop (UX-Validierung 23.10.2026, P3): 70px Leerraum zwischen Kategorietext und Filterleiste → ~48px;
Seitengrößen-Schalter nur, wenn es mehr Artikel als die kleinste Stufe (10) gibt (Klasse setzt child-tpl/layout/header.tpl). */
.et-product-list-filter-top-wrapper{padding-top:8px}
html.pi-wenige-artikel .et-product-list-filter-productsperpage{display:none}
/* Listenseiten: Platz für „Mehr lesen" (26px), bis ET360 den Text initialisiert und den Link einblendet — sonst +26px Sprung. */
html:not(.pi-verteiler) .et-category-banner-description:has(.pi-wrap):not(.initialized){margin-bottom:26px}
.et-category-banner-content:has(.pi-katext){align-items:stretch} /* sideBySide ohne Bild: flex-start ließ den Textblock auf Inhaltsbreite (46em) schrumpfen — Kacheln, Rechner und Tabelle sollen die volle Containerbreite nutzen (17.08.2026) */
.et-category-banner-content:has(.pi-katext) .et-category-banner-content-positioner{width:100%}
.pi-katext .pi-facts{margin:1rem 0 .8rem}
.pi-katext .pi-fact .v{font-size:1.5rem}
.pi-katext details.pi-protokolle{margin:.6rem 0 0;border:1px solid var(--pi-line,#e1e6e8);border-radius:8px;padding:0 1rem}
.pi-katext details.pi-protokolle > summary{padding:.8rem 0;font-weight:600;cursor:pointer;color:var(--pi-teal-deep,#007a79)}
.pi-katext details.pi-protokolle[open] > summary{border-bottom:1px solid var(--pi-line,#e1e6e8);margin-bottom:.6rem}
.pi-katext .pi-table--protokolle th[scope=row]{font-weight:600;white-space:nowrap}
.pi-katext details.pi-protokolle .pi-faqc,.pi-katext .pi-tablewrap{max-width:none} /* Paket-A-Zeilenbreite gilt nicht für die Tabelle */
.pi-katext .pi-table--protokolle td,.pi-katext .pi-table--protokolle thead th{white-space:nowrap}
/* Pixel-Check auf der Kategorieseite (pi.js Abschnitt 4): Textfeld mit Live-Vorschlägen und Ähnlichkeitssuche statt Dropdown
(User 17.08.2026). Ohne JS bleibt der Platzhalter leer, die Tabelle darunter trägt. */
/* Einspeiserechner (pi.js Block 20, Ratgeber 140, 23.10.2026) — gleiche Fläche wie der Pixel-Check */
.pi-einspeiserechner{margin:.6rem 0 0;padding:1.1rem 1.25rem;border:1px solid var(--pi-line,#e1e6e8);border-radius:10px;background:var(--pi-work,#f3f5f6)}
.pi-er-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem 1rem}
.pi-er-feld label{display:block;margin:0 0 .3rem;font-weight:600;font-size:.95rem}
.pi-er-feld input,.pi-er-feld select{width:100%;min-height:44px;padding:.5rem .7rem;font:inherit;border:1.5px solid var(--pi-line,#e1e6e8);border-radius:8px;background:var(--pi-paper,#fff)}
.pi-er-feld input:focus,.pi-er-feld select:focus{border-color:var(--pi-teal-deep,#007a79);outline:none;box-shadow:0 0 0 4px rgba(0,171,170,.18)}
.pi-er-ergebnis{margin:1rem 0 0;padding:.9rem 1rem;border-radius:8px;background:var(--pi-paper,#fff);border-left:5px solid var(--pi-line,#e1e6e8)}
.pi-er-ergebnis.ok{border-left-color:#1e7e34}.pi-er-ergebnis.nok{border-left-color:#b45309}
.pi-er-status{margin:0 0 .5rem;font-weight:700}.pi-er-ergebnis.ok .pi-er-status{color:#1e7e34}.pi-er-ergebnis.nok .pi-er-status{color:#9a3412}
.pi-er-werte{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin:0 0 .6rem}
.pi-er-werte dt{font-weight:400;font-size:.9rem;color:var(--pi-muted,#5b666d)}.pi-er-werte dd{margin:0;font-size:1.35rem;font-weight:700}
.pi-er-ergebnis p{margin:0 0 .4rem}.pi-er-weg{font-size:.9rem;color:var(--pi-muted,#5b666d)}
.pi-er-hinweis{margin:.8rem 0 0;font-size:.9rem;color:var(--pi-muted,#5b666d)}
.pi-pixelcheck{margin:1.2rem 0 1rem;padding:1.1rem 1.25rem;border:1px solid var(--pi-line,#e1e6e8);border-radius:10px;background:var(--pi-work,#f3f5f6)}
.pi-pixelcheck label{display:block;font-weight:600;margin:0 0 .4rem}
.pi-pixelcheck .pi-pc-row{position:relative;max-width:34rem}
.pi-pixelcheck input{width:100%;font:inherit;font-size:1.1rem;padding:.7rem .9rem;border:1.5px solid var(--pi-line,#e1e6e8);border-radius:8px;background:var(--pi-paper,#fff)}
.pi-pixelcheck input:focus{border-color:var(--pi-teal-deep,#007a79);outline:none;box-shadow:0 0 0 4px rgba(0,171,170,.18)}
.pi-pixelcheck .pi-pc-list{position:absolute;left:0;right:0;top:100%;z-index:5;margin:.25rem 0 0;padding:0;list-style:none;background:var(--pi-paper,#fff);border:1px solid var(--pi-line,#e1e6e8);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);max-height:16rem;overflow:auto}
.pi-pixelcheck .pi-pc-list:empty{display:none}
.pi-pixelcheck .pi-pc-list li{padding:.5rem .9rem;cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
.pi-pixelcheck .pi-pc-list li:hover,.pi-pixelcheck .pi-pc-list li[aria-selected=true]{background:var(--pi-work,#f3f5f6)}
.pi-pixelcheck .pi-pc-list li small{color:var(--pi-muted,#5b666d)}
.pi-pixelcheck .pi-pc-result{margin-top:.9rem;padding:.9rem 1rem;border-radius:8px;background:var(--pi-paper,#fff);border:1px solid var(--pi-line,#e1e6e8)}
.pi-pixelcheck .pi-pc-result:empty{display:none}
.pi-pixelcheck .pi-pc-result.ok{border-left:4px solid #1f8f4d}
.pi-pixelcheck .pi-pc-result.nah{border-left:4px solid #e0b45a}
.pi-pixelcheck .pi-pc-result.nein{border-left:4px solid #b3261e}
.pi-pixelcheck .pi-pc-result h3{margin:0 0 .35rem;font-size:1.1rem}
.pi-pixelcheck .pi-pc-facts{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.3rem 0 .5rem;font-size:.9rem;color:var(--pi-muted,#5b666d)}
.pi-pixelcheck .pi-pc-facts b{color:var(--pi-txt,#22282c);font-weight:600}
.pi-pixelcheck .pi-pc-alt button{font:inherit;font-size:.9rem;margin:.2rem .3rem .2rem 0;padding:.25rem .7rem;border:1px solid var(--pi-line,#e1e6e8);border-radius:99px;background:var(--pi-paper,#fff);cursor:pointer;color:var(--pi-teal-deep,#007a79)}
.pi-pixelcheck .pi-pc-alt button:hover{border-color:var(--pi-teal-deep,#007a79)}
.pi-pixelcheck .pi-pc-hint{font-size:.82rem;color:var(--pi-muted,#5b666d);margin:.5rem 0 0}
/* EN-Review 17.08.2026 #4: Merkmaltabelle mobil — lange Labels (EN „Ambient operating temperature") quetschten die Wertespalte
auf 37 px. Unter 576 px Label als Überzeile, Wert darunter. */
@media (max-width:575.98px){
#tab-attributes .product-attributes table,#tab-attributes .product-attributes tbody,#tab-attributes .product-attributes tr,#tab-attributes .product-attributes td{display:block;width:100%}
#tab-attributes .product-attributes thead{display:none}
#tab-attributes .product-attributes tr{padding:.45rem 0;border-bottom:1px solid var(--pi-line,#e1e6e8)}
#tab-attributes .product-attributes td{border:0;padding:0 .25rem}
#tab-attributes .product-attributes td:first-child{font-size:.8rem;color:var(--pi-muted,#5b666d);font-weight:600;letter-spacing:.02em}
#tab-attributes .product-attributes td.attr-characteristic{font-weight:600;padding-bottom:.15rem}
}
/* EN-Review 17.08.2026 #5: gleichwertige Kartenpaare (Dafür/Dafür nicht, Software/Pixel, Lieferumfang/Unterlagen) 1:1 statt 2:1 */
.pi-wrap .pi-grid.pi-grid--gleich{grid-template-columns:1fr 1fr}
@media (max-width:767.98px){.pi-wrap .pi-grid.pi-grid--gleich{grid-template-columns:1fr}}
/* ---- Versandseite nach Mockup 12 (child-tpl/page/shipping.tpl, Daten aus Plugin pi_versand), 28.09.2026 ---- */
.piv{margin:1.5rem 0 2rem;font-size:1rem}
.piv h2{font:600 1.5rem var(--pi-font-display,'D-DIN',Arial,sans-serif);margin:2.2rem 0 .4rem;color:var(--pi-ink,#0b0e10)}
.piv-sub{color:var(--pi-muted,#5b666d);margin:0 0 .9rem}
.piv-free{display:flex;gap:1rem;align-items:center;background:var(--pi-paper,#fff);border:1px solid var(--pi-line,#e1e6e8);border-left:5px solid var(--pi-teal,#00abaa);border-radius:14px;padding:1rem 1.25rem;margin:0 0 1.6rem}
.piv-free svg{flex:none;width:2.5rem;height:2.5rem;color:var(--pi-teal-deep,#007a79)}
.piv-free b{font:600 1.15rem var(--pi-font-display,'D-DIN',Arial,sans-serif);color:var(--pi-ink,#0b0e10);display:block}
.piv-free small{font-size:.875rem;color:var(--pi-muted,#5b666d)}
.piv-finder{background:var(--pi-work,#f3f5f6);border-radius:14px;padding:1.1rem 1.25rem;margin-bottom:1.6rem;display:grid;grid-template-columns:minmax(13rem,21rem) 1fr;gap:1.1rem;align-items:center}
.piv-finder label{font:600 1rem var(--pi-font-display,'D-DIN',Arial,sans-serif);display:block;margin-bottom:.35rem}
.piv-finder select{width:100%;font:inherit;padding:.6rem .75rem;border:1px solid var(--pi-line,#e1e6e8);border-radius:8px;background:#fff}
.piv-result{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.piv-result b{font:600 1.1rem var(--pi-font-display,'D-DIN',Arial,sans-serif);color:var(--pi-ink,#0b0e10)}
.piv-result .k{display:block;font-size:.8rem;color:var(--pi-muted,#5b666d)}
.piv-result .warn{color:#a8610b}
.piv-result a,.piv-result a:link,.piv-result a:visited{color:var(--pi-teal-deep,#007a79);font-weight:600;display:inline-block;padding:.4rem 0} /* ≥ 24 px Zielhöhe, WCAG 2.5.8 */
.piv-tabs{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:1px solid var(--pi-line,#e1e6e8);margin-bottom:1.4rem}
.piv-tabs [role=tab]{all:unset;cursor:pointer;padding:.75rem 1.1rem;font:600 1.03rem var(--pi-font-display,'D-DIN',Arial,sans-serif);color:var(--pi-muted,#5b666d);border-bottom:3px solid transparent;margin-bottom:-1px}
.piv-tabs [role=tab][aria-selected=true]{color:var(--pi-ink,#0b0e10);border-bottom-color:var(--pi-teal,#00abaa)}
.piv-tabs [role=tab]:focus-visible{outline:2px solid var(--pi-teal,#00abaa);outline-offset:2px}
.piv [role=tabpanel]{padding:0;margin:0}
.piv [role=tabpanel][hidden]{display:none}
.piv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr));gap:1.1rem}
.piv-card{background:var(--pi-paper,#fff);border:1px solid var(--pi-line,#e1e6e8);border-radius:14px;padding:1.25rem 1.4rem}
.piv-card h3{margin:0;font:600 1.2rem var(--pi-font-display,'D-DIN',Arial,sans-serif);color:var(--pi-ink,#0b0e10)}
.piv-meta{font-size:.875rem;color:var(--pi-muted,#5b666d);margin:.15rem 0 .75rem}
.piv-countries{font-size:.9rem;margin:-.25rem 0 .75rem}
.piv-rates{width:100%;border-collapse:collapse;font-size:1rem}
.piv-rates td{padding:.45rem 0;border-bottom:1px dashed var(--pi-line,#e1e6e8)}
.piv-rates td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.piv-rates tr:last-child td{border-bottom:0}
.piv-rates .piv-ask td:last-child{font-weight:400;color:var(--pi-muted,#5b666d)}
.piv-rates .piv-freerow td{color:var(--pi-teal-deep,#007a79)}
.piv-pk{font-size:.8rem;color:var(--pi-muted,#5b666d);margin-left:.4rem;white-space:nowrap}
.piv-fnote{font-size:.875rem;color:var(--pi-muted,#5b666d);margin-top:.75rem}
.piv-b2b ul{margin:.4rem 0 0;padding-left:1.25rem}
.piv-times{width:100%;border-collapse:collapse;background:var(--pi-paper,#fff);font-size:1rem}
.piv-times th{background:#e6f6f6;text-align:left;font:600 .95rem var(--pi-font-display,'D-DIN',Arial,sans-serif);padding:.75rem 1rem}
.piv-times td{padding:.7rem 1rem;border-top:1px solid var(--pi-line,#e1e6e8);vertical-align:top}
.piv-times td:last-child,.piv-times th:last-child{text-align:right;white-space:nowrap;width:1%}
.piv-times summary{cursor:pointer;color:var(--pi-teal-deep,#007a79)}
.piv-small{font-size:.875rem;color:var(--pi-muted,#5b666d);margin-top:1rem}
.piv-small p{margin:.5rem 0;overflow-wrap:anywhere} /* lange URLs im Zoll-Absatz brechen um (390 px: sonst 491 px Seitenbreite) */
.piv-closed{margin-top:1.1rem;background:var(--pi-paper,#fff);border:1px dashed #c9cfd3;border-radius:14px;padding:1rem 1.25rem;font-size:.97rem}
.piv-closed h3{margin:0 0 .35rem;font:600 1.05rem var(--pi-font-display,'D-DIN',Arial,sans-serif)}
@media (max-width:767.98px){.piv-finder{grid-template-columns:1fr}
.piv-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} /* Reiter in einer wischbaren Zeile statt drei */
.piv-tabs::-webkit-scrollbar{display:none}
.piv-tabs{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent);padding-right:2rem} /* Hinweis: weitere Reiter rechts */
.piv-tabs [role=tab]{padding:.7rem .75rem;font-size:.95rem;white-space:nowrap;flex:none}}
/* Produktkacheln (Slider „Am häufigsten bestellt“ u. a.), User 17.10.2026 „so beschissen angezeigt“:
gleiche Zeilenhöhen auch ohne Lieferzeit (Variantenväter) — Titel/Lieferzeile mit Mindesthöhe, Preis dadurch auf einer Linie,
Grundpreis in Fließtextschrift (Mono bleibt der Produktseite vorbehalten), „Andere Lieferländer“ nur auf der Produktseite. */
.et-product-slider-product{display:flex;flex-direction:column}
.et-product-slider-product .productbox-caption{flex:1 1 auto;display:flex;flex-direction:column}
.productbox-caption .productbox-title{min-height:58px}
.productbox-caption .delivery-status{min-height:40px}
.productbox-caption > .productbox-price{margin-top:.75rem}
.productbox-caption .estimated-delivery-info{display:none}
/* Lieferzeit nicht in Kacheln (User 17.10.2026): Pflicht nur vor Bestellabgabe (Art. 246a § 4 Abs. 1 EGBGB, § 312j Abs. 2 BGB) —
steht auf der Produktseite und in der Bestellübersicht. Ampel bleibt. */
.productbox-caption .delivery-status li:has(.estimated-delivery){display:none}
/* Ampelfarben shopweit wie auf der Produktseite (User 23.10.2026): „Sofort verfügbar“ grün statt Theme-Schwarz #000,
„Knapp“ Bernstein statt Oliv — beide ≥ 4,5:1 auf Weiß und auf --work #f3f5f6 */
.delivery-status .status-2,.signal_image .status-2{color:#1a7f3c}
.delivery-status .status-1,.signal_image .status-1{color:#9c5a0b}
/* Etikett „Auf Lager“ (JTL ribbon-8) doppelt zur Ampel in der Kachel — ausgeblendet (User 18.10.2026); Sale/Neu u. a. bleiben */
.productbox-ribbon.ribbon-8{display:none}
.productbox-caption .base_price,.productbox-caption .base-price{font-family:var(--pi-font-body);font-size:.78rem;letter-spacing:0;color:var(--pi-muted,#5b666d)}
/* Startseite „Am häufigsten bestellt“ (.pi-bestseller), User 17.10.2026 „wie ein Fremdkörper auf der Startseite“:
gleiche Kartenoptik wie die Sortiments-Kacheln darunter (.et-content-box-content: Rahmen 1px rgba(0,0,0,.1), Radius 14px,
Bildfläche #f3f5f6, Titel D-DIN 700 1.1rem), dezente Etiketten, Überschrift ohne Balken wie die übrigen Startseiten-Überschriften. */
.pi-bestseller .et-widget-headline{border-left:0;padding-left:0}
.pi-bestseller .slick-slide{padding:0 10px}
.pi-bestseller .et-product-slider-product{border:1px solid rgba(0,0,0,.1);border-radius:14px;background:#fff;overflow:hidden;height:100%}
.pi-bestseller .productbox-image{background:#fff}
.pi-bestseller .productbox-image img{mix-blend-mode:multiply;padding:28px}
/* keine Etiketten („Neu auf Lager“ o. ä.) im Bestseller-Block — widerspricht „Am häufigsten bestellt“ (User 17.10.2026) */
.pi-bestseller .productbox-ribbon{display:none}
.pi-bestseller .productbox-caption{padding:16px 16px 18px}
.pi-bestseller .productbox-caption .productbox-title{min-height:3.1em;font-family:var(--pi-font-display);font-weight:700;font-size:1.1rem;line-height:1.3;color:#181819}
/* Ampel nicht auf der Startseite (User 17.10.2026) — keine Pflichtangabe in Übersichten; Kategorie/Produktseite zeigen sie weiter */
.pi-bestseller .productbox-caption .delivery-status{display:none}
.pi-bestseller .productbox-caption > .productbox-price{margin-top:.6rem;font-family:var(--pi-font-display);font-size:1.1rem}
/* Merkmal-Zeile (child-tpl/productlist/item_slider.tpl, 23.10.2026): seit 24.10.2026 überall aus, auch im Bestseller-Block
(gemischte Artikel, nur Controller haben die Merkmale — User: einheitlich ohne) */
.pi-merkmalzeile{display:none}
/* Preise trotz unterschiedlich langer Merkmal-Zeile auf einer Linie (Vorgabe User 17.10.2026): Preis an den Kartenboden */
.pi-bestseller .productbox-caption > .productbox-price{margin-top:auto;padding-top:.6rem}
@media (max-width:767.98px){
.pi-bestseller .productbox-caption .productbox-title{min-height:4.0em;hyphens:manual}
/* 24.10.2026 (UX-Validierung 6, P3): Namen mobil auf 4 statt 2 Zeilen, sonst fehlt z. B. „12 mm“ (bei 360 px braucht „WS2811 RGB Pixelkette (12V) – 12 mm“ vier) */
.pi-bestseller .productbox-title .text-clamp-2{-webkit-line-clamp:4;line-clamp:4}
.pi-bestseller .productbox-image img{padding:14px}
}
/* pi-icons.css — erzeugt von tools/fa-icons/baue-css.py aus fa-solid-900.woff2 (Font Awesome Free 5, CC BY 4.0).
Ersetzt die genutzten Solid-Symbole durch CSS-Masken in Textfarbe, damit die 78-KB-Schrift nicht mehr lädt.
Nicht ersetzte Symbole laufen weiter über die Schrift (lädt dann nur auf Seiten, die sie brauchen). Nicht von Hand ändern. */
.fa.fa-search,.fas.fa-search,.fa.fa-heart,.fas.fa-heart,.fa.fa-user,.fas.fa-user,.fa.fa-th,.fas.fa-th,.fa.fa-th-list,.fas.fa-th-list,.fa.fa-check,.fas.fa-check,.fa.fa-times,.fas.fa-times,.fa.fa-home,.fas.fa-home,.fa.fa-list,.fas.fa-list,.fa.fa-chevron-left,.fas.fa-chevron-left,.fa.fa-chevron-right,.fas.fa-chevron-right,.fa.fa-info-circle,.fas.fa-info-circle,.fa.fa-arrow-left,.fas.fa-arrow-left,.fa.fa-chevron-down,.fas.fa-chevron-down,.fa.fa-globe,.fas.fa-globe,.fa.fa-filter,.fas.fa-filter,.fa.fa-bars,.fas.fa-bars,.fa.fa-truck,.fas.fa-truck,.fa.fa-caret-down,.fas.fa-caret-down,.fa.fa-caret-up,.fas.fa-caret-up,.fa.fa-caret-right,.fas.fa-caret-right,.fa.fa-envelope,.fas.fa-envelope,.fa.fa-angle-up,.fas.fa-angle-up,.fa.fa-angle-down,.fas.fa-angle-down,.fa.fa-spinner,.fas.fa-spinner,.fa.fa-chevron-circle-up,.fas.fa-chevron-circle-up,.fa.fa-dot-circle,.fas.fa-dot-circle,.fa.fa-university,.fas.fa-university,.fa.fa-building,.fas.fa-building,.fa.fa-trash,.fas.fa-trash,.fa.fa-shopping-bag,.fas.fa-shopping-bag,.fa.fa-redo-alt,.fas.fa-redo-alt{font-family:inherit!important}
.fa.fa-search::before,.fas.fa-search::before,.fa.fa-heart::before,.fas.fa-heart::before,.fa.fa-user::before,.fas.fa-user::before,.fa.fa-th::before,.fas.fa-th::before,.fa.fa-th-list::before,.fas.fa-th-list::before,.fa.fa-check::before,.fas.fa-check::before,.fa.fa-times::before,.fas.fa-times::before,.fa.fa-home::before,.fas.fa-home::before,.fa.fa-list::before,.fas.fa-list::before,.fa.fa-chevron-left::before,.fas.fa-chevron-left::before,.fa.fa-chevron-right::before,.fas.fa-chevron-right::before,.fa.fa-info-circle::before,.fas.fa-info-circle::before,.fa.fa-arrow-left::before,.fas.fa-arrow-left::before,.fa.fa-chevron-down::before,.fas.fa-chevron-down::before,.fa.fa-globe::before,.fas.fa-globe::before,.fa.fa-filter::before,.fas.fa-filter::before,.fa.fa-bars::before,.fas.fa-bars::before,.fa.fa-truck::before,.fas.fa-truck::before,.fa.fa-caret-down::before,.fas.fa-caret-down::before,.fa.fa-caret-up::before,.fas.fa-caret-up::before,.fa.fa-caret-right::before,.fas.fa-caret-right::before,.fa.fa-envelope::before,.fas.fa-envelope::before,.fa.fa-angle-up::before,.fas.fa-angle-up::before,.fa.fa-angle-down::before,.fas.fa-angle-down::before,.fa.fa-spinner::before,.fas.fa-spinner::before,.fa.fa-chevron-circle-up::before,.fas.fa-chevron-circle-up::before,.fa.fa-dot-circle::before,.fas.fa-dot-circle::before,.fa.fa-university::before,.fas.fa-university::before,.fa.fa-building::before,.fas.fa-building::before,.fa.fa-trash::before,.fas.fa-trash::before,.fa.fa-shopping-bag::before,.fas.fa-shopping-bag::before,.fa.fa-redo-alt::before,.fas.fa-redo-alt::before{content:""!important;display:inline-block;width:var(--pi-w,1em);height:1em;background-color:currentColor;-webkit-mask:var(--pi-i) center/contain no-repeat;mask:var(--pi-i) center/contain no-repeat;vertical-align:top}
.fa.fa-search::before,.fas.fa-search::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M505 -5Q512 2 512 12Q512 22 505 29L477 57Q470 64 460 64Q450 64 443 57L343 -43Q336 -50 336 -60V-76Q280 -32 208 -32Q122 -32 61 -93Q0 -154 0 -240Q0 -326 61 -387Q122 -448 208 -448Q294 -448 355 -387Q416 -326 416 -240Q416 -168 372 -112H388Q398 -112 405 -105ZM118 -150Q155 -112 208 -112Q261 -112 298 -150Q336 -187 336 -240Q336 -293 298 -330Q261 -368 208 -368Q155 -368 118 -330Q80 -293 80 -240Q80 -187 118 -150Z'/%3E%3C/svg%3E")}
.fa.fa-heart::before,.fas.fa-heart::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M463 -385Q510 -345 513 -283Q516 -221 473 -178L280 22Q270 32 257 32Q244 32 234 22L41 -178Q-2 -221 1 -283Q4 -345 51 -385Q92 -420 146 -416Q199 -411 237 -372L257 -352L277 -372Q315 -411 368 -416Q422 -420 463 -385Z'/%3E%3C/svg%3E")}
.fa.fa-user::before,.fas.fa-user::before{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M314 -230Q277 -192 224 -192Q171 -192 134 -230Q96 -267 96 -320Q96 -373 134 -410Q171 -448 224 -448Q277 -448 314 -410Q352 -373 352 -320Q352 -267 314 -230ZM314 -160Q369 -160 408 -120Q448 -81 448 -26V16Q448 36 434 50Q420 64 400 64H48Q28 64 14 50Q0 36 0 16V-26Q0 -81 40 -120Q79 -160 134 -160H151Q186 -144 224 -144Q262 -144 297 -160Z'/%3E%3C/svg%3E")}
.fa.fa-th::before,.fas.fa-th::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M149 -392V-312Q149 -302 142 -295Q135 -288 125 -288H24Q14 -288 7 -295Q0 -302 0 -312V-392Q0 -402 7 -409Q14 -416 24 -416H125Q135 -416 142 -409Q149 -402 149 -392ZM331 -152Q331 -142 324 -135Q317 -128 307 -128H205Q195 -128 188 -135Q181 -142 181 -152V-232Q181 -242 188 -249Q195 -256 205 -256H307Q317 -256 324 -249Q331 -242 331 -232ZM363 -392Q363 -402 370 -409Q377 -416 387 -416H488Q498 -416 505 -409Q512 -402 512 -392V-312Q512 -302 505 -295Q498 -288 488 -288H387Q377 -288 370 -295Q363 -302 363 -312ZM331 -312Q331 -302 324 -295Q317 -288 307 -288H205Q195 -288 188 -295Q181 -302 181 -312V-392Q181 -402 188 -409Q195 -416 205 -416H307Q317 -416 324 -409Q331 -402 331 -392ZM125 -256Q135 -256 142 -249Q149 -242 149 -232V-152Q149 -142 142 -135Q135 -128 125 -128H24Q14 -128 7 -135Q0 -142 0 -152V-232Q0 -242 7 -249Q14 -256 24 -256ZM0 -72Q0 -82 7 -89Q14 -96 24 -96H125Q135 -96 142 -89Q149 -82 149 -72V8Q149 18 142 25Q135 32 125 32H24Q14 32 7 25Q0 18 0 8ZM387 -128Q377 -128 370 -135Q363 -142 363 -152V-232Q363 -242 370 -249Q377 -256 387 -256H488Q498 -256 505 -249Q512 -242 512 -232V-152Q512 -142 505 -135Q498 -128 488 -128ZM387 32Q377 32 370 25Q363 18 363 8V-72Q363 -82 370 -89Q377 -96 387 -96H488Q498 -96 505 -89Q512 -82 512 -72V8Q512 18 505 25Q498 32 488 32ZM181 -72Q181 -82 188 -89Q195 -96 205 -96H307Q317 -96 324 -89Q331 -82 331 -72V8Q331 18 324 25Q317 32 307 32H205Q195 32 188 25Q181 18 181 8Z'/%3E%3C/svg%3E")}
.fa.fa-th-list::before,.fas.fa-th-list::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M149 -232V-152Q149 -142 142 -135Q135 -128 125 -128H24Q14 -128 7 -135Q0 -142 0 -152V-232Q0 -242 7 -249Q14 -256 24 -256H125Q135 -256 142 -249Q149 -242 149 -232ZM0 -72Q0 -82 7 -89Q14 -96 24 -96H125Q135 -96 142 -89Q149 -82 149 -72V8Q149 18 142 25Q135 32 125 32H24Q14 32 7 25Q0 18 0 8ZM125 -416Q135 -416 142 -409Q149 -402 149 -392V-312Q149 -302 142 -295Q135 -288 125 -288H24Q14 -288 7 -295Q0 -302 0 -312V-392Q0 -402 7 -409Q14 -416 24 -416ZM205 32Q195 32 188 25Q181 18 181 8V-72Q181 -82 188 -89Q195 -96 205 -96H488Q498 -96 505 -89Q512 -82 512 -72V8Q512 18 505 25Q498 32 488 32ZM181 -392Q181 -402 188 -409Q195 -416 205 -416H488Q498 -416 505 -409Q512 -402 512 -392V-312Q512 -302 505 -295Q498 -288 488 -288H205Q195 -288 188 -295Q181 -302 181 -312ZM205 -128Q195 -128 188 -135Q181 -142 181 -152V-232Q181 -242 188 -249Q195 -256 205 -256H488Q498 -256 505 -249Q512 -242 512 -232V-152Q512 -142 505 -135Q498 -128 488 -128Z'/%3E%3C/svg%3E")}
.fa.fa-check::before,.fas.fa-check::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M174 -9 7 -175Q0 -182 0 -193Q0 -204 7 -211L44 -247Q51 -255 62 -255Q72 -255 80 -247L192 -135L432 -375Q440 -383 450 -383Q461 -383 468 -375L505 -339Q512 -332 512 -321Q512 -310 505 -303L210 -9Q203 -1 192 -1Q181 -1 174 -9Z'/%3E%3C/svg%3E")}
.fa.fa-times::before,.fas.fa-times::before{--pi-w:0.6875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 352 512'%3E%3Cpath d='M244 -192 344 -92Q353 -83 353 -70Q353 -57 344 -47L322 -25Q312 -16 299 -16Q286 -16 277 -25L177 -125L77 -25Q68 -16 55 -16Q42 -16 32 -25L10 -47Q1 -57 1 -70Q1 -83 10 -92L110 -192L10 -292Q1 -301 1 -314Q1 -327 10 -337L32 -359Q42 -368 55 -368Q68 -368 77 -359L177 -259L277 -359Q286 -368 299 -368Q312 -368 322 -359L344 -337Q353 -327 353 -314Q353 -301 344 -292Z'/%3E%3C/svg%3E")}
.fa.fa-home::before,.fas.fa-home::before{--pi-w:1.125em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 576 512'%3E%3Cpath d='M281 -300Q285 -302 289 -302Q293 -302 297 -300L481 -148V16Q481 23 476 28Q472 32 465 32H353Q346 32 342 27Q337 22 337 16V-80Q337 -87 332 -92Q328 -96 321 -96H257Q250 -96 246 -92Q241 -87 241 -80V16Q241 22 236 27Q232 32 225 32H113Q106 32 102 28Q97 23 97 16V-148ZM573 -197Q577 -193 577 -187Q577 -183 574 -180L549 -149Q545 -144 540 -144Q535 -144 532 -147L297 -341Q293 -343 289 -343Q285 -343 281 -341L46 -147Q43 -144 39 -144Q33 -144 29 -149L4 -180Q1 -183 1 -187Q1 -193 5 -197L258 -405Q272 -416 289 -416Q306 -416 319 -405L409 -331V-404Q409 -409 412 -412Q416 -416 421 -416H477Q482 -416 486 -412Q489 -409 489 -404V-265Z'/%3E%3C/svg%3E")}
.fa.fa-list::before,.fas.fa-list::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M80 -80Q87 -80 92 -76Q96 -71 96 -64V0Q96 7 92 12Q87 16 80 16H16Q9 16 4 12Q0 7 0 0V-64Q0 -71 4 -76Q9 -80 16 -80ZM80 -400Q87 -400 92 -396Q96 -391 96 -384V-320Q96 -313 92 -308Q87 -304 80 -304H16Q9 -304 4 -308Q0 -313 0 -320V-384Q0 -391 4 -396Q9 -400 16 -400ZM80 -240Q87 -240 92 -236Q96 -231 96 -224V-160Q96 -153 92 -148Q87 -144 80 -144H16Q9 -144 4 -148Q0 -153 0 -160V-224Q0 -231 4 -236Q9 -240 16 -240ZM496 -64Q503 -64 508 -60Q512 -55 512 -48V-16Q512 -9 508 -4Q503 0 496 0H176Q169 0 164 -4Q160 -9 160 -16V-48Q160 -55 164 -60Q169 -64 176 -64ZM496 -384Q503 -384 508 -380Q512 -375 512 -368V-336Q512 -329 508 -324Q503 -320 496 -320H176Q169 -320 164 -324Q160 -329 160 -336V-368Q160 -375 164 -380Q169 -384 176 -384ZM496 -224Q503 -224 508 -220Q512 -215 512 -208V-176Q512 -169 508 -164Q503 -160 496 -160H176Q169 -160 164 -164Q160 -169 160 -176V-208Q160 -215 164 -220Q169 -224 176 -224Z'/%3E%3C/svg%3E")}
.fa.fa-chevron-left::before,.fas.fa-chevron-left::before{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M35 -209 229 -403Q236 -410 246 -410Q256 -410 263 -403L285 -381Q292 -374 292 -364Q293 -354 286 -347L131 -192L286 -37Q293 -30 292 -20Q292 -10 285 -3L263 19Q256 26 246 26Q236 26 229 19L35 -175Q27 -182 27 -192Q27 -202 35 -209Z'/%3E%3C/svg%3E")}
.fa.fa-chevron-right::before,.fas.fa-chevron-right::before{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M285 -175 91 19Q84 26 74 26Q64 26 57 19L35 -3Q28 -10 28 -20Q27 -30 34 -37L189 -192L34 -347Q27 -354 28 -364Q28 -374 35 -381L57 -403Q64 -410 74 -410Q84 -410 91 -403L285 -209Q293 -202 293 -192Q293 -182 285 -175Z'/%3E%3C/svg%3E")}
.fa.fa-info-circle::before,.fas.fa-info-circle::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M80 -368Q153 -440 256 -440Q359 -440 432 -368Q504 -295 504 -192Q504 -89 432 -16Q359 56 256 56Q153 56 80 -16Q8 -89 8 -192Q8 -295 80 -368ZM286 -318Q273 -330 256 -330Q239 -330 226 -318Q214 -305 214 -288Q214 -271 226 -258Q239 -246 256 -246Q273 -246 286 -258Q298 -271 298 -288Q298 -305 286 -318ZM312 -76V-100Q312 -112 300 -112H288V-212Q288 -224 276 -224H212Q200 -224 200 -212V-188Q200 -176 212 -176H224V-112H212Q200 -112 200 -100V-76Q200 -64 212 -64H300Q312 -64 312 -76Z'/%3E%3C/svg%3E")}
.fa.fa-arrow-left::before,.fas.fa-arrow-left::before{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M259 -3 236 19Q229 26 219 26Q209 26 202 19L8 -175Q1 -182 1 -192Q1 -202 8 -209L202 -403Q209 -410 219 -410Q229 -410 236 -403L259 -381Q266 -374 266 -364Q265 -354 258 -347L138 -232H425Q435 -232 442 -225Q449 -218 449 -208V-176Q449 -166 442 -159Q435 -152 425 -152H138L258 -37Q265 -30 266 -20Q266 -10 259 -3Z'/%3E%3C/svg%3E")}
.fa.fa-chevron-down::before,.fas.fa-chevron-down::before{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M207 -67 13 -261Q6 -268 6 -278Q6 -288 13 -295L35 -317Q42 -324 52 -324Q62 -325 69 -318L224 -163L379 -318Q386 -325 396 -324Q406 -324 413 -317L435 -295Q442 -288 442 -278Q442 -268 435 -261L241 -67Q234 -59 224 -59Q214 -59 207 -67Z'/%3E%3C/svg%3E")}
.fa.fa-globe::before,.fas.fa-globe::before{--pi-w:0.9688em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 496 512'%3E%3Cpath d='M336 -288H160Q171 -356 195 -398Q219 -440 248 -440Q277 -440 301 -398Q325 -356 336 -288ZM155 -256H341Q344 -224 344 -192Q344 -160 341 -128H155Q152 -160 152 -192Q152 -224 155 -256ZM477 -288H369Q354 -380 319 -430Q372 -414 414 -376Q455 -339 477 -288ZM177 -430Q141 -380 127 -288H19Q41 -339 82 -376Q124 -414 177 -430ZM487 -256Q496 -224 496 -192Q496 -160 487 -128H373Q376 -161 376 -192Q376 -223 373 -256ZM120 -192Q120 -162 123 -128H9Q0 -161 0 -192Q0 -223 9 -256H123Q120 -223 120 -192ZM160 -96H336Q325 -28 301 14Q277 56 248 56Q219 56 195 14Q171 -28 160 -96ZM319 46Q355 -4 369 -96H477Q455 -45 414 -8Q372 30 319 46ZM19 -96H127Q142 -4 177 46Q124 30 82 -8Q41 -45 19 -96Z'/%3E%3C/svg%3E")}
.fa.fa-filter::before,.fas.fa-filter::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M489 -448Q505 -448 511 -433Q517 -418 506 -407L321 -222V40Q321 55 308 62Q295 68 283 60L203 4Q193 -4 193 -16V-222L8 -407Q-3 -418 3 -433Q9 -448 25 -448Z'/%3E%3C/svg%3E")}
.fa.fa-bars::before,.fas.fa-bars::before{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M16 -316Q9 -316 4 -320Q0 -325 0 -332V-372Q0 -379 4 -384Q9 -388 16 -388H432Q439 -388 444 -384Q448 -379 448 -372V-332Q448 -325 444 -320Q439 -316 432 -316ZM16 -156Q9 -156 4 -160Q0 -165 0 -172V-212Q0 -219 4 -224Q9 -228 16 -228H432Q439 -228 444 -224Q448 -219 448 -212V-172Q448 -165 444 -160Q439 -156 432 -156ZM16 4Q9 4 4 0Q0 -5 0 -12V-52Q0 -59 4 -64Q9 -68 16 -68H432Q439 -68 444 -64Q448 -59 448 -52V-12Q448 -5 444 0Q439 4 432 4Z'/%3E%3C/svg%3E")}
.fa.fa-truck::before,.fas.fa-truck::before{--pi-w:1.25em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 640 512'%3E%3Cpath d='M624 -96Q631 -96 636 -92Q640 -87 640 -80V-48Q640 -41 636 -36Q631 -32 624 -32H576Q576 8 548 36Q520 64 480 64Q440 64 412 36Q384 8 384 -32H256Q256 8 228 36Q200 64 160 64Q120 64 92 36Q64 8 64 -32H48Q28 -32 14 -46Q0 -60 0 -80V-400Q0 -420 14 -434Q28 -448 48 -448H368Q388 -448 402 -434Q416 -420 416 -400V-352H460Q480 -352 494 -338L594 -238Q608 -224 608 -204V-96ZM126 2Q140 16 160 16Q180 16 194 2Q208 -12 208 -32Q208 -52 194 -66Q180 -80 160 -80Q140 -80 126 -66Q112 -52 112 -32Q112 -12 126 2ZM446 2Q460 16 480 16Q500 16 514 2Q528 -12 528 -32Q528 -52 514 -66Q500 -80 480 -80Q460 -80 446 -66Q432 -52 432 -32Q432 -12 446 2ZM560 -192V-204L460 -304H416V-192Z'/%3E%3C/svg%3E")}
.fa.fa-caret-down::before,.fas.fa-caret-down::before{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M31 -256H289Q302 -256 307 -244Q312 -231 303 -222L174 -93Q168 -87 160 -87Q152 -87 146 -93L17 -222Q8 -231 13 -244Q18 -256 31 -256Z'/%3E%3C/svg%3E")}
.fa.fa-caret-up::before,.fas.fa-caret-up::before{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M289 -96H31Q18 -96 13 -108Q8 -121 17 -130L146 -259Q152 -265 160 -265Q168 -265 174 -259L303 -130Q312 -121 307 -108Q302 -96 289 -96Z'/%3E%3C/svg%3E")}
.fa.fa-caret-right::before,.fas.fa-caret-right::before{--pi-w:0.375em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 192 512'%3E%3Cpath d='M0 -63V-321Q0 -334 12 -339Q25 -344 34 -335L163 -206Q169 -200 169 -192Q169 -184 163 -178L34 -49Q25 -40 12 -45Q0 -50 0 -63Z'/%3E%3C/svg%3E")}
.fa.fa-envelope::before,.fas.fa-envelope::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M502 -257Q505 -260 508 -258Q512 -256 512 -252V-48Q512 -28 498 -14Q484 0 464 0H48Q28 0 14 -14Q0 -28 0 -48V-252Q0 -256 4 -258Q7 -259 10 -257Q43 -232 164 -144Q166 -142 178 -133Q189 -124 196 -120Q203 -115 214 -108Q225 -102 236 -99Q246 -96 256 -96Q266 -96 276 -99Q287 -102 298 -108Q310 -115 317 -120Q324 -125 335 -134Q346 -142 348 -144Q466 -229 502 -257ZM256 -128Q248 -128 236 -134Q225 -139 218 -144Q211 -148 198 -158Q184 -169 183 -169Q61 -258 9 -298Q0 -305 0 -317V-336Q0 -356 14 -370Q28 -384 48 -384H464Q484 -384 498 -370Q512 -356 512 -336V-317Q512 -305 503 -298Q454 -260 329 -169Q328 -169 314 -158Q301 -148 294 -144Q287 -139 276 -134Q264 -128 256 -128Z'/%3E%3C/svg%3E")}
.fa.fa-angle-up::before,.fas.fa-angle-up::before{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M178 -288 314 -152Q321 -145 321 -135Q321 -125 314 -118L291 -96Q284 -89 274 -89Q264 -89 257 -96L161 -192L65 -96Q58 -89 48 -89Q38 -89 31 -96L8 -118Q1 -125 1 -135Q1 -145 8 -152L144 -288Q151 -295 161 -295Q171 -295 178 -288Z'/%3E%3C/svg%3E")}
.fa.fa-angle-down::before,.fas.fa-angle-down::before{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M144 -96 8 -232Q1 -239 1 -249Q1 -259 8 -266L31 -288Q38 -295 48 -295Q58 -295 65 -288L161 -192L257 -288Q264 -295 274 -295Q284 -295 291 -288L314 -266Q321 -259 321 -249Q321 -239 314 -232L178 -96Q171 -89 161 -89Q151 -89 144 -96Z'/%3E%3C/svg%3E")}
.fa.fa-spinner::before,.fas.fa-spinner::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M290 -434Q304 -420 304 -400Q304 -380 290 -366Q276 -352 256 -352Q236 -352 222 -366Q208 -380 208 -400Q208 -420 222 -434Q236 -448 256 -448Q276 -448 290 -434ZM222 -18Q236 -32 256 -32Q276 -32 290 -18Q304 -4 304 16Q304 36 290 50Q276 64 256 64Q236 64 222 50Q208 36 208 16Q208 -4 222 -18ZM430 -226Q444 -240 464 -240Q484 -240 498 -226Q512 -212 512 -192Q512 -172 498 -158Q484 -144 464 -144Q444 -144 430 -158Q416 -172 416 -192Q416 -212 430 -226ZM82 -226Q96 -212 96 -192Q96 -172 82 -158Q68 -144 48 -144Q28 -144 14 -158Q0 -172 0 -192Q0 -212 14 -226Q28 -240 48 -240Q68 -240 82 -226ZM75 -79Q89 -93 109 -93Q129 -93 143 -79Q157 -65 157 -45Q157 -25 143 -11Q129 3 109 3Q89 3 75 -11Q61 -25 61 -45Q61 -65 75 -79ZM369 -79Q383 -93 403 -93Q423 -93 437 -79Q451 -65 451 -45Q451 -25 437 -11Q423 3 403 3Q383 3 369 -11Q355 -25 355 -45Q355 -65 369 -79ZM75 -373Q89 -387 109 -387Q129 -387 143 -373Q157 -359 157 -339Q157 -319 143 -305Q129 -291 109 -291Q89 -291 75 -305Q61 -319 61 -339Q61 -359 75 -373Z'/%3E%3C/svg%3E")}
.fa.fa-chevron-circle-up::before,.fas.fa-chevron-circle-up::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M80 -16Q8 -89 8 -192Q8 -295 80 -368Q153 -440 256 -440Q359 -440 432 -368Q504 -295 504 -192Q504 -89 432 -16Q359 56 256 56Q153 56 80 -16ZM239 -306 104 -170Q96 -163 96 -153Q96 -143 104 -136L120 -120Q128 -112 138 -112Q147 -112 154 -120L256 -221L358 -120Q365 -112 375 -112Q385 -112 392 -120L408 -136Q416 -144 416 -154Q416 -163 408 -170L273 -306Q266 -313 256 -313Q246 -313 239 -306Z'/%3E%3C/svg%3E")}
.fa.fa-dot-circle::before,.fas.fa-dot-circle::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M80 -368Q153 -440 256 -440Q359 -440 432 -368Q504 -295 504 -192Q504 -89 432 -16Q359 56 256 56Q153 56 80 -16Q8 -89 8 -192Q8 -295 80 -368ZM312 -136Q336 -159 336 -192Q336 -225 312 -248Q289 -272 256 -272Q223 -272 200 -248Q176 -225 176 -192Q176 -159 200 -136Q223 -112 256 -112Q289 -112 312 -136Z'/%3E%3C/svg%3E")}
.fa.fa-university::before,.fas.fa-university::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M496 -320V-304Q496 -296 488 -296H464V-284Q464 -272 452 -272H60Q48 -272 48 -284V-296H24Q16 -296 16 -304V-320Q16 -325 21 -327L253 -415Q254 -416 256 -416Q258 -416 259 -415L491 -327Q496 -325 496 -320ZM472 -16Q482 -16 489 -9Q496 -2 496 8V24Q496 32 488 32H24Q16 32 16 24V8Q16 -2 23 -9Q30 -16 40 -16ZM96 -256H160V-64H224V-256H288V-64H352V-256H416V-64H452Q464 -64 464 -52V-32H48V-52Q48 -64 60 -64H96Z'/%3E%3C/svg%3E")}
.fa.fa-building::before,.fas.fa-building::before{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M436 32Q448 32 448 44V64H0V44Q0 32 12 32H32V-424Q32 -434 39 -441Q46 -448 56 -448H392Q402 -448 409 -441Q416 -434 416 -424V32ZM128 -372V-332Q128 -320 140 -320H180Q192 -320 192 -332V-372Q192 -384 180 -384H140Q128 -384 128 -372ZM128 -276V-236Q128 -224 140 -224H180Q192 -224 192 -236V-276Q192 -288 180 -288H140Q128 -288 128 -276ZM180 -128Q192 -128 192 -140V-180Q192 -192 180 -192H140Q128 -192 128 -180V-140Q128 -128 140 -128ZM256 32V-52Q256 -64 244 -64H204Q192 -64 192 -52V32ZM320 -140V-180Q320 -192 308 -192H268Q256 -192 256 -180V-140Q256 -128 268 -128H308Q320 -128 320 -140ZM320 -236V-276Q320 -288 308 -288H268Q256 -288 256 -276V-236Q256 -224 268 -224H308Q320 -224 320 -236ZM320 -332V-372Q320 -384 308 -384H268Q256 -384 256 -372V-332Q256 -320 268 -320H308Q320 -320 320 -332Z'/%3E%3C/svg%3E")}
.fa.fa-trash::before,.fas.fa-trash::before{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M432 -416Q439 -416 444 -412Q448 -407 448 -400V-368Q448 -361 444 -356Q439 -352 432 -352H16Q9 -352 4 -356Q0 -361 0 -368V-400Q0 -407 4 -412Q9 -416 16 -416H136L145 -435Q152 -448 167 -448H281Q296 -448 303 -435L312 -416ZM53 19 32 -320H416L395 19Q394 38 380 51Q366 64 347 64H101Q82 64 68 51Q54 38 53 19Z'/%3E%3C/svg%3E")}
.fa.fa-shopping-bag::before,.fas.fa-shopping-bag::before{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M352 -288H448V-16Q448 17 424 40Q401 64 368 64H80Q47 64 24 40Q0 17 0 -16V-288H96V-320Q96 -373 134 -410Q171 -448 224 -448Q277 -448 314 -410Q352 -373 352 -320ZM160 -320V-288H288V-320Q288 -346 269 -365Q250 -384 224 -384Q198 -384 179 -365Q160 -346 160 -320ZM303 -207Q310 -200 320 -200Q330 -200 337 -207Q344 -214 344 -224Q344 -234 337 -241Q330 -248 320 -248Q310 -248 303 -241Q296 -234 296 -224Q296 -214 303 -207ZM111 -207Q118 -200 128 -200Q138 -200 145 -207Q152 -214 152 -224Q152 -234 145 -241Q138 -248 128 -248Q118 -248 111 -241Q104 -234 104 -224Q104 -214 111 -207Z'/%3E%3C/svg%3E")}
.fa.fa-redo-alt::before,.fas.fa-redo-alt::before{--pi-w:1.0em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 512 512'%3E%3Cpath d='M256 -440Q356 -440 427 -371L463 -407Q474 -418 489 -412Q504 -406 504 -390V-256Q504 -246 497 -239Q490 -232 480 -232H346Q330 -232 324 -247Q318 -262 329 -273L371 -315Q323 -359 257 -360Q188 -361 138 -312Q87 -262 88 -191Q89 -122 138 -73Q186 -24 256 -24Q319 -24 367 -66Q375 -73 383 -65L423 -25Q432 -16 422 -8Q351 56 256 56Q153 56 80 -16Q8 -89 8 -192Q8 -295 81 -368Q154 -440 256 -440Z'/%3E%3C/svg%3E")}
html .dropdown-toggle:not(.et-dropdown-toggle)::after,html [data-toggle=collapse]:not(.et-dropdown-toggle):not(.navbar-toggler):not(.et-collapse)::after{--pi-w:0.875em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 448 512'%3E%3Cpath d='M207 -67 13 -261Q6 -268 6 -278Q6 -288 13 -295L35 -317Q42 -324 52 -324Q62 -325 69 -318L224 -163L379 -318Q386 -325 396 -324Q406 -324 413 -317L435 -295Q442 -288 442 -278Q442 -268 435 -261L241 -67Q234 -59 224 -59Q214 -59 207 -67Z'/%3E%3C/svg%3E");font-family:inherit!important;content:""!important;display:inline-block;width:var(--pi-w,1em);height:1em;background-color:currentColor;-webkit-mask:var(--pi-i) center/contain no-repeat;mask:var(--pi-i) center/contain no-repeat}
html .slick-prev::after{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M35 -209 229 -403Q236 -410 246 -410Q256 -410 263 -403L285 -381Q292 -374 292 -364Q293 -354 286 -347L131 -192L286 -37Q293 -30 292 -20Q292 -10 285 -3L263 19Q256 26 246 26Q236 26 229 19L35 -175Q27 -182 27 -192Q27 -202 35 -209Z'/%3E%3C/svg%3E");font-family:inherit!important;content:""!important;display:inline-block;width:var(--pi-w,1em);height:1em;background-color:currentColor;-webkit-mask:var(--pi-i) center/contain no-repeat;mask:var(--pi-i) center/contain no-repeat}
html .slick-next::after{--pi-w:0.625em;--pi-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -448 320 512'%3E%3Cpath d='M285 -175 91 19Q84 26 74 26Q64 26 57 19L35 -3Q28 -10 28 -20Q27 -30 34 -37L189 -192L34 -347Q27 -354 28 -364Q28 -374 35 -381L57 -403Q64 -410 74 -410Q84 -410 91 -403L285 -209Q293 -202 293 -192Q293 -182 285 -175Z'/%3E%3C/svg%3E");font-family:inherit!important;content:""!important;display:inline-block;width:var(--pi-w,1em);height:1em;background-color:currentColor;-webkit-mask:var(--pi-i) center/contain no-repeat;mask:var(--pi-i) center/contain no-repeat}