/*
 * Carbonstar 2.0 – Design-Bausteine (Startseite, Fahrzeugwahl, Artikelseite, Mobil-Leisten)
 * Wird NACH dem kompilierten Theme geladen. Farben/Grundlagen stehen in sass/_variables.scss.
 */
:root {
  --bg: #0b0b0c; --surface: #131315; --surface2: #1a1a1d; --line: #26262a; --line2: #36363c;
  --fg: #f2f2f0; --muted: #a9a9ae; --dim: #85858b; --accent: #0fa3b8; --on-accent: #0b0b0c;
  --ok-bg: #0b171a; --ok-line: #1c4a52;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ================= 1. Einflieg-Animationen (ersetzt animate.css + WOW.js) ================= */
.cs-anim-ready .wow:not(.cs-animated) { visibility: hidden; }
.wow.cs-animated { visibility: visible; animation-duration: .9s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.wow.cs-animated.fadeIn       { animation-name: csFadeIn; }
.wow.cs-animated.fadeInLeft   { animation-name: csFadeInLeft; }
.wow.cs-animated.fadeInRight  { animation-name: csFadeInRight; }
.wow.cs-animated.fadeInUp     { animation-name: csFadeInUp; }
.wow.cs-animated.fadeInDown   { animation-name: csFadeInDown; }
.wow.cs-animated.zoomIn       { animation-name: csZoomIn; }
@keyframes csFadeIn      { from { opacity: 0 } to { opacity: 1 } }
@keyframes csFadeInLeft  { from { opacity: 0; transform: translate3d(-60px,0,0) } to { opacity: 1; transform: none } }
@keyframes csFadeInRight { from { opacity: 0; transform: translate3d(60px,0,0) } to { opacity: 1; transform: none } }
@keyframes csFadeInUp    { from { opacity: 0; transform: translate3d(0,40px,0) } to { opacity: 1; transform: none } }
@keyframes csFadeInDown  { from { opacity: 0; transform: translate3d(0,-40px,0) } to { opacity: 1; transform: none } }
@keyframes csZoomIn      { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .wow, .wow.cs-animated { visibility: visible !important; animation: none !important; }
  * { transition: none !important; }
}

/* ================= 2. Gemeinsame Bausteine ================= */
.cs-wrap { max-width: 1320px; margin: 0 auto; padding-inline: 40px; }
.cs-kicker { font-stretch: 125%; font-size: 11px; letter-spacing: .3em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.cs-h2 { margin: 0; font-stretch: 125%; font-weight: 900; font-size: clamp(28px, 4vw, 44px); line-height: 1; text-wrap: balance; text-transform: uppercase; color: var(--fg); }
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; font-weight: 700; font-size: 15px; border: 1px solid var(--fg); background: transparent; color: var(--fg) !important; cursor: pointer; text-decoration: none !important; }
.cs-btn:hover { background: var(--fg); color: var(--bg) !important; }
.cs-btn-acc { background: var(--accent); color: var(--on-accent) !important; border-color: var(--accent); }
.cs-btn-acc:hover { background: #38bfd2; border-color: #38bfd2; color: var(--on-accent) !important; }
.cs-btn-2l { flex-direction: column; gap: 0; line-height: 1.15; padding-block: 6px; }
.cs-btn-2l small { font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .75; }
.cs-link-u { font-weight: 600; font-size: 14px; color: var(--fg) !important; border-bottom: 1px solid var(--accent); padding-bottom: 3px; text-decoration: none !important; }
.cs-link-u:hover { color: var(--accent) !important; }
.cs-sec { padding-top: 96px; }
.cs-sec-tight { padding-top: 64px; }
.cs-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.cs-sec-head > div { display: flex; flex-direction: column; gap: 12px; }
.cs-sec-head.cs-sub { margin: 28px 0 18px; }
.cs-rule { display: flex; align-items: center; gap: 14px; }
.cs-rule i { display: block; width: 110px; height: 1px; background: var(--accent); }
.cs-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cs-stack { display: flex; flex-direction: column; gap: 14px; }
.cs-lead { margin: 0; color: #cfcfd3; font-size: 16px; max-width: 60ch; }
.cs-g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.cs-g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }

/* Startseite: NOVA-Container nicht doppelt einrücken */
.cs-home { overflow-x: clip; }
body:has(.cs-home) #content-wrapper > .container,
body:has(.cs-home) #content > .container { max-width: none; padding: 0; }
body:has(.cs-home) .breadcrumb-container { display: none; }

/* ================= 3. Hero ================= */
.cs-hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; color: var(--fg); }
.cs-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.cs-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,12,.93) 0%, rgba(11,11,12,.7) 38%, rgba(11,11,12,.05) 72%); z-index: 1; }
.cs-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(0deg, var(--bg), rgba(11,11,12,0)); z-index: 1; }
.cs-hero .cs-wrap { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; gap: 22px; padding-block: 80px 120px; }
.cs-hero h1.cs-kicker { margin: 0; font-size: 11px; line-height: 1.4; max-width: none; text-transform: uppercase; font-weight: 600; letter-spacing: .3em; color: var(--muted); font-stretch: 125%; }
.cs-hero .cs-hero-title, .cs-hero h1:not(.cs-kicker) { margin: 0; font-stretch: 125%; font-weight: 900; font-size: clamp(42px, 6.4vw, 80px); line-height: .95; max-width: 740px; text-transform: uppercase; color: var(--fg); }
.cs-hero p { margin: 0; max-width: 520px; color: #d2d2d6; font-size: 18px; }

/* ================= 4. Fahrzeugwahl ================= */
.cs-finder-sec { position: relative; z-index: 3; margin-top: 0; padding-top: 48px; }
.cs-home .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cs-intro { padding-top: 40px; }
.cs-intro .cs-rule { margin-bottom: 18px; }
.cs-intro h1.cs-kicker { margin: 0; font-size: 12px; }
/* JTL-Slider "Startseite" im dunklen Stil */
.cs-is-home .slider-wrapper { background: var(--bg); }
.cs-is-home .slider-wrapper .nivo-caption, .cs-is-home .slider-wrapper .slide-caption { background: rgba(11,11,12,.8); color: var(--fg); }
.cs-finder { background: var(--surface2); border: 1px solid var(--line); padding: 30px 34px; display: flex; flex-direction: column; gap: 20px; color: var(--fg); margin: 24px 0; }
.cs-finder-sec .cs-finder { margin: 0; }
.cs-finder[data-variant="list"] { margin: 0 0 28px; padding: 22px 24px; gap: 14px; }
.cs-finder[data-variant="list"] .cs-finder__title { font-size: 16px; }
.cs-finder[data-variant="list"] .cs-finder__field select, .cs-finder[data-variant="list"] .cs-finder__go { height: 46px; min-height: 46px; }
.cs-finder__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cs-finder__title { margin: 0; font-stretch: 125%; font-size: 20px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); }
.cs-finder__hint { font-size: 12px; color: var(--dim); }
.cs-finder__form { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 14px; align-items: end; margin: 0; }
.cs-finder__field { display: flex; flex-direction: column; gap: 7px; margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.cs-finder__field select { height: 52px; background: var(--bg); color: var(--fg); border: 1px solid var(--line2); border-radius: 0; padding: 0 12px; font-size: 16px; letter-spacing: 0; text-transform: none; width: 100%; }
.cs-finder__field select:focus { border-color: var(--accent); outline: none; }
.cs-finder__field select:disabled { opacity: .45; }
.cs-finder__go { min-height: 52px; }
.cs-finder__go.disabled { opacity: .6; }
.cs-finder__mycar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ok-bg); border: 1px solid var(--ok-line); padding: 12px 16px; font-size: 14px; }
.cs-finder__mycar[hidden] { display: none; }
.cs-finder__mycar b { flex-grow: 1; }
.cs-finder__mycar a { color: var(--accent) !important; font-weight: 700; }
.cs-finder__clear { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 32px; font-size: 13px; }
.cs-check { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.cs-finder__save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -4px; }
.cs-finder__save[hidden], .cs-finder__save [hidden] { display: none !important; }
.cs-finder__savebtn { background: transparent; border: 1px dashed var(--ok-line); color: var(--accent); font-weight: 700; font-size: 14px; min-height: 40px; padding: 0 14px; cursor: pointer; }
.cs-finder__savebtn:hover { border-style: solid; }
.cs-finder__saved { color: var(--accent); font-size: 13px; }
.cs-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-chips .lbl { font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-right: 6px; }
.cs-chip { border: 1px solid var(--line2); padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; color: var(--fg) !important; background: transparent; text-decoration: none !important; }
.cs-chip:hover { border-color: var(--accent); }

/* Marken-Leiste */
.cs-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; border-block: 1px solid var(--line); padding-block: 20px; }
.cs-brands:empty { display: none; }
.cs-brands button { background: transparent; border: 0; font-stretch: 125%; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--dim); cursor: pointer; min-height: 36px; padding: 0; text-transform: uppercase; }
.cs-brands button:hover { color: var(--fg); }

