/* custom.css — generiert aus legacy-head.css + pixel-imperium.css + farben-child.css + typografie-child.css (2026-08-18).
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); }
/* --- 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;
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);
}
/* --- 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;
}
/* 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}
.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:2;margin-top:1rem} /* ET360 setzt #add-to-cart auf 0 */
.product-offer .stock-information{order:3} /* Desktop- und Mobilfassung (ET360 blendet je Breite eine ein) */
.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}
/* 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;margin:0;padding:.55rem 1rem;font-weight:600;border-width:1.5px;
border-color:var(--pi-teal-deep,#007a79);color:var(--pi-teal-deep,#007a79);background:var(--pi-paper,#fff);border-radius:8px}
#add-to-cart .pi-cta-beratung:hover,#add-to-cart .pi-cta-beratung:focus-visible{background:var(--pi-teal-deep,#007a79);color:#fff}
#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 → CTA → Zeile → Amazon | PayPal */
#add-to-cart #quantity-grp{order:1}
#add-to-cart .pi-cta-beratung{order:2}
#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}
/* 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)}
/* ---- 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{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 */
.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}
/* 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}
.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. */
.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}}