body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/**
 * KCMinishop — public Storefront-Styles (Kunden-CI via --shop-* Custom Properties)
 *
 * BEWUSST OHNE --cbk-*-Tokens: der Shop traegt das CI des Kunden, nicht den
 * CBK-Look (Spec §10 + §14 R8; das CBK-Design-System ist zudem login-gated).
 * Farbwerte kommen aus tl_KCMinishop_shops.ci_* (injiziert in :root).
 *
 * Beads: cbk-ht1w.11, Epic: cbk-ht1w
 */

.msh-shop {
    font-family: var(--shop-font, system-ui, sans-serif);
    color: #26292e;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    font-size: 16px;
}
.msh-shop *, .msh-shop *::before, .msh-shop *::after { box-sizing: border-box; }
.msh-shop img { max-width: 100%; height: auto; }
/* A11y-Fix (Design-Gate Blocker): --shop-primary roh als TEXTfarbe auf weissem Grund
   ist gegen eine helle Kunden-CI ungeschuetzt (sanitizeHex prueft nur das Format, nicht
   die Helligkeit) — --shop-primary-text faellt bei zu geringem Kontrast auf eine dunkle
   Ersatzfarbe zurueck (KCMinishopColor::textFor). */
.msh-shop a { color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); }

/* ---------- Header ---------- */
.msh-header {
    background: var(--shop-primary, #1f3a5f);
    color: #fff;
}
.msh-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.msh-brand { display: flex; align-items: center; text-decoration: none; color: inherit; }
/* A11y-Fix (B2): ".msh-shop a" (0-0-1-1) schlug bisher "color: inherit" oben und
   faerbte den logo-losen Markentitel (.msh-brand-title) in --shop-primary ein — auf
   Header-Hintergrund background: --shop-primary war der Text damit UNSICHTBAR
   (Text == Hintergrund) fuer jeden Shop ohne Logo. Erzwingt die kontrastsichere
   --shop-primary-ink-Farbe. */
.msh-shop a.msh-brand { color: var(--shop-primary-ink, #fff); }
.msh-logo { max-height: 48px; width: auto; }
.msh-brand-title { font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; }
.msh-header-text { font-size: .85rem; opacity: .85; flex: 1; }
/* MA-5: Katalog-Nav-Link -- nur gerendert wenn ein aktiver Blaetterkatalog mit Seiten
   existiert (ModuleKCMinishopPublic::setCommonTemplateVars). Sitzt links vom Warenkorb-
   Link, dessen "margin-left: auto" schiebt beide gemeinsam an den rechten Rand. */
.msh-catalog-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--shop-primary-ink, #fff);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .9rem;
}
.msh-catalog-link:hover { background: rgba(255,255,255,.12); }
.msh-shop a.msh-catalog-link { color: var(--shop-primary-ink, #fff); }
.msh-catalog-link + .msh-cart-link { margin-left: 0; }
.msh-cart-link {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--shop-primary-ink, #fff);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,.12);
}
/* A11y-Fix: ".msh-shop a" (0-0-1-1) schlug bisher die Basisregel oben (0-0-1-0) und
   faerbte den Header-Warenkorb-Link (inkl. SVG-Icon via stroke=currentColor) in
   --shop-primary statt weiss/dunkel-sicher ein. Hoehere Spezifitaet erzwingt den Sieg
   der kontrastsicheren --shop-primary-ink-Farbe unabhaengig von der Kunden-CI. */
.msh-shop a.msh-cart-link { color: var(--shop-primary-ink, #fff); }
.msh-cart-link:hover { background: rgba(255,255,255,.22); }
.msh-cart-count {
    background: var(--shop-accent, #c93a30);
    /* A11y-Fix (W2): fest weisser Text auf --shop-accent kann je Kunden-CI kollabieren
       — an die kontrastgeprüfte --shop-accent-ink-Variable anschliessen. */
    color: var(--shop-accent-ink, #fff);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* ---------- Layout ---------- */
.msh-main {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 48px;
    flex: 1;
}
/* A11y-Fix (Design-Gate Blocker): --shop-primary als TEXTfarbe -> --shop-primary-text
   (Kaskade Kommentar bei ".msh-shop a" oben). */
.msh-main h1 { font-size: 1.6rem; margin: 0 0 18px; color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); }

.msh-list { display: grid; grid-template-columns: 230px 1fr; gap: 28px; }
@media (max-width: 760px) { .msh-list { grid-template-columns: 1fr; } }

/* ---------- Sidebar / Rubriken ---------- */
/* A11y-Fix (Design-Gate Blocker): --shop-primary als TEXTfarbe -> --shop-primary-text. */
.msh-sidebar-title { font-size: 1rem; margin: 0 0 10px; color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); }
.msh-rubrics { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.msh-rubrics a {
    display: block;
    padding: 7px 10px;
    text-decoration: none;
    border-radius: 6px;
    color: #26292e;
}
.msh-rubrics a:hover { background: var(--shop-secondary, #f5f6f8); }
.msh-rubrics li.active > a {
    background: var(--shop-primary, #1f3a5f);
    /* A11y-Fix (W2): fest weisser Text auf --shop-primary kann je Kunden-CI kollabieren
       — an die kontrastgeprüfte --shop-primary-ink-Variable anschliessen. */
    color: var(--shop-primary-ink, #fff);
    font-weight: 600;
}
.msh-rubrics ul { list-style: none; margin: 0 0 0 12px; padding: 0; }

/* ---------- Artikel-Grid ---------- */
.msh-list-meta { font-size: .85rem; color: #6b7280; margin-bottom: 12px; }
.msh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.msh-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: box-shadow .15s ease;
}
.msh-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.msh-card-imagelink {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--shop-secondary, #f5f6f8);
    overflow: hidden;
}
.msh-card-imagelink img { width: 100%; height: 100%; object-fit: contain; }
.msh-noimage {
    width: 100%; height: 100%;
    min-height: 120px;
    display: flex; align-items: center; justify-content: center;
    /* A11y-Fix (B3): #6b7280 auf --shop-secondary faellt bei heller Kunden-CI unter
       WCAG-AA (4.5:1), wie beim bereits gefixten Footer. #565c66 haelt sicher darueber. */
    color: #565c66; font-size: .85rem;
    background: var(--shop-secondary, #f5f6f8);
}
.msh-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.msh-card-title { font-size: .95rem; margin: 0; line-height: 1.35; }
.msh-card-title a { text-decoration: none; color: #26292e; }
/* A11y-Fix (Design-Gate Blocker): --shop-primary als TEXTfarbe -> --shop-primary-text. */
.msh-card-title a:hover { color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); }
.msh-artnr { font-size: .78rem; color: #6b7280; margin: 0; }
.msh-card-price { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
/* A11y-Fix (Design-Gate Blocker, KRITISCH): Preisanzeige nutzte --shop-primary roh als
   Textfarbe auf weissem Grund — bei heller Kunden-CI (z.B. #ffd23f, 1,44:1 gegen Weiss)
   war der Preis unlesbar. --shop-primary-text schuetzt via KCMinishopColor::textFor. */
.msh-price { font-weight: 700; color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); font-size: 1.05rem; }
.msh-price small { font-weight: 400; color: #6b7280; font-size: .72rem; }
.msh-price--gross { font-size: .9rem; }
.msh-price--onrequest { color: #6b7280; font-weight: 500; font-size: .9rem; }
.msh-vpe { font-size: .78rem; color: #6b7280; }

/* ---------- Buttons ---------- */
.msh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 9px 16px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: filter .12s ease;
}
.msh-btn--primary { background: var(--shop-accent, #c93a30); color: var(--shop-accent-ink, #fff); }
/* A11y-Fix: ".msh-shop a" (0-0-1-1) schlug bisher die Basisregel oben (0-0-1-0) und
   faerbte "In den Warenkorb"/"Zur Reservierung" (jeweils <a>) in --shop-primary statt
   Weiss ein — bei brauner Kunden-CI kollabierte der Kontrast auf 1,67:1. Hoehere
   Spezifitaet erzwingt den Sieg der kontrastsicheren --shop-accent-ink-Farbe, egal
   welche Kunden-CI-Farbe konfiguriert ist. */
.msh-shop a.msh-btn--primary { color: var(--shop-accent-ink, #fff); }
.msh-btn--primary:hover { filter: brightness(.92); }
.msh-btn--ghost {
    background: transparent;
    /* --shop-primary-text: primary selbst, ausser die Farbe waere auf weiss zu hell
       lesbar (dann faellt der PHP-Helfer auf einen dunklen Text zurueck) — schuetzt
       den Ghost-Button ohne fuer jede Kunden-CI-Kombination extra Regeln zu bauen. */
    border-color: var(--shop-primary-text, var(--shop-primary, #1f3a5f));
    color: var(--shop-primary-text, var(--shop-primary, #1f3a5f));
}
/* A11y-Fix (B1): ".msh-shop a" (0-0-1-1) schlug bisher die Basisregel oben (0-0-1-0)
   und faerbte Ghost-Buttons/Links ("Weiter einkaufen"/"Details"/"Zur Artikeluebersicht",
   jeweils <a class="msh-btn msh-btn--ghost">) fest in --shop-primary statt in die
   kontrastgeprüfte --shop-primary-text-Variante. Analog zu .msh-btn--primary/.msh-cart-link
   erzwingt hoehere Spezifitaet den Sieg der sicheren Farbe. */
.msh-shop a.msh-btn--ghost { color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); }
.msh-btn--ghost:hover { background: var(--shop-secondary, #f5f6f8); }
.msh-btn--sm { padding: 7px 12px; font-size: .82rem; }
.msh-btn--lg { padding: 12px 22px; font-size: 1rem; width: 100%; }

/* ---------- Pagination ---------- */
.msh-pagination { margin-top: 24px; display: flex; gap: 6px; flex-wrap: wrap; }
.msh-pagination a, .msh-pagination .current {
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    font-size: .9rem;
}
/* A11y-Fix (W2): fest weisser Text auf --shop-primary kann je Kunden-CI kollabieren
   — an die kontrastgeprüfte --shop-primary-ink-Variable anschliessen. */
.msh-pagination .current { background: var(--shop-primary, #1f3a5f); color: var(--shop-primary-ink, #fff); border-color: var(--shop-primary, #1f3a5f); }

/* ---------- Detail ---------- */
.msh-breadcrumb { font-size: .85rem; margin-bottom: 16px; color: #6b7280; }
.msh-detail-grid { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 32px; }
@media (max-width: 760px) { .msh-detail-grid { grid-template-columns: 1fr; } }
.msh-detail-image {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: var(--shop-secondary, #f5f6f8);
    display: flex; align-items: center; justify-content: center;
    min-height: 280px;
    padding: 12px;
}
.msh-detail-image img { max-height: 420px; object-fit: contain; }
.msh-detail-info h1 { margin-top: 0; }
.msh-description { color: #4b5563; }
.msh-extras { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: .9rem; margin: 14px 0; }
.msh-extras dt { color: #6b7280; }
.msh-extras dd { margin: 0; }
.msh-price-block { display: flex; flex-direction: column; gap: 4px; margin: 16px 0; }
.msh-price-block .msh-price { font-size: 1.5rem; }
.msh-price-block .msh-price--gross { font-size: 1.05rem; }
.msh-delivery { font-size: .85rem; color: #15803d; }
.msh-addtocart { display: flex; gap: 10px; margin-top: 12px; }
.msh-qty {
    width: 76px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: .95rem;
    font-family: inherit;
}

/* ---------- Cart ---------- */
.msh-cart-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.msh-cart-table th, .msh-cart-table td { padding: 10px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: middle; }
.msh-cart-table th.num, .msh-cart-table td.num { text-align: right; }
.msh-cart-img img { width: 56px; height: 56px; object-fit: contain; background: var(--shop-secondary, #f5f6f8); border-radius: 6px; }
.msh-remove {
    border: none; background: transparent; color: #6b7280;
    font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px 8px;
}
/* A11y-Fix (Design-Gate Warnung 1): --shop-accent als TEXTfarbe -> --shop-accent-text
   (dieselbe Fehlerklasse wie --shop-primary oben, hier auf den Accent-Ton bezogen). */
.msh-remove:hover { color: var(--shop-accent-text, var(--shop-accent, #c93a30)); }
.msh-totals { margin: 18px 0 0 auto; max-width: 340px; font-size: .95rem; }
.msh-totals > div { display: flex; justify-content: space-between; padding: 4px 0; }
.msh-totals-gross { border-top: 2px solid var(--shop-primary, #1f3a5f); font-size: 1.05rem; margin-top: 6px; padding-top: 8px !important; }
.msh-cart-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.msh-cart-hint { font-size: .82rem; color: #6b7280; margin-top: 14px; }

/* ---------- Checkout ---------- */
.msh-checkout-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .msh-checkout-grid { grid-template-columns: 1fr; } }
/* A11y-Fix (Design-Gate Blocker): --shop-primary als TEXTfarbe -> --shop-primary-text. */
.msh-form h2 { font-size: 1.1rem; color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); }
.msh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.msh-form-row--zip { grid-template-columns: 130px 1fr; }
@media (max-width: 560px) { .msh-form-row { grid-template-columns: 1fr; } }
.msh-field { margin-bottom: 14px; }
.msh-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.msh-field input[type="text"], .msh-field input[type="email"], .msh-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: .95rem;
    font-family: inherit;
}
/* A11y-Fix (Design-Gate Warnung 2, WCAG 1.4.11): Ring/Rand hier sitzt auf hellem/weissem
   Grund (Formularfelder) — --shop-primary als roher Ring-/Randton ist gegen eine helle
   Kunden-CI ungeschuetzt, --shop-primary-text sichert >=3:1 gegen Weiss. */
.msh-field input:focus, .msh-field textarea:focus, .msh-qty:focus {
    outline: 2px solid var(--shop-primary-text, var(--shop-primary, #1f3a5f));
    outline-offset: 1px;
    border-color: var(--shop-primary-text, var(--shop-primary, #1f3a5f));
}
/* ---------- Fokus (Tastatur-Bedienung, WCAG 2.4.7) ---------- */
/* Bisher nur der duenne Browser-Default-Outline auf Buttons/Links — ein deutlicher,
   CI-farbiger Ring fuer alle interaktiven Storefront-Elemente. */
/* A11y-Fix (Design-Gate Warnung 2, WCAG 1.4.11): diese Elemente sitzen auf hellem/
   weissem Seitenhintergrund — der Ring liegt AUSSERHALB des Elements auf diesem hellen
   Grund, --shop-primary roh ist daher derselbe Blocker wie oben; --shop-primary-text
   sichert >=3:1 gegen Weiss. */
.msh-btn:focus-visible,
.msh-card-title a:focus-visible,
.msh-rubrics a:focus-visible,
.msh-pagination a:focus-visible,
.msh-remove:focus-visible,
.msh-link:focus-visible,
.msh-footer-nav a:focus-visible {
    outline: 3px solid var(--shop-primary-text, var(--shop-primary, #1f3a5f));
    outline-offset: 2px;
}
/* .msh-cart-link sitzt auf dunklem Header-Hintergrund (background: --shop-primary) —
   ein Ring in derselben Farbe waere dort unsichtbar; heller, kontrastsicherer Ring. */
.msh-shop a.msh-cart-link:focus-visible,
.msh-shop a.msh-catalog-link:focus-visible {
    outline: 3px solid var(--shop-primary-ink, #fff);
    outline-offset: 2px;
}
/* A11y-Fix (W3): .msh-brand (Logo-/Markentitel-Link) fehlte bisher komplett in der
   Fokus-Liste — sitzt wie .msh-cart-link auf dunklem Header-Hintergrund, daher derselbe
   kontrastsichere Ring statt --shop-primary. */
.msh-shop a.msh-brand:focus-visible {
    outline: 3px solid var(--shop-primary-ink, #fff);
    outline-offset: 2px;
}

.msh-field--error input, .msh-field--error textarea { border-color: #dc2626; }
.msh-field-error { color: #dc2626; font-size: .8rem; }
.msh-field--consent label { font-weight: 400; font-size: .85rem; display: flex; gap: 8px; align-items: flex-start; }
.msh-field--consent input { margin-top: 3px; }
.msh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.msh-summary {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    background: var(--shop-secondary, #f5f6f8);
}
.msh-summary h2 { margin-top: 0; font-size: 1.05rem; }
.msh-summary-list { list-style: none; margin: 0 0 12px; padding: 0; font-size: .88rem; }
.msh-summary-list li { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #e5e7eb; }
/* A11y-Fix (B3): #6b7280 auf --shop-secondary faellt bei heller Kunden-CI unter
   WCAG-AA (4.5:1), wie beim bereits gefixten Footer. #565c66 haelt sicher darueber. */
.msh-summary-list .qty { color: #565c66; min-width: 34px; }
.msh-summary-list .name { flex: 1; }
.msh-summary-list .sum { white-space: nowrap; }
.msh-summary .msh-totals { max-width: none; }
.msh-link { font-size: .85rem; }
.msh-confirmation { max-width: 620px; margin: 40px auto; text-align: center; }

/* ---------- Sonstiges ---------- */
.msh-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.msh-notice--warn { background: #fef3c7; color: #92400e; }
.msh-notice--error { background: #fee2e2; color: #991b1b; }
.msh-empty { text-align: center; padding: 48px 20px; color: #6b7280; }
.msh-offline { text-align: center; padding: 80px 20px; color: #6b7280; font-family: system-ui, sans-serif; }
.msh-legal-text { max-width: 760px; white-space: normal; }

/* ---------- Footer ---------- */
.msh-footer {
    background: var(--shop-secondary, #f5f6f8);
    border-top: 1px solid #e5e7eb;
    padding: 20px;
    text-align: center;
    font-size: .85rem;
    /* A11y-Fix (Lighthouse-Diagnose): #6b7280 auf --shop-secondary rendert bei heller
       Kunden-CI (Beispiel #f4f1ea) nur 4,28:1 (< WCAG-AA 4.5:1 fuer Fliesstext) und
       liegt selbst gegen den CSS-Default-Fallback #f5f6f8 knapp DARUNTER (4,47:1,
       ebenfalls < 4,5:1 — kein Grenzfall, sondern derselbe Verstoss).
       #565c66 haelt gegen beide Hintergruende sicher ueber 5:1. */
    color: #565c66;
}
.msh-footer-nav { display: flex; gap: 18px; justify-content: center; margin-top: 6px; }
.msh-footer-nav a { color: #565c66; text-decoration: none; }
/* A11y-Fix (Design-Gate Blocker): --shop-primary als TEXTfarbe -> --shop-primary-text. */
.msh-footer-nav a:hover { color: var(--shop-primary-text, var(--shop-primary, #1f3a5f)); }

/* ---------- Toast ---------- */
.msh-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--shop-primary, #1f3a5f);
    /* A11y-Fix (W2): fest weisser Text auf --shop-primary kann je Kunden-CI kollabieren
       — an die kontrastgeprüfte --shop-primary-ink-Variable anschliessen. */
    color: var(--shop-primary-ink, #fff);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: .9rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    z-index: 9999;
}