/* ================= 5. Kacheln, Baureihen ================= */
.cs-tile { position: relative; display: block; height: 400px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); color: var(--fg) !important; text-decoration: none !important; }
.cs-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cs-tile-light { background: #eee; }
.cs-tile-light img { object-fit: contain; padding: 20px 20px 90px; }
.cs-tile:hover img { transform: scale(1.04); }
.cs-cap { position: absolute; inset: auto 0 0 0; padding: 24px; background: linear-gradient(0deg, rgba(11,11,12,.96), rgba(11,11,12,0)); display: flex; flex-direction: column; gap: 5px; }
.cs-cap small { font-size: 11px; letter-spacing: .2em; color: #c4c4c8; text-transform: uppercase; }
.cs-cap strong { font-stretch: 125%; font-size: 24px; font-weight: 800; text-transform: uppercase; }
.cs-cap span { font-size: 14px; color: #d2d2d6; }
.cs-series { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); padding: 18px 20px; font-weight: 600; min-height: 60px; color: var(--fg) !important; text-decoration: none !important; font-size: 15px; }
.cs-series:hover { border-color: var(--line2); }
.cs-series em { font-style: normal; color: var(--accent); }

/* Produktkarten auf der Startseite */
.cs-pcard { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); color: var(--fg) !important; text-decoration: none !important; transition: border-color .2s; }
.cs-pcard:hover { border-color: var(--line2); }
.cs-pcard .im { position: relative; height: 250px; overflow: hidden; background: #fff; }
.cs-pcard .im img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.cs-pcard:hover .im img { transform: scale(1.03); }
.cs-pcard .badge { position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 6px 9px; border-radius: 0; text-transform: uppercase; }
.cs-pcard .tx { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.cs-pcard .nm { font-weight: 600; line-height: 1.35; font-size: 14px; }
.cs-pcard .pr { margin-top: auto; }
.cs-pcard .price_wrapper { margin: 0; }
.cs-pcard .price { font-stretch: 125%; font-weight: 800; font-size: 21px !important; color: var(--fg); margin: 0; }
.cs-pcard .price-note, .cs-pcard .price-note * { font-size: 12px; color: var(--dim) !important; }
.cs-pcard .old-price, .cs-pcard .price-note del { color: var(--dim); }
/* Produkt-Slider (falls noch irgendwo genutzt) */
.cs-products .product-slider-wrapper, .cs-products .slick-slider-other { margin: 0; }
.cs-products .hr-sect, .cs-products .slick-slider-other .hr-sect { display: none; }
.cs-products .product-wrapper { padding: 0 9px; }

/* ================= 6. §21, Gewebe, Galerie, USPs ================= */
.cs-box { border: 1px solid var(--line); background: var(--surface); padding: 52px; display: flex; flex-direction: column; gap: 36px; }
.cs-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px; align-items: end; }
.cs-step { border-top: 1px solid var(--line2); padding-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.cs-step .n { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.cs-step strong { font-stretch: 125%; font-size: 17px; font-weight: 800; text-transform: uppercase; }
.cs-step span { color: var(--muted); }
.cs-weave { height: 190px; border-bottom: 1px solid var(--line); }
.w22 { background-color: #151517; background-image: repeating-linear-gradient(45deg, #2c2c31 0 9px, #141416 9px 18px); }
.w11 { background-color: #141416; background-image: linear-gradient(45deg, #2c2c31 25%, transparent 25%, transparent 75%, #2c2c31 75%), linear-gradient(45deg, #2c2c31 25%, transparent 25%, transparent 75%, #2c2c31 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.wfc { position: relative; overflow: hidden; background: #0d0d0f; }
/* echtes Forged-Carbon-Foto aus dem Shop (Art. 17864), gedreht und nur die Oberfläche gezeigt */
.wfc::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1366px; height: 768px; background: #0d0d0f 0 0 / 100% 100% no-repeat; transform-origin: 676px 284px; transform: translate(-676px, -284px) rotate(-14deg) scale(.75); }
.wfc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0) 55%, rgba(11,11,12,.45)); }
.cs-wcard { border: 1px solid var(--line); display: flex; flex-direction: column; }
.cs-wcard .tx { padding: 22px; display: flex; flex-direction: column; gap: 7px; }
.cs-wcard .tx small { font-size: 11px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.cs-wcard .tx small.acc { color: var(--accent); }
.cs-wcard .tx strong { font-stretch: 125%; font-size: 19px; font-weight: 800; text-transform: uppercase; }
.cs-wcard .tx span { color: var(--muted); }
.cs-gal { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 220px; gap: 10px; }
.cs-gal-item { display: block; overflow: hidden; background: var(--surface); }
.cs-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cs-gal-item:hover img { transform: scale(1.04); }
.cs-gal-item:first-child { grid-column: span 2; grid-row: span 2; }
.cs-gal-item:nth-child(2) { grid-column: span 2; }
.cs-gal:not(.is-open) .is-more { display: none; }
.cs-gal-more { display: flex; justify-content: center; margin-top: 22px; }
.cs-gal.is-open + .cs-gal-more { display: none; }
.cs-doc-thumbs { display: flex; gap: 10px; align-items: center; }
.cs-doc-thumbs a { display: block; border: 1px solid var(--line2); background: #fff; transition: border-color .2s, transform .2s; }
.cs-doc-thumbs a:hover { border-color: var(--accent); transform: translateY(-2px); }
.cs-doc-thumbs img { display: block; width: 46px; height: 65px; object-fit: cover; object-position: top; }
.cs-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
.cs-lightbox::backdrop { background: rgba(0,0,0,.9); }
.cs-lightbox img { max-width: 96vw; max-height: 86vh; background: #fff; display: block; margin: 0 auto; }
.cs-lightbox .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; color: var(--fg); font-family: var(--mono); font-size: 13px; }
.cs-lightbox button { min-width: 48px; min-height: 44px; background: rgba(11,11,12,.8); border: 1px solid var(--line2); color: var(--fg); cursor: pointer; font-size: 18px; }
.cs-usps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 42px; }
.cs-usp { display: flex; flex-direction: column; gap: 9px; }
.cs-usp svg { color: var(--accent); }
.cs-usp strong { font-stretch: 125%; font-size: 14px; font-weight: 800; text-transform: uppercase; }
.cs-usp span { font-size: 14px; color: var(--muted); }

/* Seite "Materialgutachten" (Inhalt aus Admin -> Eigene Inhalte -> Seiten) */
.cs-mg { max-width: 1100px; margin: 0 auto 40px; }
.cs-mg-lead { font-size: 18px; color: #d2d2d6; max-width: 70ch; margin: 0 0 28px; }
.cs-mg-docs.cs-doc-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.cs-mg-docs.cs-doc-thumbs img { width: 100%; height: auto; aspect-ratio: 400 / 566; object-fit: cover; }
.cs-mg-note { font-size: 12px; color: var(--dim); margin: 10px 0 40px; }
.cs-mg-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.cs-mg-box { border: 1px solid var(--line); background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.cs-mg-box.cs-mg-main { grid-column: span 2; border-color: var(--ok-line); }
.cs-mg-box h2 { margin: 0 0 4px; font-stretch: 125%; font-weight: 900; font-size: 22px; text-transform: uppercase; }
.cs-mg-box p { margin: 0; color: #cfcfd3; line-height: 1.6; }
.cs-mg-box p:last-child { margin-top: 8px; }
.cs-mg-box strong { color: var(--fg); }
@media (max-width: 767.98px) {
  .cs-mg-docs.cs-doc-thumbs { gap: 8px; }
  .cs-mg-grid { grid-template-columns: minmax(0,1fr); }
  .cs-mg-box.cs-mg-main { grid-column: auto; }
  .cs-mg-box { padding: 20px; }
}

/* Wende-Karten */
.cs-flip { perspective: 1200px; height: 280px; outline: none; }
.cs-flip-in { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.cs-flip-f, .cs-flip-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; padding: 26px; }
.cs-flip-f { background: var(--surface) repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 9px, transparent 9px 18px); justify-content: flex-end; gap: 14px; }
.cs-flip-f svg { color: var(--accent); }
.cs-flip-f strong { font-stretch: 125%; font-size: 20px; font-weight: 900; text-transform: uppercase; line-height: 1.05; }
.cs-flip-hint { position: absolute; top: 18px; right: 20px; color: var(--dim); font-size: 18px; }
.cs-flip-b { background: var(--surface2); border-color: var(--ok-line); transform: rotateY(180deg); justify-content: center; gap: 6px; }
.cs-flip-b p { margin: 0; color: #cfcfd3; font-size: 14px; line-height: 1.5; }
.cs-flip-b .q { color: var(--fg); font-weight: 700; font-size: 15px; }
.cs-flip-b .a { color: var(--accent); font-weight: 800; margin-bottom: 6px; }
.cs-flip.is-flipped .cs-flip-in, .cs-flip:focus-within .cs-flip-in { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .cs-flip:hover .cs-flip-in { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .cs-flip-in { transition: none; } }

/* Über uns + FAQ */
.cs-about { align-items: start; }
.cs-faq { display: flex; flex-direction: column; }
.cs-faq h2 { margin: 0 0 12px; }
.cs-faq details { border-top: 1px solid var(--line); }
.cs-faq details:last-child { border-bottom: 1px solid var(--line); }
.cs-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; font-weight: 700; cursor: pointer; }
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after { content: "+"; color: var(--accent); font-size: 20px; }
.cs-faq details[open] summary::after { content: "−"; }
.cs-faq details p { margin: 0 0 18px; color: #cfcfd3; }
.cs-about .cs-lead + .cs-lead { margin-top: 0; }

/* ================= 7. Kategorien: Bauteil-Kacheln ================= */
#content .sub-categories {
  border: 1px solid var(--line); background: var(--surface); padding: 14px 12px 16px; height: 100%;
  display: flex; flex-direction: column; align-items: center; transition: border-color .25s, transform .25s;
}
#content .sub-categories .subcategories-image { overflow: hidden; width: 100%; display: flex !important; justify-content: center; background: #fff; }
#content .sub-categories img { transition: transform .35s ease; }
#content .sub-categories .caption a { text-decoration: none !important; font-weight: 700; color: var(--fg); letter-spacing: .02em; }
#content .sub-categories:hover { border-color: var(--accent); transform: translateY(-3px); }
#content .sub-categories:hover img { transform: scale(1.06); }
#content .sub-categories:hover .caption a { color: var(--accent); }
#content [class*="col-lg-3"]:has(> .sub-categories), #content [class*="col-"]:has(> .sub-categories) { margin-bottom: 22px; }
#content .sub-categories .caption { margin: 14px 0 6px; text-align: center; }
#content .sub-categories .caption a { font-stretch: 112%; font-size: 15px; }
#content .sub-categories hr { display: none; }
#content .sub-categories ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 0 0; margin: 0; list-style: none; width: 100%; }
#content .sub-categories ul { display: none !important; } /* nur Hauptkacheln zeigen, Unterpunkte auf der nächsten Seite */
#content .sub-categories { justify-content: flex-start; }
#content .sub-categories ul li { margin: 0; padding: 0; list-style: none; width: auto !important; flex: 0 0 auto; }
#content .sub-categories ul li::before, #content .sub-categories ul li::marker { content: none; }
#content .sub-categories ul a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line2); font-size: 12.5px; color: var(--muted) !important; text-decoration: none !important; white-space: nowrap; }
#content .sub-categories ul a:hover { border-color: var(--accent); color: var(--fg) !important; }
#content .sub-categories ul li.cs-hidden { display: none; }
#content .sub-categories .cs-more { background: none; border: 0; color: var(--accent); font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 32px; padding: 0 6px; }
#content .sub-categories:hover { transform: none; }
#content .sub-categories .subcategories-image { padding: 10px; }
#content .sub-categories .subcategories-image img { max-height: 150px; width: auto; object-fit: contain; }

/* Kategorie-Kopf */
#content h1:not(.product-title), .content-cats-small + h1, .title h1 { font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.desc, .category-description, #content .desc { color: #cfcfd3; max-width: 80ch; }

/* Linke Kategorie-Spalte */
#sidepanel_left .box { background: var(--surface); border: 1px solid var(--line); padding: 18px; }
#sidepanel_left .productlist-filter-headline, #sidepanel_left .box-title { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim) !important; font-weight: 600; border: 0; }
#sidepanel_left .nav-link { color: var(--muted) !important; font-size: 14px; padding-block: 6px; }
#sidepanel_left .nav-link:hover, #sidepanel_left .nav-link.active, #sidepanel_left .active > .nav-link { color: var(--fg) !important; }
#sidepanel_left .nav-link.active, #sidepanel_left .active > .nav-link { box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; }
#sidepanel_left .nav .nav { background: transparent !important; }

/* Artikelliste: Optionen-Leiste & Seitennavigation */
.productlist-page-nav, .productlist-filter, #improve_search { color: var(--fg); }
.productlist-page-nav .pagination .page-link { color: var(--muted); }
.productlist-page-nav .pagination .active .page-link { color: var(--accent); }
#product-list .productbox { height: 100%; }
#product-list .productbox-inner { padding: 12px; }

/* Artikelbilder in Listen: nur der äußere Rahmen weiß, sonst verdeckt das 2. (Hover-)Bild das erste */
.productbox .productbox-images { background: #000; }
.productbox .productbox-image.square-image, .productbox .first-wrapper, .productbox .second-wrapper { background: transparent !important; }

/* Artikelkarten in Listen: eine Karte, gleiche Höhe, kein Aufklappen beim Drüberfahren */
#product-list { row-gap: 20px; }
#product-list > .product-wrapper { display: flex; margin-bottom: 0 !important; padding-bottom: 0 !important; }
#product-list > .product-wrapper > .productbox { margin-bottom: 0 !important; }
#product-list .productbox { flex: 1; display: flex; flex-direction: column; background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; margin: 0 !important; transition: border-color .2s; }
#product-list .productbox:hover { border-color: var(--accent) !important; }
#product-list .productbox > form, #product-list .productbox .productbox-inner { flex: 1; display: flex; flex-direction: column; }
#product-list .productbox .productbox-inner { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; position: relative !important; inset: auto !important; width: auto !important; }
#product-list .productbox .productbox-inner > .row { flex: 1; margin: 0; flex-direction: column; flex-wrap: nowrap; }
#product-list .productbox .productbox-inner > .row > .col { padding: 0; flex: 0 0 auto; }
#product-list .productbox .productbox-inner > .row > .col:last-child { flex: 1 0 auto; display: flex; flex-direction: column; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
#product-list .productbox .productbox-title { margin: 0 0 10px; font-size: 14px; }
#product-list .productbox .productbox-title a { color: var(--fg) !important; text-decoration: none !important; }
#product-list .productbox:hover .productbox-title a { color: var(--accent) !important; }
#product-list .productbox .price_wrapper { margin-top: auto; }
#product-list .productbox .price { font-stretch: 125%; font-weight: 800; font-size: 19px; }
#product-list .productbox .productbox-onhover:not(.productbox-quick-actions), #product-list .productbox .productbox-variations, #product-list .productbox .productbox-details { display: none !important; }
#product-list .productbox .productbox-images { overflow: hidden; }
.productbox .ribbon { border-radius: 0; }
/* Listenansicht (eine Spalte) */
#product-list.layout-list .productbox .productbox-inner > .row { flex-direction: row; }

/* Bildfelder in Artikellisten schwarz statt weiß (Fotos unterschiedlicher Größe bekommen schwarze statt weiße Ränder) */
.productbox .productbox-images, #product-list .productbox .productbox-images, .cs-pcard .im { background: #000 !important; }
.cs-pcard .im img { object-fit: contain; }
/* Bild immer exakt mittig (auch das Wechselbild beim Drüberfahren) */
.productbox .square-image .inner img { position: absolute !important; left: 0 !important; top: 0 !important; transform: none !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; }
.productbox .square-image .inner picture { position: absolute; inset: 0; }
/* NOVA-Hover (Karte vergrößert sich) abschalten */
#product-list .productbox-hover::before, #product-list .productbox-hover::after,
#product-list .productbox-hover:hover::before, #product-list .productbox-hover:hover::after { display: none !important; content: none !important; }
#product-list .productbox-hover:hover { position: relative !important; z-index: 1; margin: 0 !important; padding: 0 !important; transform: none !important; box-shadow: none !important; }
#product-list .productbox-hover:hover .productbox-inner { position: relative !important; margin: 0 !important; padding: 0 !important; top: auto !important; left: auto !important; right: auto !important; box-shadow: none !important; }

/* Galerieansicht: voller Artikelname (Cstar muss sichtbar bleiben) */
.productbox .productbox-title, .productbox .productbox-title a,
.product-wrapper .productbox-title, .product-wrapper .productbox-title a {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  -webkit-line-clamp: unset !important; display: block !important; max-height: none !important; height: auto !important; line-height: 1.35;
}

/* ================= 8. Artikelseite ================= */
.product-detail .product-title { font-stretch: 112%; font-weight: 800; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; text-wrap: balance; text-transform: none; letter-spacing: 0; }
/* Beschreibung aus der Wawi: eingebettete Farben/Hintergründe neutralisieren */
.tab-content [style*="background"], .desc [style*="background"], #tab-description [style*="background"], .tab-content span, .tab-content font { background-color: transparent !important; }
.tab-content [style*="color"], .tab-content font[color] { color: inherit !important; }
.tab-content, .tab-content p, .tab-content li { color: #cfcfd3; font-size: 15px; line-height: 1.6; }
.tab-content a { color: var(--accent); }
.tab-content table td, .tab-content table th { border-color: var(--line) !important; padding: 10px 12px; }
.product-attributes .badge, .tab-content .badge { background: transparent; color: var(--fg); border: 1px solid var(--line2); font-weight: 600; border-radius: 0; padding: 6px 8px; }
.recommendations .hr-sect, #content .hr-sect, .product-slider-wrapper .hr-sect { font-size: clamp(20px, 2.4vw, 28px); }
.product-detail .price_wrapper .price { font-stretch: 125%; font-weight: 900; font-size: 38px; }
.product-detail #image_wrapper { background: transparent; }
.product-detail #gallery, .product-detail #gallery .slick-slide, .product-detail #gallery .square-image { background: #000 !important; }
.product-detail #gallery { border: 1px solid var(--line); }
/* Vorschaubilder unter dem Hauptbild: abgesetzt, einzeln gerahmt */
.product-detail .product-detail-image-preview-bar { margin-top: 12px; }
.product-detail #gallery_preview { background: transparent; }
.product-detail #gallery_preview .slick-slide { padding: 0 4px; }
.product-detail #gallery_preview .square-image, .product-detail #gallery_preview .slick-slide > div > div {
  background: #000; border: 1px solid var(--line2); transition: border-color .2s;
}
.product-detail #gallery_preview .slick-current .square-image, .product-detail #gallery_preview .slick-slide:hover .square-image { border-color: var(--accent); }
.product-detail #gallery_preview .slick-arrow { background: var(--surface2); color: var(--fg); border: 1px solid var(--line2); }
.product-detail .info-essential .product-ean, .product-detail .info-essential .product-han, .product-detail .info-essential .product-category { display: none !important; }
.product-detail .info-essential .product-manufacturer { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.product-detail .info-essential .product-manufacturer img { height: 56px !important; width: auto !important; max-width: 200px; max-height: none !important; background: #fff; padding: 6px 10px; object-fit: contain; }
.product-detail .info-essential { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
#add-to-cart .btn-primary, #add-to-cart button[name="inWarenkorb"] { min-height: 56px; font-size: 16px; }
.cs-fitok { display: flex; align-items: center; gap: 12px; background: var(--ok-bg); border: 1px solid var(--ok-line); padding: 13px 15px; font-size: 14px; margin: 14px 0; color: var(--fg); }
.cs-fitok b { flex-grow: 1; }
.cs-fitno { background: #2a2112; border-color: #6b4e1d; }
.cs-fitno .cs-check { color: #f3b44a; }
.cs-fit-clear { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; min-height: 32px; padding: 0; }
.cs-fitok { flex-wrap: wrap; }
.cs-fitok a { font-size: 13px; color: var(--muted) !important; text-decoration: underline !important; }
.cs-mg-link { color: var(--accent) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; white-space: nowrap; }
.cs-mg-link:hover { text-decoration: underline !important; }
.product-wrapper > .cs-mg-link { display: block; padding: 6px 12px 0; }
.cs-addons { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.cs-addon-only { margin: -4px 0 2px; padding-left: 49px; font-size: 13px; }
.cs-addon-only button { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
.cs-addon-only button:hover { color: var(--fg); }
.cs-addon-only .ok { color: var(--accent); }
.cs-addon-only .ok a { color: var(--accent) !important; text-decoration: underline !important; }
.cs-addons-h { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cs-addons .cs-addon { margin: 0; }
.cs-addon .t span i { font-style: normal; }
.cs-addon { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line2); padding: 14px 15px; margin: 6px 0 14px; cursor: pointer; color: var(--fg); font-weight: 400; }
.cs-addon:has(input:checked) { border-color: var(--accent); }
.cs-addon input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.cs-addon .t { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.cs-addon .t b { font-size: 15px; }
.cs-addon .t span { font-size: 13px; color: var(--muted); }
.cs-addon .t a { color: var(--accent) !important; text-decoration: underline !important; }
.cs-addon .p { font-weight: 700; white-space: nowrap; }
.cs-addon.is-done { border-color: var(--ok-line); background: var(--ok-bg); cursor: default; }
.cs-mg-cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line2); background: var(--surface); padding: 12px 14px; margin: 0 0 20px; font-size: 14px; }
.cs-mg-cart .i { font-family: var(--mono); color: var(--accent); font-weight: 700; border: 1px solid var(--ok-line); padding: 4px 7px; }
.cs-mg-cart .tx { flex: 1 1 260px; color: #cfcfd3; }
.cs-mg-cart .tx b { color: var(--fg); }
.cs-mg-cart .cs-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.cs-mg-cart .info { color: var(--muted) !important; text-decoration: underline !important; font-size: 13px; }
.cs-mg-cart .x { background: none; border: 0; color: var(--dim); font-size: 16px; cursor: pointer; min-width: 36px; min-height: 36px; }
.cs-made { color: var(--accent); font-weight: 600; }
.cs-gpsr { margin-top: 28px; border: 1px solid var(--line); background: var(--surface); padding: 18px 20px; }
.cs-gpsr h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.cs-gpsr h3 small { font-size: 11px; color: var(--dim); letter-spacing: .04em; text-transform: none; font-weight: 400; }
.cs-gpsr dl { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.cs-gpsr dt { color: var(--muted); font-weight: 500; }
.cs-gpsr dd { margin: 0; color: var(--fg); }
.cs-gpsr a { color: var(--accent) !important; }
@media (max-width: 575.98px) { .cs-gpsr dl { grid-template-columns: minmax(0,1fr); } .cs-gpsr dd { margin-bottom: 6px; } }
.cs-legal { font-size: 12px; color: var(--dim); margin: 24px 0 0; }
.cs-buybar { display: none; }

/* Nach-oben-Knopf & Cookie-Knopf im dunklen Stil */
.smoothscroll-top { background: var(--surface2) !important; color: var(--fg) !important; border: 1px solid var(--line2) !important; border-radius: 0 !important; }
.smoothscroll-top:hover { border-color: var(--accent) !important; }
#consent-settings-btn { background: var(--surface2); border-color: var(--line2); color: var(--fg); }

/* Hauptmenü (PC): alle Kategorien sichtbar in eigener Zeile, jede mit Rahmen – kein Scroll-Pfeil */
@media (min-width: 992px) {
  header .navbar, header .navbar > .container-fluid, header > .container-fluid, #jtl-nav-wrapper { height: auto !important; max-height: none !important; }
  header .navbar { flex-wrap: wrap !important; }
  header #mainNavigation.nav-scrollbar { order: 20; flex: 0 0 100% !important; max-width: 100% !important; overflow: visible !important; height: auto !important; padding: 0 0 12px; }
  header #mainNavigation .nav-scrollbar-arrow { display: none !important; }
  header #mainNavigation .nav-scrollbar-inner { flex-wrap: wrap !important; overflow: visible !important; width: 100% !important; gap: 8px; padding-bottom: 0 !important; margin: 0 !important; transform: none !important; justify-content: center; }
  header #mainNavigation .navbar-nav > .nav-item { position: static; }
  header #mainNavigation .navbar-nav > .nav-item > .nav-link {
    border: 1px solid var(--line2); padding: 9px 14px !important; font-size: 13px; font-weight: 600; letter-spacing: .02em;
    text-transform: none; transition: border-color .2s, color .2s;
  }
  header #mainNavigation .navbar-nav > .nav-item > .nav-link::before { display: none !important; }
  header #mainNavigation .navbar-nav > .nav-item:hover > .nav-link,
  header #mainNavigation .navbar-nav > .nav-item.active > .nav-link { border-color: var(--accent); color: var(--fg) !important; }
  header #mainNavigation .navbar-nav > .nav-item.active > .nav-link { box-shadow: inset 0 -2px 0 var(--accent); }
  header #mainNavigation a[href*="SONDERANGEBOTE"] { color: var(--accent) !important; }
  header .navbar-collapse { height: auto !important; }
  header .toggler-logo-wrapper, header #search, header .main-search-wrapper, header #shop-nav { min-height: 70px; display: flex; align-items: center; }
  header #search, header .main-search-wrapper { flex: 1 1 auto; justify-content: center; }
  header #search .form-control, header .main-search-wrapper .form-control { max-width: 460px; }
}

/* ================= 9. Mobile Schnellleiste ================= */
.cs-tabbar { display: none; }

/* ================= 10. Responsive ================= */
@media (max-width: 1099.98px) {
  .cs-g4, .cs-usps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cs-finder__form { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cs-split { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 767.98px) {
  .cs-wrap { padding-inline: 16px; }
  .cs-hero { min-height: 0; align-items: flex-end; }
  .cs-hero > img { object-position: 64% 50%; }
  .cs-hero::before { background: linear-gradient(180deg, rgba(11,11,12,.05) 0%, rgba(11,11,12,.35) 40%, rgba(11,11,12,.97) 85%); }
  .cs-hero .cs-wrap { padding-block: 240px 36px; }
  .cs-hero p { font-size: 15px; }
  .cs-hero .cs-hero-title { font-size: clamp(30px, 9.2vw, 44px); }
  .cs-hero h1.cs-kicker { font-size: 10px; letter-spacing: .2em; }
  .cs-h2 { font-size: clamp(24px, 7.4vw, 34px); }
  #content .content-cats-small > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding-inline: 5px; }
  #content .content-cats-small { margin-inline: -5px; }
  #content .sub-categories { padding: 8px 8px 10px; }
  #content .sub-categories .subcategories-image img { max-height: 110px; }
  #content .sub-categories .caption a { font-size: 13px; }
  .cs-hero .cs-ctas { display: none; }
  .cs-finder-sec { margin-top: 0; padding-top: 0; }
  .cs-intro { padding-top: 24px; }
  .cs-intro .cs-rule i { display: none; }
  .cs-finder-sec .cs-wrap { padding-inline: 0; }
  .cs-finder { padding: 18px 16px; border-inline: 0; }
  .cs-finder[data-variant="list"] { padding: 16px; border-inline: 1px solid var(--line); }
  .cs-finder[data-variant="list"] .cs-finder__hint { display: none; }
  .cs-finder__form { grid-template-columns: minmax(0,1fr); }
  .cs-finder__go { width: 100%; }
  .cs-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cs-chips .cs-chip { flex-shrink: 0; }
  .cs-brands { display: none; }
  .cs-sec { padding-top: 56px; }
  .cs-sec-tight { padding-top: 0; }
  .cs-g3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .cs-g3 .cs-tile:first-child { grid-column: span 2; height: 210px; }
  .cs-tile { height: 160px; }
  .cs-tile-light img { padding: 10px 10px 40px; }
  .cs-cap { padding: 12px; }
  .cs-cap strong { font-size: 15px; }
  .cs-cap small, .cs-cap span { display: none; }
  .cs-series-grid { gap: 8px; }
  .cs-series { padding: 12px 14px; font-size: 14px; min-height: 52px; }
  .cs-box { padding: 22px; gap: 22px; }
  .cs-g3.cs-steps, .cs-g3.cs-weaves { grid-template-columns: minmax(0,1fr); }
  .cs-weave { height: 110px; }
  .cs-gal { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 140px; gap: 8px; }
  .cs-gal-item:first-child { grid-column: span 2; grid-row: span 1; height: 200px; }
  .cs-gal-item:nth-child(2) { grid-column: span 1; }
  .cs-gal:not(.is-open) .cs-gal-item:nth-child(n+6) { display: none; }
  .cs-usps { gap: 18px; }
  .cs-flips { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .cs-flip { height: 230px; }
  .cs-scroller { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x mandatory; }
  .cs-scroller .cs-pcard { flex: 0 0 240px; scroll-snap-align: start; }
  .cs-pcard .im { height: 180px; }

  /* Artikelseite mobil */
  .product-detail .product-title { font-size: 26px; }
  .product-detail .price_wrapper .price { font-size: 30px; }
  .cs-buybar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(11,11,12,.97); border-top: 1px solid var(--line2);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .cs-buybar.is-visible { transform: none; }
  .cs-buybar .bb-p { display: flex; flex-direction: column; }
  .cs-buybar .bb-p b { font-stretch: 125%; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
  .cs-buybar .bb-p span { font-size: 11px; color: var(--muted); }
  .cs-buybar .cs-btn { flex-grow: 1; min-height: 50px; }

  /* Schnellleiste */
  .cs-tabbar {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; grid-template-columns: repeat(4, minmax(0,1fr));
    background: rgba(11,11,12,.97); border-top: 1px solid var(--line2); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cs-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; font-size: 11px; color: #c9c9cd !important; text-decoration: none !important; }
  .cs-tabbar a.on, .cs-tabbar a:hover { color: var(--fg) !important; }
  .cs-tabbar a.on svg { color: var(--accent); }
  body.cs-has-bottombar { padding-bottom: 76px; }
  body.cs-has-bottombar #footer { padding-bottom: 20px; }
  body.cs-has-bottombar #jvLabelWrap, body.cs-has-bottombar #jcont { bottom: 72px !important; }
  body.cs-has-bottombar #consent-settings-btn { bottom: 76px !important; }
  body.cs-has-bottombar .smoothscroll-top { bottom: 136px !important; left: 16px !important; right: auto !important; }  /* links, über dem Cookie-Knopf – rechts sitzt der Chat */
  .cs-tabbar a { position: relative; }
  .cs-tabbar .cs-dot { position: absolute; top: 9px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
  .cs-tabbar .cs-dot[hidden] { display: none; }
  /* „Schreib uns“-Menü */
  .cs-csheet { position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
  .cs-csheet[hidden] { display: none !important; }
  .cs-csheet-in { width: 100%; background: var(--surface); border-top: 1px solid var(--line2); padding: 6px 16px calc(20px + env(safe-area-inset-bottom, 0px)); animation: csUp .22s ease-out; }
  @keyframes csUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  .cs-csheet-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: 16px; }
  .cs-csheet-h button { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 6px 4px; }
  .cs-crow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; margin-bottom: 10px; background: var(--bg); border: 1px solid var(--line2); color: var(--fg) !important; text-align: left; text-decoration: none !important; font: inherit; }
  .cs-crow:active { border-color: var(--accent); }
  .cs-crow .ic { width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
  .cs-crow .ic-chat { background: var(--accent); color: var(--bg); }
  .cs-crow .ic-ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
  .cs-crow .tx { display: flex; flex-direction: column; flex: 1; }
  .cs-crow .tx b { font-size: 15px; }
  .cs-crow .tx small { font-size: 12px; color: var(--muted); }
  .cs-crow .ar { font-size: 24px; color: var(--dim); }
  .cs-cmore { display: block; text-align: center; font-size: 12.5px; color: var(--muted) !important; padding: 6px 0 2px; text-decoration: underline !important; }
}

/* Kontaktseite: Chat/Instagram zuerst */
.cs-cbox { border: 1px solid var(--line2); background: var(--surface); padding: 22px; margin: 0 0 28px; }
.cs-cbox-t { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cs-cbox-t b { font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: 19px; }
.cs-cbox-t span { color: var(--muted); }
.cs-cbox-b { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 22px; font-weight: 800; font-size: 15px; border: 0; cursor: pointer; text-decoration: none !important; flex: 1 1 220px; }
.cs-cbtn-chat { background: var(--accent); color: var(--bg) !important; }
.cs-cbtn-chat:hover { filter: brightness(1.08); }
.cs-cbtn-ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff !important; }
.cs-cbtn-ig:hover { filter: brightness(1.08); }
.cs-cbox-or { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--dim); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.cs-cbox-or::before, .cs-cbox-or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }

/* ================= Kompaktere Startseite (Okt. 2026) ================= */
.cs-flips-sm .cs-flip { height: 190px; }
.cs-flips-sm .cs-flip-f { padding: 20px; gap: 10px; }
.cs-flips-sm .cs-flip-f strong { font-size: 17px; }
.cs-flips-sm .cs-flip-b { padding: 20px; }
.cs-flips-sm .cs-flip-b .q { color: var(--accent); }
button.cs-link-u { background: none; border-width: 0 0 1px; cursor: pointer; padding: 0 0 3px; }

/* ================= Vertrauensleiste (alle Seiten) ================= */
.cs-g-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #4285f4; font: 900 11px/1 Arial, sans-serif; margin-right: 6px; vertical-align: -3px; flex: none; }
.cs-ig-ico { display: inline-block; position: relative; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); margin-right: 7px; vertical-align: -3px; flex: none; }
.cs-ig-ico::after { content: ""; position: absolute; inset: 4px; border: 1.6px solid #fff; border-radius: 50%; }
.cs-stars { color: #f5c518; letter-spacing: 1px; }
.cs-trust { border-bottom: 1px solid var(--line); background: var(--bg); overflow: hidden; font-size: 12.5px; color: var(--muted); }
.cs-trust-track { display: flex; justify-content: center; }
.cs-trust-list { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; flex: none; }
.cs-trust-list[aria-hidden] { display: none; }
.cs-trust-list li { display: block; white-space: nowrap; padding: 9px 20px; line-height: 18px; }
.cs-trust-list li + li { border-left: 1px solid var(--line2); }
.cs-trust-list b { color: var(--fg); font-weight: 700; }
.cs-trust a { color: var(--muted) !important; text-decoration: none !important; }
.cs-trust a:hover b { color: var(--accent); }

/* ================= Community-Block über dem Footer ================= */
.cs-community { padding: 72px 0 0; }
.cs-community + #footer { margin-top: 64px; }
.cs-comm { display: grid; grid-template-columns: 1fr 1.6fr 1fr; border: 1px solid var(--line); background: var(--surface); }
.cs-comm > div { padding: 30px; min-width: 0; }
.cs-comm > div + div { border-left: 1px solid var(--line); }
.cs-comm-big { font-stretch: 125%; font-weight: 900; font-size: 58px; line-height: 1; color: var(--accent); margin: 16px 0 10px; font-variant-numeric: tabular-nums; }
.cs-comm-big small { font-size: 28px; color: var(--fg); }
.cs-comm-sub { font-weight: 600; font-size: 15px; line-height: 1.4; margin: 0 0 20px; color: var(--fg); }
.cs-comm-follow { min-height: 46px; padding: 0 18px; font-size: 14px; }
.cs-comm-follow .cs-ig-ico { margin-right: 2px; }
.cs-comm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.cs-gal-comm { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 104px; gap: 6px; }
.cs-gal-comm .cs-gal-item:first-child, .cs-gal-comm .cs-gal-item:nth-child(2) { grid-column: auto; grid-row: auto; }
.cs-gal-comm.is-open { grid-auto-rows: 104px; }
.cs-comm-g .cs-kicker { display: flex; align-items: center; }
.cs-comm-rate { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 4px; }
.cs-comm-rate b { font-stretch: 125%; font-weight: 900; font-size: 58px; line-height: 1; }
.cs-comm-rate .cs-stars { font-size: 22px; }
.cs-comm-cnt { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.cs-comm-reviews { min-height: 46px; padding: 0 18px; font-size: 14px; }

/* Google-Siegel (nur PC) */
.cs-gbadge { position: fixed; left: 16px; bottom: 76px; z-index: 1020; display: flex; align-items: center; gap: 10px; background: #fff; color: #111 !important; padding: 9px 30px 9px 11px; box-shadow: 0 10px 28px rgba(0,0,0,.5); text-decoration: none !important; font-size: 12px; line-height: 1.25; animation: csUp .25s ease-out; }
.cs-gbadge[hidden] { display: none !important; }
.cs-gbadge .cs-g-ico { width: 24px; height: 24px; font-size: 16px; box-shadow: 0 0 0 1px #ddd; margin: 0; }
.cs-gbadge b { font-size: 15px; }
.cs-gbadge small { display: block; color: #555; font-size: 11.5px; }
.cs-gbadge-x { position: absolute; top: 2px; right: 3px; border: 0; background: none; color: #888; font-size: 12px; padding: 4px; cursor: pointer; }
@keyframes csUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 1099.98px) {
  .cs-comm { grid-template-columns: 1fr 1fr; }
  .cs-comm-pics { grid-column: 1 / -1; grid-row: 2; border-left: 0 !important; border-top: 1px solid var(--line); }
}
@media (max-width: 767.98px) {
  /* Wende-Karten 2×2 */
  .cs-flips.cs-flips-sm { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .cs-flips-sm .cs-flip { height: 150px; }
  .cs-flips-sm .cs-flip-f, .cs-flips-sm .cs-flip-b { padding: 14px; }
  .cs-flips-sm .cs-flip-f strong { font-size: 14px; }
  .cs-flips-sm .cs-flip-b p { font-size: 12.5px; line-height: 1.4; }
  .cs-flips-sm .cs-flip-b .q { font-size: 13px; }
  .cs-flips-sm .cs-flip-hint { top: 10px; right: 12px; }
  /* Vertrauensleiste als Laufband */
  .cs-trust { font-size: 12px; }
  .cs-trust-track { justify-content: flex-start; width: max-content; animation: csTicker 32s linear infinite; }
  .cs-trust-list[aria-hidden] { display: flex; }
  .cs-trust-list li { padding: 8px 14px; }
  @keyframes csTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  /* Community */
  .cs-community { padding-top: 40px; }
  .cs-community + #footer { margin-top: 40px; }
  .cs-comm { grid-template-columns: 1fr; }
  .cs-comm > div { padding: 20px; }
  .cs-comm > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .cs-comm-pics { grid-row: auto; }
  .cs-comm-big, .cs-comm-rate b { font-size: 44px; }
  .cs-gal-comm { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 96px; }
  .cs-gal-comm .cs-gal-item:first-child { height: auto; grid-column: auto; }
  .cs-gal-comm:not(.is-open) .cs-gal-item:nth-child(n+7) { display: none; }
  .cs-gal-comm.is-open { grid-auto-rows: 96px; }
}
@media (prefers-reduced-motion: reduce) { .cs-trust-track { animation: none !important; } }
@media (max-width: 767.98px) { .cs-gal-comm:not(.is-open) .cs-gal-item:nth-child(6) { display: block; } }

.cs-comm.cs-comm-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 767.98px) { .cs-comm.cs-comm-2 { grid-template-columns: 1fr; } }

/* Galerie am Handy: sauberes Raster ohne Überlappung (erstes Bild breit 16:9, Rest 4:3) */
@media (max-width: 767.98px) {
  .cs-gal { grid-auto-rows: auto; gap: 8px; }
  .cs-gal-item { aspect-ratio: 4 / 3; height: auto !important; }
  .cs-gal:not(.cs-gal-comm) .cs-gal-item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .cs-gal-comm .cs-gal-item { aspect-ratio: 1 / 1; }
  .cs-gal-comm, .cs-gal-comm.is-open { grid-auto-rows: auto; }
  .cs-gal-more .cs-btn { width: 100%; }
}

/* Kopf PC: Link-Leiste mittig unter der Vertrauensleiste, Instagram hervorgehoben */
@media (min-width: 992px) {
  #header-top-bar .container-fluid { justify-content: center; }
  #header-top-bar a[href*="ig.me"] {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff !important; font-weight: 700;
    padding: 3px 12px !important; margin: 4px 6px 4px 0; border-radius: 2px;
  }
  #header-top-bar a[href*="ig.me"]:hover { filter: brightness(1.1); color: #fff !important; }
}

/* PC: Vertrauensleiste + Link-Leiste bleiben beim Scrollen oben stehen (über dem mitlaufenden Kopf) */
@media (min-width: 992px) {
  .cs-trust { position: sticky; top: 0; z-index: 1022; height: 38px; box-sizing: border-box; }
  .cs-trust-list li { padding-block: 9px; }
  #header-top-bar { position: sticky; top: 38px; z-index: 1021; background: var(--bg); }
  #jtl-nav-wrapper.sticky-top { top: var(--cs-head-off, 73px); }
}

/* §21-Block kompakt (Okt. 2026) */
.cs-mg-box { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 40px; padding: 36px 40px; align-items: center; }
.cs-mg-main { display: flex; flex-direction: column; gap: 14px; }
.cs-mg-box .cs-h2 { font-size: clamp(26px, 2.6vw, 36px); }
.cs-mg-box .cs-lead { margin: 0; max-width: 60ch; }
.cs-mg-steps { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; }
.cs-mg-steps li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.cs-mg-steps li:last-child { border-bottom: 1px solid var(--line); }
.cs-mg-steps .n { font-family: var(--mono); font-size: 13px; color: var(--accent); flex: none; }
.cs-mg-steps strong { font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: 14px; margin-right: 8px; }
.cs-mg-steps span:not(.n) { color: var(--muted); font-size: 14px; }
.cs-mg-fan { position: relative; display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; padding: 10px 0 0; }
.cs-mg-fan a { width: 34%; margin: 0 -4%; box-shadow: 0 14px 34px rgba(0,0,0,.55); transition: transform .25s ease; }
.cs-mg-fan a:nth-child(1) { transform: rotate(-7deg) translateY(10px); z-index: 1; }
.cs-mg-fan a:nth-child(2) { transform: translateY(-6px); z-index: 2; }
.cs-mg-fan a:nth-child(3) { transform: rotate(7deg) translateY(10px); z-index: 1; }
.cs-mg-fan a:hover { transform: translateY(-14px) scale(1.04); z-index: 3; }
.cs-mg-fan img { width: 100%; height: auto; aspect-ratio: 400 / 566; object-fit: cover; object-position: top; }
.cs-mg-fan-cap { flex-basis: 100%; text-align: center; margin-top: 22px; font-size: 12px; color: var(--dim); letter-spacing: .04em; }
@media (max-width: 991.98px) {
  .cs-mg-box { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 22px; }
  .cs-mg-fan a { width: 30%; }
}
@media (max-width: 767.98px) {
  .cs-mg-steps li { padding: 9px 0; }
  .cs-mg-steps span:not(.n) { display: none; }
  .cs-mg-steps strong { font-size: 13px; }
}

/* Startseite Angebote/Neuheiten: schwarze Bildrahmen wie in den Kategorien, kein Zoom, PC nur 1 Reihe */
.cs-pcard .im { background: #000; height: 230px; }
.cs-pcard .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-pcard:hover .im img { transform: none; }
.cs-pcard:hover { border-color: var(--accent); }
@media (min-width: 768px) {
  .cs-products .cs-scroller .cs-pcard:nth-child(n+5) { display: none; }
}

/* Kundengalerie: Instagram „Follow us“-Knopf */
.cs-follow { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 14px; background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff !important; text-decoration: none !important; transition: filter .2s, transform .2s; }
.cs-follow:hover { filter: brightness(1.1); transform: translateY(-2px); }
.cs-follow span { display: flex; flex-direction: column; line-height: 1.1; }
.cs-follow b { font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: 16px; letter-spacing: .04em; }
.cs-follow small { font-size: 12px; opacity: .9; }

/* Wende-Karten nur am PC/Tablet */
@media (max-width: 767.98px) { .cs-sec-flips { display: none; } }

/* Engere, gleichmäßige Abstände zwischen den Blöcken (vorher 64 + 96 px) */
.cs-home > section.cs-sec, .cs-home > section.cs-finder-sec { padding-bottom: 0 !important; }
.cs-home > section.cs-sec { padding-top: 56px !important; }
.cs-community { padding-top: 56px; }
.cs-sec-head { margin-bottom: 24px; }
@media (max-width: 767.98px) {
  .cs-home > section.cs-sec { padding-top: 36px !important; }
  .cs-community { padding-top: 36px; }
  .cs-sec-head { margin-bottom: 18px; }
}

/* Formulare: Pflichtfeld-Stern ohne weißen Kasten, in Akzentfarbe */
label::after, .label-slide .form-group label::after, .col-form-label::after { background: transparent !important; }
.label-slide .form-group:not(.exclude-from-label-slide) label::after { color: var(--accent) !important; }
/* Beim Springen zu einem Feld (Tab-Taste, Fehlermeldung) nicht unter den festen Kopf rutschen */
html { scroll-padding-top: calc(var(--cs-head-off, 73px) + 135px); }
@media (max-width: 991.98px) { html { scroll-padding-top: 90px; } }

/* ================= Seite „Zahlung und Versand“ ================= */
.cs-zv { display: flex; flex-direction: column; gap: 48px; margin: 8px 0 24px; }
.cs-zv-lead { font-size: 16px; color: #cfcfd3; max-width: 70ch; margin: 0; }
.cs-zv-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.cs-zv .cs-h2 { font-size: clamp(24px, 3vw, 34px); }
.cs-zv-pay { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cs-zv-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.cs-zv-card strong { display: block; font-size: 15px; margin-bottom: 4px; }
.cs-zv-card span:not(.cs-zv-ico) { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.cs-zv-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line2); color: var(--accent); }
.cs-zv-ico svg { width: 24px; height: 24px; }
.cs-zv-hl { border-color: var(--accent); }
.cs-zv-badge { position: absolute; top: -10px; right: 12px; background: var(--accent); color: var(--bg); font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 4px 8px; text-transform: uppercase; }
.cs-zv-carriers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cs-zv-chip { border: 1px solid var(--line2); padding: 8px 14px; font-size: 13.5px; color: var(--muted); }
.cs-zv-chip b { color: var(--fg); }
.cs-zv-note { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; max-width: 80ch; }
.cs-zv-zones { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.cs-zv-zone { border: 1px solid var(--line); background: var(--surface); }
.cs-zv-zone-h { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.cs-zv-zone-h small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.cs-zv-zone-h strong { font-stretch: 112%; font-size: 18px; font-weight: 800; }
.cs-zv-tab { width: 100%; border-collapse: collapse; margin: 0; }
.cs-zv-tab th, .cs-zv-tab td { padding: 10px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.cs-zv-tab tr:first-child th, .cs-zv-tab tr:first-child td { border-top: 0; }
.cs-zv-tab th { font-weight: 500; color: var(--muted); text-align: left; }
.cs-zv-tab td { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fg); }
.cs-zv-times { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.cs-zv-time { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.cs-zv-time b { font-stretch: 125%; font-weight: 900; font-size: 34px; color: var(--accent); line-height: 1; white-space: nowrap; }
.cs-zv-time span { color: var(--muted); font-size: 13px; line-height: 1.3; }
.cs-zv-text p { color: #cfcfd3; font-size: 14.5px; max-width: 85ch; }
.cs-zv-help { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px; border: 1px solid var(--line2); background: var(--surface2); }
.cs-zv-help strong { display: block; font-size: 17px; }
.cs-zv-help span { color: var(--muted); }
.cs-zv-help-b { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-zv-help .cs-btn, .cs-zv-help .cs-cbtn { min-height: 48px; flex: 0 1 auto; }
@media (max-width: 991.98px) { .cs-zv-zones, .cs-zv-times { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 575.98px) { .cs-zv { gap: 36px; } .cs-zv-pay { grid-template-columns: minmax(0,1fr); } .cs-zv-help-b > * { flex: 1 1 100%; } }

/* Zahlung und Versand: engere Abstände */
.cs-zv { gap: 28px; }
.cs-zv-head { margin-bottom: 14px; gap: 6px; }
.cs-zv-note { margin-bottom: 12px; }
.cs-zv-times { margin-bottom: 12px; }
.cs-zv-text p { margin-bottom: 10px; }
@media (max-width: 575.98px) { .cs-zv { gap: 22px; } }
.cs-zv .cs-zv-sec { padding: 0 !important; margin: 0 !important; }

/* ================= Bestellvorgang (Kasse) ================= */
/* Schritt-Leiste: dunkel bleiben, aktueller Schritt grün */
.checkout-steps .step, .checkout-steps .step.step-active { background: var(--surface) !important; }
.checkout-steps .step::after { border-left-color: var(--surface) !important; }
.checkout-steps .step a, .checkout-steps .step .step-text { color: var(--muted) !important; }
.checkout-steps .step.step-active .step-text { color: var(--fg) !important; }
.checkout-steps .step.step-current { background: var(--surface2) !important; box-shadow: inset 0 -2px 0 var(--accent); }
.checkout-steps .step.step-current::after { border-left-color: var(--surface2) !important; }
.checkout-steps .step.step-current .step-text { color: var(--accent) !important; font-weight: 800; }
.checkout-steps .step-check { color: var(--accent) !important; }
.checkout-steps .badge { background: var(--line2) !important; color: var(--fg) !important; }
.checkout-steps .step-active .badge, .checkout-steps .step-current .badge { background: var(--accent) !important; color: var(--bg) !important; }

/* Felder: kein weißer Autofill-Hintergrund */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important; -webkit-text-fill-color: var(--fg) !important; caret-color: var(--fg);
}

/* Versand- und Zahlungsart als Auswahl-Karten */
#content .custom-radio:has(> input[name="Zahlungsart"]),
#content .custom-radio:has(> input[name="Versandart"]) {
  display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 1px solid var(--line2); background: var(--surface); transition: border-color .15s, background .15s;
}
#content .custom-radio:has(> input[name="Zahlungsart"]):hover,
#content .custom-radio:has(> input[name="Versandart"]):hover { border-color: var(--dim); }
#content .custom-radio:has(> input[name="Zahlungsart"]:checked),
#content .custom-radio:has(> input[name="Versandart"]:checked) { border-color: var(--accent); background: var(--surface2); box-shadow: inset 3px 0 0 var(--accent); }
#content .custom-radio:has(> input[name="Zahlungsart"]) > .custom-control-label,
#content .custom-radio:has(> input[name="Versandart"]) > .custom-control-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: 100%; min-height: 64px; padding: 14px 16px 14px 52px; cursor: pointer; }
#content .custom-radio:has(> input[name="Zahlungsart"]) > .custom-control-label::before,
#content .custom-radio:has(> input[name="Zahlungsart"]) > .custom-control-label::after,
#content .custom-radio:has(> input[name="Versandart"]) > .custom-control-label::before,
#content .custom-radio:has(> input[name="Versandart"]) > .custom-control-label::after { left: 18px; top: 50%; transform: translateY(-50%); }
#content .custom-radio:has(> input[name="Zahlungsart"]) img { height: 30px; width: auto; max-width: 120px; object-fit: contain; background: #fff; padding: 4px 8px; border-radius: 3px; }
#content .custom-radio:has(> input[name="Zahlungsart"]) .checkout-payment-method-note,
#content .custom-radio:has(> input[name="Zahlungsart"]) small { color: var(--muted); font-size: 12.5px; flex-basis: 100%; }
#content .custom-radio:has(> input[name="Versandart"]) .content { width: 100%; margin: 0; align-items: center; }
#content .cs-pay-name { font-weight: 700; color: var(--fg); }

/* Zusammenfassung: keine weißen Kopfzeilen, ruhige Tabelle */
#content .card-header { background: var(--surface2) !important; color: var(--fg); border-color: var(--line) !important; }
#content .card { border-color: var(--line) !important; }
#content img[src*="keinBild"] { background: #111 !important; opacity: .45; }
#content .custom-checkbox .custom-control-label::before { background: var(--bg) !important; border: 1px solid var(--dim) !important; }
#content .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background: var(--accent) !important; border-color: var(--accent) !important; }

/* ================= Danke-Seite (Bestellbestätigung) ================= */
.cs-thx { padding: 40px 0 8px; }
.cs-thx-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 20px 32px; border: 1px solid var(--line); background: radial-gradient(120% 140% at 50% 0%, rgba(15,163,184,.14), transparent 60%), var(--surface); }
.cs-thx-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--bg); animation: csPop .5s cubic-bezier(.2,.9,.3,1.4) both; }
.cs-thx-check svg { width: 34px; height: 34px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: csDraw .45s .35s ease-out forwards; }
@keyframes csPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes csDraw { to { stroke-dashoffset: 0; } }
.cs-thx-h { margin: 0; font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 4vw, 44px); line-height: 1.02; max-width: 22ch; }
.cs-thx-lead { margin: 0; color: #cfcfd3; font-size: 16px; max-width: 60ch; }
.cs-thx-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.cs-thx-steps li { border: 1px solid var(--line); background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.cs-thx-steps b { font-family: var(--mono); color: var(--accent); font-size: 13px; }
.cs-thx-steps strong { font-stretch: 112%; text-transform: uppercase; font-size: 14px; }
.cs-thx-steps span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.cs-thx-ig { margin-top: 14px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 24px; align-items: center; padding: 26px; border: 1px solid var(--line2); background: var(--surface2); }
.cs-thx-ig-tx { display: flex; flex-direction: column; gap: 10px; }
.cs-thx-ig-tx p { margin: 0; color: #cfcfd3; }
.cs-thx-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cs-thx-btns .cs-btn { min-height: 54px; }
.cs-thx-ig-pics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.cs-thx-ig-pics img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cs-thx-help { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.cs-thx-help a { color: var(--fg); text-decoration: underline; }
@media (max-width: 991.98px) { .cs-thx-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } .cs-thx-ig { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 575.98px) { .cs-thx { padding-top: 20px; } .cs-thx-hero { padding: 26px 16px; } .cs-thx-steps { grid-template-columns: minmax(0,1fr); } .cs-thx-ig { padding: 18px; } .cs-thx-btns > * { flex: 1 1 100%; } }
/* Danke-Seite: alte JTL-Überschrift ausblenden, Rest kompakt */
main:has(.cs-thx) #content h1 { display: none; }
main:has(.cs-thx) #content .order-confirmation-details, main:has(.cs-thx) #content > .container > p:first-of-type { color: var(--muted); }
/* Lieferstatus bei Fertigung auf Bestellung */
.delivery-status .status.cs-status-made, .delivery-status .status.cs-status-made .status-icon { color: #f2b13b !important; }
/* Danke-Seite: Bitte um Google-Bewertung */
.cs-thx-rev { margin-top: 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--line); background: var(--surface); }
.cs-thx-rev-stars { color: #f5c518; font-size: 26px; letter-spacing: 3px; }
.cs-thx-rev-tx { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.cs-thx-rev-tx strong { font-size: 17px; }
.cs-thx-rev-tx span { color: var(--muted); font-size: 14px; }
@media (max-width: 575.98px) { .cs-thx-rev .cs-btn { width: 100%; } }

/* Forged-Foto erst laden, wenn die Karte ins Bild kommt (Ladezeit) */
.wfc.cs-in::before { background-image: url("/media/image/product/17864/lg/cstar-forged-carbon-gfk-heckspoiler-psm-2-passend-fuer-bmw-f22-f87-m2-competition~3.webp"); }

/* Warenkorb-Popup oben: „Zur Kasse“ = Hauptknopf (grün), „Zum Warenkorb“ = Rahmen; Text bleibt beim Hover lesbar */
header .dropdown-menu a.btn, #shop-nav .dropdown-menu a.btn { min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 800; }
header .dropdown-menu a.btn.cart-dropdown-next,
#shop-nav .dropdown-menu a.btn.cart-dropdown-next { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg) !important; }
header .dropdown-menu a.btn.cart-dropdown-next:hover,
#shop-nav .dropdown-menu a.btn.cart-dropdown-next:hover { background: #38bfd2 !important; border-color: #38bfd2 !important; color: var(--bg) !important; }
header .dropdown-menu a.btn.btn-primary:not(.cart-dropdown-next),
#shop-nav .dropdown-menu a.btn.btn-primary:not(.cart-dropdown-next) { background: transparent !important; border: 1px solid var(--fg) !important; color: var(--fg) !important; }
header .dropdown-menu a.btn.btn-primary:not(.cart-dropdown-next):hover,
#shop-nav .dropdown-menu a.btn.btn-primary:not(.cart-dropdown-next):hover { background: var(--fg) !important; color: var(--bg) !important; }

/* ===== Artikelseite: „In den Warenkorb“ mit Hover-Effekt (Glanz-Streifen, leichtes Anheben, Leuchten) ===== */
#add-to-cart button[name="inWarenkorb"].btn-primary { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease; }
#add-to-cart button[name="inWarenkorb"].btn-primary::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; }
@media (hover: hover) {
  #add-to-cart button[name="inWarenkorb"].btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(15,163,184,.75), 0 0 0 1px rgba(15,163,184,.6); background-color: #38bfd2; color: #0b0b0c; }
  #add-to-cart button[name="inWarenkorb"].btn-primary:hover::after { left: 130%; transition: left .7s ease; }
  #add-to-cart button[name="inWarenkorb"].btn-primary:hover .fa, #add-to-cart button[name="inWarenkorb"].btn-primary:hover svg { animation: csCartNudge .5s ease; }
}
#add-to-cart button[name="inWarenkorb"].btn-primary:active { transform: translateY(0); box-shadow: 0 4px 12px -6px rgba(15,163,184,.8); }
@keyframes csCartNudge { 0%,100% { transform: translateX(0); } 40% { transform: translateX(4px) rotate(-8deg); } 70% { transform: translateX(-1px); } }

/* „Frage zum Artikel“-Fenster: Chat-Box */
.cs-cbox-q { margin-bottom: 18px; }

/* ===== Artikelseite: Beschreibung aufgewertet ===== */
#tab-description .desc { position: relative; max-width: none; background: linear-gradient(180deg, #141416 0%, #0f0f11 100%); border: 1px solid #26262b; border-top: 3px solid var(--cs-acc, #0fa3b8); padding: 30px 32px 26px; margin-bottom: 24px; }
#tab-description .desc::before { content: "Produktdetails"; display: block; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--cs-acc, #0fa3b8); font-weight: 700; margin-bottom: 14px; }
#tab-description .desc > p:first-child:empty, #tab-description .desc > p:first-child:has(> br:only-child) { display: none; }
#tab-description .desc ul { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: 1fr; gap: 0 36px; }
@media (min-width: 992px) { #tab-description .desc ul { grid-template-columns: 1fr 1fr; } }
#tab-description .desc ul li { position: relative; padding: 11px 0 11px 32px; border-bottom: 1px solid #222226; line-height: 1.45; color: #d9d9d6; }
#tab-description .desc ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: rgba(15,163,184,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230fa3b8' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
#tab-description .desc ul li .cs-dk { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8d8d92; font-weight: 600; margin-bottom: 2px; }
#tab-description .desc ul li .cs-dv { color: #fff; font-weight: 600; }
#tab-description .desc .cs-mg-link { display: inline-block; margin-top: 2px; }
#tab-description .desc > p:last-child { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid #3a3a40; background: #0b0b0c; font-size: 12px; color: #8d8d92; line-height: 1.5; }
#tab-description .desc > p:last-child * { font-size: inherit !important; color: inherit !important; }
#tab-description .product-attributes .table { background: #121214; border: 1px solid #26262b; }
#tab-description .product-attributes .table td { border-color: #222226 !important; padding: 12px 16px; background: transparent !important; color: #d9d9d6; }
#tab-description .product-attributes .table td.h6 { color: #8d8d92; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
#product-tabs .nav-link { font-size: 15px; letter-spacing: .02em; }
@media (max-width: 767.98px) { #tab-description .desc { padding: 22px 18px 18px; } }
/* Merkmale-Tabelle: Bezeichnung schmal, Wert direkt daneben */
#tab-description .product-attributes .table { table-layout: auto; width: 100%; }
#tab-description .product-attributes .table td.h6 { width: 1%; white-space: nowrap; padding-right: 28px; }
@media (max-width: 575.98px) { #tab-description .product-attributes .table td.h6 { white-space: normal; width: 40%; } }

/* ===== Artikelseite: Artikelnummer + Hersteller als Kästen ===== */
.product-info-inner ul.info-essential { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.product-info-inner ul.info-essential > li { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 8px 16px; background: #141416; border: 1px solid #2a2a2f; margin: 0 !important; }
.product-info-inner ul.info-essential > li[style*="none"], .product-info-inner ul.info-essential > li.d-none { display: none; }
.product-info-inner ul.info-essential > li > strong { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8d8d92; font-weight: 600; margin-bottom: 3px; }
.product-info-inner ul.info-essential > li > span, .product-info-inner ul.info-essential > li > a { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .03em; font-family: inherit; }
.product-info-inner ul.info-essential .product-manufacturer img { height: 32px !important; width: auto !important; max-width: 160px; filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.product-info-inner ul.info-essential .product-manufacturer a { display: inline-flex; align-items: center; }
.cs-cbox .cs-q-nr { font: inherit; font-weight: 700; color: #fff; }

/* ===== Seite „Artikel im Warenkorb“: Hover für „Zum Warenkorb“ / „Weiter einkaufen“ + Erfolgs-Zeile ===== */
#pushed-success .btn-basket, #pushed-success .continue-shopping { position: relative; overflow: hidden; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
#pushed-success .btn-basket::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; }
@media (hover: hover) {
  #pushed-success .btn-basket:hover { transform: translateY(-2px); background-color: #38bfd2; border-color: #38bfd2; color: #0b0b0c; box-shadow: 0 10px 28px -8px rgba(15,163,184,.75), 0 0 0 1px rgba(15,163,184,.6); }
  #pushed-success .btn-basket:hover::after { left: 130%; transition: left .7s ease; }
  #pushed-success .btn-basket:hover .fa { animation: csCartNudge .5s ease; }
  #pushed-success .continue-shopping:hover { transform: translateY(-2px); background: transparent; border-color: #0fa3b8; color: #0fa3b8; }
  #pushed-success .continue-shopping:hover .fa { animation: csBackNudge .5s ease; }
}
#pushed-success .btn-basket:active, #pushed-success .continue-shopping:active { transform: translateY(0); }
@keyframes csBackNudge { 0%,100% { transform: translateX(0); } 40% { transform: translateX(-4px); } }
#pushed-success .card-header, #pushed-success > .alert, #pushed-success .alert-info { position: relative; font-weight: 700; font-size: 16px; color: #fff; }

/* Merchandise (nur Duftbaum) aus Hauptmenü und Kategorie-Liste ausblenden – Seite/Artikel bleiben per Suche & URL erreichbar */
li.nav-item:has(> a.nav-link[href$="/Merchandise"]) { display: none !important; }

/* ===== 404 ===== */
.cs-404 { position: relative; overflow: hidden; padding: 56px 0 40px; text-align: center; border-bottom: 1px solid #222226; margin-bottom: 32px; }
.cs-404-num { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); font-family: var(--cs-font-head, inherit); font-weight: 900; font-size: clamp(140px, 24vw, 320px); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(15,163,184,.18); pointer-events: none; user-select: none; }
.cs-404 .cs-wrap { position: relative; max-width: 760px; margin: 0 auto; }
.cs-404-h { font-size: clamp(30px, 4vw, 52px); text-transform: uppercase; margin: 10px 0 14px; color: #fff; }
.cs-404-lead { color: #bdbdbd; max-width: 600px; margin: 0 auto 22px; }
.cs-404-search { display: flex; gap: 0; max-width: 560px; margin: 0 auto 20px; }
.cs-404-search input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; background: #141416; border: 1px solid #2a2a2f; border-right: 0; color: #fff; font-size: 16px; }
.cs-404-search input:focus { outline: none; border-color: #0fa3b8; }
.cs-404-search .cs-btn { height: 52px; border-radius: 0; }
.cs-404-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cs-404-ig { background: linear-gradient(90deg, #f9a03f, #e1306c 55%, #833ab4) !important; border-color: transparent !important; color: #fff !important; }

/* ===== Mein Konto: Neu-hier-Kasten ===== */
.cs-newbox { background: linear-gradient(180deg, #141416, #0f0f11); border: 1px solid #26262b; border-top: 3px solid #0fa3b8; padding: 26px 28px; height: 100%; }
.cs-newbox h2 { font-size: 24px; text-transform: uppercase; color: #fff; margin: 6px 0 14px; }
.cs-newbox ul { list-style: none; padding: 0; margin: 0 0 20px; }
.cs-newbox li { position: relative; padding: 6px 0 6px 28px; color: #d9d9d6; }
.cs-newbox li::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: rgba(15,163,184,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230fa3b8' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.cs-newbox .cs-btn { min-width: 200px; }
.cs-newbox small { display: block; margin-top: 14px; color: #8d8d92; font-size: 12.5px; }
@media (max-width: 991.98px) { .cs-newbox { margin-top: 28px; } }

/* ===== Footer: 4. Spalte ===== */
.cs-fcol .productlist-filter-headline { display: block !important; margin-bottom: 12px; }
.cs-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cs-fchips span { font-size: 12px; font-weight: 600; padding: 5px 9px; border: 1px solid #2a2a2f; background: #141416; color: #d9d9d6; white-space: nowrap; }
.cs-fchips-ship span { color: #0fa3b8; border-color: rgba(15,163,184,.35); }
.cs-fig { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 14px; font-weight: 700; font-size: 13px; color: #fff !important; background: linear-gradient(90deg, #f9a03f, #e1306c 55%, #833ab4); text-decoration: none !important; transition: transform .2s ease, filter .2s ease; }
.cs-fig:hover { transform: translateY(-2px); filter: brightness(1.1); }
.cs-forged-hint { margin: 6px 0 26px; border-top: 3px solid #0fa3b8; }
.cs-forged-hint .cs-cbox-t strong { color: #0fa3b8; }

/* „Nur Montagematerial bestellen“ im selben Kasten */
.cs-addon .cs-addon-only { display: block; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed #2f2f35; }

/* ===== Kopf: „Mein Auto“-Knopf + Fahrzeug-Fenster ===== */
#shop-nav .cs-carnav { display: flex; align-items: center; margin-right: 8px; }
#shop-nav .cs-carbtn { display: flex !important; align-items: center; gap: 9px; height: 46px; padding: 0 14px !important; border: 1px solid #2a2a2f; background: #141416; color: #fff !important; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
#shop-nav .cs-carbtn svg { color: #0fa3b8; flex: none; }
#shop-nav .cs-carbtn-t { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
#shop-nav .cs-carbtn-t small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8d8d92; }
#shop-nav .cs-carbtn-t b { font-size: 13px; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#shop-nav .cs-carbtn:hover { border-color: #0fa3b8; background: #0b1a1d; transform: translateY(-1px); }
@media (max-width: 991.98px) { #shop-nav .cs-carnav { display: none; } }
.cs-carpop { position: fixed; inset: 0; z-index: 1060; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: csFade .2s ease; }
.cs-carpop[hidden] { display: none; }
.cs-carpop-in { position: relative; width: 100%; max-width: 980px; animation: csPop .25s ease; }
.cs-carpop-x { position: absolute; right: -6px; top: -44px; width: 36px; height: 36px; border: 1px solid #2a2a2f; background: #141416; color: #fff; font-size: 16px; cursor: pointer; }
.cs-carpop-x:hover { border-color: #0fa3b8; color: #0fa3b8; }
.cs-carpop .cs-finder { margin: 0 !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); border-top: 3px solid #0fa3b8; }
body.cs-carpop-open { overflow: hidden; }
@keyframes csFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes csPop { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) { .cs-carpop { padding-top: 70px; } .cs-carpop-x { top: -46px; right: 0; } }
.cs-404 .cs-wrap { max-width: 900px; }
.cs-404-h { font-size: clamp(28px, 3.4vw, 44px); }
.cs-404-search { width: 100%; }
.cs-404-search input { width: auto; }

/* BMW-Marken-Hinweis */
.cs-brandnote { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 24px; padding: 18px 20px; background: #121214; border: 1px solid #2a2a2f; border-left: 4px solid #f0a020; }
.cs-brandnote svg { flex: none; color: #f0a020; margin-top: 1px; }
.cs-brandnote p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #c9c9c6; }
.cs-brandnote b { color: #fff; }
/* 404: Suchknopf nicht strecken */
.cs-404-search .cs-btn { flex: none; width: auto; min-width: 0; padding: 0 22px; }
.cs-404-finder { margin: 34px auto 0; max-width: 1100px; text-align: left; }
.cs-404 .cs-wrap:has(.cs-404-finder) { max-width: 1100px; }
.cs-404 .cs-404-h, .cs-404 .cs-404-lead, .cs-404 .cs-404-search { margin-left: auto; margin-right: auto; }
.cs-404 .cs-404-h { max-width: 900px; }
.cs-404-search > span, .cs-404-search .twitter-typeahead { flex: 1 1 auto; display: block !important; min-width: 0; }
.cs-404-search .twitter-typeahead input { width: 100% !important; }
.cs-404-search .tt-menu { text-align: left; }

.cs-acc-t { color: #0fa3b8; font-weight: 700; }
/* Startseiten-Slider Handy: Punkte unter die Bildunterschrift statt darüber */
@media (max-width: 767.98px) {
  .slider-wrapper .splide__pagination { position: static !important; padding: 6px 0 2px; background: rgba(11,11,12,.8); }
  .slider-wrapper .splide__slide__caption { padding-bottom: 4px; }
}

/* Handy: Etikett „Live-Chat“ neben dem runden Chat-Knopf */
.cs-chatlbl { position: fixed; z-index: 2147483000; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid rgba(15,163,184,.5); border-radius: 16px; background: #0b0b0c; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 18px -6px rgba(0,0,0,.8); animation: csLblIn .35s ease; }
.cs-chatlbl[hidden] { display: none; }
.cs-chatlbl i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc5a; box-shadow: 0 0 0 3px rgba(61,220,90,.25); animation: csPulse 1.8s ease-in-out infinite; }
@keyframes csLblIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes csPulse { 50% { box-shadow: 0 0 0 6px rgba(61,220,90,0); } }
@media (min-width: 768px) { .cs-chatlbl { display: none !important; } }

/* Kategorie-Kacheln: lange Namen (z. B. „Frontspoilerlippen“, „Seitenschwellerverbreiterung“) sauber umbrechen statt überlaufen */
#content .sub-categories .caption, #content .sub-categories .caption a,
.content-cats-small .caption, .content-cats-small .caption a,
#content .sub-categories ul a {
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; word-break: normal; min-width: 0; max-width: 100%;
}
#content .sub-categories .caption { overflow: hidden; }
@media (max-width: 767.98px) {
  #content .sub-categories .caption, #content .sub-categories .caption a,
  .content-cats-small .caption, .content-cats-small .caption a { font-size: 13px; letter-spacing: 0; line-height: 1.25; }
}
/* gleiche Absicherung für Artikelnamen in Kacheln und Überschriften */
.productbox-title, .productbox-title a { overflow-wrap: break-word; }
/* Handy: Sicherheitsnetz gegen seitliches Wackeln (clip statt hidden, damit „sticky“ weiter funktioniert) */
@media (max-width: 767.98px) { html, body { overflow-x: clip; } }
#mainNavigation .cs-navhome .nav-link { color: #0fa3b8 !important; font-weight: 700; }
#mainNavigation .cs-navcontact { padding: 18px 16px 8px; border-top: 1px solid #222226; margin-top: 10px; }
#mainNavigation .cs-navcontact-h { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8d8d92; margin-bottom: 10px; }
#mainNavigation .cs-navcontact-b { display: flex; gap: 8px; }
#mainNavigation .cs-navcontact .cs-cbtn { flex: 1 1 0; min-height: 44px; padding: 0 10px; font-size: 14px; }

/* ===== Kasse: Zahlungsarten einheitlich ===== */
label.cs-pay > img, label.cs-pay > .ppc-option-img, label.cs-pay > .funding-name, label.cs-pay > .content, label.cs-pay > .cs-pay-name { display: none !important; }
label.cs-pay { display: block !important; width: 100%; }
label.cs-pay .cs-pay-head { display: flex; align-items: center; gap: 14px; }
label.cs-pay .cs-pay-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 40px; background: #1b1b1f; border: 1px solid #2f2f35; border-radius: 6px; color: #fff; }
label.cs-pay .cs-pay-t { font-weight: 700; font-size: 15.5px; color: #fff; }
label.cs-pay .checkout-payment-method-badge { margin-left: auto; padding: 4px 9px; background: #0fa3b8; color: #0b0b0c; font-weight: 800; font-size: 13px; border-radius: 3px; }
label.cs-pay .checkout-payment-method-badge span:empty { display: none; }
label.cs-pay .checkout-payment-method-note { display: block; margin: 6px 0 0 78px; color: #9a9aa0; }
label.cs-pay .checkout-payment-method-note small:empty { display: none; }
.cs-pay-word { font-style: italic; font-weight: 900; font-size: 15px; letter-spacing: -.02em; line-height: 1; }
.cs-pay-word b { color: #fff; font-weight: 900; }
.cs-pay-word i { color: #29a8e0; font-weight: 900; }
.cs-pay-word-sm { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.cs-pay-word-sm em { font-style: normal; font-weight: 700; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #0fa3b8; margin-top: 2px; }
.cs-pay-sepa { font-style: normal; color: #6fa8ff; letter-spacing: .04em; }
.cs-pay-amz { display: flex; flex-direction: column; align-items: center; font-style: normal; font-weight: 800; font-size: 12.5px; color: #fff; }
.cs-pay-amz small { color: #ff9900; font-weight: 700; font-size: 10px; margin-top: 1px; }
.cs-pay-ic-bank svg, .cs-pay-ic-card svg, .cs-pay-ic-invoice svg { color: #0fa3b8; }
.checkout-payment-method:has(input:checked) label.cs-pay .cs-pay-ic { border-color: #0fa3b8; }
@media (max-width: 575.98px) { label.cs-pay .checkout-payment-method-note { margin-left: 0; } label.cs-pay .cs-pay-ic { width: 56px; height: 36px; } }

/* „Artikel im Warenkorb“: Knöpfe oben */
#pushed-success .cs-pushed-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 14px 16px 18px; }
#pushed-success .cs-pushed-top .btn { flex: 1 1 220px; max-width: 340px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
@media (hover: hover) {
  #pushed-success .cs-pushed-checkout:hover { transform: translateY(-2px); background-color: #38bfd2; border-color: #38bfd2; color: #0b0b0c; box-shadow: 0 10px 28px -8px rgba(15,163,184,.75); }
  #pushed-success .cs-pushed-cart:hover { transform: translateY(-2px); background: transparent; border-color: #0fa3b8; color: #0fa3b8; }
}
/* nicht gewählte Zahlart: Zusatz-Bereiche zu */
.checkout-payment-method.cs-pay-off > :not(.custom-control):not(script):not(input) { display: none !important; }

/* Kasse: Versandart – Punkt, Name und Preis in einer Flucht */
.checkout-shipping-form label[for^="del"].custom-control-label { display: flex !important; align-items: center; min-height: 64px; padding-top: 12px !important; padding-bottom: 12px !important; }
.checkout-shipping-form label[for^="del"] .form-row.content { flex: 1; display: flex; flex-wrap: nowrap; align-items: center; margin: 0; }
.checkout-shipping-form label[for^="del"] .form-row.content > .col { flex: 1 1 auto; max-width: none; width: auto; padding-top: 0; padding-bottom: 0; }
.checkout-shipping-form label[for^="del"] .form-row.content > .col:has(> .desc:empty) { display: none; }
.checkout-shipping-form label[for^="del"] .price-col { flex: 0 0 auto !important; text-align: right; white-space: nowrap; font-size: 16px; }
.checkout-shipping-form label[for^="del"] .title { font-weight: 700; font-size: 15.5px; }
.checkout-shipping-form label[for^="del"]::before, .checkout-shipping-form label[for^="del"]::after { top: 50% !important; transform: translateY(-50%); }
.checkout-shipping-form label[for^="del"] .checkout-shipping-form-options-specific-cost:empty { display: none; }
/* Zahlarten: Punkt auf Höhe der Logo-Kachel */
label.cs-pay::before, label.cs-pay::after { top: 34px !important; transform: translateY(-50%); }
.checkout-shipping-form label[for^="del"] { flex-wrap: nowrap !important; }
.checkout-shipping-form label[for^="del"] .form-row.content { min-height: 0 !important; }
.checkout-shipping-form label[for^="del"] .form-row.content > .col { align-self: center !important; margin: 0 !important; }
.checkout-shipping-form label[for^="del"] > .checkout-shipping-form-options-specific-cost { position: absolute; left: 0; bottom: 4px; }

/* Farb-Vorschau-Knopf (nur Testshop, per JS eingeblendet) */
.cs-colorbtn { position: fixed; left: 70px; bottom: 18px; z-index: 2147483001; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: #0b0b0c; color: #fff; border: 1px solid #3a3a40; border-radius: 20px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px -8px rgba(0,0,0,.9); cursor: pointer; }
.cs-colorbtn i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.cs-colorbtn:hover { border-color: #fff; }
@media (max-width: 767.98px) { .cs-colorbtn { left: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); } }
/* Fahrzeugwahl: „Anderes Fahrzeug wählen“ als klarer Knopf */
.cs-finder__clear { display: inline-flex !important; align-items: center; gap: 7px; min-height: 36px !important; padding: 0 14px !important; border: 1px solid #3a3a40 !important; background: #141416 !important; color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 13px !important; transition: border-color .2s ease, color .2s ease; }
.cs-finder__clear:hover { border-color: #0fa3b8 !important; color: #0fa3b8 !important; }
@media (max-width: 575.98px) { .cs-finder__clear { width: 100%; justify-content: center; } }

/* Handy-Schnellleiste auffälliger */
@media (max-width: 767.98px) {
  .cs-tabbar { background: linear-gradient(180deg, #19191c 0%, #111113 100%) !important; border-top: 2px solid #0fa3b8 !important; box-shadow: 0 -10px 28px -6px rgba(0,0,0,.85); }
  .cs-tabbar a { gap: 4px; font-size: 11.5px !important; font-weight: 700; letter-spacing: .01em; color: #fff !important; }
  .cs-tabbar a svg { width: 24px; height: 24px; color: #0fa3b8; stroke-width: 2; }
  .cs-tabbar a + a { border-left: 1px solid #26262b; }
  .cs-tabbar a.on { background: rgba(15,163,184,.1); }
  .cs-tabbar a:active { background: rgba(15,163,184,.18); }
}

/* Kategorieseiten: Fahrzeugwahl zum Aufklappen */
.cs-finder--fold .cs-finder__head { cursor: pointer; align-items: center; flex-wrap: nowrap; user-select: none; }
.cs-finder--fold .cs-finder__hint { display: none; }
.cs-finder--fold .cs-finder__sum { margin-left: auto; font-weight: 700; font-size: 14px; color: #0fa3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cs-finder--fold .cs-finder__chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #3a3a40; color: #fff; transition: transform .25s ease, border-color .2s ease; }
.cs-finder--fold .cs-finder__head:hover .cs-finder__chev { border-color: #0fa3b8; }
.cs-finder--fold:not(.is-closed) .cs-finder__chev { transform: rotate(180deg); }
.cs-finder--fold.is-closed { padding-top: 14px !important; padding-bottom: 14px !important; }
.cs-finder--fold.is-closed > :not(.cs-finder__head) { display: none !important; }
.cs-finder--fold:not(.is-closed) .cs-finder__head { margin-bottom: 14px; }
@media (max-width: 575.98px) { .cs-finder--fold .cs-finder__title { font-size: 14px !important; } .cs-finder--fold .cs-finder__sum { font-size: 13px; } }
#consent-banner .cs-consent-lead { font-size: 15px; font-weight: 600; color: #fff; margin: 6px 0 10px; line-height: 1.45; }
/* echte H2 statt Deko-Zeile */
#tab-description .desc.cs-has-h2::before { content: none; display: none; }
#tab-description .desc .cs-desc-h { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #0fa3b8; font-weight: 700; margin: 0 0 16px; line-height: 1.5; font-family: inherit; }
#tab-description .product-attributes .cs-attr-h { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #8d8d92; font-weight: 700; margin: 6px 0 12px; font-family: inherit; }
/* Mengenfeld: Rahmen unten wurde vom Inhalt überdeckt */
#add-to-cart .choose_quantity, .form-counter.choose_quantity { overflow: hidden; }
/* Produktdetails: zwei Spalten ohne gemeinsame Zeilenhöhe (kein Leerraum neben langen Einträgen) */
@media (min-width: 992px) {
  #tab-description .desc ul { display: block !important; columns: 2; column-gap: 36px; }
  #tab-description .desc ul li { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
}

/* Cookie-Banner dunkel (JTL-Standard ist weiß) */
#consent-manager #consent-banner { background: #131315 !important; border-color: #26262a !important; color: #f2f2f0 !important; box-shadow: 0 -12px 40px -10px rgba(0,0,0,.9); }
#consent-manager #consent-banner a { color: #0fa3b8 !important; }
#consent-manager #consent-banner, #consent-manager #consent-banner * { font-family: inherit; }
#consent-manager #consent-banner .consent-banner-body, #consent-manager #consent-banner > div { background: transparent !important; }
#consent-manager #consent-banner .consent-display-2 { color: #fff !important; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
#consent-manager #consent-banner p { color: #b9b9be !important; }
#consent-manager #consent-banner .cs-consent-lead { color: #fff !important; }
#consent-manager .consent-btn { min-height: 46px; font-weight: 700 !important; border-radius: 0 !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
#consent-manager #consent-banner-btn-all, #consent-manager .consent-btn-primary, #consent-manager .consent-btn-success { background: #0fa3b8 !important; border: 1px solid #0fa3b8 !important; color: #0b0b0c !important; }
#consent-manager #consent-banner-btn-all:hover, #consent-manager .consent-btn-primary:hover, #consent-manager .consent-btn-success:hover { background: #38bfd2 !important; border-color: #38bfd2 !important; }
#consent-manager .consent-btn-outline-primary, #consent-manager .consent-btn-secondary, #consent-manager #consent-banner-btn-settings, #consent-manager #consent-banner-btn-close { background: transparent !important; border: 1px solid #4a4a52 !important; color: #fff !important; }
#consent-manager .consent-btn-outline-primary:hover, #consent-manager .consent-btn-secondary:hover, #consent-manager #consent-banner-btn-settings:hover, #consent-manager #consent-banner-btn-close:hover { border-color: #0fa3b8 !important; color: #0fa3b8 !important; }
/* Einstellungs-Fenster ebenfalls dunkel */
#consent-manager .consent-modal-content { background: #131315 !important; color: #f2f2f0 !important; border: 1px solid #26262a; }
/* Cookie-Banner: Live-Chat-Schild solange ausblenden, kompakter am Handy */
body:has(#consent-manager.active #consent-banner) .cs-chatlbl { display: none !important; }
@media (max-width: 767.98px) {
  #consent-manager #consent-banner { padding: 14px 16px !important; max-height: 80vh; overflow-y: auto; }
  #consent-manager #consent-banner .consent-display-2 { font-size: 16px; }
  #consent-manager #consent-banner .cs-consent-lead { font-size: 14px; margin: 4px 0 8px; }
  #consent-manager #consent-banner p { font-size: 12px; line-height: 1.45; }
  #consent-manager .consent-btn { min-height: 44px; }
}

/* 3.0.5 Facelift-/LCI-Hinweis in der Passt-Box */
.cs-fitok .cs-lci { flex-basis: 100%; margin: 4px 0 0; padding-top: 9px; border-top: 1px solid var(--ok-line); font-size: 13px; line-height: 1.45; color: var(--fg-2, #b9b9bd); }
.cs-fitok .cs-lci b { color: var(--fg); }

/* 3.0.6 Facelift-Auswahl (Fahrzeugwahl, Artikelseite, Kasse) */
.cs-finder__fl { display: inline-flex; align-items: center; gap: 8px; margin: 0 14px 8px 0; font-size: 13px; color: var(--fg-2, #b9b9bd); }
.cs-finder__fl select { background: #131315; color: var(--fg); border: 1px solid #2a2a2e; padding: 7px 10px; font-size: 13px; }
.cs-fitok .cs-lci-ask, .cs-fitok .cs-lci-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--fg); }
.cs-fitok .cs-lci-ask button { background: transparent; color: var(--fg); border: 1px solid #0fa3b8; padding: 6px 12px; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.cs-fitok .cs-lci-ask button:hover, .cs-fitok .cs-lci-ask button:focus-visible { background: #0fa3b8; color: #fff; }
.cs-fitok .cs-lci-mine button { background: none; border: 0; padding: 0; color: #38bfd2; text-decoration: underline; font-size: 13px; cursor: pointer; }
.cs-fitno .cs-lci { border-top-color: rgba(255,255,255,.12); }
.cs-ordercar { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #1c4a52; background: #0b171a; border-radius: 4px; }
.cs-ordercar-k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #38bfd2; }
.cs-ordercar b { font-size: 14px; color: #fff; }
.cs-ordercar small { font-size: 12px; color: #9a9aa0; }

/* 3.0.9 Geburtsdatum-Hinweis */
.cs-bday-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--fg-2, #b9b9bd); }
.cs-bday-hint b { color: var(--fg); }
.cs-bday-opt { font-weight: 400; opacity: .7; }

/* 3.0.10 Ladeverhalten: Platz für Slider und Fahrzeugwahl reservieren (verhindert Layout-Sprünge / CLS) */
.cs-is-home .slider-wrapper { aspect-ratio: 2.12; }
@media (min-width: 576px) { .cs-is-home .slider-wrapper { aspect-ratio: 2.35; } }
@media (min-width: 768px) { .cs-is-home .slider-wrapper { aspect-ratio: 2.75; } }
#cs-vehicle-finder[data-variant="home"]:empty { min-height: 430px; }
@media (min-width: 576px) { #cs-vehicle-finder[data-variant="home"]:empty { min-height: 400px; } }
@media (min-width: 768px) { #cs-vehicle-finder[data-variant="home"]:empty { min-height: 265px; } }
@media (min-width: 1080px) { #cs-vehicle-finder[data-variant="home"]:empty { min-height: 180px; } }

/* 3.0.11 Slider: erstes Bild schon vor dem Slider-Script zeigen (LCP) */
.cs-is-home .splide:not(.is-initialized) { visibility: visible; }
.cs-is-home .splide:not(.is-initialized) .splide__slide { width: 100%; }
.cs-is-home .splide:not(.is-initialized) .splide__slide:not(:first-child),
.cs-is-home .splide:not(.is-initialized) .splide__arrows,
.cs-is-home .splide:not(.is-initialized) .splide__pagination { display: none; }
.cs-is-home .splide:not(.is-initialized) .splide__slide img { display: block; width: 100%; height: auto; }

/* 3.0.14 Desktop: Logo aus dem Fluss nehmen → Kategorie-Leiste über volle Breite mittig (ohne JS, kein Layout-Sprung) */
@media (min-width: 992px) {
  #jtl-nav-wrapper > .container-fluid { position: relative; }
  #jtl-nav-wrapper .toggler-logo-wrapper { position: absolute; top: 0; left: 16px; float: none; z-index: 2; }
}

/* 3.0.19 Zahlarten: weitere einheitliche Logos (Barzahlung, Google Pay, Apple Pay, Raten) */
.cs-pay-ic-cash svg, .cs-pay-ic-rate svg { color: #0fa3b8; }
.cs-pay-gpay { font-style: normal; font-weight: 600; font-size: 14px; color: #fff; letter-spacing: 0; }
.cs-pay-gpay b { font-weight: 800; background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-pay-apay { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-weight: 600; font-size: 14.5px; color: #fff; letter-spacing: 0; }
.cs-pay-apay svg { margin-top: -2px; }
/* Original-Logos der Plugins (weiße Kästen) ausblenden, sobald unsere Kachel da ist */
label.cs-pay > img, label.cs-pay > span:not(.cs-pay-head):not(.checkout-payment-method-note) img, label.cs-pay .funding-logo, label.cs-pay picture { display: none !important; }

/* 3.0.20 Danke-Seite: Bestellnummer groß und in Akzentfarbe */
.cs-thx-nr { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px auto 18px; padding: 12px 26px; border: 1px solid #0fa3b8; background: rgba(15,163,184,.10); border-radius: 6px; }
.cs-thx-nr small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9a9aa0; }
.cs-thx-nr b { font-size: clamp(24px, 5vw, 34px); font-weight: 900; letter-spacing: .04em; color: #38bfd2; line-height: 1.1; user-select: all; }

/* 3.0.23 Passt-Box: Fahrzeug ändern / wählen */
.cs-fitcar .cs-fit-btns { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cs-fitcar .cs-fit-change, .cs-fitask .cs-fit-pick { background: transparent; border: 1px solid #0fa3b8; color: #fff; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.cs-fitcar .cs-fit-change:hover, .cs-fitask .cs-fit-pick:hover { background: #0fa3b8; color: #0b0b0c; }
.cs-fitcar .cs-fit-clear { background: none; border: 0; color: #9a9aa0; font-size: 14px; padding: 4px 6px; cursor: pointer; text-decoration: none; }
.cs-fitcar .cs-fit-clear:hover { color: #fff; }
.cs-fitask { background: #121214; border-color: #2a2a2e; }
.cs-fitask .cs-fit-pick { margin-left: auto; }
.cs-fitask .cs-check { color: #0fa3b8; }

/* 3.0.24 Beschreibungen mit eingebettetem Fremd-HTML (z. B. "tab-pane fade" aus Herstellertexten) sichtbar machen – sonst unsichtbarer Block = große Lücke */
.product-description .tab-pane, .product-description .fade, .desc .tab-pane, .desc .fade { display: block !important; opacity: 1 !important; visibility: visible !important; }
.product-manufacturer a.cs-mf-text { color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }