/** Shopify CDN: Minification failed

Line 9594:54 Unexpected "--is-focused"
Line 9679:53 Unexpected "--is-focused"
Line 9684:53 Unexpected "--is-selected"
Line 10097:60 Unexpected "--is-focused"
Line 10181:59 Unexpected "--is-focused"
Line 10184:59 Unexpected "--is-selected"

**/
/* ============================================
   Coffee Elements Component Styles
   Ported from coffee-elements-prototype/globals.css
   Values from buttons/page.tsx, cards/page.tsx
   ============================================ */

/* ---- Buttons ---- */

.ce-btn-primary {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-button);
  font-weight: 500;
  background-color: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border: none;
  border-radius: var(--ce-radius-sm);
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color var(--ce-transition);
  display: inline-flex;
  align-items: center;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  min-width: unset;
  min-height: unset;
}

.ce-btn-primary:hover {
  background-color: var(--ce-surface-invert-hover);
}

.ce-btn-outline {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-button-outline);
  font-weight: 500;
  background: transparent;
  color: var(--ce-text-secondary);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color var(--ce-transition), color var(--ce-transition);
  display: inline-flex;
  align-items: center;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  min-width: unset;
  min-height: unset;
}

.ce-btn-outline:hover {
  border-color: var(--ce-border-strong);
  color: var(--ce-text-heading);
}

/* ---- Badges ---- */

.ce-badge {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--ce-radius-full);
  display: inline-block;
}

/* ---- Price ---- */

.ce-price {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-body);
  font-weight: 500;
}

/* ---- Cards ---- */

.ce-card {
  background: var(--ce-surface-card);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.ce-card:hover {
  box-shadow: var(--ce-shadow-card-hover);
}

/* ---- Fix 1: Header gap — Dawn sticky header JS sets --header-height and
   reserves space above the header group. Until CE header replaces Dawn header,
   force the header group to collapse that reserved space. ---- */

.shopify-section-group-header-group .shopify-section:empty {
  display: none;
}

.section-header {
  margin-bottom: 0;
}

/* Cart drawer takes flow space when its CSS is missing (Dawn lazy-loads
   component-cart-drawer.css which we stripped). Position it out of flow. */
cart-drawer,
.drawer {
  position: fixed !important;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 100;
}

/* ---- Fix 2: Image Banner — fallback when no image is uploaded ---- */
/* Source: dawn-banner.css handles all sizing. This only adds a
   background fallback so the banner isn't invisible without an image. */

.banner:not(:has(img)):not(:has(svg)) {
  background-color: var(--ce-surface-muted);
}

.banner::after {
  background-color: var(--ce-surface-invert);
}

/* ---- CE Product Cards ---- */
/* Source: product-cards/page.tsx — Shop Product Card spec (verified 2026-03-27)
   Container: rounded-16px, border border-default, shadow-card
   Brand: Pressura Mono 11px uppercase tracking-wider, text-tertiary
   Image: h-200px flex center p-16px object-contain
   Title: Pressura 18px/500, text-heading
   Price: Pressura Mono 14px, text-secondary
   VAT: Pressura Mono 11px, text-tertiary
   Body: p-20px */

/* Card container */
.card--card {
  --border-radius: 16px;
  --border-width: 0;
  background: var(--ce-surface-card);
  border-radius: 16px;
  border: 1px solid var(--ce-border-default);
  overflow: hidden;
  transition: box-shadow 200ms ease;
  box-shadow: var(--ce-shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Entire card clickable via title link ::after */
.card--card .full-unstyled-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* First card__content (inside card__inner) is the "no media" fallback — hide title/badge duplicate */
.card--card .card__inner > .card__content .card__heading,
.card--card .card__inner > .card__content .card__badge {
  display: none !important;
}

/* Second card__content is the real one (outside card__inner) */
.card--card > .card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
}

/* Card info: flex column with vendor on top via order */
.card--card .card-information {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Vendor: top position, Pressura Mono 11px uppercase muted */
.card--card .card-information .caption-with-letter-spacing {
  order: -2;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-muted, #B6B7BB);
  margin-bottom: 4px;
}

/* Title: Pressura 16px/500, below vendor */
.card--card .card__heading {
  order: -1;
  font-family: 'Pressura', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--text-heading, #18191A);
  margin-bottom: 8px;
}

.card--card .card__heading a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Price: bottom, Pressura Mono */
.card--card .price {
  margin-top: auto;
  font-family: 'Pressura Mono', sans-serif;
}

.card--card .price-item {
  font-family: 'Pressura Mono', sans-serif;
  font-weight: 500;
}

/* Hide sale/sold-out badges on cards */
.card--card .badge,
.card--card .card__badge {
  display: none !important;
}

/* Hide duplicate price in sale mode */
.card--card .price__sale .price-item--regular {
  display: none;
}

.card--card .price__badge-sale,
.card--card .price__badge-sold-out {
  display: none !important;
}

/* Card inner: no padding, let media fill edge to edge */
.card--card .card__inner {
  padding: 0 !important;
}

/* Card media: full width, white bg */
.card--card .card__media {
  width: 100%;
  background: #FFFFFF;
}

.card--card .card__media .media {
  overflow: hidden;
  height: 260px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF !important;
  width: 100%;
  position: relative;
}

/* First image: centered, contained */
.card--card .card__media .media img:first-child {
  position: relative !important;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  margin: auto;
}

/* Secondary image: keep Dawn hover behavior (absolute, hidden until hover) */
.card--card .card__media .media img:nth-child(2) {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  opacity: 0;
  transition: opacity 200ms ease;
  padding: 16px;
}

.card--card:hover .card__media .media img:nth-child(2) {
  opacity: 1;
}

.card--card:after {
  display: none; /* Remove Dawn pseudo-element shadow — we use box-shadow directly */
}

.card--card:hover {
  box-shadow: var(--ce-shadow-card-hover);
}

/* Image container — 200px height, centered, object-contain */
.card__media .media {
  position: relative;
  overflow: hidden;
  height: 200px;
  padding-bottom: 0; /* Override Dawn aspect ratio hack */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #FFFFFF;
}

.card__media .media img {
  position: static; /* Override Dawn absolute positioning */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 16px;
  background: #FFFFFF;
}

/* Card body */
.card__content {
  padding: 16px;
}

.card__information-separator {
  display: none;
}

/* Brand/Vendor badge */
.card__information .caption-with-letter-spacing,
.card-information .caption-with-letter-spacing,
.card__heading .caption-with-letter-spacing {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-tertiary);
  margin-bottom: 4px;
}

/* Product title */
.card__heading,
.card-information__text .h5 {
  font-family: 'Pressura', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ce-text-heading);
  line-height: 1.3;
  margin-bottom: 8px;
}

/* Price */
.price .money,
.price-item--regular {
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--ce-text-secondary);
}

.price__container {
  margin-top: 4px;
}

/* VAT label (if shown) */
.price .unit-price,
.tax-note {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  color: var(--ce-text-tertiary);
}

/* Product grid — equal-height rows */
.product-grid {
  align-items: stretch;
}

.product-grid .grid__item {
  display: flex;
}

.product-grid .card-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-grid .card--card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-grid .card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ---- CE Header ---- */
/* Source: Brand Kit /komponenten/header + header.tsx (verified 2026-03-26)
   1:1 from TSX: sticky, bg --surface-card, border-b --border-default
   Desktop 60px: logo h-20px, nav Pressura 15px/500, hover bg --surface-muted rounded-6px
   Produkte btn: Pressura Mono 13px, bg --surface-invert, text --text-on-invert, rounded-8px
   Cart: Pressura Mono 15px, color --text-body
   Mobile 56px: logo h-16px, Produkte btn, hamburger ri-menu-line 24px */

/* ---- CE Modal (replaces Dawn's stripped modal CSS) ---- */
/* ModalDialog custom element uses [open] attribute for visibility.
   Without [open], modal is hidden. JS calls .show() to set [open]. */

product-modal,
modal-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  cursor: zoom-out;
}

product-modal[open],
modal-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-media-modal__dialog {
  position: relative;
  width: 90vw;
  max-width: 1200px;
  max-height: 90vh;
  background: var(--ce-surface-card);
  border-radius: var(--ce-radius-lg);
  overflow: auto;
  cursor: default;
}

.product-media-modal__content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px;
  justify-content: center;
}

.product-media-modal__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ce-radius-sm);
}

.product-media-modal__toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ce-text-secondary);
  font-size: 18px;
  transition: color 0.2s ease;
}

.product-media-modal__toggle:hover {
  color: var(--ce-text-heading);
}

/* Close icon fallback — Dawn uses inline SVG that may be missing */
.product-media-modal__toggle:empty::after {
  content: '✕';
  font-size: 16px;
}

/* Hide Dawn header — replaced by ce-header */
.section-header {
  margin-bottom: 0;
}

/* Shopify wraps sections in .shopify-section — make the group sticky when header is sticky */
.shopify-section-group-header-group:has(.ce-header--sticky) {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Source: header.tsx — sticky top-0 z-30
   Frosted-Glass: translucent Header + Backdrop-Blur HINTER der Fläche.
   Kein Fade-Streifen darunter — der Übergang passiert allein durch den
   Blur, der unter dem Header durchscrollendem Content verschwimmt. */
/* Solid surface + brand-kit card shadow — soft fade beneath the header instead
   of the previous translucent backdrop-filter approach. */
.ce-header {
  position: relative;
  background: var(--ce-surface-card);
  box-shadow: var(--ce-shadow-card);
  border-bottom: 0;
}

.ce-header--sticky {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* -- Desktop (hidden below 768px) -- */
/* Aligned with ce-footer__inner: max-width 1200px, padding 24px/32px */
.ce-header__desktop {
  position: relative; /* containing block for the mega menu panel */
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .ce-header__desktop {
    display: flex;
    padding: 0 32px;
  }
}

/* -- Mobile (hidden above 768px) -- */
.ce-header__mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 56px;
  max-width: 1140px;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .ce-header__mobile {
    display: none;
  }
}

.ce-header__mobile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -- Logo -- */
.ce-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Source: header.tsx — w-[190px] h-auto, filter var(--logo-filter) */
.ce-header__logo {
  width: 190px;
  height: auto;
  filter: var(--ce-logo-filter, none);
}

/* Mobile logo — kleiner als Desktop, damit 44×44-Touch-Targets in eine Zeile passen */
.ce-header__logo--mobile {
  width: 132px;
  height: auto;
  filter: var(--ce-logo-filter, none);
}

/* -- Nav -- */
.ce-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Zwei Gruppen: Text-Links (Standorte/Service) und Aktions-Buttons.
   Inneres Spacing pro Gruppe; nav-gap = Abstand zwischen den Gruppen. */
.ce-header__nav-group {
  display: flex;
  align-items: center;
}
.ce-header__nav-group--links { gap: 2px; }
.ce-header__nav-group--actions { gap: 8px; }

/* Source: header.tsx — Pressura 15px font-light, hover bg surface-muted rounded-6px */
.ce-header__nav-link {
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.ce-header__nav-link:hover {
  background-color: var(--ce-surface-muted);
  color: var(--ce-text-heading);
}

/* Source: header.tsx — Pressura Mono 13px font-light, bg surface-invert, rounded-8px */
/* All header action buttons share height: 32px, box-sizing: border-box */
.ce-header__nav-btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 300;
  color: var(--ce-text-on-invert);
  background: var(--ce-surface-invert);
  border: 1px solid transparent;
  text-decoration: none;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  margin: 0;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.ce-header__nav-btn:hover {
  background: var(--ce-surface-invert-hover);
  color: var(--ce-text-on-invert);
}

/* Cart button — outlined, icon + label, same height as toggle (32px) */
.ce-header__cart-btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: 6px;
  height: 32px;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 300;
  color: var(--ce-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--ce-border-default);
}

.ce-header__cart-btn i {
  font-size: 16px;
}

.ce-header__cart-btn:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}

/* Mobile: hide label, show icon only as square */
.ce-header__cart-label {
  display: none;
}

@media screen and (min-width: 750px) {
  .ce-header__cart-label {
    display: inline;
  }
}

/* Account toggle — icon-only, styled identical to theme-toggle */
.ce-header__account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--ce-text-secondary);
  background: transparent;
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin: 0;
}

.ce-header__account-btn:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}

/* Dark mode toggle — square, same height as Produkte button, outlined */
.ce-header__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--ce-text-secondary);
  background: transparent;
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin: 0;
}

.ce-header__theme-toggle:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}

/* Light mode: show sun, hide moon */
.ce-header__icon-dark { display: none; }
.ce-header__icon-light { display: inline; }

/* Dark mode: show moon, hide sun */
.dark .ce-header__icon-dark { display: inline; }
.dark .ce-header__icon-light { display: none; }

/* -- Hamburger (mobile) -- */
/* Mobile-Audit Sprint 5 (#12): Hamburger jetzt mit gleicher Border-/Hintergrund-Optik
   wie Cart, Account, Search — konsistente Button-Group. */
.ce-header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--ce-text-secondary);
  background: transparent;
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ce-header__hamburger:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}

/* Mobile Touch-Targets: 44×44 (Apple HIG / WCAG 2.5.5 AAA Best Practice).
   Vorher 32×32 — zu klein für komfortable Bedienung. */
@media screen and (max-width: 749px) {
  .ce-header__cart-btn,
  .ce-header__search-btn,
  .ce-header__hamburger,
  .ce-header__account-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 20px;
  }
  /* Produkte-Button (Text + Chevron) gleiche Höhe für visuelle Konsistenz */
  .ce-header__nav-btn {
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }
  /* Mobile-Audit Iteration 4: einheitliches schmales Spacing zwischen allen
     Header-Buttons — keine Hamburger-Sondergruppierung mehr. */
  .ce-header__mobile-actions {
    gap: 6px;
  }
  .ce-header__hamburger { margin-inline-start: 0; }
}

/* -- Mobile Drawer -- */
.ce-header__drawer {
  background: var(--ce-surface-card);
  border-bottom: 1px solid var(--ce-border-default);
  padding: 16px 24px 24px;
}

.ce-header__drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Mobile-Audit Sprint 5 (#1): Prominenter Cart-CTA-Block ganz oben im Mobile-Menu.
   Hochkontrastiert (invert), full-width, Icon + Label + Count + Total. */
.ce-mobile-menu__cart-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border-radius: var(--ce-radius-sm);
  text-decoration: none;
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  min-block-size: 56px;
  transition: background-color 200ms ease;
}
.ce-mobile-menu__cart-cta:hover {
  background: var(--ce-surface-invert-hover);
}
.ce-mobile-menu__cart-icon {
  font-size: 22px;
  line-height: 1;
}
.ce-mobile-menu__cart-label {
  flex: 1;
}
.ce-mobile-menu__cart-count {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 2px 8px;
  min-inline-size: 22px;
  text-align: center;
}
.ce-mobile-menu__cart-total {
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  white-space: nowrap;
}

/* ============================================
   Mobile-Audit Iteration 2 (CES-56) — Cookie-Consent-Banner on-brand.
   Shopify Customer Privacy API rendert die Banner-Markup via injected Scripts
   nach Page-Load. Styling über Shopify's Standard-Klassen (Stand 2026):
   .shopify-pc__banner / __dialog / __btn / __body / __heading.
   Border-Radius, Pressura-Fonts, CE-Surface-Tokens.
   ============================================ */

.shopify-pc__banner,
.shopify-pc__banner__dialog,
.shopify-pc-modal,
.shopify-pc-modal__dialog {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--ce-radius-lg) !important;
  border: 1px solid var(--ce-border-default) !important;
  background: var(--ce-surface-card) !important;
  color: var(--ce-text-body) !important;
  box-shadow: var(--ce-shadow-elevated) !important;
}

.shopify-pc__banner__heading,
.shopify-pc-modal__heading,
.shopify-pc__banner h1,
.shopify-pc__banner h2 {
  font-family: 'Pressura', sans-serif !important;
  font-weight: 500 !important;
  color: var(--ce-text-heading) !important;
}

.shopify-pc__banner__body,
.shopify-pc-modal__body {
  color: var(--ce-text-body) !important;
}

.shopify-pc__banner__btn,
.shopify-pc-modal__btn,
.shopify-pc__banner button,
.shopify-pc-modal button {
  font-family: 'Pressura Mono', monospace !important;
  font-size: 14px !important;
  border-radius: var(--ce-radius-sm) !important;
  min-block-size: 44px !important;
  padding: 10px 20px !important;
  border: 1px solid var(--ce-border-default) !important;
  background: var(--ce-surface-card) !important;
  color: var(--ce-text-heading) !important;
  cursor: pointer !important;
  transition: background 200ms ease, border-color 200ms ease !important;
}

/* Primary Button (Akzeptieren) — invert für klare Aktion */
.shopify-pc__banner__btn--primary,
.shopify-pc-modal__btn--primary,
.shopify-pc__banner button[data-pc-action="accept-all"] {
  background: var(--ce-surface-invert) !important;
  color: var(--ce-text-on-invert) !important;
  border-color: var(--ce-surface-invert) !important;
}
.shopify-pc__banner__btn--primary:hover,
.shopify-pc__banner button[data-pc-action="accept-all"]:hover {
  background: var(--ce-surface-invert-hover) !important;
}

.shopify-pc__banner__btn:hover,
.shopify-pc-modal__btn:hover {
  border-color: var(--ce-border-strong) !important;
  background: var(--ce-surface-muted) !important;
}

/* Links innerhalb der Banner — Datenschutzerklärung etc. */
.shopify-pc__banner a,
.shopify-pc-modal a {
  color: var(--ce-text-heading) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Mobile-Audit Iteration 4: Bottom-Actions kompakter — kleinere Buttons,
   geringere font/icon size → mehr Breite für Cart-Content (Total nicht mehr ellipsis). */
.ce-mobile-menu__bottom-actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding-top: 16px;
}
.ce-mobile-menu__bottom-actions .ce-mobile-menu__cart-cta {
  flex: 1 1 0;
  min-inline-size: 0;
  margin-bottom: 0;
  min-block-size: 40px;
  padding: 0 10px;
  gap: 8px;
  font-size: 14px;
}
.ce-mobile-menu__bottom-actions .ce-mobile-menu__cart-icon { font-size: 18px; }
.ce-mobile-menu__bottom-actions .ce-mobile-menu__cart-label { flex-shrink: 0; }
.ce-mobile-menu__bottom-actions .ce-mobile-menu__cart-total {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.ce-mobile-menu__bottom-actions .ce-mobile-menu__cart-count {
  font-size: 11px;
  padding: 1px 6px;
  min-inline-size: 18px;
}
.ce-mobile-menu__bottom-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  background: var(--ce-surface-card);
  color: var(--ce-text-secondary);
  font-size: 20px;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.ce-mobile-menu__bottom-icon-btn:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
  background: var(--ce-surface-muted);
}

.ce-header__drawer-link {
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--ce-text-heading);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.ce-header__drawer-link:hover {
  background-color: var(--ce-surface-muted);
}

/* -- Mobile Drawer: Groups (accordion) -- */
.ce-header__drawer-group {
  display: block;
}

.ce-header__drawer-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ce-header__drawer-group > summary::-webkit-details-marker { display: none; }

.ce-header__drawer-chevron {
  font-size: 18px;
  transition: transform 0.2s ease;
  color: var(--ce-text-secondary);
}

.ce-header__drawer-group[open] .ce-header__drawer-chevron {
  transform: rotate(180deg);
}

.ce-header__drawer-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 8px 12px;
  border-left: 1px solid var(--ce-border-default);
  margin: 4px 0 4px 12px;
}

.ce-header__drawer-subgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}

.ce-header__drawer-subheading {
  font-family: 'Pressura', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ce-text-heading);
  text-decoration: none;
  padding: 4px 12px;
}

.ce-header__drawer-sublink {
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--ce-text-body);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
}

.ce-header__drawer-sublink--all {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  color: var(--ce-text-secondary);
}

.ce-header__drawer-sublink:hover {
  background-color: var(--ce-surface-muted);
}

/* ---- CE Mega Menu ---- */
/* Full-width panel under the Produkte trigger. Desktop only — mobile uses drawer accordion. */

.ce-mega-menu-wrap {
  /* static so the panel anchors to .ce-header (max-width 1200px centered)
     instead of to the trigger button — prevents viewport overflow when the
     trigger sits at the far-right of the nav. */
  display: inline-flex;
  align-items: center;
}

.ce-header__nav-btn--mega {
  gap: 4px;
}

.ce-header__nav-btn-chevron {
  font-size: 14px;
  transition: transform 0.2s ease;
  opacity: 0.8;
}

.ce-mega-menu-wrap[data-open] .ce-header__nav-btn-chevron {
  transform: rotate(180deg);
}

.ce-mega-menu {
  position: absolute;
  /* Sit flush against the header for clear visual association. Header has
     border-bottom; panel drops its own top-border (and top-radii) so the
     two read as one continuous surface. */
  /* Floating card: small gap below the header, rounded all-around. */
  top: calc(100% + 8px);
  right: 16px;
  /* No bg/border/shadow on the outer — those move to the inner card layer
     and a multiply-blend pseudo-element so the drop shadow remains visible
     over both light surfaces and dark imagery beneath the panel. */
  background: transparent;
  padding: 0;
  z-index: 40;
  border-radius: 12px;
  /* Width clamps to viewport so panel can never overflow left edge. */
  width: min(760px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

/* Drop shadow as a separate pseudo-element with mix-blend-mode: multiply.
   The shadow halo blends with whatever is behind the panel — over light
   surfaces it darkens (visible card lift), over dark imagery it has no
   effect (no awkward black halo against already-dark backdrop). The 1px
   border on the inner card carries definition where the shadow can't. */
.ce-mega-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--ce-shadow-elevated);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.ce-mega-menu[hidden] {
  display: none;
}

.ce-mega-menu-wrap[data-open] .ce-mega-menu:not([hidden]),
.ce-mega-menu-wrap:focus-within .ce-mega-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner: the actual card layer. Carries surface, border, radius, padding —
   sits ABOVE the multiply-blend ::before shadow halo via z-index. Has its
   own isolation so descendant blend modes (icon SVG variants) evaluate
   against the card's surface, not against the page beneath. */
.ce-mega-menu__inner {
  position: relative;
  z-index: 1;
  display: block;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: inherit;
  padding: 20px;
  isolation: isolate;
}

.ce-mega-menu__inner--with-featured {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 260px);
  gap: 24px;
  align-items: start;
}

@media screen and (max-width: 1100px) {
  .ce-mega-menu__inner--with-featured {
    grid-template-columns: 1fr;
  }
}

.ce-mega-menu__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  /* CSS multi-column instead of CSS Grid: tile+sublist cells flow into 3 columns
     top-to-bottom, no fixed row alignment → tall cells (Maschinen with brands)
     and short cells (Eversys) pack without wasted whitespace. */
  column-count: 3;
  column-gap: 16px;
  isolation: isolate;
}

@media screen and (max-width: 720px) {
  .ce-mega-menu__grid {
    column-count: 2;
  }
}

.ce-mega-menu__cell {
  /* Prevent a cell (tile + sublist) from being split across two columns. */
  break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin-bottom: 4px;
}

/* Tile: icon + label. Hover lifts opacity (matches prototype). */
.ce-mega-menu__tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.ce-mega-menu__tile:hover,
.ce-mega-menu__tile:focus-visible {
  background: var(--ce-surface-muted);
}

.ce-mega-menu__tile--active {
  background: var(--ce-surface-subtle);
}

.ce-mega-menu__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  /* No opacity / no isolation here — both create implicit stacking contexts that
     would interfere with the SVG mix-blend-mode. Hover dimming happens on the
     IMG itself below. */
  background: transparent;
}

/* Inline SVG icons (theme assets, transparent line-art).
   Two variants per category live in /assets:
     icon-{handle}.svg   — light theme line-art (dark stroke)
     icon-{handle}-w.svg — dark theme line-art (white stroke)
   Both are inlined; CSS toggles via the .dark class on <html>. No blend-mode,
   no filter — clean transparent SVGs render directly. */
.ce-mega-menu__tile-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ce-mega-menu__tile-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Light/dark variant toggle. */
.ce-mega-menu__tile-svg--dark { display: none; }
.dark .ce-mega-menu__tile-svg--light { display: none; }
.dark .ce-mega-menu__tile-svg--dark { display: block; }

/* Legacy IMG fallback (when a section block image_picker overrides the
   convention-based theme asset lookup). No blend-mode required because users
   are now expected to upload pre-cleaned transparent SVGs. */
.ce-mega-menu__tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}

/* Hover: lift opacity for both inline-svg and IMG fallback paths. */
.ce-mega-menu__tile-icon {
  opacity: 0.75;
  transition: opacity 0.18s ease;
}

.ce-mega-menu__tile:hover .ce-mega-menu__tile-icon,
.ce-mega-menu__tile:focus-visible .ce-mega-menu__tile-icon {
  opacity: 1;
}

.ce-mega-menu__tile-icon i {
  font-size: 40px;
  color: var(--ce-text-heading);
}

.ce-mega-menu__tile-icon-fallback {
  color: var(--ce-text-tertiary) !important;
}

.ce-mega-menu__tile-label {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--ce-text-heading);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Optional sub-list under a tile (when grandchildren exist).
   Linksbündig zum Parent-Label: tile-padding (10) + icon (56) + gap (12) = 78px. */
.ce-mega-menu__sublist {
  list-style: none;
  margin: 0;
  padding: 2px 12px 6px 78px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ce-mega-menu__sublink {
  display: block;
  font-family: 'Pressura', sans-serif;
  font-size: 12px;
  font-weight: 300;
  /* Rest: secondary tone — establishes hierarchy with the heading-coloured tile label. */
  color: var(--ce-text-secondary);
  text-decoration: none;
  padding: 2px 8px;
  margin-left: -8px; /* keep left edge aligned with the sublist indent */
  border-radius: 4px;
  line-height: 1.4;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ce-mega-menu__sublink:hover,
.ce-mega-menu__sublink:focus-visible {
  color: var(--ce-text-heading);
  background: var(--ce-surface-muted);
  outline: none;
}

.ce-mega-menu__sublink--active {
  color: var(--ce-text-heading);
}

/* Featured Slot */
.ce-mega-menu__featured {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  background: var(--ce-surface-muted);
  border-radius: 12px;
  padding: 12px;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.ce-mega-menu__featured:hover {
  background: var(--ce-surface-subtle);
}

.ce-mega-menu__featured-media {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ce-surface-card);
}

.ce-mega-menu__featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ce-mega-menu__featured:hover .ce-mega-menu__featured-img {
  transform: scale(1.03);
}

.ce-mega-menu__featured-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ce-mega-menu__featured-eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  letter-spacing: 0.04em;
}

.ce-mega-menu__featured-heading {
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ce-text-heading);
  line-height: 1.3;
}

.ce-mega-menu__featured-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  line-height: 1.4;
}

.ce-mega-menu__featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--ce-text-heading);
  margin-top: 4px;
}

.ce-mega-menu__featured-cta i {
  font-size: 14px;
  transition: transform 0.18s ease;
}

.ce-mega-menu__featured:hover .ce-mega-menu__featured-cta i {
  transform: translateX(2px);
}

/* ---- CE Global Layout ---- */
/* Consistent max-width across all sections — matches header 1140px */

.page-width {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0;
  }
}

/* ---- CE Section Headings ---- */
/* Source: Brand Kit — Pressura, no uppercase */

.title-wrapper-no-heading,
.title-wrapper {
  margin-bottom: 48px;
}

h2.title,
.collection__title h1,
.title-wrapper .title {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
}

/* ---- CE Section Overrides ---- */
/* Restyle all Dawn sections with CE tokens for consistent branding.
   Source: Brand Kit components (product-cards, buttons, interaktiv) */

/* -- Featured Product Section -- */
/* Source: /komponenten/product-cards (Review Card variant) */

.featured-product {
  background: var(--ce-surface-page);
}

.featured-product .product__title {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
}

.featured-product .product__text {
  font-family: 'Inter', sans-serif;
  color: var(--ce-text-body);
}

.featured-product .price .money {
  font-family: 'Pressura Mono', monospace;
  font-size: 24px;
  color: var(--ce-text-heading);
}

.featured-product .price-item--sale {
  color: var(--ce-red-500);
}

.featured-product .product-form__submit {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.featured-product .product-form__submit:hover {
  background: var(--ce-surface-invert-hover);
}

.featured-product .product-form__submit[disabled],
.featured-product .product-form__submit:disabled {
  background: var(--ce-surface-muted);
  color: var(--ce-text-muted);
  cursor: not-allowed;
}

.featured-product .product-form__submit[disabled]:hover,
.featured-product .product-form__submit:disabled:hover {
  background: var(--ce-surface-muted);
  color: var(--ce-text-muted);
}

/* Hide PayPal / dynamic checkout buttons */
.featured-product .shopify-payment-button {
  display: none;
}

.featured-product .share-button,
.featured-product .product-popup-modal__opener {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  color: var(--ce-text-secondary);
}

/* Product vendor (brand label) */
.featured-product .product__text.caption-with-letter-spacing {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-tertiary);
}

/* -- Collection List Section -- */

/* Page title: shared style for collection list, collections, cart etc. */
.ce-page-title {
  font-family: 'Pressura', sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--text-heading, #18191A);
  text-align: center;
  margin-bottom: 32px;
}

.collection-list-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Homepage collection list: force CSS grid, kill slider */
.collection-list.grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  flex-wrap: wrap !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.collection-list .grid__item,
.collection-list .slider__slide {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Hide slider nav on collection list */
.collection-list + .slider-buttons {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .collection-list.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Collection list grid */
.ce-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ce-category-grid__item {
  width: 100%;
}

@media screen and (max-width: 749px) {
  .ce-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.collection-list h2 {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  text-align: center;
}

/* Mobile-Audit Sprint 7 (#6): linksbündig + max-width 60ch + text-wrap pretty
   auf Mobile, Center erst ab Tablet. */
.collection-list-description {
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  line-height: var(--ce-lh-snug);
  font-weight: 300;
  color: var(--ce-text-secondary);
  text-align: start;
  text-wrap: pretty;
  max-width: 60ch;
  margin: 20px auto 0;
  white-space: pre-line;
}
@media screen and (min-width: 768px) {
  .collection-list-description {
    font-size: 18px;
    text-align: center;
    max-width: 680px;
    margin-top: 24px;
  }
}

.title-wrapper-with-link {
  margin-bottom: 48px;
  padding-bottom: 0;
}

.collection-list__item .card--card {
  border-radius: 16px;
}

.collection-list__item img {
  border-radius: 6px;
}

.collection-list .card__content {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
}

/* -- Image with Text Section -- */
/* Source: grid-varianten/page.tsx — 2 Spalten alternierend, gap-8 (32px) */

.image-with-text img {
  border-radius: 6px;
}

.image-with-text .image-with-text__heading {
  font-family: 'Pressura', sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--ce-text-heading);
}

.image-with-text .image-with-text__content .rte,
.image-with-text .image-with-text__text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--ce-text-secondary);
}

.image-with-text .button {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--ce-transition);
}

.image-with-text .button:hover {
  background: var(--ce-surface-invert-hover);
}

.image-with-text .button--secondary {
  background: transparent;
  border: 1px solid var(--ce-border-default);
  color: var(--ce-text-secondary);
  font-size: 13px;
}

.image-with-text .button--secondary:hover {
  border-color: var(--ce-border-strong);
  color: var(--ce-text-heading);
}

/* -- Dawn Section Spacing Override -- */
/* Align Dawn sections (.page-width) with CE footer (1200px, 24/32px) */

/* Collapsible content with page-width or full-width layout — ensure 100% width */
.collapsible-content.page-width,
.collapsible-content.content-container--full-width {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

@media screen and (max-width: 749px) {
  .collapsible-content.page-width,
  .collapsible-content.content-container--full-width {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Multicolumn page-width container */
.multicolumn .page-width {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media screen and (max-width: 749px) {
  .multicolumn .page-width {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ================================================================
   COLLECTION BANNER — Title + Description
   ================================================================ */

.collection-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 24px;
}

@media screen and (max-width: 749px) {
  /* Mobile-Audit Iteration 4: Page-Header-Spacing reduziert (Bug #13 Restbestand). */
  .collection-hero {
    padding: 8px 16px 12px;
  }
}

/* Inner wrapper — 2 columns: text left, logo right */
.collection-hero__inner {
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 48px;
}

.collection-hero__text-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 48px;
  align-items: baseline;
  flex: 0 0 50%;
}

.collection-hero__logo {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.collection-hero__logo img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}

@media screen and (max-width: 749px) {
  .collection-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .collection-hero__text-wrapper {
    grid-template-columns: 1fr;
    flex: 1 1 auto;
  }
  .collection-hero__logo {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
}

.collection-hero__title {
  font-family: 'Pressura', sans-serif !important;
  font-size: 28px !important;
  line-height: 36px;
  font-weight: 500 !important;
  color: var(--ce-text-heading);
  margin: 0;
  white-space: nowrap;
  text-align: left;
}

.collection-hero__description,
.collection-hero__description .rte,
.collection-hero__description p {
  font-family: 'Pressura', sans-serif !important;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: var(--ce-text-secondary);
  max-width: 50ch;
  margin: 0;
}

/* ================================================================
   COLLECTION PAGE — Filter Sidebar + Product Grid
   Source: Brand Kit v0.4.0 category-filter.md, design-tokens.css
   Layout: Sidebar 260px sticky + Grid 1→2→3 columns responsive
   Tokens: --surface-*, --text-*, --border-* (design-tokens.css)
   All selectors use ce-* classes. JS-dependent classes (.facets__summary,
   .facets-wrap, .facets__item, .active-facets-*, .sorting) are kept in HTML
   for JS compatibility but not styled here — CE classes handle all styling.
   ================================================================ */

/* -- Layout: Sidebar + Grid -- */
.facets-vertical.ce-section-width {
  display: flex;
  gap: 32px;
}

.facets-vertical .facets-wrapper {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  /* Scrollbar 12px Abstand zum Content (Counter rechts werden nicht
     verdeckt). Negatives Margin hält die Spaltenbreite visuell bei 260px. */
  padding-right: 12px;
  margin-right: -12px;
}

/* Soft Blur-Fade am unteren Sidebar-Rand — analog zum Mobile-Pattern.
   Sticky-Overlay innerhalb des Scroll-Containers, bleibt am Viewport-Boden
   der Sidebar kleben. Mask-Gradient schmilzt Blur weich nach oben aus. */
.facets-vertical .ce-facets-container {
  position: relative;
}
.facets-vertical .ce-facets-container::after {
  content: "";
  display: block;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  margin-top: -72px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: linear-gradient(
    to top,
    var(--ce-surface-page, #FFFFFF) 0%,
    color-mix(in srgb, var(--ce-surface-page, #FFFFFF) 70%, transparent) 40%,
    color-mix(in srgb, var(--ce-surface-page, #FFFFFF) 30%, transparent) 70%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 30%,
    rgba(0, 0, 0, 0.55) 65%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 30%,
    rgba(0, 0, 0, 0.55) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}

.facets-vertical .product-grid-container {
  flex: 1;
  min-width: 0;
}

@media screen and (max-width: 767px) {
  .facets-vertical.ce-section-width {
    flex-direction: column;
  }
  .facets-vertical .facets-wrapper {
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* -- Sort Bar -- */
/* Source: Brand Kit — flex, space-between, counter left + select right, mb 24px */
/* Sort bar wrapper — spacing below */
facet-filters-form.ce-section-width {
  display: block;
  margin-bottom: 24px;
}

.ce-sort-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 38px;
}

/* Sort bar inside product-grid-container */
.product-grid-container > facet-filters-form {
  display: block;
  margin-bottom: 16px;
}

/* Product count: Pressura Mono 14px, --text-tertiary */
.ce-sort-bar__count {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-sort-bar__count-wrapper {
  display: flex;
  align-items: center;
}

/* Sort dropdown field */
.ce-sort-bar__field {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Sort select wrapper — relative for chevron positioning */
.ce-sort-bar__select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Sort select: Pressura Mono 13px, border --border-default, radius 8px */
.ce-sort-select {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  border: 1px solid var(--border-default, #EDEEEF);
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  background: var(--surface-card, #FFFFFF);
  height: auto;
  min-height: auto;
  min-width: auto;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.ce-sort-select:focus {
  border-color: var(--surface-invert, #18191A);
  outline: none;
  box-shadow: none;
}

/* Chevron icon inside select wrapper */
.ce-sort-bar__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-muted, #B6B7BB);
  pointer-events: none;
}

/* Sort bar mobile: counter full width, wrap */
@media screen and (max-width: 767px) {
  .ce-sort-bar__inner {
    flex-wrap: wrap;
  }
  .ce-sort-bar__count-wrapper {
    width: 100%;
    margin-bottom: 8px;
  }
}

/* -- Filter Group (Summary / Disclosure) -- */
/* Source: Brand Kit prototype (verified via web-to-mcp 1f33ec51) — Pressura Mono 11px, uppercase, muted */
.ce-filter-group__header {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-muted, #B6B7BB);
  cursor: pointer;
  list-style: none;
  padding: 0;
}

.ce-filter-group__header::-webkit-details-marker {
  display: none;
}

.ce-filter-group__header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ce-filter-group__label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.ce-filter-group__count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #B6B7BB);
  margin-left: 4px;
}

.ce-filter-group__helptext {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #B6B7BB);
  display: block;
}

/* Chevron icon — Remixicon, rotates on open */
.ce-filter-group__chevron {
  font-size: 16px;
  color: var(--text-muted, #B6B7BB);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 200ms ease;
}

details[open] > .ce-filter-group__header .ce-filter-group__chevron {
  transform: rotate(180deg);
}

/* Remove the old pseudo-element chevron — now using Remixicon */
.ce-filter-group__header::after {
  display: none;
}

/* -- Filter Group Spacing -- */
.ce-filter-group {
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-default, #EDEEEF);
  padding: 16px 0;
}

.ce-filter-group:last-child {
  border-bottom: none;
}

/* -- Filter content area (inside disclosure) -- */
.ce-filter-group__content {
  padding-top: 8px;
}

/* -- Filter List -- */
.ce-filter-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Filter items: checkbox-style padding by default */
.ce-filter-item {
  padding: 2px 0;
}

/* -- Checkbox Filter (Marken, Einsatzbereich, etc.) -- */
/* Source: Brand Kit prototype — Pressura Mono 13px, --text-secondary, gap 8px */
.ce-filter-checkbox {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary, #575A61);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 200ms ease;
}

.ce-filter-checkbox:hover {
  color: var(--text-heading, #18191A);
}

/* Native checkbox styled as custom — 16x16px, border --border-strong, radius 4px */
.ce-filter-checkbox input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px;
  min-width: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-strong, #D1D1D4);
  border-radius: 4px;
  background: var(--surface-card, #FFFFFF);
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.ce-filter-checkbox input[type="checkbox"]:hover {
  border-color: var(--surface-invert, #18191A);
}

.ce-filter-checkbox input[type="checkbox"]:checked {
  background: var(--surface-invert, #18191A);
  border-color: var(--surface-invert, #18191A);
}

.ce-filter-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 8px;
  border: solid var(--text-on-invert, #FFFFFF);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Hide CE-box duplicate (Desktop) — native input handles the visual.
   Mobile-Audit Iteration 2 (CES-56): rotate(45deg) entfernt — leakte als Drehung
   in mobile-facets-Variant, wo .ce-filter-checkbox__box als sichtbare Box rendert. */
.ce-filter-checkbox__box {
  display: none;
}

/* Checkbox text wrapper — flex space-between for label left, count right */
.ce-filter-checkbox__text {
  font-size: 13px;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.ce-filter-checkbox__label {
  font-size: 13px;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checkbox count: light gray, 12px, right-aligned, no parentheses */
.ce-filter-checkbox__count {
  font-size: 12px;
  color: var(--text-muted, #B6B7BB);
  flex-shrink: 0;
  margin-left: 8px;
}

/* -- Kategorien-Filter (Product Type) — TAB style -- */
/* Source: Brand Kit > Kategorie Tabs (Sidebar)
   Pressura Mono 13px/500, flex space-between, padding 8px 12px, radius 8px
   Active: bg --surface-invert, color --text-on-invert
   Inactive: color --text-secondary, hover bg --surface-muted */
[id*="filter.p.product_type"] .ce-filter-item {
  padding: 0; /* tabs handle their own padding via label */
}

[id*="filter.p.product_type"] .ce-filter-checkbox {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  transition: background-color 200ms ease, color 200ms ease;
}

[id*="filter.p.product_type"] .ce-filter-checkbox:hover {
  background: var(--surface-muted, #F3F3F3);
  color: var(--text-secondary, #575A61);
}

/* Active tab — IMMER schwarz/weiß, nicht via --surface-invert (invertiert sonst im Dark Mode) */
[id*="filter.p.product_type"] .ce-filter-checkbox.active {
  background: #18191a !important;
  color: #ffffff !important;
}

/* Hide checkbox inside tabs — tabs don't show checkboxes */
[id*="filter.p.product_type"] .ce-filter-checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
}

/* Hide checkbox box visual inside tabs */
[id*="filter.p.product_type"] .ce-filter-checkbox__box {
  display: none;
}

/* Tab text — 13px, flex space-between, full width */
[id*="filter.p.product_type"] .ce-filter-checkbox__text {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Active state: force white on all nested labels + count for proper contrast */
[id*="filter.p.product_type"] .ce-filter-checkbox.active,
[id*="filter.p.product_type"] .ce-filter-checkbox.active .ce-filter-checkbox__text,
[id*="filter.p.product_type"] .ce-filter-checkbox.active .ce-filter-checkbox__label,
[id*="filter.p.product_type"] .ce-filter-checkbox.active .ce-filter-checkbox__count {
  color: #ffffff !important;
}

/* -- Show More button in filter groups -- */
.ce-filter-show-more {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #B6B7BB);
  background: none;
  border: none;
  padding: 8px 0 0;
  cursor: pointer;
  transition: color 200ms ease;
  min-width: unset;
  min-height: unset;
}

.ce-filter-show-more:hover {
  color: var(--text-secondary, #575A61);
  background: none;
}

/* -- Price Range Filter -- */
/* Source: Brand Kit — flex row, gap 8px, align-items center */
.ce-price-range,
price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-facets__submenu .ce-price-range,
.mobile-facets__submenu price-range {
  padding: 12px 24px;
}

.ce-price-range .field,
price-range .field {
  flex: 1;
  height: auto;
  min-height: 0;
  border: 0;
}

/* Input: border --border-default, radius 8px, padding 8px 12px, Pressura Mono.
   Mobile: font-size 16px (verhindert iOS-Auto-Zoom on Focus), Desktop: 13px. */
.ce-price-range .field__input,
price-range .field__input {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default, #EDEEEF);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 16px;
  font-family: 'Pressura Mono', sans-serif;
  font-weight: 400;
  color: var(--text-body, #313337);
  background: var(--surface-card, #FFFFFF);
  transition: border-color 200ms ease;
}
@media (min-width: 750px) {
  .ce-price-range .field__input,
  price-range .field__input {
    font-size: 13px;
  }
}

.ce-price-range .field__input:focus,
price-range .field__input:focus {
  border-color: var(--surface-invert, #18191A);
  outline: none;
}

/* Labels removed from price inputs — using placeholder instead */
.ce-price-range .field__label,
price-range .field__label {
  display: none;
}

/* Currency symbol removed — no leading € */
.ce-price-range .field__currency,
price-range .field__currency,
.field-currency {
  display: none;
}

/* Dash separator between min/max inputs */
.ce-price-range__dash {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  color: var(--text-muted, #B6B7BB);
  flex-shrink: 0;
}

/* -- Active Filters / Pills -- */
.ce-active-filters__heading {
  flex-basis: 100%;
  margin: 0 0 8px 0;
  font-family: var(--ce-font-mono, 'Pressura Mono', monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ce-text-secondary);
}
.ce-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Filter title: match sort-bar height for horizontal alignment */
.ce-filter-title {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-heading, #18191A);
  margin: 0;
  line-height: 1;
}

.ce-active-filters__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ce-surface-page, #FFFFFF);
}

/* Soft Blur-Fade direkt unter dem Filter-Header — startet am Header-Boden
   mit voll opaker Hintergrundfarbe (nahtloser Übergang) und blendet nach
   unten in transparent aus. Spiegel zum Bottom-Fade. */
.facets-vertical .ce-facets-container::before {
  content: "";
  display: block;
  position: sticky;
  top: 38px;
  left: 0;
  right: 0;
  height: 34px;
  margin-bottom: -34px;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: linear-gradient(
    to bottom,
    var(--ce-surface-page, #FFFFFF) 0%,
    color-mix(in srgb, var(--ce-surface-page, #FFFFFF) 60%, transparent) 50%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}

@media screen and (max-width: 767px) {
  .ce-active-filters__header {
    position: static;
  }
}

.ce-active-filter {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary, #575A61);
  border: 1px solid var(--border-default, #EDEEEF);
  border-radius: 9999px;
  padding: 4px 12px;
  background: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color 200ms ease, color 200ms ease;
}

.ce-active-filter:hover {
  border-color: var(--border-strong, #D1D1D4);
  color: var(--text-heading, #18191A);
}

.ce-active-filter__inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ce-active-filter__icon {
  font-size: 14px;
  line-height: 1;
}

/* "Alle entfernen" link */
.ce-active-filter__clear-all-link {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  color: var(--text-muted, #B6B7BB);
  text-decoration: none;
  transition: color 200ms ease;
}

.ce-active-filter__clear-all-link:hover {
  color: var(--text-secondary, #575A61);
}

.ce-active-filter__clear-all {
  display: none;
}

/* -- Filter Group Reset link -- */
.ce-filter-group__reset {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  color: var(--text-muted, #B6B7BB);
  text-decoration: underline;
  transition: color 200ms ease;
}

.ce-filter-group__reset:hover {
  color: var(--text-secondary, #575A61);
}

/* -- Filter Image (for image presentation) -- */
.ce-filter-image-wrapper {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.ce-filter-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -- Mobile Filter Drawer -- */
/* Full-screen slide-in drawer on mobile (<750px) */

/* Wrapper: Mobile fixed bottom-floating Pill — Filter-Trigger erscheint daumenfreundlich
   am unteren Bildschirmrand sobald User in Grid-Bereich scrollt. Visibility via
   data-visible Attribut (gesteuert durch IntersectionObserver auf #product-grid).
   Drawer-Panel (.mobile-facets) bleibt fixed/101 für Overlay. */
.mobile-facets__wrapper {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 50;
  min-block-size: 100px;
  padding: 40px 16px max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.mobile-facets__wrapper::before,
.mobile-facets__wrapper::after {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-facets__wrapper[data-blur="true"]::before,
.mobile-facets__wrapper[data-blur="true"]::after,
html[data-pill-blur="true"] .mobile-facets__wrapper::before,
html[data-pill-blur="true"] .mobile-facets__wrapper::after {
  opacity: 1;
}
.mobile-facets__bar {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-facets__wrapper[data-visible="true"] .mobile-facets__bar,
html[data-pill-visible="true"] .mobile-facets__wrapper .mobile-facets__bar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
html[data-pill-visible="false"] .mobile-facets__wrapper .mobile-facets__bar {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
/* Gradient-Layer (immer sichtbar, weicher Farbverlauf) */
.mobile-facets__wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.92) 20%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 0.4) 65%,
    rgba(255, 255, 255, 0.18) 80%,
    rgba(255, 255, 255, 0.06) 92%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}
/* Blur-Layer (separat, mit eigenem Soft-Mask, damit kein harter Backdrop-Rand entsteht) */
.mobile-facets__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 25%,
    rgba(0, 0, 0, 0.85) 45%,
    rgba(0, 0, 0, 0.55) 65%,
    rgba(0, 0, 0, 0.25) 82%,
    rgba(0, 0, 0, 0.08) 92%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 25%,
    rgba(0, 0, 0, 0.85) 45%,
    rgba(0, 0, 0, 0.55) 65%,
    rgba(0, 0, 0, 0.25) 82%,
    rgba(0, 0, 0, 0.08) 92%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}
.mobile-facets__wrapper:has(.menu-opening)::before,
.mobile-facets__wrapper:has(.menu-opening)::after {
  display: none;
}
/* Wenn Drawer offen: Wrapper-Padding raus, damit das Bottom-Sheet bündig
   am unteren Viewport-Rand sitzt (Wrapper ist Containing-Block des Drawers). */
.mobile-facets__wrapper:has(.menu-opening) {
  padding: 0;
  min-block-size: 0;
}
.dark .mobile-facets__wrapper::before {
  background: linear-gradient(
    to top,
    rgba(24, 25, 26, 1) 0%,
    rgba(24, 25, 26, 0.92) 20%,
    rgba(24, 25, 26, 0.7) 45%,
    rgba(24, 25, 26, 0.4) 65%,
    rgba(24, 25, 26, 0.18) 80%,
    rgba(24, 25, 26, 0.06) 92%,
    rgba(24, 25, 26, 0) 100%
  );
}
.mobile-facets__wrapper[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}
.mobile-facets__bar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .mobile-facets__wrapper {
    position: relative;
    inset: auto;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Trigger button row */
/* Mobile-Audit Iteration 4: Trigger als Floating-Pill am unteren Rand.
   Hochkontrastiert (invert), Pressura Mono Label, X-Icon entfällt
   (Close ist im Bottom-Sheet-Header-X-Button). */
.mobile-facets__open-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 10px 22px;
  min-block-size: 44px;
  block-size: 44px;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: background 200ms ease;
}
.mobile-facets__open-wrapper:hover {
  background: var(--ce-surface-invert-hover);
}

.mobile-facets__open-wrapper::-webkit-details-marker {
  display: none;
}

.mobile-facets__open {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ce-text-on-invert);
}

.ce-mobile-filters__icon {
  font-size: 18px;
}

/* Close X in trigger row — entfällt als Inline-Element im Pill-Pattern.
   X-Close ist nur noch im geöffneten Drawer (ce-mobile-filters__close-btn). */
.mobile-facets__close {
  display: none;
}

/* Pill verstecken sobald Drawer offen ist (Bottom-Sheet übernimmt).
   Kein display:none — sonst snapt die Pill beim Schließen zurück. Stattdessen
   opacity + scale + pointer-events, damit die transition (siehe .mobile-facets__bar)
   beim Wiederauftauchen weich greift. */
.mobile-facets__disclosure[open] .mobile-facets__open-wrapper {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}
.mobile-facets__open-wrapper {
  transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms,
              transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms,
              background 200ms ease;
}

.ce-mobile-filters__close-icon {
  font-size: 20px;
  color: var(--ce-text-heading);
}

/* Mobile-Audit Iteration 2 (CES-56): Sichtbarer X-Close im Bottom-Sheet-Header.
   44×44 Tap-Area, sitzt rechts neben Heading + Count. */
.ce-mobile-filters__close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  color: var(--ce-text-heading);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 200ms ease, background 200ms ease;
}
.ce-mobile-filters__close-btn:hover {
  border-color: var(--ce-border-strong);
  background: var(--ce-surface-muted);
}
/* Header-inner Layout: heading/count links, close-btn rechts */
.mobile-facets__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mobile-facets__heading,
.mobile-facets__count {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Density-Toggle (Mobile-Audit Sprint 3 #15) — 1↔2 col Toggle, nur auf Mobile sichtbar.
   Default 2-col, Toggle persistiert via localStorage als ce-grid-density. */
.ce-density-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  color: var(--ce-text-heading);
  cursor: pointer;
  margin-inline-start: 8px;
}
/* Density-Toggle als Begleiter der Filter-Pill: Pressed-Pill-Optik, gleiche Höhe */
.ce-density-toggle--in-bar {
  inline-size: 44px;
  block-size: 44px;
  margin-inline-start: 0;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: background 200ms ease, border-color 200ms ease;
}
.ce-density-toggle--in-bar:hover {
  background: var(--ce-surface-muted);
  border-color: var(--ce-border-strong);
}
.ce-density-toggle--in-bar .ce-density-toggle__icon {
  font-size: 20px;
}
@media (min-width: 768px) {
  .ce-density-toggle--in-bar { display: none; }
}
.ce-density-toggle:hover { border-color: var(--ce-border-strong); }
.ce-density-toggle__icon { font-size: 18px; line-height: 1; }
/* Toggle visual: pressed=false (default 2-col) → show grid icon; pressed=true (1-col) → show stack icon */
.ce-density-toggle .ce-density-toggle__icon--one { display: none; }
.ce-density-toggle[aria-pressed="true"] .ce-density-toggle__icon--two { display: none; }
.ce-density-toggle[aria-pressed="true"] .ce-density-toggle__icon--one { display: inline-block; }

/* Density override: when data-density="1"/"2" is set on #product-grid, force layout on mobile.
   Mobile-Audit Iteration 4: Override muss .grid__item Width gleichzeitig setzen,
   weil Sprint-1 base.css `.grid--2-col-tablet-down .grid__item { width: calc(50%-...) }`
   die Children explizit auf 50% lockt. Override mit display: flex column für 1-col,
   display: grid für 2-col. */
@media (max-width: 749px) {
  #product-grid[data-density="1"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  #product-grid[data-density="1"] .grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  #product-grid[data-density="2"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  #product-grid[data-density="2"] .grid__item {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Drawer panel: bottom-sheet on mobile (slide-up), full-screen fallback on tablet+
   Mobile-Audit Sprint 3 (#15): Bottom-Sheet pattern, daumenfreundlich, max 80dvh,
   abgerundete Top-Corners, native-iOS-Erwartung. */
.mobile-facets {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -1px;
  max-block-size: calc(100dvh - var(--header-height, 64px) + 1px);
  background: var(--ce-surface-page);
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
  transform: translateY(100%);
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.mobile-facets__disclosure.menu-opening .mobile-facets {
  transform: translateY(0);
}
/* Backdrop (dim + blur) hinter dem Drawer.
   Pseudo-Element auf dem Disclosure, damit kein zusätzliches Markup nötig ist. */
.mobile-facets__disclosure[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 16, 17, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-facets__disclosure.menu-opening::before {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .mobile-facets__disclosure[open]::before { display: none; }
}

@media (min-width: 768px) {
  .mobile-facets {
    inset: 0;
    max-block-size: none;
    border-radius: 0;
    animation: none;
  }
}

.mobile-facets__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Drawer header */
.mobile-facets__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--ce-border-default);
  flex-shrink: 0;
}

.ce-mobile-filters__sort-inline {
  margin-left: auto;
  margin-right: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ce-mobile-filters__sort-inline .ce-sort-select {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  color: var(--ce-text-heading);
  background: transparent;
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  padding: 6px 28px 6px 12px;
  height: 32px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.ce-mobile-filters__sort-inline .ce-sort-bar__chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ce-text-secondary);
  pointer-events: none;
}

.mobile-facets__header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.mobile-facets__heading {
  font-family: 'Pressura', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0;
}

.mobile-facets__count {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  color: var(--ce-text-muted);
  margin: 0;
}

/* Filter groups (scrollable area) */
.mobile-facets__main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  position: relative;
  min-height: 0;
}

/* Each filter group (details/summary) */
.mobile-facets__details {
  border-bottom: 1px solid var(--ce-border-default);
}

.mobile-facets__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none;
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ce-text-heading);
  transition: background 200ms ease;
}

.mobile-facets__summary::-webkit-details-marker {
  display: none;
}

.mobile-facets__summary:hover {
  background: var(--ce-surface-muted);
}

.ce-mobile-filter-group__arrow {
  font-size: 20px;
  color: var(--ce-text-muted);
  margin-left: auto;
  transition: transform 200ms ease, color 200ms ease;
}

/* Submenu — in-place expand (collapsible accordion) */
.mobile-facets__submenu {
  background: var(--ce-surface-page);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Hide back-button: in-place expand has no submenu route */
.mobile-facets__details .ce-mobile-filter-group__back {
  display: none;
}

/* Chevron-Flip beim Öffnen: ▼ → ▲ */
.mobile-facets__details[open] > .mobile-facets__summary .ce-mobile-filter-group__arrow {
  transform: rotate(180deg);
}

/* Back button in submenu */
.ce-mobile-filter-group__back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ce-text-heading);
  background: none;
  border: none;
  border-bottom: 1px solid var(--ce-border-default);
  cursor: pointer;
  padding: 16px 24px;
  width: 100%;
  text-align: left;
}

/* Filter list in submenu — Padding angeglichen an Summary (24px) */
.mobile-facets__list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 24px 12px;
  margin: 0;
}

/* Checkbox items */
.ce-mobile-filter-item {
  padding: 4px 0;
}

.ce-mobile-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}

.mobile-facets .ce-filter-checkbox__box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ce-border-strong);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}

.mobile-facets__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mobile-facets__checkbox:checked + .ce-filter-checkbox__box {
  background: var(--ce-surface-invert);
  border-color: var(--ce-surface-invert);
}

.mobile-facets__checkbox:checked + .ce-filter-checkbox__box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ce-text-on-invert);
  border-bottom: 2px solid var(--ce-text-on-invert);
  transform: rotate(-45deg) translateY(-1px);
}

.ce-filter-checkbox__text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ce-filter-checkbox__label {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  color: var(--ce-text-secondary);
}

.ce-filter-checkbox__count {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  color: var(--ce-text-muted);
  margin-left: auto;
}

/* Sticky bottom area: sort + footer bleiben fix, scroll nur in __main */
.ce-mobile-filters__sticky-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ce-border-default);
  background: var(--ce-surface-page);
}

/* Sort section in drawer */
.ce-mobile-filter-group__sort {
  padding: 16px 24px;
}

.ce-mobile-sort {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-mobile-sort label {
  font-family: 'Pressura', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ce-text-heading);
  display: block;
}

/* Submenu footer (per-filter clear + apply) */
.ce-mobile-filter-group__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--ce-border-default);
  flex-shrink: 0;
}

.ce-mobile-filter-group__clear-link {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--ce-text-secondary);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color var(--ce-transition), color var(--ce-transition);
  display: inline-flex;
  align-items: center;
  text-align: center;
  line-height: 1;
  text-decoration: none;
}

.ce-mobile-filter-group__clear-link:hover {
  border-color: var(--ce-border-strong);
  color: var(--ce-text-heading);
}

/* Main drawer footer (clear all + apply) */
.mobile-facets__footer,
.ce-mobile-filters__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ce-border-default);
  flex-shrink: 0;
  background: var(--ce-surface-page);
}
.ce-mobile-filters__footer .ce-btn-primary {
  font-size: 13px;
}
.ce-mobile-filters__footer .ce-mobile-filters__count {
  margin: 0;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  color: var(--ce-text-muted);
}
.ce-mobile-filters__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.ce-mobile-filters__actions .ce-mobile-filter-group__clear-link,
.ce-mobile-filters__actions .ce-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ce-mobile-filters__actions i {
  font-size: 14px;
  line-height: 1;
}
html[data-has-active-filters="false"] [data-mobile-reset] .ce-mobile-filter-group__clear-link {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Hide the duplicate count below drawer */
.mobile-facets__wrapper ~ .ce-sort-bar__count-wrapper {
  display: none;
}

/* -- Product Grid -- */
/* Default: 2 columns (desktop/tablet 768px+), gap 20px */
.facets-vertical .product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.facets-vertical .product-grid .grid__item {
  width: auto;
  max-width: none;
}

/* 3 columns at xl viewport (1200px+, accounts for 260px sidebar + 32px gap) */
@media screen and (min-width: 1200px) {
  .facets-vertical .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile (<480px): 1 column */
@media screen and (max-width: 479px) {
  .facets-vertical .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile (480-767px): 2 columns */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .facets-vertical .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -- Pagination — Split Layout: Metadata links, Nav rechts -- */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 32px 0 16px;
}

.pagination-wrapper--split {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-inline: 16px;
}

.pagination-meta {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--ce-text-tertiary, rgba(24, 25, 26, 0.42));
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  opacity: 0.85;
}

.pagination-meta__dot {
  color: var(--ce-text-tertiary, rgba(24, 25, 26, 0.32));
  opacity: 0.7;
}

.pagination-meta__count,
.pagination-meta__page {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pagination-wrapper--split {
    justify-content: center;
  }
  .pagination-meta {
    display: none;
  }
}

.pagination {
  display: flex;
  align-items: center;
}

.pagination__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 4px;
  border-radius: 8px;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  cursor: pointer;
}

.pagination__item:hover {
  background: var(--ce-surface-subtle);
  color: var(--ce-text-heading);
}

.pagination__item--current {
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert) !important;
  font-weight: 500;
  pointer-events: none;
}

/* Prev / Next arrow buttons */
.pagination__item-arrow {
  width: 36px;
  min-width: 36px;
  color: var(--ce-text-secondary);
  border: 1px solid var(--ce-border-default);
}

.pagination__item-arrow:hover {
  border-color: var(--ce-border-strong);
  background: var(--ce-surface-subtle);
}

.pagination__item-arrow i {
  font-size: 18px;
  line-height: 1;
}

/* Ellipsis */
.pagination__item:not(a):not([role="link"]) {
  color: var(--ce-text-muted);
  pointer-events: none;
  background: none;
}

/* -- Multicolumn Section -- */
/* Source: grid-varianten/page.tsx — standard CE typography */

.multicolumn .title {
  text-align: center;
}

.multicolumn-card__info h3,
.multicolumn-card__info .inline-richtext {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 8px;
}

.multicolumn-card__info .rte {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ce-text-secondary);
}

.multicolumn-card__info .link {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ce-text-secondary);
}

.multicolumn__title .title {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
}

/* -- Image Banner Section -- */

.banner__content .banner__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: #FFFFFF;
}

.banner__content .banner__text {
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.banner__buttons .button {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  padding: 12px 20px;
  background: #FFFFFF;
  color: var(--ce-zinc-950);
  border: none;
  text-decoration: none;
  letter-spacing: 0;
  min-width: unset;
  min-height: unset;
}

.banner__buttons .button:hover {
  background: var(--ce-zinc-200);
}

.banner__buttons .button--secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

.banner__buttons .button--secondary:hover {
  border-color: #FFFFFF;
}

/* -- Multicolumn Section -- */

.multicolumn {
  max-width: 1200px;
  margin: 0 auto;
}

/* Ensure multicolumn-list grid displays as proper row */
.multicolumn .multicolumn-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .multicolumn .multicolumn-list {
    grid-template-columns: 1fr;
  }
}

.multicolumn .multicolumn-list__item {
  width: 100%;
  max-width: 100%;
}

/* Multicolumn title — centered, full width */
.multicolumn .title-wrapper-with-link,
.multicolumn .multicolumn__title {
  text-align: center;
  width: 100%;
  display: block;
  justify-content: center;
}

.multicolumn img {
  border-radius: 6px;
}

.multicolumn h2 {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  text-align: center;
  margin-bottom: 32px;
}

/* Spacing between grid and button */
.multicolumn .multicolumn-list {
  margin-bottom: 40px;
}

.multicolumn .multicolumn-card__info h3 {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
}

.multicolumn .multicolumn-card__info p,
.multicolumn .rte {
  font-family: 'Inter', sans-serif;
  color: var(--ce-text-body);
  font-size: 14px;
  line-height: 1.6;
}

.multicolumn .button {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border-radius: 8px;
}

/* -- Collapsible Content / Accordion Section -- */
/* Source: Brand Kit /komponenten/interaktiv (Accordion) */
/* Spec: Container card, Pressura 20px/500 trigger, Inter 16px/24px content,
   Chevron 20x20 rotates on open, border-bottom per item */

.collapsible-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* Dawn's narrow wrapper limits width to ~50% when no image — override to full width */
.collapsible-content .collapsible-content-wrapper-narrow {
  max-width: 100%;
  width: 100%;
}

/* Dawn's accordion container has a hardcoded max-width — override */
.collapsible-content .accordion {
  max-width: 100%;
  width: 100%;
}

/* Dawn's 2-col grid gives grid__item ~50% width even with only 1 child (no image) */
.collapsible-content__grid {
  display: block;
}

.collapsible-content__grid > .grid__item {
  width: 100%;
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  .collapsible-content {
    padding: 0 24px;
  }
}

/* Section heading */
.collapsible-content h2,
.collapsible-content__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin-bottom: 24px;
}

/* Hide Dawn's icon-accordion (food/product icons) */
.collapsible-content summary .icon-accordion {
  display: none;
}

/* Summary trigger — flex row, space-between */
.collapsible-content summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--ce-border-default);
  cursor: pointer;
  list-style: none;
}

.collapsible-content summary::-webkit-details-marker {
  display: none;
}

/* Accordion title — Pressura 20px/30px/500 */
.collapsible-content .accordion__title {
  font-family: 'Pressura', sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0;
  padding: 0;
  border: none;
}

/* Chevron — 20x20, rotates 180deg on open */
.collapsible-content .accordion__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ce-text-heading);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-content details[open] .accordion__chevron {
  transform: rotate(180deg);
}

/* Content — Inter 16px/24px, text-secondary, animated */
.collapsible-content .accordion__content {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--ce-text-secondary);
  padding: 16px 0;
}

/* Remove Dawn's absolute-positioned icon-caret if it exists */
.collapsible-content summary .icon-caret {
  display: none;
}

/* Remove Dawn's caption letter-spacing */
.collapsible-content .caption-with-letter-spacing {
  letter-spacing: 0;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  color: var(--ce-text-tertiary);
}

/* -- Global Dawn Button Override -- */
/* All Dawn .button elements get CE styling */
/* Resets Dawn's min-width/min-height/padding/letter-spacing/border-radius overrides.
   Dawn renders button visuals via ::before (position:absolute, border-radius from --buttons-radius).
   We must override BOTH the element AND the pseudo-elements. */

.button,
button.button,
a.button {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  min-width: unset;
  min-height: unset;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ce-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
}

/* Kill Dawn's ::before/::after pseudo-elements that render the visual button */
.button:before,
button.button:before,
a.button:before,
.button:after,
button.button:after,
a.button:after {
  content: none;
}

.button:hover,
button.button:hover,
a.button:hover {
  background: var(--ce-surface-invert-hover);
  color: var(--ce-text-on-invert);
}

.button--secondary {
  background: transparent;
  border: 1px solid var(--ce-border-default);
  color: var(--ce-text-secondary);
  font-size: 13px;
}

.button--secondary:hover {
  background: transparent;
  border-color: var(--ce-border-strong);
  color: var(--ce-text-heading);
}

/* Disabled state — Brand Kit: surface-muted bg, text-muted, cursor not-allowed, no hover change */
.button:disabled,
.button[disabled],
.button[aria-disabled="true"],
button.button:disabled,
a.button.disabled {
  background: var(--ce-surface-muted);
  color: var(--ce-text-muted);
  border: none;
  cursor: not-allowed;
  opacity: 1;
}

.button:disabled:hover,
.button[disabled]:hover,
.button[aria-disabled="true"]:hover,
button.button:disabled:hover {
  background: var(--ce-surface-muted);
  color: var(--ce-text-muted);
}

/* Disabled outline variant */
.button--secondary:disabled,
.button--secondary[disabled],
.button--secondary[aria-disabled="true"] {
  background: transparent;
  border: 1px solid var(--ce-border-muted);
  color: var(--ce-text-muted);
  cursor: not-allowed;
}

.button--secondary:disabled:hover,
.button--secondary[disabled]:hover,
.button--secondary[aria-disabled="true"]:hover {
  background: transparent;
  border-color: var(--ce-border-muted);
  color: var(--ce-text-muted);
}

/* Kill Dawn underline-links-hover on cards */
.underline-links-hover:hover a {
  text-decoration: none;
}

/* "Alle anzeigen" / "View all" links */
.view-all,
a.full-unstyled-link {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  color: var(--ce-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.view-all:hover,
a.full-unstyled-link:hover {
  color: var(--ce-text-heading);
}

/* -- Global Dawn Gradient Override -- */
/* Dawn uses .gradient class for Color Scheme gradients — CE doesn't use them */
.gradient {
  background: transparent;
}

.title-wrapper .title,
.collection-hero__title,
h2.h1, h2.h2, h2.h0 {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  color: var(--ce-text-heading);
  letter-spacing: -0.02em;
}

/* ---- CE Premium Partner ---- */

.ce-premium-partner {
  background: var(--ce-surface-page);
  padding: 48px 24px;
  text-align: center;
}

.ce-premium-partner__inner {
  max-width: 960px;
  margin: 0 auto;
}

.ce-premium-partner__logo {
  width: auto;
  height: 48px;
  margin: 0 auto 12px;
  filter: var(--ce-logo-filter, none);
}

.ce-premium-partner__label {
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  margin: 0 0 24px;
}

.ce-premium-partner__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 16px;
}

.ce-premium-partner__subline {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-fs-intro);
  font-weight: 300;
  color: var(--ce-text-secondary);
  line-height: var(--ce-lh-snug);
  margin: 0 auto;
  max-width: 60ch;
  text-align: start;
  text-wrap: pretty;
}
/* Mobile-Audit Sprint 7 (#6): Center erst ab Tablet, Mobile bleibt linksbündig */
@media screen and (min-width: 768px) {
  .ce-premium-partner__subline {
    max-width: 680px;
    text-align: center;
  }
}

/* ---- CE Hero Slider ---- */
/* Source: Brand Kit /komponenten/hero-slider/page.tsx (verified 2026-03-26)
   1:1 transfer from React source — all values from Tailwind classes */

/* Section wrapper from schema class — ensure no background leak */
.ce-section-hero,
.ce-section-hero .shopify-section-group-body,
.ce-section-hero.shopify-section {
  background: transparent !important;
}

.ce-hero-slider {
  padding: 36px 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ce-hero-slider__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: var(--ce-font-size-h2);
  color: var(--ce-text-heading);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

/* Container = the card itself — overflow visible for external arrows */
.ce-hero-slider__container {
  position: relative;
  background: var(--ce-surface-card);
  border-radius: 16px;
  border: 1px solid var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
}

/* Track clips content, container stays visible for arrows */

/* Scroll track inside the card — clips overflow while container stays visible */
.ce-hero-slider__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 16px;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.ce-hero-slider__track::-webkit-scrollbar {
  display: none;
}

.ce-hero-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
}

/* Slide layout */
.ce-hero-slide {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

@media screen and (min-width: 750px) {
  .ce-hero-slide {
    flex-direction: row;
    min-height: 440px;
    max-height: 560px;
  }
}

/* Image — Mobile-Audit Iteration 4: fixed container-Höhe statt mit Bild wachsend.
   Hochformatige Bilder rendern auf max-height innerhalb der Box; Weißraum füllt horizontal.
   Querformat füllt Box-Width. Container fix → konsistente Slide-Höhen. */
.ce-hero-slide__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ce-surface-page) 70%, #FFFFFF);
  padding: 24px;
  block-size: 280px;
  flex-shrink: 0;
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .ce-hero-slide__media {
    width: 50%;
    block-size: auto;
    min-height: 100%;
    max-height: 560px;
  }
}

.ce-hero-slide__img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* removes white bg from product images */
}

/* Dark mode: disable blend mode so images don't disappear */
.dark .ce-hero-slide__media img {
  mix-blend-mode: normal;
}

.ce-hero-slide__placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ce-hero-slide__placeholder svg {
  width: 120px;
  height: 120px;
  fill: var(--ce-zinc-200);
}

/* Content — right half */
.ce-hero-slide__content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

@media screen and (min-width: 750px) {
  .ce-hero-slide__content {
    width: 50%;
    padding: 32px 40px;
    justify-content: center;
  }
}

/* Brand: 11px uppercase Pressura Mono */
.ce-hero-slide__brand {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-tertiary);
  margin-bottom: 8px;
}

/* Title: 28px mobile, 36px desktop, Pressura medium */
.ce-hero-slide__title {
  font-family: 'Pressura', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 12px;
  line-height: 1.15;
}

@media screen and (min-width: 750px) {
  .ce-hero-slide__title {
    font-size: 36px;
  }
}

.ce-hero-slide__title a {
  color: inherit;
  text-decoration: none;
}

/* Description: 15px Inter, leading-relaxed, mb-auto pushes price down.
   Mobile-Audit Sprint 2 (#3): description uses fixed truncate(120) in liquid +
   reserved height to prevent slide-to-slide vertical jumps when descriptions vary in length. */
.ce-hero-slide__desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ce-text-secondary);
  line-height: 1.625;
  margin: 0;
  /* 4 Zeilen reserviert (truncate 120 chars) — verhindert Höhensprünge zwischen Slides */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(4 * 15px * 1.625);
  text-wrap: pretty;
}

/* Price + CTAs wrapper — bottom-aligned, mt-auto schiebt nach unten (#3 fix) */
.ce-hero-slide__footer {
  margin-top: auto;
  padding-top: 24px;
}

/* Price: Pressura Mono. Mobile-Audit Sprint 2 (#7): vat auf eigene Zeile, nowrap. */
.ce-hero-slide__price {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-hero-slide__price-amount {
  font-family: 'Pressura Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  color: var(--ce-text-heading);
  white-space: nowrap;
}

.ce-hero-slide__price-vat {
  display: block;
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  color: var(--ce-text-tertiary);
  white-space: nowrap;
}

.ce-hero-slide__price-text {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  color: var(--ce-text-tertiary);
}

/* Buttons: px-4 py-2 text-[13px] rounded-[8px] Pressura Mono medium */
.ce-hero-slide__actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: stretch;
}
.ce-hero-slide__actions .ce-hero-slide__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ce-hero-slide__btn-label-short { display: none; }
@media (max-width: 419px) {
  .ce-hero-slide__btn-label-full { display: none; }
  .ce-hero-slide__btn-label-short { display: inline; }
}

.ce-hero-slide__btn {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.ce-hero-slide__btn:active {
  transform: scale(0.98);
}

/* Primary: surface-invert bg, text-on-invert */
.ce-hero-slide__btn--primary {
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
}

.ce-hero-slide__btn--primary:hover {
  opacity: 0.9;
}

/* Outline: transparent bg, border-strong, text-secondary */
.ce-hero-slide__btn--outline {
  background: transparent;
  color: var(--ce-text-secondary);
  border: 1px solid var(--ce-border-strong);
}

.ce-hero-slide__btn--outline:hover {
  color: var(--ce-text-heading);
}

/* Arrows: absolute on the card, top-1/2 -translate-y-1/2, w-10 h-10 */
.ce-hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ce-text-secondary);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ce-hero-slider__arrow:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}

.ce-hero-slider__arrow--prev {
  left: -20px;
}

.ce-hero-slider__arrow--next {
  right: -20px;
}

@media (hover: none) and (pointer: coarse) {
  .ce-hero-slider__arrow { display: none; }
}

.ce-hero-slider__arrow svg {
  width: 16px;
  height: 16px;
}

/* Dots: below the card, w-2 h-2, gap-2 */
.ce-hero-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
}

.ce-hero-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--ce-border-default);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.ce-hero-slider__dot:hover {
  background: var(--ce-text-tertiary);
}

.ce-hero-slider__dot--active {
  background: var(--ce-surface-invert);
}

/* Play/Pause button — next to dots, same visual context */
.ce-hero-slider__playpause {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ce-text-tertiary);
  font-size: 14px;
  padding: 2px;
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.ce-hero-slider__playpause:hover {
  color: var(--ce-text-heading);
}

/* ---- CE USP Bar ---- */
/* Source: Brand Kit /inhalte/shop-layout-2 (verified 2026-03-26)
   4 selling points, horizontal, light bg, Pressura Mono */

.ce-usp-bar {
  background: var(--ce-surface-muted);
  padding: 12px 0;
  border-bottom: 1px solid var(--ce-border-muted);
}

.ce-usp-bar__inner {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.ce-usp-bar__item {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mobile-Audit Iteration 3: USP-Bar mobile auf 1 Zeile.
   Mobile-Text (kürzere Variante) wird angezeigt; Desktop-Text auf Tablet+. */
.ce-usp-bar__text-desktop { display: none; }
.ce-usp-bar__text-mobile { display: inline; }
@media screen and (min-width: 768px) {
  .ce-usp-bar__text-desktop { display: inline; }
  .ce-usp-bar__text-mobile { display: none; }
}

.ce-usp-bar__item i {
  font-size: 16px;
  line-height: 1;
}

@media screen and (max-width: 749px) {
  .ce-usp-bar { padding: 8px 0; }
  .ce-usp-bar__inner {
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
  }
  .ce-usp-bar__inner::-webkit-scrollbar { display: none; }
  .ce-usp-bar__item {
    font-size: 11px;
    gap: 4px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .ce-usp-bar__item i { font-size: 14px; }
  @media (prefers-reduced-motion: reduce) {
    .ce-usp-bar__inner { scroll-behavior: auto; }
  }
}

/* ---- CE Brand Showcase ---- */
/* Source: Brand Kit /inhalte/shop-layout-2 — brand logos above footer */

/* Source: web-to-mcp capture 164d6b14 — Brand Logo Strip
   Grid: 5 cols, gap 20px, cells 176x100px
   Logos: opacity 0.6, hover 1.0, transition 300ms
   Images: object-contain, max-w/max-h 100% */

.ce-brand-showcase {
  padding: var(--ce-spacing-3xl) 0;
  background: var(--ce-surface-page);
  border-top: 1px solid var(--ce-border-default);
}

.ce-brand-showcase__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .ce-brand-showcase__inner {
    padding: 0 32px;
  }
}

/* Mobile-Audit Sprint 7: Section-Override-Audit.
   .ce-brand-showcase__heading hatte vorher KEIN font-size — das verhinderte,
   dass die .hxxl-Klasse aus ce-base.css auf Desktop greift (specificity-Konflikt
   durch Selektor-Spezifität). Wir setzen jetzt explizit auf die Foundation-Tokens,
   damit die Typo-Hierarchie konsistent skaliert. */
.ce-brand-showcase__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-fs-hxl);
  line-height: var(--ce-lh-tight);
  font-weight: 500;
  color: var(--ce-text-heading);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 12px;
}

/* Mobile-Audit Sprint 7 (#6): Description linksbündig auf Mobile (≥3 Zeilen
   sind klassisch besser lesbar, vermeidet Waisenkinder). Center bleibt ab Tablet. */
.ce-brand-showcase__subline {
  font-family: 'Inter', sans-serif;
  font-size: var(--ce-font-size-body-sm);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ce-text-muted);
  text-align: start;
  text-wrap: pretty;
  max-width: 60ch;
  margin: 0 auto 40px;
}
@media screen and (min-width: 768px) {
  .ce-brand-showcase__subline {
    text-align: center;
    max-width: 764px;
  }
}

.ce-brand-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  justify-items: center;
}

@media screen and (min-width: 750px) {
  .ce-brand-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 990px) {
  .ce-brand-showcase__grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Mobile-Audit Sprint 7 (#9): fixe Cell-Aspect 3:2 für optische Symmetrie,
   Logo-Höhen-Cap 48px normalisiert das visuelle Gewicht zwischen schmalen und
   breiten Logos (la marzocco vs. ECM). */
.ce-brand-showcase__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  padding: 8px;
  opacity: 0.6;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.ce-brand-showcase__item:hover {
  opacity: 1;
}

/* Source: brand-logos/page.tsx — PNG logos use mix-blend-mode: multiply.
   Mobile-Audit Sprint 7 (#9): max-height auf 48px reduziert, max-width 80%
   normalisiert breite Logos (Eversys) gegenüber kompakten (la marzocco). */
.ce-brand-showcase__logo {
  max-width: 80%;
  max-height: 48px;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* Shift pure black (#000) → brand black (#3B3B39) */
  filter: brightness(0) invert(22%) sepia(3%) saturate(300%) hue-rotate(20deg) brightness(1.05);
}

.dark .ce-brand-showcase__logo {
  mix-blend-mode: normal;
  filter: var(--ce-logo-filter, none);
}

/* Fallback text when no logo image uploaded */
.ce-brand-showcase__name {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ce-text-secondary);
}

/* -- Brand Showcase: Compact variant (Collection Page) -- */
/* Source: web-to-mcp capture 3e24aa20 */

.ce-brand-showcase--compact {
  padding: 32px 0;
}

.ce-brand-showcase--compact .ce-brand-showcase__inner {
  padding: 32px 16px;
}

.ce-brand-showcase--compact .ce-brand-showcase__heading {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 8px;
}

.ce-brand-showcase--compact .ce-brand-showcase__subline {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--ce-text-muted);
  margin-bottom: 12px;
}

.ce-brand-showcase--compact .ce-brand-showcase__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 0;
}

/* Mobile: 2 Reihen à 5 Logos */
@media screen and (max-width: 749px) {
  .ce-brand-showcase--compact .ce-brand-showcase__grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 0;
  }
  .ce-brand-showcase--compact .ce-brand-showcase__item {
    flex: 0 0 20%;
    height: 56px;
  }
  .ce-brand-showcase--compact .ce-brand-showcase__logo {
    height: 36px;
    max-width: 80px;
  }
}

.ce-brand-showcase--compact .ce-brand-showcase__item {
  flex: 1 1 120px;
  min-width: 0;
  max-width: 180px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile-Audit Sprint 7 (#9): Logo-Cap auf compact-Variant — 80% Cell-Width
   normalisiert breite Logos (Eversys, La Marzocco) gegenüber kompakten (Eureka,
   Mahlkönig). max-height 48px konsistent zur Standard-Variant. */
.ce-brand-showcase--compact .ce-brand-showcase__logo {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 48px;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.ce-brand-showcase--compact .ce-brand-showcase__item:hover .ce-brand-showcase__logo {
  opacity: 1;
}

/* Dark mode: invert logos to render light on dark background */
.dark .ce-brand-showcase--compact .ce-brand-showcase__logo {
  filter: var(--ce-logo-filter, none);
  mix-blend-mode: normal;
}

/* ---- CE Footer ---- */
/* Source: Brand Kit footer.tsx (verified 2026-03-26)
   1:1 from TSX source. Monochromatic, no inverted sections.
   BG: --surface-card, border-t --border-default
   Logo: kce-type.svg h-20px, mb-8
   Grid: 5 cols (5xl), 3 (3xl), 2 (default), gap-6/gap-8
   Headings: Pressura 14px/500, --text-heading, mb-3
   Links: Inter 14px/400, --text-secondary, hover --text-heading, line-height 28px
   Copyright: Pressura Mono 12px, --text-tertiary
   Social: Remixicon 18px, --text-tertiary, hover --text-heading */

/* Push footer to bottom when content is short */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main#MainContent {
  flex: 1;
}

/* Hide Dawn footer — replaced by ce-footer */
.footer { display: none; }

.ce-footer {
  background: var(--ce-surface-card);
  border-top: 1px solid var(--ce-border-default);
  margin-top: auto;
}

.ce-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

@media screen and (min-width: 750px) {
  .ce-footer__inner {
    padding: 48px 32px;
  }
}

/* -- Logo -- */
.ce-footer__logo-link {
  display: inline-block;
  margin-bottom: 32px;
}

.ce-footer__logo {
  height: 20px;
  width: auto;
}

/* Mobile-Audit Sprint 5 (#11): Mobile-First-Hierarchie. Auf Mobile alles 1-spaltig
   gestapelt; Kontakt-Block via order: -1 ganz nach oben. Auf Tablet+ wieder Spalten. */
.ce-footer__columns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ce-footer__col--contact { order: -1; margin-bottom: 16px; }
.ce-footer__col--contact > div + div { margin-top: 20px; }

/* 6-col-Grid ab Tablet:
   M/L (768–1099): 4 Linklisten in 2×2 (jede span 2) + Kontakt span 2 × 2 Rows rechts
   XL (1100+):     4 Linklisten span 1 (eine Reihe) + Kontakt span 2 rechts */
@media screen and (min-width: 768px) {
  .ce-footer__columns {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px 32px;
  }
  .ce-footer__column { grid-column: span 2; }
  .ce-footer__col--contact {
    grid-column: 5 / -1;
    grid-row: 1 / span 2;
    order: 0;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1100px) {
  .ce-footer__columns { gap: 32px; }
  .ce-footer__column { grid-column: span 1; }
  .ce-footer__col--contact {
    grid-column: 5 / -1;
    grid-row: auto;
  }
}

/* Akkordeon-Verhalten für link_list/text-Blöcke auf Mobile.
   Tablet+: JS setzt open=true, summary-Chevron drehen + Tap deaktivieren */
.ce-footer__column--collapsible {
  border-bottom: 1px solid var(--ce-border-default);
}
.ce-footer__heading--summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ce-footer__heading--summary::-webkit-details-marker { display: none; }
.ce-footer__chevron {
  font-size: 20px;
  transition: transform 200ms ease;
  color: var(--ce-text-secondary);
}
.ce-footer__column--collapsible[open] .ce-footer__chevron { transform: rotate(180deg); }
.ce-footer__column--collapsible > .ce-footer__links {
  padding-bottom: 16px;
}

@media screen and (min-width: 768px) {
  .ce-footer__column--collapsible {
    border-bottom: none;
  }
  .ce-footer__heading--summary {
    padding: 0;
    margin: 0 0 16px;
    cursor: default;
    pointer-events: none;
  }
  .ce-footer__chevron { display: none; }
  .ce-footer__column--collapsible > .ce-footer__links {
    padding-bottom: 0;
  }
}

/* Contact sublabel: location/role descriptor */
.ce-footer__contact-label {
  font-family: 'Pressura', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--ce-text-tertiary);
  margin-bottom: 6px;
}

/* Contact links: simple text, stacked vertically */
/* Mobile-Audit Iteration 2 (CES-56): Kontakt-Pills mit Icon + Label.
   Best-Practice: Telefon/Mail als gestylter Button erhöht Click-Rate (Baymard
   ~30–50%). Pill-Outline, ≥40px Tap-Area. Auto-detect tel: vs mailto: via Liquid. */
.ce-footer__contact-pills {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
}

/* "E-Mail"-Kurzlabel auf allen Breakpoints — Adresse via aria-label/title,
   mailto öffnet Client. Hält Phone+Email einreihig in der schmalen Spalte. */
.ce-footer__contact-pill-short { display: inline; }
.ce-footer__contact-pill-full { display: none; }

.ce-footer__contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ce-border-default);
  /* Mobile-Audit Iteration 4: brand-konsistenter Radius (war 999px full-rounded) */
  border-radius: var(--ce-radius-sm);
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ce-text-heading);
  text-decoration: none;
  background: transparent;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
  min-block-size: 40px;
  align-self: flex-start;
  max-width: 100%;
  white-space: nowrap;
}
/* Mobile-Audit Iteration 4: Icon via Remixicon (theme-standard) statt mask-image-Trick.
   <i class="ri-phone-line"> bzw. <i class="ri-mail-line"> direkt im Markup. */
.ce-footer__contact-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--ce-text-secondary);
}

.ce-footer__contact-pill:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
  background: var(--ce-surface-muted);
}

/* Email-Pill nutzt jetzt überall das Kurzlabel — keine Umbruch-Regel mehr nötig */

/* -- Headings: Pressura 16px/500, clear hierarchy over links -- */
.ce-footer__heading {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 16px;
}

/* Sekundäres Heading: zweites Menü in derselben Spalte (Abstand nach oben) */
.ce-footer__heading--secondary {
  margin-top: 24px;
}

/* -- Links: Pressura 14px/300, softer weight for hierarchy -- */
.ce-footer__links {
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 28px;
  color: var(--ce-text-secondary);
}

.ce-footer__links a,
.ce-footer__link {
  font-family: 'Pressura', sans-serif;
  color: var(--ce-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
}

.ce-footer__links a:hover,
.ce-footer__link:hover {
  color: var(--ce-text-heading);
}

.ce-footer__links p {
  margin: 0;
}

/* -- Bottom Bar: Mobile-Audit Iteration 2 (CES-56) — Mobile-First-Layout.
   Mobile: Suche full-width oben, dann Toggle/Social space-between, dann Copyright.
   Tablet+: ein Inline-Block mit border-top.
   Akkordeon der Linklisten hat bereits eigene Trennlinien (Sprint 5) → Bottom-Border
   wird nur ab Tablet wieder gesetzt, sonst doppelter Divider. */
.ce-footer__bottom {
  margin-top: 24px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ce-footer__bottom-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .ce-footer__bottom {
    border-top: 1px solid var(--ce-border-default);
    margin-top: 32px;
    padding-top: 24px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .ce-footer__bottom-left {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* Copyright: Pressura Mono 12px */
.ce-footer__copyright {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  color: var(--ce-text-tertiary);
  margin: 0;
}

/* Social: Remixicon 18px */
.ce-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ce-footer__social-link {
  color: var(--ce-text-tertiary);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 18px;
  line-height: 1;
}

.ce-footer__social-link:hover {
  color: var(--ce-text-heading);
}

/* Mobile-Audit Iteration 2 (CES-56): space-between Theme-Toggle (L) ↔ Social-Links (R).
   Theme-Toggle bekommt margin-inline-end: auto → schiebt Social-Cluster nach rechts. */
.ce-footer__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.ce-footer__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  /* Mobile-Audit Iteration 2 (CES-56): margin-inline-end: auto schiebt Social-Cluster nach rechts */
  margin-inline-end: auto;
  color: var(--ce-text-tertiary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s ease;
}
@media screen and (min-width: 768px) {
  .ce-footer__tools {
    width: auto;
  }
  .ce-footer__theme-toggle {
    margin-inline-end: 0;
  }
}

.ce-footer__theme-toggle:hover {
  color: var(--ce-text-heading);
}

.ce-footer__icon-dark { display: none; }
.ce-footer__icon-light { display: inline; }
.dark .ce-footer__icon-dark { display: inline; }
.dark .ce-footer__icon-light { display: none; }

/* Version label */
.ce-footer__version {
  margin-left: 12px;
  opacity: 0.5;
}

/* ---- CE Password Page ---- */
/* Source: Brand Kit design principles — minimal, centered, Pressura heading */

body.password {
  background-color: var(--ce-surface-page);
  color: var(--ce-text-heading);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.password-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- Password Header (Brand Kit /komponenten/header) -- */
/* Source: Logo left, button right, h-60px, bg white, 1px border bottom */

.ce-pw-header {
  background: var(--ce-surface-card);
  border-bottom: 1px solid var(--ce-border-muted);
  height: 60px;
}

.ce-pw-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 24px;
}

.ce-pw-header__logo-img {
  height: 20px;
  width: auto;
}

.ce-pw-header__shop-name {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-heading);
}

.ce-pw-header__btn {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ce-pw-header__btn:hover {
  opacity: 0.85;
}

@media screen and (max-width: 749px) {
  .ce-pw-header {
    height: 56px;
  }
  .ce-pw-header__logo-img {
    height: 16px;
  }
  .ce-pw-header__btn {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* -- Password Main Content -- */

.main-password__content {
  text-align: center;
  padding: 48px 24px;
}

.main-password__content h1 {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: var(--ce-font-size-h1);
  color: var(--ce-text-heading);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.main-password__content div {
  font-family: 'Inter', sans-serif;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-secondary);
  line-height: 1.6;
}

/* -- Password Modal (Login Form) -- */

.password-modal__content {
  background: var(--ce-surface-card);
  border-radius: var(--ce-radius-lg);
  padding: 32px;
  max-width: 400px;
  margin: 0 auto;
}

.password-modal__content-heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: var(--ce-font-size-h4);
  color: var(--ce-text-heading);
  margin: 0 0 24px;
}

.password-form .password-field {
  margin-bottom: 16px;
}

.password-form .field__input {
  width: 100%;
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ce-text-heading);
  background: var(--ce-surface-page);
  box-sizing: border-box;
}

.password-form .field__input:focus {
  outline: none;
  border-color: var(--ce-text-heading);
  box-shadow: 0 0 0 1px var(--ce-text-heading);
}

.password-form .field__input::placeholder {
  color: var(--ce-text-tertiary);
}

.password-form .field__label {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-secondary);
}

/* Submit button: solid, matches Brand Kit primary button style */
.password-button {
  width: 100%;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.password-button:hover {
  background: var(--ce-surface-invert-hover);
}

.password__footer-text {
  display: block;
  margin-top: 16px;
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-tertiary);
}

.password__footer-text a {
  color: var(--ce-text-secondary);
  text-decoration: underline;
}

/* -- Password Footer (Brand Kit /komponenten/footer bottom bar) -- */
/* Source: Divider + copyright left + admin link right, Pressura Mono 12px */

.ce-password-footer {
  padding: 0;
}

.ce-pw-footer {
  border-top: 1px solid var(--ce-border-muted);
}

.ce-pw-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}

.ce-pw-footer__copyright {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-tertiary);
}

.ce-pw-footer__admin {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-tertiary);
}

.ce-pw-footer__admin a {
  color: var(--ce-text-secondary);
  text-decoration: underline;
}

.ce-pw-footer__admin a:hover {
  color: var(--ce-text-heading);
}

/* -- Modal Overlay -- */

.modal__content {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal__close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ce-text-secondary);
}

.modal__close-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.modal__toggle-close {
  display: none;
}

details[open] .modal__toggle-open {
  display: none;
}

details[open] .modal__toggle-close {
  display: block;
}

/* ---- CE Specs Table ---- */
/* Source: Brand Kit /komponenten/tabellen (Key-Value Specs variant)
   Verified 2026-03-26 against prototype */

.ce-specs-table-wrapper {
  margin: 24px 0;
}

.ce-specs-table {
  width: 100%;
  border-collapse: collapse;
}

.ce-specs-table thead th {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-tertiary);
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid var(--ce-border-strong);
}

.ce-specs-table tbody td {
  padding: 14px 0;
  border-bottom: 1px solid var(--ce-border-default);
  vertical-align: top;
}

.ce-specs-table tbody tr:last-child td {
  border-bottom: none;
}

.ce-specs-table__label {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small);
  font-weight: 500;
  color: var(--ce-text-heading);
  width: 40%;
  padding-right: 16px;
  white-space: normal;
}

.ce-specs-table__value {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-small);
  color: var(--ce-text-secondary);
  word-break: break-word;
}

/* Mobile: Label + Wert stapeln — vermeidet Kollision bei langen Labels
   wie "Aufbereitungsmethode". Tabellenstruktur bleibt im DOM. */
@media (max-width: 600px) {
  .ce-specs-table,
  .ce-specs-table tbody,
  .ce-specs-table tr,
  .ce-specs-table td {
    display: block;
    width: 100%;
  }
  .ce-specs-table tbody tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--ce-border-default);
  }
  .ce-specs-table tbody tr:last-child {
    border-bottom: none;
  }
  .ce-specs-table tbody td {
    padding: 0;
    border: 0;
  }
  .ce-specs-table__label {
    width: auto;
    padding-right: 0;
    margin-bottom: 4px;
    color: var(--ce-text-secondary);
    font-size: 12px;
  }
  .ce-specs-table__value {
    color: var(--ce-text-heading);
  }
}

/* ---- CE Review Card — Source: Brand Kit /komponenten/product-cards "Review Product Card" ---- */

/* ============================================
   CE Product Card — Mobile-Audit Sprint 2 (2026-04-26)
   Konsolidiert ce-card-review + Dawn card-product.
   Variants: grid (default) · compact (Cart) · slider (Editorial — siehe ce-hero-slide).
   Behebt Bugs #3, #7, #16, #17, #21.
   ============================================ */

.ce-pcard {
  /* Mobile-Audit Iteration 4 Fix: width: 100% damit Card immer Grid-Cell füllt.
     Als <a>-Element default width: auto = content-fit → Card shrunk auf Bild-Breite. */
  width: 100%;
  background: var(--ce-surface-card);
  border-radius: 16px;
  border: 1px solid var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  height: 100%;
  position: relative;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.ce-pcard:hover {
  box-shadow: var(--ce-shadow-card-hover);
}

/* Image — Mobile-Audit Iteration 4: fixe Pixel-Höhe statt aspect-ratio/padding-Trick.
   Bei breiteren Cards (1-col Density, Desktop) wurde 1:1 zu dominant (Bild = Card-Width
   = sehr hoch). Fix: Container 240px hoch, Bild rendert via object-fit: contain
   innerhalb dieser Box. Hochformat-Bilder werden vertikal zentriert mit Whitespace
   links/rechts; Querformat füllt Container-Width. Konsistente Card-Höhen unabhängig
   von Card-Breite oder Bild-Aspect.

   Theme-Regel (CLAUDE.md): Produktbilder rendern IMMER auf hellem Background,
   auch im Dark Mode. Grund: Produktfotos haben oft weiße/transparente Backgrounds
   und mix-blend-mode: multiply auf Logos. Auf Dark-Surface würde das clashen. */
.ce-pcard__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  block-size: 240px;
  background: color-mix(in srgb, var(--ce-surface-page) 70%, #FFFFFF);
  flex-shrink: 0;
  overflow: hidden;
  padding: 44px 16px 16px;
}
/* Dark Mode: explizit hell halten (override der --ce-surface-card token). */
.dark .ce-pcard__image { background: #FFFFFF; }

.ce-pcard__image img,
.ce-pcard__image svg {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0;
}

/* Brand label — Vendor (Pressura Mono uppercase), abs over image (Bug #21: Layout-Reihenfolge) */
.ce-pcard__brand {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-tertiary);
}

.ce-pcard__content {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Title — uses Sprint-1 token, balance, min-height für 2 Zeilen Reservierung (Bug #16) */
.ce-pcard__title {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-card-title);
  font-weight: 500;
  line-height: var(--ce-lh-snug);
  color: var(--ce-text-heading);
  margin: 0;
  text-wrap: balance;
  /* 2 Zeilen reserviert für vertikales Alignment der Preis-Zeile zwischen Cards */
  min-height: calc(2 * var(--ce-font-size-card-title) * var(--ce-lh-snug));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price block — Pressura Mono, sticky bottom, vat OWN line (Bug #7) */
.ce-pcard__price {
  margin-top: auto;
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--ce-text-heading);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-pcard__price-amount {
  display: block;
  white-space: nowrap;
}

.ce-pcard__price-vat {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--ce-text-tertiary);
  white-space: nowrap;
}

/* Compact variant — Cart-Empfehlungen, kleinere Padding/Schrift */
.ce-pcard--compact {
  border-radius: 12px;
}
.ce-pcard--compact .ce-pcard__image {
  block-size: 160px;
  padding: 24px 12px 12px;
}
.ce-pcard--compact .ce-pcard__brand {
  top: 8px;
  left: 12px;
  font-size: 10px;
}
.ce-pcard--compact .ce-pcard__content {
  padding: 8px 12px 12px;
  gap: 6px;
}
.ce-pcard--compact .ce-pcard__title {
  font-size: 14px;
  -webkit-line-clamp: 2;
  min-height: calc(2 * 14px * var(--ce-lh-snug));
}
.ce-pcard--compact .ce-pcard__price { font-size: 13px; }
.ce-pcard--compact .ce-pcard__price-vat { font-size: 10px; }

/* ---- CE Featured Collection — Source: web-to-mcp 157b09a9-d3dd-4428-b0fd-cb2dce49a77a ---- */

/* Grid: gap-5 = 20px — override via Custom Property so Dawn's item width calc stays in sync.
   Dawn items use: width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3/4)
   Must override the variable, not column-gap directly, to avoid overflow/wrap. */
.ce-featured-collection {
  --grid-desktop-horizontal-spacing: 20px;
  --grid-desktop-vertical-spacing: 20px;
}

/* Collection heading: CE typography */
.ce-featured-collection .collection__title .title {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
}

/* View All button: already CE-styled via global .button override */

/* ============================================
   Standard Pages (main-page.liquid)
   Source: coffee-elements.de/impressum/ + Brand Kit typografie
   ============================================ */

/* Page title — centered, Pressura, large */
.main-page-title,
.page-title {
  font-family: 'Pressura', sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  color: var(--ce-text-heading);
  text-align: center;
  margin: 0 0 8px;
}

@media screen and (min-width: 750px) {
  .main-page-title,
  .page-title {
    font-size: 40px;
    line-height: 50px;
  }
}

/* RTE (Rich Text Editor) content — the page body */

/* Headings inside RTE: Pressura hierarchy */
.rte h1 {
  font-family: 'Pressura', sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 48px 0 16px;
}

.rte h2 {
  font-family: 'Pressura', sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 40px 0 12px;
}

.rte h3 {
  font-family: 'Pressura', sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 32px 0 8px;
}

.rte h4 {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 24px 0 8px;
}

/* First heading after page title: no extra top margin */
.rte > h1:first-child,
.rte > h2:first-child,
.rte > h3:first-child {
  margin-top: 0;
}

/* Body text */
.rte p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  margin: 0 0 16px;
}

/* Lists */
.rte ul,
.rte ol {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--ce-text-secondary);
  margin: 0 0 16px;
  padding-left: 24px;
}

.rte li {
  margin-bottom: 6px;
}

/* Links inside RTE */
.rte a {
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rte a:hover {
  color: var(--ce-text-secondary);
}

/* Horizontal rule */
.rte hr {
  border: none;
  border-top: 1px solid var(--ce-border-default);
  margin: 32px 0;
}

/* Blockquote */
.rte blockquote {
  font-family: 'Pressura', sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: var(--ce-text-secondary);
  border-left: 2px solid var(--ce-border-strong);
  padding-left: 20px;
  margin: 24px 0;
}

/* Strong/Bold: no synthetic bold — Pressura uses font cuts, not weight synthesis.
   Tailwind preflight sets font-weight: bolder; this resets it to inherit globally. */
strong,
b {
  font-weight: inherit;
}

/* RTE: distinguish bold text via heading color only */
.rte strong,
.rte b {
  color: var(--ce-text-heading);
}

/* Narrower page width for readability */
@media screen and (min-width: 990px) {
  .page-width--narrow {
    max-width: 780px;
  }
}

/* ---- Category Card ----
   Source: Brand Kit /komponenten/cards → "1. Category Card"
   Spec: Image + Title + Description + Outline Button
   bg white · border · shadow · rounded-[16px] · Button px-5 py-2.5
   ---- */

.ce-category-card {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--ce-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ce-category-card:hover {
  box-shadow: var(--ce-shadow-card-hover);
}

.ce-category-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ce-category-card__media {
  position: relative;
  overflow: hidden;
  padding-top: var(--ratio-percent, 75%);
  background: var(--ce-surface-muted);
}

.ce-category-card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.ce-category-card__media--empty,
.ce-category-card__media--placeholder {
  background: var(--ce-surface-muted);
}

/* Logo mode: contain + padding + near-white bg (zinc-50) */
.ce-category-card__media--logo {
  background: var(--ce-surface-page);
}

.ce-category-card__media--logo img {
  object-fit: contain;
  padding: var(--ce-spacing-2xl);
  /* Shift pure black (#000) → brand black (#3B3B39) */
  filter: brightness(0) invert(22%) sepia(3%) saturate(300%) hue-rotate(20deg) brightness(1.05);
}

.ce-category-card__media--placeholder svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.ce-category-card__content {
  padding: var(--ce-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ce-spacing-sm);
  flex: 1;
}

.ce-category-card__title {
  font-family: 'Pressura', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ce-text-heading);
  margin: 0;
}

.ce-category-card__description {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: var(--ce-line-height-body);
  color: var(--ce-text-secondary);
  margin: 0;
  flex: 1;
}

.ce-category-card__btn {
  margin-top: var(--ce-spacing-sm);
  align-self: flex-start;
}

/* ============================================
   Breadcrumb Navigation
   Source: Brand Kit prototype (verified via web-to-mcp c3378548)
   ============================================ */

.ce-breadcrumb-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

@media screen and (max-width: 749px) {
  .ce-breadcrumb-wrapper {
    padding: 0 24px;
  }
}

/* Mobile-Audit Iteration 2 (CES-56): Voller Pfad auf allen Viewports.
   Trail als <ol>, mit Pfeil-Icon vor dem ersten Item.
   Mobile: kompakt, current-Item ellipsis bei Overflow.
   Bei sehr langen Pfaden: horizontal-scrollbar (kein Layout-Bruch). */
.ce-breadcrumb {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  line-height: 16.5px;
  color: var(--ce-text-tertiary);
  padding: 8px 0;
}
@media (min-width: 768px) {
  .ce-breadcrumb { padding: 12px 0; }
}

.ce-breadcrumb__trail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Auf Mobile horizontal scrollbar bei Overflow — Layout bricht nicht */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ce-breadcrumb__trail::-webkit-scrollbar { display: none; }

.ce-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-block-size: 32px;
}

/* Erstes Item: Pfeil-Prefix für mobile Back-Optik, Touch-Target padding */
.ce-breadcrumb__item--first .ce-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 8px 0;
  margin-inline-start: -4px;
  min-block-size: 32px;
}
.ce-breadcrumb__back-icon {
  font-size: 14px;
  line-height: 1;
}
@media (min-width: 768px) {
  /* Tablet+: Pfeil-Icon entfällt — User nutzt Browser-Back oder Logo */
  .ce-breadcrumb__back-icon { display: none; }
  .ce-breadcrumb__item--first .ce-breadcrumb__link {
    padding: 0;
    margin-inline-start: 0;
  }
}

.ce-breadcrumb__link {
  color: var(--ce-text-secondary);
  text-decoration: none;
  transition: color 150ms ease;
  white-space: nowrap;
}
.ce-breadcrumb__link:hover {
  color: var(--ce-text-heading);
}

.ce-breadcrumb__sep {
  color: var(--ce-border-default);
  flex-shrink: 0;
}

.ce-breadcrumb__current {
  color: var(--ce-text-heading);
  font-weight: 500;
  /* Current-Item darf kürzen: ellipsis bei langen Produkt-Titeln */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 22ch;
}
@media (min-width: 768px) {
  .ce-breadcrumb__current { max-inline-size: none; }
}

/* ============================================
   Product Detail Page (PDP)
   Source: Brand Kit prototype (verified via web-to-mcp 75596d45)
   Layout: 2-col grid 50/50, gap 48px, max-w 1200px
   ============================================ */

/* -- Layout: 2-col grid, constrained -- */
.product.grid.grid--2-col-tablet {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Reset Dawn calc widths on grid items */
.product.grid .grid__item {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* -- Image area: aspect from media.aspect_ratio (var --ce-media-aspect set inline), image contains -- */
/* Mobile-Audit 2026-04-26 (#20): aspect-ratio: 1 forced cropping on portrait/landscape products.
   Now uses --ce-media-aspect (set per-section from product.featured_media.aspect_ratio).
   Fallback 1/1 for products without aspect data. */
/* Mobile-Audit Iteration 4: align-items/justify-content auf center für vertikale
   Zentrierung des Bildes innerhalb des aspect-Containers (war stretch/stretch
   → Bild rutschte je nach intrinsischen Dimensionen nach unten). */
.product__media-wrapper .product__media-item .media {
  background: #FFFFFF;
  border: 1px solid var(--ce-border-default);
  border-radius: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  aspect-ratio: var(--ce-media-aspect, 1);
  overflow: hidden;
}

/* Placeholder for products without images */
.ce-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.product__media-wrapper .product__media-item .media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  padding: 24px;
}

/* Non-cutout product photos: mark with [cover] in alt text to fill edge-to-edge */
.product__media-wrapper .product__media-item--cover .media img {
  object-fit: cover;
  padding: 0;
}

/* Remove Dawn's absolute positioning on media images */
.product__media-wrapper .media > img,
.product__media-wrapper .media > svg {
  position: relative !important;
}

/* -- Vendor: Pressura Mono 11px, uppercase, muted -- */
.product__info-wrapper .product__text.caption-with-letter-spacing {
  font-family: 'Pressura Mono', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-muted, #B6B7BB) !important;
  margin-bottom: 4px;
  opacity: 1 !important;
}

/* -- Title: Pressura hxl — 40px/50px, weight 500 -- */
.product__info-wrapper .product__title h1 {
  font-family: 'Pressura', sans-serif !important;
  font-size: var(--ce-font-size-hxl) !important;
  line-height: var(--ce-line-height-hxl) !important;
  font-weight: 500 !important;
  color: var(--ce-text-heading);
  margin-bottom: 12px;
}

/* -- Subtitle/Caption: Pressura 14px, text-secondary -- */
.product__info-wrapper .product__text.subtitle {
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  color: var(--text-secondary, #575A61);
  margin-bottom: 4px;
}

/* -- Price: only show one price, inline with MwSt -- */
/* Hide the entire sale container — only show regular price */
.product__info-wrapper .price__sale {
  display: none !important;
}

/* Regular price: Pressura Mono 24px/500 */
.product__info-wrapper .price-item--regular {
  font-family: 'Pressura Mono', sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--text-heading, #18191A);
}

/* Hide all badges */
.product__info-wrapper .price__badge-sale,
.product__info-wrapper .price__badge-sold-out,
.product__info-wrapper .badge {
  display: none !important;
}

/* Price + Tax wrapper: inline flex for same line */
.product__info-wrapper [id^="price-"] {
  display: inline;
  margin-bottom: 0;
}

.product__info-wrapper .price {
  display: inline !important;
}

.product__info-wrapper .price__container {
  display: inline !important;
}

.product__info-wrapper .price__regular {
  display: inline !important;
}

/* Tax notice: Inter 12px, muted, INLINE directly after price */
.product__info-wrapper .product__tax {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-muted, #B6B7BB) !important;
  display: inline !important;
  margin-left: 8px;
}

/* Hide shipping policy link and duties text */
.product__info-wrapper .product__tax a {
  display: none;
}

/* Wrapper div for price line: needs to be a block with margin */
.product__info-wrapper [id^="price-"],
.product__info-wrapper [id^="price-"] + .product__tax {
  /* These are siblings, wrapped by .product__info-container */
}

/* Spacing after tax line before description */
.product__info-wrapper .product__tax {
  margin-bottom: 0;
}

/* Add margin to the installment form that follows price */
.product__info-wrapper .installment {
  display: none;
}

/* -- All product info text: Pressura -- */
.product__info-wrapper .product__description,
.product__info-wrapper .product__description *,
.product__info-wrapper .rte,
.product__info-wrapper .rte * {
  font-family: 'Pressura', sans-serif !important;
}

.product__info-wrapper .product__description {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--text-body, #313337);
  margin-top: 16px;
  margin-bottom: 20px;
}

.product__info-wrapper .product__description p {
  margin-bottom: 12px;
}

.product__info-wrapper .product__description p:last-child {
  margin-bottom: 0;
}

/* -- Product Tags (Type + Vendor pills) -- */
.ce-pdp-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* -- Quantity + ATC wrapper: flex row, same height -- */
.ce-pdp-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
  height: 48px;
}

/* Quantity block inside actions: no margin, shrink, match height */
.ce-pdp-actions .product-form__quantity {
  margin: 0 !important;
  flex: 0 0 auto;
  height: 48px;
}

.ce-pdp-actions .price-per-item__container {
  height: 48px;
}

.ce-pdp-actions quantity-input {
  height: 36px;
}

.ce-pdp-actions quantity-input button {
  height: 36px;
  width: 36px;
}

.ce-pdp-actions quantity-input .quantity__input {
  height: 36px;
  width: 36px;
}

/* Buy button form inside actions: grow to fill, match height */
.ce-pdp-actions product-form {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 48px;
}

.ce-pdp-actions product-form form {
  flex: 1;
  display: flex;
  height: 48px;
}

.ce-pdp-actions .product-form__buttons {
  flex: 1;
  display: flex;
  height: 48px;
}

.ce-pdp-actions .product-form__submit {
  width: 100%;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Hide quantity label inside actions row */
.ce-pdp-actions .quantity__label {
  display: none !important;
}

/* Hide volume pricing inside actions */
.ce-pdp-actions volume-pricing,
.ce-pdp-actions .volume-pricing-note,
.ce-pdp-actions price-per-item {
  display: none !important;
}

.ce-pdp-tag {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  line-height: 16.5px;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-block;
}

/* Type pill: filled background */
.ce-pdp-tag--type {
  background: var(--ce-surface-muted, #F3F3F3);
  color: var(--text-secondary, #575A61);
}

/* Vendor pill: border only */
.ce-pdp-tag--vendor {
  border: 1px solid var(--ce-border-default, #EDEEEF);
  color: var(--text-tertiary, #69727D);
}

/* -- Quantity + ATC: flex row layout -- */
/* The product-form wraps both quantity and submit button */
.product__info-wrapper product-form {
  display: block;
}

.product__info-wrapper product-form > form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

/* Quantity container: shrink, no grow */
.product__info-wrapper .product-form__quantity,
.product__info-wrapper .price-per-item__container {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* Quantity label: hide */
.product__info-wrapper .product-form__quantity .form__label {
  display: none !important;
}

/* ATC button container: grow to fill */
.product__info-wrapper .product-form__buttons {
  flex: 1;
  min-width: 0;
}

/* -- Variant Picker: Swatch Circles -- */
/* Source: CE Design System — color dots 32px, border ring on selected */
.product__info-wrapper .product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  border: none;
  padding: 0;
}

.product__info-wrapper .product-form__input--swatch .form__label {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-muted, #B6B7BB);
  width: 100%;
  margin-bottom: 8px;
}

.product__info-wrapper .product-form__input--swatch [data-selected-value] {
  color: var(--text-secondary, #575A61);
  text-transform: none;
  letter-spacing: 0;
}

.product__info-wrapper .swatch-input__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.product__info-wrapper .swatch-input__label {
  cursor: pointer;
  display: inline-flex;
}

.product__info-wrapper .swatch {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--swatch--background);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-shadow: inset 0 0 0 1px var(--ce-border-default, #EDEEEF);
}

.product__info-wrapper .swatch-input__input:checked + .swatch-input__label .swatch {
  border-color: var(--surface-invert, #18191A);
  box-shadow: inset 0 0 0 1px var(--surface-invert, #18191A);
}

.product__info-wrapper .swatch-input__label:hover .swatch {
  border-color: var(--text-muted, #B6B7BB);
}

.product__info-wrapper .swatch-input__input.visually-disabled + .swatch-input__label .swatch {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Unavailable swatches (no color data at all): diagonal stripe pattern */
.product__info-wrapper .swatch.swatch--unavailable {
  background: repeating-linear-gradient(
    45deg,
    var(--ce-border-default, #EDEEEF),
    var(--ce-border-default, #EDEEEF) 2px,
    transparent 2px,
    transparent 6px
  );
}

/* -- Variant Picker: Pill Buttons (Size, etc.) -- */
.product__info-wrapper .product-form__input--pill {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  border: none;
  padding: 0;
}

.product__info-wrapper .product-form__input--pill .form__label {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-muted, #B6B7BB);
  width: 100%;
  margin-bottom: 8px;
}

.product__info-wrapper .product-form__input--pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.product__info-wrapper .product-form__input--pill label {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--ce-border-default, #EDEEEF);
  color: var(--text-secondary, #575A61);
  cursor: pointer;
  transition: all 200ms ease;
}

.product__info-wrapper .product-form__input--pill input[type="radio"]:checked + label {
  background: var(--surface-invert, #18191A);
  color: var(--text-on-invert, #FFFFFF);
  border-color: var(--surface-invert, #18191A);
}

.product__info-wrapper .product-form__input--pill label:hover {
  border-color: var(--text-muted, #B6B7BB);
}

/* -- Quantity Selector: border, radius 8px, 3-cell layout -- */

.product__info-wrapper quantity-input {
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}

.product__info-wrapper quantity-input button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary, #575A61);
  cursor: pointer;
  font-size: 16px;
  transition: background-color 150ms ease;
  padding: 0;
}

.product__info-wrapper quantity-input button:hover {
  background: var(--ce-surface-muted);
}

.product__info-wrapper quantity-input button .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.product__info-wrapper quantity-input button svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.product__info-wrapper quantity-input .quantity__input {
  width: 36px;
  height: 36px;
  text-align: center;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 14px;
  color: var(--text-heading, #18191A);
  border: none;
  border-left: 1px solid var(--ce-border-default);
  border-right: 1px solid var(--ce-border-default);
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

.product__info-wrapper quantity-input .quantity__input::-webkit-inner-spin-button,
.product__info-wrapper quantity-input .quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* -- Buy Button (ATC): ce-btn-primary style -- */
.product__info-wrapper .product-form__submit {
  font-family: 'Pressura Mono', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  background: var(--surface-invert, #18191A) !important;
  color: var(--text-on-invert, #FFFFFF) !important;
  border-radius: 8px !important;
  padding: 0 20px;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease, transform 100ms ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product__info-wrapper .product-form__submit i {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.product__info-wrapper .product-form__submit:hover {
  background: var(--surface-invert-hover, #313337) !important;
}

.product__info-wrapper .product-form__submit:active {
  transform: scale(0.98);
}

/* Hide dynamic checkout buttons if present */
.product__info-wrapper .shopify-payment-button {
  display: none;
}

/* Hide price-per-item breakdown */
.product__info-wrapper price-per-item {
  display: none;
}

/* Volume pricing note */
.product__info-wrapper .volume-pricing-note {
  display: none;
}

/* -- Specs Table: below product info, full width -- */
.kliewe-specs {
  margin-top: 48px !important;
  margin-bottom: 32px !important;
}

.kliewe-specs > p:first-child {
  font-family: 'Pressura', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-heading, #18191A) !important;
  opacity: 1 !important;
  margin-bottom: 16px !important;
}

.kliewe-specs table {
  border: 1px solid var(--ce-border-default) !important;
  border-radius: 12px !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
}

.kliewe-specs thead {
  display: none;
}

.kliewe-specs tbody tr {
  border-bottom: none !important;
}

.kliewe-specs tbody tr:nth-child(odd) {
  background: var(--ce-surface-card) !important;
}

.kliewe-specs tbody tr:nth-child(even) {
  background: var(--surface-page, #FBFBFC) !important;
}

.kliewe-specs tbody td:first-child {
  font-family: 'Pressura Mono', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #B6B7BB) !important;
  padding: 12px 16px !important;
  width: 200px;
}

.kliewe-specs tbody td:last-child {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--text-body, #313337) !important;
  padding: 12px 16px !important;
}

/* -- Collapsible tabs: hidden for now (empty content) -- */
.product__accordion:empty,
.product__info-wrapper .accordion:has(.accordion__content:empty) {
  display: none;
}

/* -- Hide "View full details" link — not needed on PDP -- */
.product__view-details {
  display: none !important;
}

/* -- Share button: subtle styling -- */
/* Hide share button on PDP */
.product__info-wrapper .share-button {
  display: none !important;
}

/* -- Product Image Slider (thumbnail_slider mode) -- */
/* Force horizontal slider instead of stacked layout */
/* Fade gallery: slides are stacked and cross-faded on change (is-active = visible) */
.product__media-wrapper .product__media-list {
  position: relative;
  display: block !important;
  width: 100%;
  aspect-ratio: var(--ce-media-aspect, 1);
  overflow: hidden;
  margin: 0;
  padding: 0;
  scroll-snap-type: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product__media-wrapper .product__media-list::-webkit-scrollbar {
  display: none;
}

.product__media-wrapper .product__media-item {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  max-width: 100% !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  z-index: 1;
  /* Vertikale Zentrierung der .media innerhalb des Slot-Containers */
  display: flex;
  align-items: center;
  justify-content: center;
}

.product__media-wrapper .product__media-item.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Mobile: echter horizontaler Swipe-Slider mit scroll-snap.
   Desktop bleibt im Cross-Fade-Modus (oben). */
@media screen and (max-width: 749px) {
  .product__media-wrapper .product__media-list {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    aspect-ratio: var(--ce-media-aspect, 1);
  }

  .product__media-wrapper .product__media-item {
    position: relative !important;
    inset: auto;
    flex: 0 0 100%;
    width: 100% !important;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* Wrapper: overflow visible so buttons can escape visually; position relative for button anchoring */
.product__media-wrapper {
  overflow: visible;
  position: relative;
}

/* BFC anchor: media-gallery is an inline custom element by default,
   blocks flexbox containment. Force block so overflow-clip on descendants works. */
.product__media-wrapper media-gallery,
media-gallery {
  display: block;
}

/* Slider buttons: positioned at left:0 / right:0 (within layout bounds),
   shifted visually outside via transform — avoids page scrollWidth expansion */
.product__media-wrapper .slider-buttons {
  position: static;
  height: 0;
}

.product__media-wrapper .slider-button {
  position: absolute !important;
  top: 50% !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ce-text-secondary);
  transition: border-color 200ms ease, color 200ms ease;
  z-index: 10;
}

.product__media-wrapper .slider-button:hover {
  border-color: var(--ce-border-strong);
  color: var(--ce-text-heading);
}

/* Arrows sit OUTSIDE image bounds via negative offset.
   Wrapper stays overflow:visible so they don't get clipped;
   media-list clips the bleeding slides. */
.product__media-wrapper .slider-button--prev {
  left: -20px !important;
  transform: translateY(-50%) !important;
}

.product__media-wrapper .slider-button--next {
  right: -20px !important;
  transform: translateY(-50%) !important;
}

/* Prev arrow: rotate caret 180° to point left */
.product__media-wrapper .slider-button--prev svg {
  transform: rotate(180deg);
}

.product__media-wrapper .slider-button svg {
  width: 16px;
  height: 16px;
}

/* Slider counter: hide */
.product__media-wrapper .slider-counter {
  display: none !important;
}

/* Thumbnail slider wrapper */
.product__media-wrapper .thumbnail-slider {
  overflow: hidden;
}

/* Thumbnails: CE styled */
.product__media-wrapper .thumbnail-list {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product__media-wrapper .thumbnail-list::-webkit-scrollbar {
  display: none;
}

.product__media-wrapper .thumbnail-list__item {
  flex: 0 0 auto;
  order: 999; /* detail shots after variant thumbs; variants override via inline style with their product.variants position */
}

/* Thumbnail slider: horizontal scroll strip with hairline edges, no arrows */
.product__media-wrapper .thumbnail-slider {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Hide Dawn's thumb arrows — scroll + main gallery arrows handle navigation */
.product__media-wrapper .thumbnail-slider .slider-button {
  display: none !important;
}

.product__media-wrapper .thumbnail-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-left: 1px solid var(--ce-border-default);
  border-right: 1px solid var(--ce-border-default);
  padding: 4px 10px;
  margin: 0;
  list-style: none;
}

.product__media-wrapper .thumbnail-list::-webkit-scrollbar {
  display: none;
}

/* When all thumbs fit: drop the edge hairlines */
.product__media-wrapper .thumbnail-slider--no-slide .thumbnail-list {
  border-left: none;
  border-right: none;
  padding: 4px 0;
}

.product__media-wrapper .thumbnail-list__item {
  flex: 0 0 auto;
}

.product__media-wrapper .thumbnail {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid var(--ce-border-default);
  overflow: hidden;
  cursor: pointer;
  padding: 4px;
  background: #FFFFFF;
  box-shadow: none;
  transition: border-color 200ms ease, opacity 200ms ease;
  opacity: 0.6;
}

.product__media-wrapper .thumbnail:hover {
  opacity: 1;
  border-color: var(--ce-border-strong);
}

.product__media-wrapper .thumbnail.is-active,
.product__media-wrapper .thumbnail[aria-current="true"] {
  border-color: var(--ce-text-heading);
  opacity: 1;
  box-shadow: none;
}

.product__media-wrapper .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* [cover] alt marker: thumbnails fill edge-to-edge like main gallery */
.product__media-wrapper .thumbnail-list__item--cover .thumbnail img {
  object-fit: cover;
}

/* Gallery container: display:block (custom elements are inline by default).
   Slides are contained by media-list (overflow-x:hidden), not here.
   No overflow:hidden here — buttons must not be clipped. */
.product__media-wrapper slider-component {
  display: block;
  position: relative;
}

/* -- Specs-Tabelle: fullwidth breakout -- */
/* The specs block sits inside .product__info-container.
   Break it out to span full page width beneath the 2-col grid. */
.kliewe-specs {
  margin-top: 48px !important;
  margin-bottom: 32px !important;
  position: relative;
  z-index: 1;
  /* Breakout: negate parent padding + info-wrapper constraints */
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: max(16px, calc((100vw - 1200px) / 2 + 16px)) !important;
  padding-right: max(16px, calc((100vw - 1200px) / 2 + 16px)) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  background: var(--ce-surface-page);
  clear: both;
}

/* Pickup-Availability — eigener Container vor der Specs-Tabelle, full-width, mit Heading.
   Mobile-Audit Iteration 4: vorher inline in buy-buttons (überlappte Specs visuell).
   Jetzt eigener Block via product-specs-table.liquid → strukturelle Trennung. */
.ce-pdp-availability {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 32px 0 16px;
  clear: both;
}
.ce-pdp-availability__heading {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 12px;
}
.ce-pdp-availability__inner {
  display: block;
  padding: 12px 16px;
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
}
pickup-availability {
  display: block;
  width: 100%;
}
.pickup-availability-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pickup-availability-preview .svg-wrapper { flex-shrink: 0; }
.pickup-availability-info p,
.pickup-availability-info .caption-large {
  margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ce-text-body);
}

/* Drawer (Modal) — von pickup-availability.js an document.body angehängt.
   Mobile-Audit Iteration 4: gestylt wie ce-leasing-overlay (Modal-Konvention im Theme).
   Backdrop via ::before, Drawer selbst ist das Panel (kein Wrapper-Element vorhanden). */
pickup-availability-drawer,
pickup-availability-drawer.gradient {
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 9500;
  width: calc(100% - 48px);
  max-width: 560px;
  height: max-content;
  max-height: calc(100vh - 48px);
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 14px;
  outline: none;
  isolation: isolate;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  font-family: 'Pressura', sans-serif;
  color: #18191A;
  padding: 24px;
  animation: ce-pickup-drawer-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ce-pickup-drawer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
body:has(pickup-availability-drawer[open])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9499;
  background: rgba(24, 25, 26, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ce-leasing-fade-in 180ms ease;
  pointer-events: none;
}
pickup-availability-drawer[open] {
  display: block;
}
pickup-availability-drawer h1,
pickup-availability-drawer h2,
pickup-availability-drawer h3,
pickup-availability-drawer .h2,
pickup-availability-drawer .h3,
pickup-availability-drawer .h4 {
  font-family: 'Pressura', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #18191A;
  margin: 0 0 12px;
}
pickup-availability-drawer p,
pickup-availability-drawer address {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  color: #4B4F54;
  margin: 0 0 8px;
}
pickup-availability-drawer .pickup-availability-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
pickup-availability-drawer .pickup-availability-drawer-title {
  margin: 0;
  flex: 1;
  font-family: 'Pressura', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #18191A;
}
pickup-availability-drawer .pickup-availability-variant {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  color: #4B4F54;
  margin-bottom: 16px;
}
pickup-availability-drawer .pickup-availability-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
pickup-availability-drawer .pickup-availability-list__item {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
pickup-availability-drawer .pickup-availability-list__item .pickup-availability-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px 10px;
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #047857;
  background: var(--ce-emerald-200, #A7F3D0);
  border-radius: 999px;
}
pickup-availability-drawer .pickup-availability-list__item .pickup-availability-preview i {
  font-size: 14px;
  line-height: 1;
  color: #047857;
}
pickup-availability-drawer .pickup-availability-time {
  margin: -4px 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ce-text-secondary, #6B7075);
}
pickup-availability-drawer .pickup-availability-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ce-text-secondary, #4B4F54);
  padding: 12px 14px;
  background: var(--ce-surface-muted, #F5F4F2);
  border-radius: 8px;
  white-space: pre-line;
}
pickup-availability-drawer .pickup-availability-address p {
  margin: 0;
}
pickup-availability-drawer .pickup-availability-address p + p {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ce-border-default, #E5E4E0);
}
pickup-availability-drawer .pickup-availability-drawer-button,
pickup-availability-drawer button[class*="close"],
pickup-availability-drawer .pickup-availability-drawer__button--close {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: var(--ce-radius-sm);
  color: #18191A;
  cursor: pointer;
  padding: 0;
}
pickup-availability-drawer .pickup-availability-drawer-button svg {
  width: 18px;
  height: 18px;
}
.pickup-availability-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pickup-availability-preview .svg-wrapper { flex-shrink: 0; }
.pickup-availability-info p,
.pickup-availability-info .caption-large {
  margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ce-text-body);
}
.pickup-availability-button {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  color: var(--ce-text-secondary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -- Related Products Section -- */
product-recommendations.related-products {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 48px 16px !important;
  display: block;
}

/* Heading: Pressura, centered — size via heading_size class (e.g. h0) */
product-recommendations .related-products__heading {
  font-family: 'Pressura', sans-serif !important;
  font-weight: 500 !important;
  text-align: center !important;
  color: var(--ce-text-heading) !important;
  margin-bottom: 40px !important;
}

/* Grid: 4 columns desktop */
product-recommendations .product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

product-recommendations .grid__item {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Card image area */
/* card__inner: neutralize ratio pseudo-element, stack vertically */
product-recommendations .card__inner {
  display: flex;
  flex-direction: column !important;
}

product-recommendations .card__inner::before {
  padding-bottom: 0 !important;
  display: none !important;
}

product-recommendations .card__inner > .card__content {
  display: none !important;
}

product-recommendations .card__media {
  flex: 1;
  width: 100%;
}

product-recommendations .card--card .card__media .media,
.related-products .card--card .card__media .media {
  position: relative !important;
  display: block !important;
  height: 260px;
  overflow: hidden;
  background: #FFFFFF !important;
}

product-recommendations .card--card .card__media .media img:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  margin: 0;
}

/* No hover image swap */
product-recommendations .card__media .media img:nth-child(2) {
  display: none !important;
}

/* Hide sale price duplicate */
product-recommendations .price__sale {
  display: none !important;
}

/* Hide badges */
product-recommendations .badge,
product-recommendations .card__badge {
  display: none !important;
}

/* Hide no-media heading duplicate */
product-recommendations .card__inner > .card__content .card__heading {
  display: none !important;
}

/* Tablet/Mobile: 2 columns below 990px */
@media screen and (max-width: 989px) {
  product-recommendations .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* -- Mobile: stack to single column -- */
@media screen and (max-width: 749px) {
  .product.grid.grid--2-col-tablet {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product__info-wrapper .product__title h1 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .product__info-wrapper .price-item--regular,
  .product__info-wrapper .price-item--sale {
    font-size: 20px !important;
  }

  .product__media-wrapper .product__media-item .media {
    /* Mobile-Audit 2026-04-26 (#20): keep dynamic aspect from --ce-media-aspect.
       min-height as floor for very tall portrait images. */
    aspect-ratio: var(--ce-media-aspect, 1);
    min-height: 300px;
  }

  .kliewe-specs {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: calc(100% + 32px) !important;
  }

}


/* ============================================
   Cart Page
   Source: CE Design System tokens
   ============================================ */

/* Container: CE section width — aligned with header/footer (32px padding) */
cart-items .page-width,
#main-cart-footer .page-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* -- Cart: Empty vs Filled state -- */

/* When cart has items: hide warnings, show form */
cart-items:not(.is-empty) .cart__warnings {
  display: none !important;
}

/* When cart is empty: hide form + title link, show warnings */
cart-items.is-empty .cart__contents {
  display: none !important;
}

cart-items.is-empty .title-wrapper-with-link {
  display: none !important;
}

/* -- Cart: Title bar (filled state) -- */
cart-items .title-wrapper-with-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

cart-items .title-wrapper-with-link h1 {
  font-family: 'Pressura', sans-serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--text-heading, #18191A);
  margin: 0;
}

cart-items .title-wrapper-with-link a {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  color: var(--text-muted, #B6B7BB);
  text-decoration: none;
  transition: color 200ms ease;
}

cart-items .title-wrapper-with-link a:hover {
  color: var(--text-secondary, #575A61);
}

/* -- Cart: Empty state — centered, friendly -- */
cart-items .cart__warnings {
  text-align: center;
  padding: 80px 0;
}

cart-items .cart__empty-text {
  font-family: 'Pressura', sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--text-heading, #18191A);
  margin: 0 0 24px;
}

cart-items .cart__warnings > .button {
  font-family: 'Pressura Mono', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  background: var(--surface-invert, #18191A) !important;
  color: var(--text-on-invert, #FFFFFF) !important;
  border-radius: 8px !important;
  padding: 12px 32px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

cart-items .cart__warnings > .button:hover {
  background: var(--surface-invert-hover, #313337) !important;
}

/* Login hint: hide for now (not needed for guest checkout) */
cart-items .cart__login-title,
cart-items .cart__login-paragraph {
  display: none;
}

/* Cart table */
.cart-items {
  width: 100%;
  border-collapse: collapse;
}

.cart-items thead th {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-muted, #B6B7BB);
  padding: 12px 0;
  border-bottom: 1px solid var(--ce-border-default);
  text-align: left;
}

.cart-items thead th.right {
  text-align: right;
}

/* Cart item row */
.cart-items .cart-item {
  border-bottom: 1px solid var(--ce-border-default);
}

/* Product image — clickable via cart-item__link overlay */
.cart-item__media {
  width: 100px;
  padding: 16px 16px 16px 0;
  position: relative;
  vertical-align: middle;
}

.cart-items td { vertical-align: middle; }

.cart-item__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cart-item__media img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--ce-border-default);
  background: var(--ce-surface-card);
  padding: 8px;
}

/* Product details — all text in Pressura */
.cart-item__details,
.cart-item__details * {
  font-family: 'Pressura', sans-serif;
}

.cart-item__details {
  padding: 16px 0;
  vertical-align: middle;
}

.cart-item__name {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-heading, #18191A);
  text-decoration: none;
}

.cart-item__name:hover {
  color: var(--text-secondary, #575A61);
}

/* Cart item price */
.cart-item .price,
.cart-item__totals .price {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-heading, #18191A);
}

/* Quantity selector in cart */
.cart-item__quantity {
  padding: 16px 0;
  vertical-align: middle;
}

/* Quantity + Remove button: flex row */
.cart-item__quantity-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-item quantity-input {
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}

.cart-item quantity-input button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary, #575A61);
  cursor: pointer;
  padding: 0;
}

.cart-item quantity-input button:hover {
  background: var(--ce-surface-muted);
}

.cart-item quantity-input button .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.cart-item quantity-input button svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.cart-item quantity-input .quantity__input {
  width: 36px;
  height: 36px;
  text-align: center;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 14px;
  color: var(--text-heading, #18191A);
  border: none;
  border-left: 1px solid var(--ce-border-default);
  border-right: 1px solid var(--ce-border-default);
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

.cart-item quantity-input .quantity__input::-webkit-inner-spin-button,
.cart-item quantity-input .quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Remove button: trash icon, right of quantity */
cart-remove-button {
  display: inline-flex;
  flex-shrink: 0;
}

cart-remove-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #B6B7BB);
  transition: color 200ms ease, background 200ms ease;
  padding: 0;
  border: none;
}

cart-remove-button a:hover {
  color: var(--text-heading, #18191A);
  background: var(--ce-surface-muted);
}

/* Reset Dawn .button--tertiary overrides */
cart-remove-button .button--tertiary {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted, #B6B7BB) !important;
  padding: 0 !important;
  min-width: auto !important;
  min-height: auto !important;
}

cart-remove-button .button--tertiary:hover {
  color: var(--text-heading, #18191A) !important;
  background: var(--ce-surface-muted) !important;
}

/* ============================================
   Mobile-Audit Sprint 4 (#22) — Cart Mobile-Architektur
   Tabellen-Layout → Card-Stack auf Mobile.
   Sticky-Bottom-CTA mit Total inline + Express-Checkout monochrom darüber.
   ============================================ */

@media screen and (max-width: 749px) {
  /* Tabellen-Struktur auf Mobile beibehalten — Produkt | Anzahl | Gesamtsumme.
     Spalten-Header sichtbar, Zellen kompakt. */
  .cart-items { table-layout: auto; width: 100%; }
  .cart-items thead { display: table-header-group; }
  .cart-items thead th {
    font-family: 'Pressura Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ce-text-tertiary);
    padding: 12px 4px;
    border-bottom: 1px solid var(--ce-border-default);
  }
  /* Quantity- und Total-Header sind im Markup mit small-hide markiert (Dawn-Default).
     Auf Mobile sollen sie aber erscheinen — !important-Override gegen ce-base.css */
  .cart-items thead th.small-hide { display: table-cell !important; }
  .cart-items thead th.right { text-align: right; }
  .cart-items thead th.medium-hide.large-up-hide { display: none !important; }
  /* Divider unter dem Header über volle Tabellen-Breite */
  .cart-items thead { border-bottom: 1px solid var(--ce-border-default); }
  .cart-items thead th { border-bottom: 0; }

  .cart-items tr.cart-item {
    border-bottom: 1px solid var(--ce-border-default);
  }
  .cart-items td { padding: 12px 4px; vertical-align: middle; }
  .cart-item__media { width: 64px; padding-left: 0; }
  .cart-item__media img { width: 64px; height: 64px; }
  .cart-item__details { padding-left: 8px; }
  .cart-item__details .cart-item__name { font-size: 14px; }
  .cart-item__quantity { width: 1%; white-space: nowrap; }

  /* Duplikat-Total (mobile-only) ausblenden, Desktop-Total auf Mobile sichtbar machen */
  .cart-item__totals.right.medium-hide.large-up-hide { display: none !important; }
  .cart-item__totals.right.small-hide {
    display: table-cell !important;
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-family: 'Pressura Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--ce-text-heading);
    padding-right: 0;
  }

  /* Sticky-Bottom-Footer mit Total + CTA (Mobile-Audit Sprint 4)
     Cart-Footer wird sticky am unteren Rand für direkten Checkout-Zugriff. */
  #main-cart-footer {
    position: sticky;
    inset-block-end: 0;
    z-index: 50;
    background: linear-gradient(
      to bottom,
      var(--ce-surface-card) 0%,
      var(--ce-surface-card) 50%,
      var(--ce-surface-page) 100%
    );
    border-top: 1px solid var(--ce-border-default);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #main-cart-footer .cart__footer { padding-block: 12px 32px; }
  #main-cart-footer .cart__blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch !important;
  }
  #main-cart-footer .cart__ctas { width: 100%; }

  /* Total-Zeile kompakt */
  .totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-block: 0;
  }
  .totals__total {
    font-family: 'Pressura', sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
  }
  .totals__total-value {
    font-family: 'Pressura Mono', monospace;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
  }
  .tax-note {
    font-family: 'Pressura Mono', monospace;
    font-size: 11px;
    color: var(--ce-text-tertiary);
    margin: 10px 0 0;
    line-height: 1.25;
  }

  /* Express-Checkout monochrom: Apple Pay & Shop Pay über Standard-CTA.
     order: -1 schiebt sie vor den .cart__ctas-Block in flex-column. */
  .cart__dynamic-checkout-buttons {
    order: -1;
  }
  /* Force monochrome for Apple Pay (default is black/white) and override Shop Pay */
  .cart__dynamic-checkout-buttons [data-shopify-buttoncontainer] {
    --shop-pay-button-background: var(--ce-text-heading);
    --shop-pay-button-color: var(--ce-text-on-invert);
  }
  shop-pay-button { --shop-pay-button-border-radius: var(--ce-radius-sm); }

  /* Standard Checkout-Button — full-width, prominent */
  .cart__ctas { margin: 0; width: 100%; }
  .cart__checkout-button {
    width: 100% !important;
    min-block-size: 48px;
    font-family: 'Pressura Mono', monospace;
    font-size: 14px;
    display: flex !important;
    justify-content: center;
  }
}

/* „Weiter shoppen" Link unauffälliger in Title-Wrapper auf Mobile (Bug #22a) */
@media screen and (max-width: 749px) {
  .title-wrapper-with-link .underlined-link {
    font-family: 'Pressura Mono', monospace;
    font-size: 12px;
    color: var(--ce-text-secondary);
  }
}

cart-remove-button .svg-wrapper {
  display: flex;
  width: 16px;
  height: 16px;
}

cart-remove-button svg {
  width: 16px;
  height: 16px;
}

/* Cart totals */
.cart-item__totals {
  padding: 16px 0;
  vertical-align: middle;
}

/* Stückpreis im Details-Block ausblenden — Line-Total rechts ist Single Source.
   Variantennamen und Properties bleiben sichtbar (sie sind in <dl>). */
.cart-item__details > .product-option,
.cart-item__details > .cart-item__discounted-prices { display: none; }

/* Cart footer — sanfter Fade von weißer Card-Surface zu Page-Surface darunter */
.cart__footer {
  padding: 24px 0 96px;
  background: linear-gradient(
    to bottom,
    var(--ce-surface-card) 0%,
    var(--ce-surface-card) 40%,
    var(--ce-surface-page) 100%
  );
}

.cart__blocks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.totals {
  display: flex;
  align-items: center;
  gap: 16px;
}

.totals__total {
  font-family: 'Pressura', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--text-heading, #18191A);
  margin: 0;
}

.totals__total-value {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-heading, #18191A);
  margin: 0;
}

/* Tax note */
.cart__footer .tax-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted, #B6B7BB);
  text-align: right;
}

/* CTAs row: continue shopping (secondary) + checkout (primary) */
.cart__ctas {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Checkout button (primary) */
.cart__ctas .cart__checkout-button,
.cart__ctas [name="checkout"] {
  font-family: 'Pressura Mono', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  background: var(--surface-invert, #18191A) !important;
  color: var(--text-on-invert, #FFFFFF) !important;
  border-radius: 8px !important;
  padding: 12px 32px;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  flex: 1 1 auto;
}

.cart__ctas .cart__checkout-button:hover,
.cart__ctas [name="checkout"]:hover {
  background: var(--surface-invert-hover, #313337) !important;
}

/* Continue shopping button (secondary) */
.cart__ctas .cart__continue-button {
  font-family: 'Pressura Mono', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  background: transparent !important;
  color: var(--text-heading, #18191A) !important;
  border: 1px solid var(--border-default, #E5E6E8) !important;
  border-radius: 8px !important;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
  flex: 0 1 auto;
  white-space: nowrap;
}

.cart__ctas .cart__continue-button:hover {
  background: var(--surface-muted, #F5F5F7) !important;
  border-color: var(--border-strong, #C9CACE) !important;
}

/* Continue shopping link */
.cart__footer a[href="/collections"] {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  color: var(--text-secondary, #575A61);
}

/* Hide dynamic checkout in cart */
.cart__dynamic-checkout-buttons {
  display: none;
}

/* Hide sale badges in cart */
.cart-item .badge {
  display: none !important;
}

.cart-item .price__sale {
  display: none !important;
}

/* Cart note */
.cart__note textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
}

@media screen and (max-width: 749px) {
  cart-items .page-width,
  #main-cart-footer .page-width {
    padding: 0 24px;
  }
}

/* ============================================
   Featured Collection Section (on Cart + other pages)
   ============================================ */

/* Constrain to CE width */
.ce-featured-collection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 16px;
}

/* Heading: linksbündig auf Mobile, zentriert ab Tablet */
.ce-featured-collection .collection__title {
  text-align: start !important;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .ce-featured-collection .collection__title {
    text-align: center !important;
  }
}

/* Font + alignment — size via heading_size setting */
.ce-featured-collection .collection__title h1,
.ce-featured-collection .collection__title h2,
.ce-featured-collection .collection__title h3,
.ce-featured-collection .collection__title .title {
  font-family: 'Pressura', sans-serif !important;
  font-weight: 500 !important;
  text-align: inherit !important;
  color: var(--ce-text-heading) !important;
  margin: 0;
}
.ce-featured-collection .collection__description {
  text-align: inherit;
}
@media screen and (max-width: 749px) {
  .ce-featured-collection .collection__description {
    font-size: 15px;
    text-wrap: pretty;
  }
}

/* "View all" link */
.ce-featured-collection .collection__title a {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 13px;
  color: var(--ce-text-secondary);
}

/* Spacing between heading and description */
.ce-featured-collection .collection__description {
  margin-top: 20px;
}

/* Grid: CSS grid, override slider flex */
.ce-featured-collection .product-grid,
.ce-featured-collection .grid.slider,
.ce-featured-collection .grid.slider--desktop {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 100%;
  margin: 0 auto;
  flex-wrap: wrap !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  scroll-padding: 0 !important;
}

/* Grid items */
.ce-featured-collection .grid__item,
.ce-featured-collection .slider__slide {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Hide slider navigation */
.ce-featured-collection .slider-buttons {
  display: none !important;
}

/* page-width inside collection */
.ce-featured-collection .page-width,
.ce-featured-collection .page-width-desktop {
  max-width: 1200px;
  padding: 0 32px;
  margin: 0 auto;
}

/* slider-component: no overflow clipping */
.ce-featured-collection slider-component {
  overflow: visible !important;
}

@media screen and (max-width: 989px) {
  .ce-featured-collection .collection__list,
  .ce-featured-collection .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media screen and (max-width: 749px) {
  .ce-featured-collection .collection__title h2 {
    font-size: 24px !important;
  }
}

/* ---- CE Empty State ---- */
.ce-empty-state {
  padding: 80px 16px;
  text-align: center;
}

.ce-empty-state__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.ce-empty-state__icon {
  font-size: 16px;
  line-height: 1;
  color: var(--ce-text-tertiary);
}

.ce-empty-state__title {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ce-text-secondary);
  margin: 0;
  max-width: 560px;
  line-height: 1.6;
}

.ce-empty-state__link {
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ce-empty-state__link:hover {
  text-decoration: none;
}

/* ---- CE Category Filter ---- */
.ce-category-filter {
  padding: 24px 0;
  border-bottom: 1px solid var(--ce-border-default);
  margin-bottom: 24px;
}

@media (min-width: 990px) {
  .ce-category-filter {
    padding: 32px 0;
    margin-bottom: 32px;
  }
}

.ce-category-filter__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  text-align: left;
  margin: 0 0 16px;
}

.ce-category-filter__grid {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 16px 16px 12px;
  margin: -16px -16px -12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
}

.ce-category-filter__grid::-webkit-scrollbar {
  display: none;
}

.ce-category-filter__item {
  flex: 0 0 auto;
  width: 112px;
  scroll-snap-align: start;
}

@media (min-width: 990px) {
  .ce-category-filter__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: visible;
    padding: 0;
    margin: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .ce-category-filter__item {
    width: auto;
  }

  .ce-category-filter__icon {
    width: 120px;
    height: 120px;
    padding: 12px;
  }
}

.ce-category-filter__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--ce-text-heading);
}

.ce-category-filter__icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background: #FFFFFF;
  border: 1px solid var(--ce-border-default);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  transition: box-shadow 200ms ease;
}

.ce-category-filter__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.7;
  mix-blend-mode: multiply;
  transition: opacity 200ms ease;
}

.ce-category-filter__tile:hover .ce-category-filter__icon img {
  opacity: 1;
}

.ce-category-filter__item.is-active .ce-category-filter__icon {
  border-color: var(--ce-text-secondary);
  box-shadow: var(--ce-shadow-card);
}

.ce-category-filter__grid:has(.is-active) .ce-category-filter__item:not(.is-active) {
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.ce-category-filter__grid:has(.is-active) .ce-category-filter__item:not(.is-active):hover {
  opacity: 1;
}

.ce-category-filter__item.is-active .ce-category-filter__icon img {
  opacity: 1;
}

.ce-category-filter__item.is-active .ce-category-filter__label {
  font-weight: 500;
}

.ce-category-filter__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ce-text-tertiary);
  font-size: 32px;
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.ce-category-filter__tile:hover .ce-category-filter__placeholder {
  opacity: 1;
}

.ce-category-filter__label {
  font-family: 'Pressura', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ce-text-heading);
  line-height: 1.3;
  margin: 0;
}

.ce-category-filter__count {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  color: var(--ce-text-tertiary);
  margin: 0;
}

/* ==========================================================================
   Netto-Preis-Anzeige unter dem Brutto-Preis (Variante A, einzeilig)
   „entspricht €234,45 netto · 19% MwSt."
   ========================================================================== */

.ce-price-tax {
  display: block;
  margin-top: 4px;
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ce-text-secondary);
  letter-spacing: 0.01em;
}

.ce-price-tax__dot {
  display: inline-block;
  margin: 0 6px;
  color: var(--ce-text-tertiary, rgba(24, 25, 26, 0.4));
}

.ce-price-tax--compact {
  font-size: 11px;
  margin-top: 2px;
}

/* ==========================================================================
   leasinGo Widgets — Editorial Spec Card (frontend-design optimized)
   --------------------------------------------------------------------------
   Widget rendert reguläres DOM (kein Shadow DOM, verifiziert 2026-04-23).
   Aesthetic: La Marzocco technical documentation meets Dieter Rams.
   Architectural precision, typography as hierarchy tool, no heavy buttons.
   Entire card inverts on hover — a refined, unambiguous CTA.

   DOM-Struktur:
     .lgo-rate-indicator (flex row container)
       .lgo-section                    (CTA-Button — ghost, typography-only)
         button.lgo-btn > span
       .lgo-section.lgo-section--box   (Preis-Block — hero)
         .lgo-result
           .lgo-monthly-rate-label  („ab" / „pro Monat")
           .lgo-monthly-rate > span (Rate in €)
       .lgo-section.lgo-section--center (Kooperation/Logo — hidden)
   ========================================================================== */

.ce-leasingo-wrap,
.ce-leasingo-wrap * {
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif) !important;
}

.ce-leasingo-wrap {
  --leasingo-bg: var(--ce-surface-card, #ffffff);
  --leasingo-fg: var(--ce-text-heading, #18191a);
  --leasingo-muted: var(--ce-text-secondary, rgba(24, 25, 26, 0.5));
  --leasingo-border: var(--ce-border-default, rgba(24, 25, 26, 0.18));
}

/* ---------- Rate Indicator: Editorial Spec Card ---------- */

.ce-leasingo-rate {
  display: inline-block;
  max-width: 100%;
}

.ce-leasingo-rate .lgo-rate-indicator {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--leasingo-bg) !important;
  border: 1px solid var(--leasingo-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: var(--leasingo-fg) !important;
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease;
  cursor: pointer;
}

.ce-leasingo-rate .lgo-section {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0;
  white-space: nowrap;
}

/* Price block — inline baseline, one-line reading: "ab 81,65 € pro Monat" */
.ce-leasingo-rate .lgo-section--box:not(.lgo-section--center) {
  order: 1;
  flex: 1 1 auto;
  padding: 0 14px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.ce-leasingo-rate .lgo-result {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* Labels ("ab", "pro Monat") — Pressura sans, muted, lowercase */
.ce-leasingo-rate .lgo-monthly-rate-label {
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--leasingo-muted) !important;
  line-height: 1.2 !important;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

/* Price — hero, tabular numerals */
.ce-leasingo-rate .lgo-monthly-rate {
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: currentColor !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.ce-leasingo-rate .lgo-monthly-rate span {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  letter-spacing: inherit;
  font-feature-settings: inherit;
}

/* CTA — ghost button, typography only */
.ce-leasingo-rate .lgo-section:first-child {
  order: 2;
  flex-shrink: 0;
  position: relative;
}

.ce-leasingo-rate .lgo-section:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--leasingo-border);
  transition: background-color 200ms ease;
}

.ce-leasingo-rate .lgo-btn {
  background: transparent !important;
  color: var(--leasingo-fg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  margin: 0 !important;
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: color 200ms ease;
  min-height: auto !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Hide leasinGo's long label, inject our short confident version */
.ce-leasingo-rate .lgo-btn > span {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.ce-leasingo-rate .lgo-btn::before {
  content: 'Leasing';
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: inherit;
  line-height: 1;
}

.ce-leasingo-rate .lgo-btn::after {
  content: '→';
  display: inline-block;
  font-size: 14px;
  line-height: 0;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  top: -1px;
}

/* Hover — architectural inversion */
.ce-leasingo-rate .lgo-rate-indicator:hover {
  background: var(--leasingo-fg) !important;
  border-color: var(--leasingo-fg) !important;
  color: #ffffff !important;
}

.ce-leasingo-rate .lgo-rate-indicator:hover .lgo-monthly-rate,
.ce-leasingo-rate .lgo-rate-indicator:hover .lgo-btn {
  color: #ffffff !important;
}

.ce-leasingo-rate .lgo-rate-indicator:hover .lgo-monthly-rate-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

.ce-leasingo-rate .lgo-rate-indicator:hover .lgo-section:first-child::before {
  background: rgba(255, 255, 255, 0.2);
}

.ce-leasingo-rate .lgo-rate-indicator:hover .lgo-btn::after {
  transform: translateX(4px);
}

.ce-leasingo-rate .lgo-btn:focus-visible {
  outline: 2px solid var(--leasingo-fg);
  outline-offset: 2px;
}

/* Hide cooperation block + logos */
.ce-leasingo-rate .lgo-section--center {
  display: none !important;
}

.ce-leasingo-rate .lgo-rate-indicator img {
  display: none !important;
}

/* Wrapper variants */
.ce-leasingo-rate--pdp {
  margin: 12px 0 16px;
}

.ce-leasingo-rate--card {
  margin-top: 6px;
}

.ce-leasingo-rate--card .lgo-rate-indicator {
  font-size: 11px !important;
  min-height: 42px !important;
  height: 42px !important;
}

.ce-leasingo-rate--card .lgo-section--box:not(.lgo-section--center) {
  padding: 0 12px !important;
}

.ce-leasingo-rate--card .lgo-monthly-rate {
  font-size: 13px !important;
}

.ce-leasingo-rate--card .lgo-monthly-rate-label {
  font-size: 10px !important;
}

.ce-leasingo-rate--card .lgo-btn {
  padding: 0 14px !important;
  font-size: 10px !important;
}

.ce-leasingo-rate--card .lgo-btn::before {
  font-size: 10px;
}

.ce-leasingo-rate--card .lgo-btn::after {
  font-size: 12px;
}

/* ---------- Mini-Kalkulator im PDP-Accordion ---------- */

.ce-leasingo-mini {
  margin-top: 12px;
}

.ce-leasingo-intro {
  margin-bottom: 16px;
  color: var(--ce-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Schnellkalkulator / Landing-Page ---------- */

.ce-leasing-page {
  background: var(--ce-surface-page, #ffffff);
}

.ce-leasing-page__heading {
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ce-text-heading);
}

.ce-leasing-page__subheading {
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif);
  font-size: 16px;
  color: var(--ce-text-secondary);
  margin: 0 0 24px;
}

.ce-leasing-page__intro,
.ce-leasing-page__outro {
  max-width: 680px;
  margin: 0 0 24px;
  color: var(--ce-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.ce-leasing-page__calculator {
  margin: 24px 0;
}

.ce-leasingo-wrap iframe {
  max-width: 100%;
  border: 0;
}

/* ============================================
   Search — Trigger, Overlay (Cmd+K), Results Page, Content Strip, Footer Search
   ============================================ */

.ce-header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--ce-text-secondary);
  background: transparent;
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ce-header__search-btn:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}

/* Mobile: 44×44 wie alle anderen Header-Buttons (überschreibt Base 32×32). */
@media screen and (max-width: 749px) {
  .ce-header__search-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

html.ce-search-open { overflow: hidden; }

.ce-search-dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  color: var(--ce-text-body);
}

.ce-search-dialog::backdrop {
  background: rgba(24, 25, 26, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ce-search-dialog[open] {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
}

.ce-search {
  width: min(640px, calc(100vw - 32px));
  max-height: 72vh;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md);
  box-shadow: var(--ce-shadow-elevated);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ce-search-in 160ms ease;
}

@keyframes ce-search-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ce-search [hidden],
.ce-search-dialog [hidden] { display: none !important; }

.ce-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ce-border-default);
}

.ce-search__icon { font-size: 20px; color: var(--ce-text-tertiary); line-height: 1; }

.ce-search__input {
  flex: 1;
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  color: var(--ce-text-heading);
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 0;
  line-height: 1.4;
}

.ce-search__input::placeholder { color: var(--ce-text-muted); }
.ce-search__input::-webkit-search-cancel-button { appearance: none; }

.ce-search__close { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.ce-search__close-icon {
  display: inline-flex;
  font-size: 24px;
  line-height: 1;
  color: var(--ce-text-heading);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.ce-search__kbd {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ce-text-tertiary);
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
  display: inline-block;
}

.ce-search__body { flex: 1; overflow-y: auto; padding: 8px 0; }
.ce-search__section { padding: 8px 0; }
.ce-search__section + .ce-search__section { border-top: 1px solid var(--ce-border-muted); }

.ce-search__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 8px;
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ce-search__section-title { color: var(--ce-text-tertiary); }

.ce-search__section-action {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  color: var(--ce-text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ce-search__section-action:hover { color: var(--ce-text-heading); }

.ce-search__results-list,
.ce-search__recent-list { list-style: none; margin: 0; padding: 0; }

.ce-search__result,
.ce-search__recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}

.ce-search__result:hover,
.ce-search__result.is-active,
.ce-search__recent-item:hover,
.ce-search__recent-item.is-active { background: var(--ce-surface-muted); }

.ce-search__result-media {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ce-radius-xs);
  background: var(--ce-surface-muted);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ce-text-muted);
  font-size: 18px;
}

.ce-search__result-media img { width: 100%; height: 100%; object-fit: cover; }
.ce-search__result-media--icon { background: transparent; color: var(--ce-text-tertiary); }

.ce-search__result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-search__result-title {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--ce-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-search__result-meta { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ce-text-tertiary); }

.ce-search__result-price {
  flex-shrink: 0;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ce-text-heading);
}

.ce-search__result--compact .ce-search__result-media { width: 24px; height: 24px; font-size: 14px; }

.ce-search__recent-item { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ce-text-body); }
.ce-search__recent-item i { color: var(--ce-text-tertiary); font-size: 16px; }

.ce-search__chip-list {
  list-style: none;
  margin: 0;
  padding: 4px 16px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ce-search__chip {
  display: inline-block;
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  color: var(--ce-text-secondary);
  background: var(--ce-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--ce-radius-full);
  padding: 5px 12px;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.ce-search__chip:hover,
.ce-search__chip.is-active { background: var(--ce-surface-subtle); color: var(--ce-text-heading); }

.ce-search__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ce-text-tertiary);
}

.ce-search__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ce-border-default);
  border-top-color: var(--ce-text-heading);
  border-radius: 50%;
  animation: ce-search-spin 600ms linear infinite;
}

@keyframes ce-search-spin { to { transform: rotate(360deg); } }

.ce-search__empty { padding: 32px 16px; text-align: center; }

.ce-search__empty-title {
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  color: var(--ce-text-body);
  margin: 0 0 16px;
}

.ce-search__empty-cta { display: inline-flex; }

.ce-search__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--ce-border-default);
  background: var(--ce-surface-page);
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  color: var(--ce-text-tertiary);
}

.ce-search__hint { display: inline-flex; align-items: center; gap: 6px; }
.ce-search__hint--push { margin-left: auto; }

.ce-search__view-all { color: var(--ce-text-heading); text-decoration: none; font-weight: 500; }
.ce-search__view-all:hover { color: var(--ce-text-body); text-decoration: underline; }

@media (max-width: 640px) {
  .ce-search-dialog[open] { padding-top: 0; align-items: stretch; }
  .ce-search {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: none;
  }
}

.ce-footer__search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  padding: 10px 12px 10px 14px;
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  color: var(--ce-text-tertiary);
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ce-footer__search:hover { color: var(--ce-text-heading); border-color: var(--ce-border-strong); }
.ce-footer__search-icon { font-size: 16px; line-height: 1; color: var(--ce-text-secondary); }
.ce-footer__search-label { flex: 1; text-align: left; }

.ce-footer__search-kbd {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  color: var(--ce-text-tertiary);
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: 4px;
  padding: 3px 6px;
  line-height: 1;
  /* Mobile-Audit 2026-04-26 (#10): hide ⌘K hint on touch/mobile — no Cmd key */
  display: none;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ce-footer__search-kbd { display: inline-flex; }
}

@media (max-width: 640px) {
  .ce-footer__search { min-width: 0; flex: 1; }
}

.ce-search-page__top { margin-bottom: 16px; }

.ce-search-page__form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  padding: 12px 16px;
}

.ce-search-page__form:focus-within { border-color: var(--ce-border-strong); }
.ce-search-page__form-icon { font-size: 18px; color: var(--ce-text-tertiary); }

.ce-search-page__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  color: var(--ce-text-heading);
}

.ce-search-page__input::placeholder { color: var(--ce-text-muted); }

.ce-search-page__submit {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  color: var(--ce-text-on-invert);
  background: var(--ce-surface-invert);
  border: none;
  border-radius: var(--ce-radius-sm);
  padding: 8px 16px;
  cursor: pointer;
}

.ce-search-page__submit:hover { background: var(--ce-surface-invert-hover); }

.ce-search-page__empty { padding: 48px 0; text-align: center; }
.ce-search-page__empty h2 { font-family: 'Pressura', sans-serif; font-size: 22px; margin: 0 0 8px; }
.ce-search-page__empty p { color: var(--ce-text-secondary); margin: 0 0 20px; }

.ce-search-page__empty-note {
  font-family: 'Inter', sans-serif;
  color: var(--ce-text-secondary);
  padding: 24px 0;
  text-align: center;
  margin: 0;
}

.ce-search-page__card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.ce-search-page__card-kicker {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-text-tertiary);
}

.ce-search-page__card-title {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ce-text-heading);
  margin: 0;
}

.ce-search-page__card-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ce-text-tertiary);
  margin: 0;
}

.ce-search-content-strip-wrap {
  margin-bottom: 24px;
}

/* Divider sits on the inner strip, so the line ends flush with content edges
   (the wrapper has horizontal padding from .ce-section-width). */
.ce-search-content-strip {
  margin: 0;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--ce-border-default);
}

.ce-search-content-strip__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.ce-search-content-strip__label {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-text-tertiary);
}

.ce-search-content-strip__count {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  color: var(--ce-text-muted);
}

.ce-search-content-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.ce-search-content-strip__item { display: flex; }

.ce-search-content-strip__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  padding: 18px 20px;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ce-search-content-strip__link:hover {
  border-color: var(--ce-border-strong);
  background: var(--ce-surface-muted);
}

.ce-search-content-strip__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--ce-text-secondary);
  margin-top: 2px;
}

.ce-search-content-strip__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ce-search-content-strip__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ce-search-content-strip__type {
  font-family: 'Pressura Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-text-tertiary);
  padding: 3px 8px;
  background: var(--ce-surface-muted);
  border-radius: var(--ce-radius-full);
}

.ce-search-content-strip__title {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ce-text-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.ce-search-content-strip__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ce-text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ==========================================================================
   PDP Media — Dawn-Border-Artefakte entfernen
   ========================================================================== */

.product__media,
.product__media.media,
.product__media.media--transparent {
  border: 0 !important;
}

/* ==========================================================================
   Dark Mode — Hero Slide Media-Hintergrund: weiß statt abgemischtes Grau
   ========================================================================== */

.dark .ce-hero-slide__media {
  background: #ffffff;
}


/* ==========================================================================
   Dark Mode — Rate Indicator Hover (inverted inversion: hell statt dunkel)
   ========================================================================== */

.dark .ce-leasingo-rate .lgo-rate-indicator:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #18191a !important;
}

.dark .ce-leasingo-rate .lgo-rate-indicator:hover .lgo-monthly-rate,
.dark .ce-leasingo-rate .lgo-rate-indicator:hover .lgo-btn {
  color: #18191a !important;
}

.dark .ce-leasingo-rate .lgo-rate-indicator:hover .lgo-monthly-rate-label {
  color: rgba(24, 25, 26, 0.55) !important;
}

.dark .ce-leasingo-rate .lgo-rate-indicator:hover .lgo-section:first-child::before {
  background: rgba(24, 25, 26, 0.2);
}

/* ==========================================================================
   PDP Media Gallery — „Museum Vitrine"
   --------------------------------------------------------------------------
   Aesthetic: das Produkt ist ein Artefakt. Hairline-Frame,
   Archiv-Index-Thumbnails, fixture-artige Arrows. Ruhiger Grund, der
   das Objekt sprechen lässt.

   Zielsselektoren (Dawn-basiert):
     media-gallery > .product__media-wrapper
                   > .product__media-list > .product__media-item > .product__media
     + .slider-buttons > .slider-button
     + slider-component.thumbnail-list > .thumbnail-list__item > .thumbnail

   Kompatibilität: nutzt :has() (Chrome 105+, Safari 15.4+, Firefox 121+).
   Mit graceful fallback via JS-Klassen-Toggle (siehe unten).
   ========================================================================== */

/* ---------- Design-Tokens (Component-lokal) ---------- */
.product__media-wrapper {
  --vitrine-frame: rgba(24, 25, 26, 0.10);
  --vitrine-frame-hover: rgba(24, 25, 26, 0.22);
  --vitrine-frame-active: #18191a;
  --vitrine-surface: #ffffff;
  --vitrine-ink: #18191a;
  --vitrine-ink-mute: rgba(24, 25, 26, 0.45);
  --vitrine-ink-whisper: rgba(24, 25, 26, 0.28);
  --vitrine-radius: 14px;
  --vitrine-thumb-radius: 8px;
  --vitrine-thumb-inactive: 0.58;
  --vitrine-thumb-hover: 0.85;
  --vitrine-arrow-size: 36px;
  --vitrine-pad-y: 40px;
  --vitrine-pad-x: 48px;
}

/* ---------- Frame um den Media-Bereich ---------- */
.product__media-wrapper {
  position: relative;
  isolation: isolate;
  background: #ffffff !important;
  border: 1px solid var(--vitrine-frame);
  border-radius: var(--vitrine-radius);
  overflow: hidden;
  transition: border-color 300ms ease;
}

.product__media-wrapper:hover {
  border-color: var(--vitrine-frame-hover);
}

/* Media-Item: Frame entfernt die eigenen Rundungen,
   gibt großzügiges, ruhiges Padding (Vitrine-Luft) */
.product__media,
.product__media.media,
.product__media.media--transparent {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--vitrine-pad-y) var(--vitrine-pad-x) !important;
}

.product__media img {
  display: block;
  margin-inline: auto;
  max-width: 85%;
  max-height: 560px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 400ms ease;
}

/* ---------- Arrows als Frame-Fixtures ---------- */
/* .slider-buttons Container ignorieren (Dawn überschreibt `inset`),
   stattdessen jeden Button direkt im Wrapper absolut positionieren. */
.product__media-wrapper .slider-buttons {
  position: static !important;
  display: contents;
}

.product__media-wrapper .slider-button,
.product__media-wrapper .slider-button--prev,
.product__media-wrapper .slider-button--next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3;
  width: var(--vitrine-arrow-size) !important;
  height: var(--vitrine-arrow-size) !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--vitrine-frame) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
  color: var(--vitrine-ink) !important;
  opacity: 0.9;
  transition:
    opacity 220ms ease,
    border-color 200ms ease,
    background-color 200ms ease;
}

.product__media-wrapper .slider-button--prev {
  left: 14px !important;
  right: auto !important;
}

.product__media-wrapper .slider-button--next {
  right: 14px !important;
  left: auto !important;
}

.product__media-wrapper .slider-buttons .slider-button:hover {
  opacity: 1;
  border-color: var(--vitrine-frame-active) !important;
  background: #ffffff !important;
}

.product__media-wrapper .slider-buttons .slider-button[disabled] {
  opacity: 0 !important;
  pointer-events: none;
}

.product__media-wrapper .slider-buttons .slider-button svg {
  width: 14px;
  height: 14px;
}

/* Bei Einzelbild: Arrows komplett verstecken */
.product__media-wrapper:has(.product__media-item:only-of-type) .slider-buttons,
.product__media-wrapper.is-single-slide .slider-buttons {
  display: none !important;
}

/* ---------- Thumbnails als Kontaktabzug ---------- */
.thumbnail-list {
  gap: 14px !important;
  margin-top: 18px;
  padding: 0 2px;
}

/* Bei Einzelbild: Thumb-Strip verstecken */
.product__media-wrapper:has(.product__media-item:only-of-type) ~ .thumbnail-list,
.thumbnail-list:has(> .thumbnail-list__item:only-child) {
  display: none !important;
}

.thumbnail-list__item {
  position: relative;
}

.thumbnail {
  border-radius: var(--vitrine-thumb-radius) !important;
  border: 1px solid var(--vitrine-frame) !important;
  background: rgba(24, 25, 26, 0.02);
  overflow: hidden;
  opacity: var(--vitrine-thumb-inactive);
  transition:
    opacity 200ms ease,
    border-color 200ms ease,
    border-width 120ms ease;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.thumbnail:hover {
  opacity: var(--vitrine-thumb-hover);
  border-color: var(--vitrine-frame-hover) !important;
}

.thumbnail[aria-current="true"],
.thumbnail.is-active,
.thumbnail-list__item.is-active .thumbnail {
  opacity: 1;
  border-color: var(--vitrine-frame-active) !important;
  border-width: 2px !important;
}

/* ---------- Dark Mode ---------- */
.dark .product__media-wrapper {
  --vitrine-frame: rgba(255, 255, 255, 0.12);
  --vitrine-frame-hover: rgba(255, 255, 255, 0.26);
  --vitrine-frame-active: #fafafa;
  /* Produktbilder werden teils nicht freigestellt angeliefert.
     Deshalb: im Dark Mode Canvas IMMER weiß, Frame-Border dark-mode-styled. */
  --vitrine-surface: #ffffff;
  --vitrine-ink: #18191a;
  --vitrine-ink-mute: rgba(24, 25, 26, 0.50);
  --vitrine-ink-whisper: rgba(24, 25, 26, 0.30);
  background: #ffffff !important;
}

.dark .thumbnail {
  background: #ffffff;
}

/* ---------- Mobile Refinements ---------- */
@media (max-width: 749px) {
  .product__media-wrapper {
    --vitrine-pad-y: 24px;
    --vitrine-pad-x: 24px;
    --vitrine-arrow-size: 32px;
  }

  .product__media img {
    max-width: 90%;
    max-height: 400px;
  }

  /* Auf Touch: Arrows sichtbar (hover existiert nicht) */
  @media (hover: none) {
    .slider-button:not([disabled]) {
      opacity: 1;
      transform: scale(1);
    }
  }

  .thumbnail-list {
    margin-top: 12px;
  }

}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .product__media-wrapper,
  .slider-button,
  .thumbnail,
  .product__media img {
    transition: none !important;
  }

  .slider-button:not([disabled]) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Dawn's thumbnail-slider Prev/Next Buttons ausblenden — nicht nötig,
   da der Thumb-Strip nativ scrollt und alle Thumbs direkt klickbar sind */
.thumbnail-slider > .slider-button,
.thumbnail-slider > .slider-button--prev,
.thumbnail-slider > .slider-button--next {
  display: none !important;
}


/* Dawn-Scroll-Indikator-Borders am Thumbnail-Strip (.slider) entfernen */
.thumbnail-list,
.thumbnail-slider .slider,
.thumbnail-list.slider {
  border: 0 !important;
}


/* Filter-Sidebar: lange Labels umbrechen statt aus dem Container zu brechen.
   Fieldsets haben Browser-Default min-width: min-content — das sprengt bei
   langen Filter-Namen („Filterkaffeemaschine / Batch Brewer") den Container. */
.ce-filter-group__content,
.ce-filter-group__options,
.facets-wrap,
.ce-filter-list,
.ce-filter-item {
  min-width: 0 !important;
  max-width: 100%;
}

.ce-filter-group__content fieldset,
.ce-filter-group__options {
  min-width: 0 !important;
  width: 100%;
}

.ce-filter-checkbox {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.ce-filter-checkbox__text {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   Variant Picker — Text-Optionen (S/M/L etc.) als Pill-Chips
   --------------------------------------------------------------------------
   Dawn rendert alle Varianten als Swatch-Kreise. Wenn die Option keinen
   Farbwert hat (z. B. Größe), markiert Dawn sie als .swatch--unavailable —
   der Kreis ist dann leer/schraffiert. Für textbasierte Optionen werden die
   Kreise ausgeblendet und der Wert als Pill-Chip gerendert (via title-Attr).
   ========================================================================== */

.product-form__input--swatch .swatch-input__label:has(.swatch--unavailable) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-width: 44px;
  min-height: 36px;
  padding: 8px 14px !important;
  border: 1px solid var(--ce-border-default, rgba(24, 25, 26, 0.14)) !important;
  border-radius: 999px !important;
  background: var(--ce-surface-card, #ffffff) !important;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ce-text-heading, #18191a);
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.product-form__input--swatch .swatch-input__label:has(.swatch--unavailable) .swatch {
  display: none !important;
}

.product-form__input--swatch .swatch-input__label:has(.swatch--unavailable)::before {
  content: attr(title);
  line-height: 1;
}

.product-form__input--swatch .swatch-input__label:has(.swatch--unavailable):hover {
  border-color: var(--ce-text-heading, #18191a) !important;
}

.product-form__input--swatch .swatch-input__input:checked + .swatch-input__label:has(.swatch--unavailable) {
  background: var(--ce-text-heading, #18191a) !important;
  color: #ffffff !important;
  border-color: var(--ce-text-heading, #18191a) !important;
}

.product-form__input--swatch .swatch-input__input:disabled + .swatch-input__label:has(.swatch--unavailable) {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}


/* ==========================================================================
   Leasingrechner-Popover — flaches Overlay (kein <dialog>, kein Top-Layer)
   --------------------------------------------------------------------------
   Plain Div-Overlay, damit leasinGo React-Select-Dropdowns, die an
   document.body gepo
   rtet werden, klickbar bleiben. Ästhetik: eine ruhige
   weiße Fläche, kein Header-Divider, minimal gesetzte Chrome.
   ========================================================================== */

.ce-leasing-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ce-leasing-overlay[hidden] { display: none; }

.ce-leasing-overlay__backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: rgba(24, 25, 26, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ce-leasing-fade-in 180ms ease;
  cursor: pointer;
}

.ce-leasing-overlay__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif);
  color: var(--ce-text-heading, #18191a);
  animation: ce-leasing-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ce-leasing-overlay__title {
  margin: 0;
  padding: 20px 56px 8px 24px;
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ce-text-heading, #18191a);
  flex-shrink: 0;
}

/* Mobile-Audit Iteration 2 (CES-56): Mobile X-Icon (44×44 Tap-Area), Desktop Esc-Hint.
   Mobile zeigt das ri-close-line Icon, Esc-Kbd-Tag versteckt.
   Tablet+ zeigt das klassische Esc-Kbd, Icon versteckt (Hover-Hint). */
.ce-leasing-overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  background: var(--ce-surface-card);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.ce-leasing-overlay__close:hover {
  border-color: var(--ce-border-strong);
  background: var(--ce-surface-muted);
}
.ce-leasing-overlay__close-icon {
  font-size: 22px;
  color: var(--ce-text-heading);
  line-height: 1;
}

.ce-leasing-overlay__kbd {
  display: none;
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ce-text-tertiary);
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
  transition: color 150ms ease, border-color 150ms ease;
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  /* Desktop mit Hardware-Keyboard: zeige Esc-Kbd statt Icon */
  .ce-leasing-overlay__close {
    width: auto;
    height: auto;
    padding: 6px 10px;
    border: 0;
    background: transparent;
  }
  .ce-leasing-overlay__close-icon { display: none; }
  .ce-leasing-overlay__kbd { display: inline-block; }
}

.ce-leasing-overlay__close:hover .ce-leasing-overlay__kbd {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong, rgba(24, 25, 26, 0.24));
}

/* Mobile-Audit Iteration 2 (CES-56): Fade-Edge oben + unten am scroll-baren Body.
   Visuelle Trennung von nicht-scrollbarem Header/Footer-Bereich. */
.ce-leasing-overlay__body {
  position: relative;
  padding: 0 8px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 16px,
    black calc(100% - 24px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 16px,
    black calc(100% - 24px),
    transparent 100%
  );
}

/* Inner leasinGo-Frame neutralisieren — keine doppelte Box */
.ce-leasing-overlay__body .leasingo-calculator,
.ce-leasing-overlay__body .lgo-calculator {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 16px !important;
}

/* Body-Scroll beim Öffnen sperren */
.ce-leasing-overlay-open {
  overflow: hidden;
}

@keyframes ce-leasing-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ce-leasing-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile: Full-screen */
@media (max-width: 640px) {
  .ce-leasing-overlay {
    padding: 0;
  }
  .ce-leasing-overlay__dialog {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-leasing-overlay__backdrop,
  .ce-leasing-overlay__dialog {
    animation: none;
  }
}

/* ==========================================================================
   Leasingrechner — Form-Revision „Refined Spec Sheet"
   --------------------------------------------------------------------------
   Aesthetic: La Marzocco Service Portal × Vitsoe Config. Monospace für
   Zahlen, typografie-geführte Hierarchie, Hairlines statt Schatten.
   Form liest sich wie ein Messinstrument.

   Scope: .ce-leasing-overlay (alle Regeln geprefixed)
   !important nötig — leasinGo setzt Inline-Styles.

   DIESER BLOCK ERSETZT DIE VORHERIGEN SCHNELLKALKULATOR-REGELN.
   ========================================================================== */

/* ---- Tokens ---- */
.ce-leasing-overlay {
  --lgo-surface: #f7f7f8;
  --lgo-surface-hover: #eeeef0;
  --lgo-surface-focus: #ffffff;
  --lgo-surface-active: #18191a;
  --lgo-ink: #18191a;
  --lgo-ink-muted: rgba(24, 25, 26, 0.48);
  --lgo-ink-whisper: rgba(24, 25, 26, 0.28);
  --lgo-divider: rgba(24, 25, 26, 0.08);
  --lgo-divider-strong: rgba(24, 25, 26, 0.14);
  --lgo-radius: 10px;
  --lgo-radius-sm: 8px;
  --lgo-focus-ring: 0 0 0 4px rgba(24, 25, 26, 0.04);
}

/* ---- Calculator Container ---- */
.ce-leasing-overlay .lgo-calculator {
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif) !important;
  color: var(--lgo-ink) !important;
  padding: 8px 20px 20px !important;
  background: transparent !important;
}

/* Row-Rhythmus */
.ce-leasing-overlay .lgo-row {
  margin-bottom: 18px !important;
  gap: 12px !important;
}
.ce-leasing-overlay .lgo-row:last-child {
  margin-bottom: 0 !important;
}

/* ---- Field-Labels (über Inputs) ---- */
.ce-leasing-overlay .lgo-form-label,
.ce-leasing-overlay label:not(.lgo-radio-inline) {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  background: transparent !important;
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--lgo-ink-muted) !important;
}

/* ========================================================================
   Radio-Segmented-Pairs (Vertragsart | Zustand)
   -------------------------------------------------------------------------
   4 Radios werden zu 2 getrennten Segmented Controls.
   Checkmark-Kreise versteckt; aktive Option = schwarzer Block mit weißer
   Schrift. Gap von 16px zwischen den Gruppen = klare Trennung.
   ======================================================================== */

.ce-leasing-overlay .lgo-radio-checkmark {
  display: none !important;
}

.ce-leasing-overlay .lgo-radio-inline {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 20px !important;
  margin: 0 !important;
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--lgo-ink) !important;
  background: var(--lgo-surface) !important;
  border: 1px solid var(--lgo-divider) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  min-width: 88px;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.ce-leasing-overlay .lgo-radio-inline input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Segmented Rounding: 1+2 Pair, 3+4 Pair */
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(1),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(3) {
  border-radius: var(--lgo-radius) 0 0 var(--lgo-radius) !important;
}

.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(2),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(4) {
  border-radius: 0 var(--lgo-radius) var(--lgo-radius) 0 !important;
  border-left-width: 0 !important;
}

/* Gap zwischen Pair-1 und Pair-2 */
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(3) {
  margin-left: 16px !important;
}

/* Active/Hover */
.ce-leasing-overlay .lgo-radio-inline:has(input:checked) {
  background: var(--lgo-surface-active) !important;
  color: #ffffff !important;
  border-color: var(--lgo-surface-active) !important;
  z-index: 1;
}

.ce-leasing-overlay .lgo-radio-inline:hover:not(:has(input:checked)) {
  background: var(--lgo-surface-hover) !important;
}

.ce-leasing-overlay .lgo-radio-inline:has(input:focus-visible) {
  box-shadow: var(--lgo-focus-ring);
  z-index: 2;
}

/* ========================================================================
   Form-Controls (Inputs + React-Select)
   ======================================================================== */

.ce-leasing-overlay [class*="css-"][class*="-control"],
.ce-leasing-overlay .lgo-form-control,
.ce-leasing-overlay .lgo-input-group {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  background: var(--lgo-surface) !important;
  border: 1px solid var(--lgo-divider) !important;
  border-radius: var(--lgo-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--lgo-ink) !important;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
  overflow: hidden;
}

.ce-leasing-overlay .lgo-form-control {
  padding: 0 14px !important;
}

.ce-leasing-overlay .lgo-form-control::placeholder {
  color: var(--lgo-ink-whisper) !important;
}

.ce-leasing-overlay [class*="css-"][class*="-control"]:hover,
.ce-leasing-overlay .lgo-form-control:hover,
.ce-leasing-overlay .lgo-input-group:hover {
  border-color: var(--lgo-divider-strong) !important;
  background: var(--lgo-surface-focus) !important;
}

.ce-leasing-overlay [class*="css-"][class*="-control"]--is-focused,
.ce-leasing-overlay .lgo-form-control:focus,
.ce-leasing-overlay .lgo-input-group:focus-within {
  border-color: var(--lgo-ink) !important;
  background: var(--lgo-surface-focus) !important;
  outline: none !important;
  box-shadow: var(--lgo-focus-ring) !important;
}

/* ---- Input-Group (€ / % Suffix) — flat, kein Divider ---- */
.ce-leasing-overlay .lgo-input-group {
  display: flex !important;
  align-items: stretch !important;
}

.ce-leasing-overlay .lgo-input-group .lgo-form-control {
  flex: 1 !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 14px !important;
}

.ce-leasing-overlay .lgo-input-group-text {
  display: flex !important;
  align-items: center !important;
  padding: 0 14px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--lgo-ink-muted) !important;
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  pointer-events: none;
}

/* ---- React-Select Chrome ---- */
.ce-leasing-overlay [class*="css-"][class*="-indicatorSeparator"] {
  display: none !important;
}

.ce-leasing-overlay [class*="css-"][class*="-indicatorContainer"] {
  padding: 0 10px !important;
  color: var(--lgo-ink-muted) !important;
}

.ce-leasing-overlay [class*="css-"][class*="-ValueContainer"] {
  padding: 0 !important;
}

.ce-leasing-overlay [class*="css-"][class*="-singleValue"] {
  color: var(--lgo-ink) !important;
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 14px !important;
}

.ce-leasing-overlay [class*="css-"][class*="-placeholder"] {
  color: var(--lgo-ink-whisper) !important;
  padding: 0 14px !important;
}

/* Dropdown-Menu */
.ce-leasing-overlay [class*="css-"][class*="-menu"] {
  margin-top: 6px !important;
  border: 1px solid var(--lgo-divider-strong) !important;
  border-radius: var(--lgo-radius) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif) !important;
}

.ce-leasing-overlay [class*="css-"][class*="-option"] {
  padding: 10px 14px !important;
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 13px !important;
  color: var(--lgo-ink) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background-color 120ms ease;
}

.ce-leasing-overlay [class*="css-"][class*="-option"]--is-focused,
.ce-leasing-overlay [class*="css-"][class*="-option"]:hover {
  background: var(--lgo-surface-hover) !important;
}

.ce-leasing-overlay [class*="css-"][class*="-option"]--is-selected {
  background: var(--lgo-ink) !important;
  color: #ffffff !important;
}

/* ========================================================================
   Anzahlung / Restwert — visuelles Pairing des € + % Doppelfelds
   -------------------------------------------------------------------------
   Ohne Markup-Kontrolle: die zweite Row nach einer .lgo-input-group-Row
   rückt näher an, damit sie als „dual readout" einer Größe lesbar wird.
   ======================================================================== */

.ce-leasing-overlay .lgo-row:has(> .lgo-col-12 > .lgo-input-group) + .lgo-row:has(> .lgo-col-12 > .lgo-input-group) {
  margin-top: -12px !important;
}

/* ========================================================================
   Rate-Ergebnisse — mittlere ist Hero (asymmetrische Hierarchie)
   ======================================================================== */

.ce-leasing-overlay [class*="lgo-"]:has(> .lgo-rate + .lgo-rate) {
  display: flex !important;
  gap: 0 !important;
  margin: 28px 0 20px !important;
  padding: 0 !important;
  background: var(--lgo-surface) !important;
  border: 1px solid var(--lgo-divider) !important;
  border-radius: var(--lgo-radius) !important;
  overflow: hidden !important;
}

.ce-leasing-overlay .lgo-rate {
  flex: 1 !important;
  padding: 18px 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--lgo-divider) !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  box-shadow: none !important;
}

.ce-leasing-overlay .lgo-rate:last-child {
  border-right: 0 !important;
}

/* Mittlere Rate = Hero: white bg-Pop + größere Typo + mehr Padding */
.ce-leasing-overlay .lgo-rate:nth-child(2) {
  flex: 1.4 !important;
  padding: 22px 10px !important;
  background: #ffffff !important;
}

.ce-leasing-overlay .lgo-rate-amount {
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--lgo-ink) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  background: transparent !important;
}

.ce-leasing-overlay .lgo-rate:nth-child(2) .lgo-rate-amount {
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
}

.ce-leasing-overlay .lgo-rate-title,
.ce-leasing-overlay .lgo-rate > :last-child {
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--lgo-ink-muted) !important;
  line-height: 1.2 !important;
  background: transparent !important;
}

.ce-leasing-overlay .lgo-rate:nth-child(2) > :last-child {
  color: var(--lgo-ink) !important;
  font-size: 10px !important;
}

/* ========================================================================
   Submit-Button „Kalkulation aktualisieren"
   -------------------------------------------------------------------------
   Auto-width, zentriert, Rotations-↻-Icon, subtile Hover-Micro-Interaction.
   ======================================================================== */

.ce-leasing-overlay .lgo-calculator .lgo-btn,
.ce-leasing-overlay button.lgo-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 200px !important;
  padding: 10px 20px !important;
  margin: 8px auto 0 !important;
  background: var(--lgo-ink) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: 'Pressura Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: background-color 180ms ease !important;
}

/* Kein Icon */
.ce-leasing-overlay .lgo-calculator .lgo-btn::after {
  content: none !important;
  display: none !important;
}

.ce-leasing-overlay .lgo-calculator .lgo-btn span {
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

.ce-leasing-overlay .lgo-calculator .lgo-btn:hover {
  background: #000000 !important;
}

.ce-leasing-overlay .lgo-calculator .lgo-btn:active {
  transform: translateY(1px);
}

.ce-leasing-overlay .lgo-calculator .lgo-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(24, 25, 26, 0.18);
  outline: none;
}

/* ========================================================================
   Mobile (<640px) — Segmented Radios gleichmäßig verteilt
   ======================================================================== */

@media (max-width: 640px) {
  .ce-leasing-overlay .lgo-calculator {
    padding: 8px 16px 16px !important;
  }

  .ce-leasing-overlay .lgo-radio-inline {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
  }

  .ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(3) {
    margin-left: 10px !important;
  }

  .ce-leasing-overlay .lgo-rate:nth-child(2) .lgo-rate-amount {
    font-size: 22px !important;
  }

  .ce-leasing-overlay .lgo-calculator .lgo-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ========================================================================
   Reduced Motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ce-leasing-overlay .lgo-radio-inline,
  .ce-leasing-overlay .lgo-form-control,
  .ce-leasing-overlay .lgo-input-group,
  .ce-leasing-overlay .lgo-calculator .lgo-btn,
  .ce-leasing-overlay .lgo-calculator .lgo-btn::after {
    transition: none !important;
  }
}

/* „inkl. MwSt." immer gedimmt — auf allen Card-Variants und compact price tax.
   Mobile-Audit Sprint 2: ce-card-review__vat → ce-pcard__price-vat. */
.ce-price-tax--compact,
.ce-pcard__price-vat {
  color: rgba(24, 25, 26, 0.45) !important;
  font-weight: 400 !important;
  opacity: 0.85;
}

.dark .ce-price-tax--compact,
.dark .ce-pcard__price-vat {
  color: rgba(255, 255, 255, 0.42) !important;
}
/* PDP: Produkt-Content bündig mit Header/Breadcrumb (kein doppeltes Padding) */
.product.product--large,
.product.product--left {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ==========================================================================
   Leasing-Form — Fixes Round 2
   ==========================================================================*/

/* Toggle-Pills: kompakter + echte Pair-Gap-Logik (4px innerhalb, 16px zwischen Pairs) */
.ce-leasing-overlay .lgo-radio-inline {
  padding: 6px 14px !important;
  min-width: 72px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border-left-width: 1px !important;
  margin: 0 !important;
}

/* Reset nth-of-type Rounding: alle 4 Ecken gleich */
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(1),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(2),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(3),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(4) {
  border-radius: 6px !important;
  border-left-width: 1px !important;
}

/* Pair-innere Gaps */
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(1) {
  margin-right: 4px !important;
}
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(3) {
  margin-left: 16px !important;
  margin-right: 4px !important;
}

/* Rate-Box: jegliche Borders innerhalb .lgo-rate-amount killen */
.ce-leasing-overlay .lgo-rate-amount,
.ce-leasing-overlay .lgo-rate-amount *,
.ce-leasing-overlay .lgo-rate-amount span {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Button: schwarz auch im disabled State, kein Gray-Loading-Flash */
.ce-leasing-overlay .lgo-calculator .lgo-btn,
.ce-leasing-overlay .lgo-calculator .lgo-btn[disabled],
.ce-leasing-overlay .lgo-calculator .lgo-btn:disabled,
.ce-leasing-overlay button.lgo-btn,
.ce-leasing-overlay button.lgo-btn[disabled] {
  background: #18191a !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.ce-leasing-overlay .lgo-calculator .lgo-btn:disabled {
  opacity: 0.5 !important;
}

/* Legend-Unterbrechung bei <fieldset>-Inputs killen — falls doch sichtbar */
.ce-leasing-overlay fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.ce-leasing-overlay legend {
  all: unset !important;
  display: block !important;
  font-family: var(--ce-font-pressura-mono, 'GT Pressura Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(24, 25, 26, 0.48) !important;
  margin-bottom: 10px !important;
}

/* Readonly-Input (Anschaffungspreis) visuell als locked state */
.ce-leasing-overlay .lgo-form-control.ce-lgo-readonly,
.ce-leasing-overlay input[readonly].lgo-form-control {
  background: #eeeef0 !important;
  color: rgba(24, 25, 26, 0.75) !important;
  cursor: not-allowed !important;
  pointer-events: auto;
}
.ce-leasing-overlay .lgo-form-control.ce-lgo-readonly:hover,
.ce-leasing-overlay input[readonly].lgo-form-control:hover {
  background: #eeeef0 !important;
  border-color: rgba(24, 25, 26, 0.08) !important;
}

/* Tooltip-Indicator: Remixicon ri-information-line statt Mini-Widget.
   Der ursprüngliche Indicator wird mit ::before überschrieben oder versteckt;
   wir setzen remixicon-glyph via content + font-family. */
.ce-leasing-overlay .lgo-tooltip-trigger,
.ce-leasing-overlay [class*="lgo-tooltip"] > :first-child,
.ce-leasing-overlay .lgo-form-label > :last-child:not(:only-child) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: rgba(24, 25, 26, 0.45) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  position: relative;
  cursor: help;
  vertical-align: middle;
}
.ce-leasing-overlay .lgo-tooltip-trigger::before,
.ce-leasing-overlay [class*="lgo-tooltip"] > :first-child::before,
.ce-leasing-overlay .lgo-form-label > :last-child:not(:only-child)::before {
  font-family: remixicon !important;
  content: "\ee59" !important; /* ri-information-line */
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: inherit !important;
}

/* Tooltip-Popover: schwarz, on-brand */
.ce-leasing-overlay [role="tooltip"],
.ce-leasing-overlay [class*="lgo-tooltip"][class*="-popover"],
.ce-leasing-overlay [class*="Tooltip"],
.ce-leasing-overlay .lgo-tooltip-content {
  background: #18191a !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-family: var(--ce-font-pressura, 'GT Pressura', sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
  max-width: 260px;
}

/* =========== DARK MODE Themed (vgl. Search-Overlay) =========== */

.dark .ce-leasing-overlay__dialog {
  background: var(--ce-surface-card, #18191a) !important;
  color: var(--ce-text-heading, #fafafa) !important;
}

.dark .ce-leasing-overlay__title {
  color: var(--ce-text-heading, #fafafa) !important;
}

.dark .ce-leasing-overlay__close {
  color: var(--ce-text-heading, #fafafa) !important;
}

.dark .ce-leasing-overlay__close:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Dark-Mode-Overrides für Form-Tokens */
.dark .ce-leasing-overlay {
  --lgo-surface: rgba(255, 255, 255, 0.04);
  --lgo-surface-hover: rgba(255, 255, 255, 0.08);
  --lgo-surface-focus: rgba(255, 255, 255, 0.10);
  --lgo-surface-active: #ffffff;
  --lgo-ink: #fafafa;
  --lgo-ink-muted: rgba(255, 255, 255, 0.50);
  --lgo-ink-whisper: rgba(255, 255, 255, 0.28);
  --lgo-divider: rgba(255, 255, 255, 0.12);
  --lgo-divider-strong: rgba(255, 255, 255, 0.22);
}

/* Inputs/Labels/Radios im Dark Mode */
.dark .ce-leasing-overlay .lgo-form-control,
.dark .ce-leasing-overlay [class*="css-"][class*="-control"],
.dark .ce-leasing-overlay .lgo-input-group {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fafafa !important;
}

.dark .ce-leasing-overlay .lgo-form-control::placeholder,
.dark .ce-leasing-overlay [class*="css-"][class*="-placeholder"] {
  color: rgba(255, 255, 255, 0.3) !important;
}

.dark .ce-leasing-overlay [class*="css-"][class*="-singleValue"] {
  color: #fafafa !important;
}

.dark .ce-leasing-overlay .lgo-form-control:hover,
.dark .ce-leasing-overlay [class*="css-"][class*="-control"]:hover,
.dark .ce-leasing-overlay .lgo-input-group:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.dark .ce-leasing-overlay .lgo-form-control:focus,
.dark .ce-leasing-overlay [class*="css-"][class*="-control"]--is-focused,
.dark .ce-leasing-overlay .lgo-input-group:focus-within {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: #fafafa !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06) !important;
}

.dark .ce-leasing-overlay .lgo-form-label,
.dark .ce-leasing-overlay label:not(.lgo-radio-inline) {
  color: rgba(255, 255, 255, 0.5) !important;
}

.dark .ce-leasing-overlay .lgo-radio-inline {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fafafa !important;
}

.dark .ce-leasing-overlay .lgo-radio-inline:has(input:checked) {
  background: #fafafa !important;
  color: #18191a !important;
  border-color: #fafafa !important;
}

.dark .ce-leasing-overlay .lgo-radio-inline:hover:not(:has(input:checked)) {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Rate-Container Dark */
.dark .ce-leasing-overlay [class*="lgo-"]:has(> .lgo-rate + .lgo-rate) {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark .ce-leasing-overlay .lgo-rate {
  border-right-color: rgba(255, 255, 255, 0.12) !important;
}

.dark .ce-leasing-overlay .lgo-rate:nth-child(2) {
  background: rgba(255, 255, 255, 0.08) !important;
}

.dark .ce-leasing-overlay .lgo-rate-amount {
  color: #fafafa !important;
}

.dark .ce-leasing-overlay .lgo-rate-title,
.dark .ce-leasing-overlay .lgo-rate > :last-child {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Button Dark Mode: weißer Button auf dunklem bg */
.dark .ce-leasing-overlay .lgo-calculator .lgo-btn,
.dark .ce-leasing-overlay .lgo-calculator .lgo-btn[disabled],
.dark .ce-leasing-overlay button.lgo-btn {
  background: #fafafa !important;
  color: #18191a !important;
}

.dark .ce-leasing-overlay .lgo-calculator .lgo-btn:hover {
  background: #ffffff !important;
}

/* Tooltip Dark — bleibt schwarz (genug Kontrast) aber leichter Border */
.dark .ce-leasing-overlay [role="tooltip"],
.dark .ce-leasing-overlay [class*="lgo-tooltip"][class*="-popover"] {
  background: #fafafa !important;
  color: #18191a !important;
}

/* Readonly im Dark Mode */
.dark .ce-leasing-overlay .lgo-form-control.ce-lgo-readonly {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* React-Select Menu Dark */
.dark .ce-leasing-overlay [class*="css-"][class*="-menu"] {
  background: var(--ce-surface-card, #1c1d1f) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.dark .ce-leasing-overlay [class*="css-"][class*="-option"] {
  color: #fafafa !important;
}
.dark .ce-leasing-overlay [class*="css-"][class*="-option"]--is-focused {
  background: rgba(255, 255, 255, 0.08) !important;
}
.dark .ce-leasing-overlay [class*="css-"][class*="-option"]--is-selected {
  background: #fafafa !important;
  color: #18191a !important;
}

/* Titel-Farbe auch im Dark Mode */
.dark .ce-leasing-overlay__title {
  color: #fafafa !important;
}

/* ==========================================================================
   Leasing-Form — Round 4 Fixes
   ==========================================================================*/

/* ---- Title: Pressura 500, buendig mit Content (x=40), kleiner, mehr Atem unten ---- */
.ce-leasing-overlay__title {
  font-family: 'Pressura', sans-serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1.1 !important;
  padding: 32px 32px 24px 40px !important;
  margin: 0 !important;
}

/* ---- Intro-Prosa unter der Headline (Trust/Orientierung) ---- */
.ce-leasing-overlay__intro {
  font-family: 'GT Pressura', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(24, 25, 26, 0.48);
  padding: 0 40px 32px 40px;
  margin: 0;
}
.dark .ce-leasing-overlay__intro {
  color: rgba(255, 255, 255, 0.48);
}

/* ---- Form-Content: 16px links (+24px inherent offset = 40px buendig mit Titel) ---- */
.ce-leasing-overlay .lgo-calculator {
  padding: 4px 16px 24px 16px !important;
}

/* ---- React-Select: ValueContainer padding override (leasinGo setzt 23px 15px 22px 22px) ---- */
.ce-leasing-overlay [class*="css-"][class*="-control"] > div:first-child,
.ce-leasing-overlay [class*="css-"][class*="-ValueContainer"],
.ce-leasing-overlay [class*="css-"][class*="-value-container"] {
  padding: 0 !important;
}

/* ---- € Suffix: Readonly-Input im Group hat anderen bg als Group → angleichen ---- */
/* Input inside lgo-input-group wird transparent, sodass Group-bg durchscheint */
.ce-leasing-overlay .lgo-input-group .lgo-form-control,
.ce-leasing-overlay .lgo-input-group .lgo-form-control.ce-lgo-readonly,
.ce-leasing-overlay .lgo-input-group input[readonly] {
  background: transparent !important;
}

/* ---- Button: x/y spacing harmonisieren — symmetrisch 12px ---- */
.ce-leasing-overlay .lgo-calculator .lgo-btn,
.ce-leasing-overlay button.lgo-btn {
  padding: 12px 24px !important;
  min-width: 180px !important;
}

/* ---- Toggle: 50px hoch, font 15px (=site button), flexbox vertically centered ---- */
.ce-leasing-overlay .lgo-radio-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
}

/* Toggle-Text: margin-top kill (leasinGo setzt 20px fuer column-layout),
   font-weight auf 400 (regular) */
.ce-leasing-overlay .lgo-radio-inline .lgo-radio-text {
  margin: 0 !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Geraetezustand-Toggle (radio 3+4) ist ausgeblendet via JS —
   hier wird nur Neuware verkauft. Kein Gap-Margin mehr noetig. */

/* Toggle-Row: mehr Abstand nach unten */
.ce-leasing-overlay .lgo-row:has(> .lgo-col-12 > .lgo-radio-inline),
.ce-leasing-overlay .lgo-row:has(> .lgo-col-12:has(.lgo-radio-inline)) {
  margin-bottom: 24px !important;
}

/* ---- Preis-Anzeige: CE-Style Preistext statt readonly Input ---- */
.ce-leasing-overlay .ce-lgo-price-display {
  margin-top: 28px;
  margin-bottom: 16px;
}
.ce-leasing-overlay .ce-lgo-price-amount {
  font-family: 'Pressura Mono', monospace !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--ce-text-heading, #18191a) !important;
  line-height: 1 !important;
  display: block;
}
.ce-leasing-overlay .ce-lgo-price-vat {
  font-family: 'GT Pressura', sans-serif !important;
  font-size: 12px !important;
  color: rgba(24, 25, 26, 0.48) !important;
  display: inline-block;
  margin-top: 6px;
}
.dark .ce-leasing-overlay .ce-lgo-price-amount {
  color: #fafafa !important;
}
.dark .ce-leasing-overlay .ce-lgo-price-vat {
  color: rgba(255, 255, 255, 0.42) !important;
}


/* ==========================================================================
   Leasing-Form — Round 3 Fixes
   Sammelfix: dark mode bg, vertical lines, alignment, spacing, button groups
   ==========================================================================*/

/* ---- 1. Spacing: tighter rows, saubere Blöcke ---- */
.ce-leasing-overlay .lgo-row {
  margin-bottom: 10px !important;
  gap: 10px !important;
}

.ce-leasing-overlay [class*="lgo-"]:has(> .lgo-rate + .lgo-rate) {
  margin: 16px 0 12px !important;
}

/* ---- 2. Button Groups: verbundene Toggle-Pairs ---- */
/* Parent-Container: gap + justify-content killen (leasinGo setzt space-between) */
.ce-leasing-overlay .lgo-col-12:has(> .lgo-radio-inline) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Reset aller Radii auf 0, dann Endpoints runden */
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(1),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(2),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(3),
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(4) {
  border-radius: 0 !important;
  border-left-width: 1px !important;
  margin: 0 !important;
}

/* Pair 1 — Leasing | Mietkauf */
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(1) {
  border-radius: 6px 0 0 6px !important;
  margin-right: -1px !important;
}
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(2) {
  border-radius: 0 6px 6px 0 !important;
}

/* Pair 2 — Neu | Gebraucht (12px Abstand zu Pair 1) */
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(3) {
  border-radius: 6px 0 0 6px !important;
  margin-left: 12px !important;
  margin-right: -1px !important;
}
.ce-leasing-overlay .lgo-col-12 > .lgo-radio-inline:nth-of-type(4) {
  border-radius: 0 6px 6px 0 !important;
}

/* Active button sits above seam border */
.ce-leasing-overlay .lgo-radio-inline:has(input:checked) {
  z-index: 2 !important;
}

/* ---- 2b. lgo-input-label: aus dem Input-Border herauslösen und darüber platzieren ---- */
/* leasinGo rendert Labels als .lgo-input-label (nicht .lgo-form-label) absolut auf dem Border.
   Wir heben sie auf top: -20px und geben dem Wrapper margin-top Raum. */
.ce-leasing-overlay .lgo-input-wrapper {
  margin-top: 20px !important;
  position: relative !important;
  overflow: visible !important;
}

.ce-leasing-overlay .lgo-input-label {
  position: absolute !important;
  top: -20px !important;
  left: 0 !important;
  background: transparent !important;
  font-family: 'Pressura Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(24, 25, 26, 0.48) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Dark mode label */
.dark .ce-leasing-overlay .lgo-input-label {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ---- 3. Input-group suffix: vertikale Ausrichtung ---- */
.ce-leasing-overlay .lgo-input-group {
  align-items: center !important;
}

.ce-leasing-overlay .lgo-input-group .lgo-form-control {
  align-self: stretch !important;
  height: 100% !important;
}

.ce-leasing-overlay .lgo-input-group-text {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* ---- 4. React-Select: singleValue + indicator vertikal zentriert ---- */
.ce-leasing-overlay [class*="css-"][class*="-control"] {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.ce-leasing-overlay [class*="css-"][class*="-ValueContainer"] {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

/* Position: static (statt absolute) → fließt im Flex-Container korrekt */
.ce-leasing-overlay [class*="css-"][class*="-singleValue"] {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
}

.ce-leasing-overlay [class*="css-"][class*="-IndicatorsContainer"] {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
}

/* Dropdown-Chevron: mehr Padding rechts (mehr Abstand zum Rand), kleineres SVG */
.ce-leasing-overlay [class*="css-"][class*="-indicatorContainer"],
.ce-leasing-overlay [class*="css-"][class*="-IndicatorContainer"] {
  padding: 0 16px 0 8px !important;
}
.ce-leasing-overlay [class*="css-"][class*="-indicatorContainer"] svg,
.ce-leasing-overlay [class*="css-"][class*="-IndicatorContainer"] svg {
  width: 14px !important;
  height: 14px !important;
}

.ce-leasing-overlay [class*="css-"][class*="-indicatorContainer"] {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  padding: 0 10px !important;
}

/* ---- 5. Rate-Box: pseudo-element Linienkiller ---- */
.ce-leasing-overlay .lgo-rate::before,
.ce-leasing-overlay .lgo-rate::after,
.ce-leasing-overlay .lgo-rate-amount::before,
.ce-leasing-overlay .lgo-rate-amount::after,
.ce-leasing-overlay .lgo-rate-amount > *::before,
.ce-leasing-overlay .lgo-rate-amount > *::after {
  display: none !important;
  content: none !important;
}

/* ---- 6. Dark Mode: hardcoded bg (#18191a statt var(--ce-surface-card) = weiß) ---- */
.dark .ce-leasing-overlay__dialog {
  background: #18191a !important;
  color: #fafafa !important;
}

/* leasinGo .lgo-sticky-footer (Rate-Box + Button-Bereich) hat white bg via styled-components */
.dark .ce-leasing-overlay .lgo-sticky-footer {
  background: #18191a !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .ce-leasing-overlay .lgo-calculator {
  background: transparent !important;
  color: #fafafa !important;
}

/* Mittlere Rate-Zelle: weißes Popup-bg → dunkles Highlight im Dark Mode */
.dark .ce-leasing-overlay .lgo-rate:nth-child(2) {
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Rate-Beträge lesbar im Dark Mode */
.dark .ce-leasing-overlay .lgo-rate-amount {
  color: #fafafa !important;
}

.dark .ce-leasing-overlay .lgo-rate-amount *,
.dark .ce-leasing-overlay .lgo-rate-amount span {
  color: #fafafa !important;
}

/* Button Dark: span-Text ebenfalls dunkel */
.dark .ce-leasing-overlay .lgo-calculator .lgo-btn span {
  color: #18191a !important;
}

/* Legend + readonly im Dark Mode */
.dark .ce-leasing-overlay legend {
  color: rgba(255, 255, 255, 0.40) !important;
}

/* ============================================
   Shopify Privacy Banner (Cookie-Zustimmung)
   Modal-Konvention wie ce-leasing-overlay / pickup-availability-drawer.
   Zentriertes Panel auf abgedunkeltem, geblurrtem Backdrop.
   ============================================ */
/* Wichtig: kein !important auf display — sonst überschreibt es
   das inline style="display:none", das Shopify nach Klick auf Akzeptieren setzt.
   Banner bliebe sonst dauerhaft offen. */
/* Banner als zentriertes Modal mit Backdrop+Blur — konsistent zum Prefs-Modal.
   Kein !important auf display: Shopify steuert show/hide via inline display:none.
   !important auf background/border/dimensions wegen generischer Regel oben + Shopify-CSS. */
#shopify-pc__banner.shopify-pc__banner__dialog {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 9600;
  align-items: center;
  justify-content: center;
  padding: 24px !important;
  margin: 0 !important;
  background: rgba(24, 25, 26, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Wrapper absolut zentriert — display-unabhängig, funktioniert auch wenn
   Banner-Section display:block hat. Tokens für Dark-Mode-Support. */
#shopify-pc__banner .shopify-pc__banner__wrapper {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 48px);
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ce-surface-card) !important;
  border: 1px solid var(--ce-border-default) !important;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.10);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Pressura', sans-serif;
  color: var(--ce-text-body) !important;
  animation: ce-leasing-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
#shopify-pc__banner #shopify-pc__banner__body-title {
  color: var(--ce-text-heading) !important;
}
#shopify-pc__banner .shopify-pc__banner__body p {
  color: var(--ce-text-secondary) !important;
}
#shopify-pc__banner .shopify-pc__banner__body a {
  color: var(--ce-text-heading) !important;
}

@media (max-width: 480px) {
  #shopify-pc__banner.shopify-pc__banner__dialog {
    padding: 16px;
  }
  #shopify-pc__banner .shopify-pc__banner__wrapper {
    max-width: calc(100vw - 32px);
    padding: 24px;
  }
}

#shopify-pc__banner .shopify-pc__banner__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

#shopify-pc__banner #shopify-pc__banner__body-title {
  font-family: 'Pressura', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: #18191A;
  margin: 0;
}

#shopify-pc__banner .shopify-pc__banner__body p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #6B7280;
  margin: 0;
}

#shopify-pc__banner .shopify-pc__banner__body a,
#shopify-pc__banner #shopify-pc__banner__body-policy-link {
  color: #18191A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2-Reihen-Grid wie im Prefs-Modal — Akzeptieren full-width, Ablehnen+Einstellungen unten */
#shopify-pc__banner .shopify-pc__banner__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
}

#shopify-pc__banner .shopify-pc__banner__btns button {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-button, 14px);
  font-weight: 500;
  border-radius: var(--ce-radius-sm);
  padding: 10px 20px;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--ce-transition), border-color var(--ce-transition), color var(--ce-transition);
  min-width: unset;
  min-height: unset;
  letter-spacing: 0;
  text-transform: none;
}

/* Primary: Akzeptieren — invert (dunkel auf hell, hell auf dunkel) */
#shopify-pc__banner #shopify-pc__banner__btn-accept {
  order: 1;
  grid-column: 1 / -1;
  background-color: var(--ce-surface-invert) !important;
  color: var(--ce-text-on-invert) !important;
  border: 1px solid var(--ce-surface-invert) !important;
  min-height: 44px;
}
#shopify-pc__banner #shopify-pc__banner__btn-accept:hover {
  background-color: var(--ce-surface-invert-hover) !important;
  border-color: var(--ce-surface-invert-hover) !important;
}

/* Ghost: Einstellungen verwalten — Reihe 2 links, Heading-Color (flippt im Dark-Mode) */
#shopify-pc__banner #shopify-pc__banner__btn-manage-prefs {
  order: 2;
  background: transparent !important;
  color: var(--ce-text-heading) !important;
  border: 1px solid var(--ce-border-default) !important;
  min-height: 44px;
}
#shopify-pc__banner #shopify-pc__banner__btn-manage-prefs:hover {
  border-color: var(--ce-border-strong) !important;
  background: var(--ce-surface-muted) !important;
}

/* Destructive Ghost: Ablehnen — Reihe 2 rechts. Kräftiges Rot, sichtbarer Border. */
#shopify-pc__banner #shopify-pc__banner__btn-decline {
  order: 3;
  background: transparent;
  color: #DC2626;
  border: 1px solid #DC2626;
  min-height: 44px;
}
#shopify-pc__banner #shopify-pc__banner__btn-decline:hover {
  border-color: #B91C1C;
  color: #FFFFFF;
  background: #B91C1C;
}

/* Dark Mode: helleres, aber kräftiges Rot */
.dark #shopify-pc__banner #shopify-pc__banner__btn-decline {
  color: #F87171;
  border-color: #F87171;
}
.dark #shopify-pc__banner #shopify-pc__banner__btn-decline:hover {
  color: #18191A;
  border-color: #F87171;
  background: #F87171;
}

#shopify-pc__banner #shopify-pc__banner__btn-manage-prefs span {
  display: inline;
}

@media (max-width: 480px) {
  #shopify-pc__banner .shopify-pc__banner__btns {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
  }
  #shopify-pc__banner .shopify-pc__banner__btns button {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* ============================================
   Shopify Customer Privacy — Prefs/Detail Modal
   Spiegelt Banner-Optik (Backdrop, Card, Buttons, Typo).
   Real Shopify-Struktur: #shopify-pc__prefs > .__overlay + .__dialog (header, .__scrollable mit .__options).
   Kein !important auf display — Shopify steuert show/hide via inline style.
   ============================================ */

/* Backdrop — Banner-Optik (dunkel + blur) */
#shopify-pc__prefs .shopify-pc__prefs__overlay {
  background: rgba(24, 25, 26, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9601;
}

/* Dialog-Panel — Card-Optik (Tokens für Dark-Mode-Support) */
#shopify-pc__prefs .shopify-pc__prefs__dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 560px !important;
  max-height: calc(100vh - 48px) !important;
  background: var(--ce-surface-card) !important;
  border: 1px solid var(--ce-border-default) !important;
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-elevated);
  font-family: 'Inter', sans-serif;
  color: var(--ce-text-body) !important;
  z-index: 9602;
  animation: ce-leasing-fade-in 180ms ease;
}

@media only screen and (max-width: 600px) {
  #shopify-pc__prefs .shopify-pc__prefs__dialog {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }
}

/* Header — Title + Buttons + Close. Buttons immer untereinander. */
#shopify-pc__prefs .shopify-pc__prefs__dialog header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px;
  padding: 24px 24px 20px !important;
  border-bottom: 1px solid var(--ce-border-default);
  position: relative;
}

#shopify-pc__prefs .shopify-pc__prefs__dialog header h2 {
  font-family: 'Pressura', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ce-text-heading) !important;
  margin: 0 !important;
  padding: 0 36px 0 0 !important;
  text-align: left !important;
  width: 100% !important;
}

/* Close-Button sichtbar machen */
#shopify-pc__prefs .shopify-pc__prefs__header-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
#shopify-pc__prefs .shopify-pc__prefs__header-close:hover {
  background: var(--ce-border-default);
  border-color: var(--ce-border-strong);
}
#shopify-pc__prefs .shopify-pc__prefs__header-close svg {
  width: 12px;
  height: 12px;
}
#shopify-pc__prefs .shopify-pc__prefs__header-close svg path {
  fill: var(--ce-text-heading);
  stroke: var(--ce-text-heading);
}

/* Header-Action-Buttons: 2-Reihen-Grid — Primary oben full-width,
   Ablehnen + Speichern unten side-by-side. */
#shopify-pc__prefs .shopify-pc__prefs__header-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
}

/* Base: alle Buttons gleicher Default — wird von position-Selektoren überschrieben.
   DOM-Order in Shopify: 1=accept-all, 2=decline-all, 3=save. */
#shopify-pc__prefs .shopify-pc__prefs__header-actions button {
  font-family: 'Pressura Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--ce-radius-sm) !important;
  padding: 10px 20px !important;
  min-height: 44px !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* PRIMARY — Alle akzeptieren (1. Button). Invert/dark, spannt full-width oben. */
#shopify-pc__prefs .shopify-pc__prefs__header-actions button:nth-child(1) {
  grid-column: 1 / -1;
  background: var(--ce-surface-invert) !important;
  color: var(--ce-text-on-invert) !important;
  border: 1px solid var(--ce-surface-invert) !important;
}
#shopify-pc__prefs .shopify-pc__prefs__header-actions button:nth-child(1):hover {
  background: var(--ce-surface-invert-hover) !important;
  border-color: var(--ce-surface-invert-hover) !important;
}

/* DESTRUCTIVE — Alle ablehnen (2. Button). Kräftiges Rot. */
#shopify-pc__prefs .shopify-pc__prefs__header-actions button:nth-child(2) {
  background: transparent !important;
  color: #DC2626 !important;
  border: 1px solid #DC2626 !important;
}
#shopify-pc__prefs .shopify-pc__prefs__header-actions button:nth-child(2):hover {
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
  background: #B91C1C !important;
}
.dark #shopify-pc__prefs .shopify-pc__prefs__header-actions button:nth-child(2) {
  color: #F87171 !important;
  border-color: #F87171 !important;
}
.dark #shopify-pc__prefs .shopify-pc__prefs__header-actions button:nth-child(2):hover {
  color: #18191A !important;
  border-color: #F87171 !important;
  background: #F87171 !important;
}

/* SECONDARY — Meine Auswahl speichern (3. Button / last-child). Outlined dark. */
#shopify-pc__prefs .shopify-pc__prefs__header-actions button:last-child {
  background: transparent !important;
  color: var(--ce-text-heading) !important;
  border: 1px solid var(--ce-text-heading) !important;
}
#shopify-pc__prefs .shopify-pc__prefs__header-actions button:last-child:hover {
  background: var(--ce-surface-muted) !important;
  border-color: var(--ce-text-heading) !important;
  color: var(--ce-text-heading) !important;
}

/* Body */
#shopify-pc__prefs .shopify-pc__prefs__scrollable {
  padding: 20px 24px 24px !important;
}

/* Intro-Block — vertikal zentriert zwischen den beiden Dividern,
   linksbündig (Shopify's Default 32px left-padding + 20px top überschreiben). */
#shopify-pc__prefs .shopify-pc__prefs__intro {
  padding: 0 !important;
  margin: 0 !important;
}
#shopify-pc__prefs .shopify-pc__prefs__intro-main {
  padding: 16px 0 24px !important;
  margin: 0 !important;
}
#shopify-pc__prefs .shopify-pc__prefs__intro h3,
#shopify-pc__prefs .shopify-pc__prefs__intro-main h3 {
  font-family: 'Pressura', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ce-text-heading) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
}
#shopify-pc__prefs .shopify-pc__prefs__intro p,
#shopify-pc__prefs .shopify-pc__prefs__intro-main p {
  text-align: left !important;
  padding: 0 !important;
}

#shopify-pc__prefs .shopify-pc__prefs__intro p,
#shopify-pc__prefs .shopify-pc__prefs__intro-main p,
#shopify-pc__prefs .shopify-pc__prefs__option p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ce-text-secondary) !important;
  margin: 0 !important;
}

/* Option-Liste — Divider full-width zwischen Optionen, einheitlich 1px */
#shopify-pc__prefs .shopify-pc__prefs__options {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--ce-border-default);
}

#shopify-pc__prefs .shopify-pc__prefs__option {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  padding: 16px 0 !important;
  border-top: 1px solid var(--ce-border-default);
  margin: 0 !important;
}
#shopify-pc__prefs .shopify-pc__prefs__option:first-child {
  border-top: 0 !important;
}

/* Option-Heading: bündig zur linken Kante, größer */
#shopify-pc__prefs .shopify-pc__prefs__option label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: 'Pressura', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ce-text-heading) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Beschreibung — bündig zur Kante, kein Indent unter Checkbox */
#shopify-pc__prefs .shopify-pc__prefs__option p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ce-text-secondary) !important;
}

/* Checkbox: identisch zur Shop-Filter-Checkbox (.ce-filter-checkbox).
   Span ausblenden, native input mit Custom-Styling für Konsistenz. */
#shopify-pc__prefs .shopify-pc__prefs__option label span {
  display: none !important;
}

/* Identisch zu .ce-filter-checkbox im Shop — gleiche Token-Namen + Fallbacks.
   order:-1 zwingt Checkbox links: Shopify-Markup ist <label>Text<input>… */
#shopify-pc__prefs .shopify-pc__prefs__option label input[type="checkbox"] {
  position: relative !important;
  order: -1 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--border-strong, #D1D1D4) !important;
  border-radius: 4px !important;
  background: var(--surface-card, #FFFFFF) !important;
  margin: 0 !important;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}

#shopify-pc__prefs .shopify-pc__prefs__option label input[type="checkbox"]:hover {
  border-color: var(--surface-invert, #18191A) !important;
}

#shopify-pc__prefs .shopify-pc__prefs__option label input[type="checkbox"]:checked {
  background: var(--surface-invert, #18191A) !important;
  border-color: var(--surface-invert, #18191A) !important;
}

#shopify-pc__prefs .shopify-pc__prefs__option label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 8px;
  border: solid var(--text-on-invert, #FFFFFF);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

#shopify-pc__prefs .shopify-pc__prefs__option label input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ==========================================================================
   View Transitions — sanfter Cross-Fade zwischen Seiten
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: ce-fade-out;
}
::view-transition-new(root) {
  animation-name: ce-fade-in;
}

@keyframes ce-fade-out {
  to { opacity: 0; }
}
@keyframes ce-fade-in {
  from { opacity: 0; }
}

/* Header/Footer bleiben stabil — kein Flicker */
.shopify-section-group-header-group,
.shopify-section-group-footer-group {
  view-transition-name: ce-stable-header;
}
.shopify-section-group-footer-group {
  view-transition-name: ce-stable-footer;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}


/* ============================================================
   Installation page — Diagram + Step-by-Step
   Source: Original-PDF Installationsblatt
   ============================================================ */

.ce-install-diagram__heading,
.ce-install-steps__heading {
  font-family: var(--ce-font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ce-text-heading);
  margin: 0 0 0.5rem;
}

.ce-install-diagram__subheading {
  font-family: var(--ce-font-body);
  color: var(--ce-text-secondary);
  max-width: 56ch;
  margin: 0 0 1.5rem;
}

.ce-install-diagram__figure {
  margin: 0;
}

.ce-install-diagram__canvas {
  position: relative;
  background: #FFFFFF; /* Brand-Kit-Regel: Technik-Grafiken auf hellem Grund, auch im Dark Mode */
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow: hidden;
}

.dark .ce-install-diagram__canvas {
  background: #FFFFFF;
}

.ce-install-diagram__svg {
  width: 100%;
  height: auto;
  display: block;
}

.ce-install-diagram__hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ce-text-heading);
  background: #FFFFFF;
  color: var(--ce-text-heading);
  font-family: var(--ce-font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ce-install-diagram__hotspot:hover,
.ce-install-diagram__hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
  outline: none;
}

.ce-install-diagram__hotspot.is-pulse {
  animation: ce-hotspot-pulse 1.6s ease-out;
}

@keyframes ce-hotspot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35); }
  60%  { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.ce-install-diagram__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ce-install-diagram__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-full);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  font-family: var(--ce-font-body);
  font-size: 14px;
  color: var(--ce-text-heading);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ce-install-diagram__legend-item:hover,
.ce-install-diagram__legend-item:focus-visible {
  border-color: var(--ce-text-heading);
  outline: none;
}

.ce-install-diagram__legend-num {
  font-family: var(--ce-font-mono);
  color: var(--ce-text-secondary);
  font-size: 12px;
}

/* ---- Step list ---- */

.ce-install-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  counter-reset: ce-step;
}

@media (min-width: 750px) {
  .ce-install-steps__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .ce-install-steps__callout,
  .ce-install-steps__cta {
    grid-column: 1 / -1;
  }
}

.ce-install-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md);
  padding: 1.25rem;
  scroll-margin-top: 100px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ce-install-steps__item.is-active {
  border-color: var(--ce-text-heading);
  box-shadow: var(--ce-shadow-card);
}

.ce-install-steps__num {
  font-family: var(--ce-font-mono);
  font-size: 14px;
  color: var(--ce-text-secondary);
  letter-spacing: 0.04em;
  padding-top: 4px;
  min-width: 2ch;
}

.ce-install-steps__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ce-install-steps__icon {
  font-size: 18px;
  color: var(--ce-text-secondary);
}

.ce-install-steps__title {
  font-family: var(--ce-font-heading);
  font-size: 1.125rem;
  color: var(--ce-text-heading);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.ce-install-steps__ref {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-text-secondary);
  font-weight: 400;
}

.ce-install-steps__body {
  font-family: var(--ce-font-body);
  color: var(--ce-text-body, var(--ce-text-secondary));
  margin: 0 0 0.75rem;
  line-height: 1.55;
}

.ce-install-steps__badge {
  display: inline-block;
  font-family: var(--ce-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ce-text-secondary);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-full);
  padding: 0.2rem 0.6rem;
}

.ce-install-steps__callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background: var(--ce-surface-muted, #F5F5F4);
  border-left: 3px solid var(--ce-text-heading);
  border-radius: var(--ce-radius-md);
  padding: 1.25rem;
}

.ce-install-steps__callout-icon {
  font-size: 22px;
  color: var(--ce-text-heading);
}

.ce-install-steps__callout-title {
  font-family: var(--ce-font-heading);
  font-size: 1rem;
  color: var(--ce-text-heading);
  margin: 0 0 0.4rem;
}

.ce-install-steps__callout-body {
  font-family: var(--ce-font-body);
  color: var(--ce-text-body, var(--ce-text-secondary));
  margin: 0;
  line-height: 1.55;
}

.ce-install-steps__cta {
  text-align: center;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md);
  padding: 1.75rem 1.25rem;
}

.ce-install-steps__cta-title {
  font-family: var(--ce-font-heading);
  font-size: 1.25rem;
  color: var(--ce-text-heading);
  margin: 0 0 0.4rem;
}

.ce-install-steps__cta-body {
  font-family: var(--ce-font-body);
  color: var(--ce-text-secondary);
  margin: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .ce-install-diagram__hotspot.is-pulse { animation: none; }
  .ce-install-steps__item { transition: none; }
}

/* =========================================================================
   CE FAQ — Kategorisierte Akkordeon-Section
   ========================================================================= */
.ce-faq__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-hxl, 40px);
  line-height: 1.1;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.ce-faq__heading:last-child {
  margin-bottom: 3rem;
}

.ce-faq__subheading {
  font-family: 'Inter', sans-serif;
  font-size: var(--ce-font-size-body, 16px);
  line-height: 1.55;
  color: var(--ce-text-body);
  margin: 0 0 3rem;
  max-width: 60ch;
}

.ce-faq__categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .ce-faq__categories--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.ce-faq__category {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md, 12px);
  box-shadow: var(--ce-shadow-elevated);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.ce-faq__categories--cols-2 .ce-faq__category:hover {
  transform: translateY(-2px);
  border-color: var(--ce-border-default);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.18), 0 4px 12px -4px rgba(0, 0, 0, 0.10);
}

.ce-faq__category > .ce-faq__items {
  flex: 1 1 auto;
}

.ce-faq__category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ce-border-muted);
}

.ce-faq__category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 26px;
  color: var(--ce-text-heading);
  flex-shrink: 0;
}

.ce-faq__category-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.ce-faq__category-title {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h2-section, 24px);
  line-height: 1.2;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0;
}

.ce-faq__items {
  display: flex;
  flex-direction: column;
}

.ce-faq__item {
  border-bottom: 1px solid var(--ce-border-muted);
}

.ce-faq__item:last-child {
  border-bottom: 0;
}

.ce-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-card-title, 18px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--ce-text-heading);
  min-height: 44px;
}

.ce-faq__question::-webkit-details-marker { display: none; }

.ce-faq__question:hover .ce-faq__question-text {
  color: var(--ce-text-body);
}

.ce-faq__question-text {
  flex: 1;
  text-wrap: balance;
}

.ce-faq__question-icon {
  font-size: 20px;
  color: var(--ce-text-secondary);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.ce-faq__item[open] .ce-faq__question-icon {
  transform: rotate(45deg);
  color: var(--ce-text-heading);
}

@keyframes ce-faq-answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ce-faq__item[open] .ce-faq__answer {
  animation: ce-faq-answer-in 220ms ease-out both;
}

.ce-faq__answer {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body, 16px);
  line-height: 1.6;
  font-weight: 300;
  color: var(--ce-text-body);
  padding: 0 0 1.25rem;
  max-width: 65ch;
}

.ce-faq__answer p,
.ce-faq__answer ul,
.ce-faq__answer ol,
.ce-faq__answer li {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body, 16px);
  line-height: 1.6;
  font-weight: 300;
  color: var(--ce-text-body);
}
.ce-faq__answer p { margin: 0 0 0.75rem; }
.ce-faq__answer p:last-child { margin: 0; }
.ce-faq__answer a { color: var(--ce-text-heading); text-decoration: underline; text-underline-offset: 3px; }
.ce-faq__answer ul,
.ce-faq__answer ol {
  margin: 0.5rem 0 0.875rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}
.ce-faq__answer ul { list-style: disc; }
.ce-faq__answer ol { list-style: decimal; }
.ce-faq__answer li {
  margin: 0 0 0.375rem;
  padding-left: 0.25rem;
}
.ce-faq__answer li::marker {
  color: var(--ce-text-secondary);
}
.ce-faq__answer li:last-child { margin-bottom: 0; }
.ce-faq__answer ul ul,
.ce-faq__answer ol ol,
.ce-faq__answer ul ol,
.ce-faq__answer ol ul {
  margin: 0.375rem 0;
}
.ce-faq__answer strong { font-weight: 500; color: var(--ce-text-heading); }

@media (max-width: 640px) {
  .ce-faq__category {
    padding: 1.25rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-faq__question-icon { transition: none; }
  .ce-faq__category { transition: none; }
  .ce-faq__categories--cols-2 .ce-faq__category:hover { transform: none; }
  .ce-faq__item[open] .ce-faq__answer { animation: none; }
}

/* =========================================================================
   CE Downloads — Datei-Listing
   ========================================================================= */
.ce-downloads__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0, 32px);
  line-height: 1.15;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.ce-downloads__subheading {
  font-family: 'Inter', sans-serif;
  font-size: var(--ce-font-size-body, 16px);
  line-height: 1.55;
  color: var(--ce-text-body);
  margin: 0 0 2rem;
  max-width: 60ch;
}

.ce-downloads__categories {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ce-downloads__category {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md, 12px);
  box-shadow: var(--ce-shadow-elevated);
  padding: 1.5rem 1.75rem;
}

.ce-downloads__category-title {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-card-title, 18px);
  line-height: 1.2;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ce-border-muted);
}

.ce-downloads__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ce-downloads__item + .ce-downloads__item {
  border-top: 1px solid var(--ce-border-muted);
}

.ce-downloads__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  text-decoration: none;
  color: var(--ce-text-heading);
  min-height: 44px;
  transition: color 160ms ease;
}

.ce-downloads__link:hover {
  color: var(--ce-text-body);
}

.ce-downloads__link:hover .ce-downloads__arrow {
  transform: translateY(2px);
  color: var(--ce-text-heading);
}

.ce-downloads__file-icon {
  font-size: 24px;
  color: var(--ce-text-secondary);
  flex-shrink: 0;
}

.ce-downloads__file-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ce-downloads__file-title {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small, 14px);
  font-weight: 500;
  color: var(--ce-text-heading);
  overflow-wrap: anywhere;
}

.ce-downloads__file-size {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  color: var(--ce-text-tertiary);
  letter-spacing: 0.02em;
}

.ce-downloads__arrow {
  font-size: 20px;
  color: var(--ce-text-secondary);
  transition: transform 160ms ease, color 160ms ease;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ce-downloads__category {
    padding: 1.25rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-downloads__link,
  .ce-downloads__arrow { transition: none; }
}

/* Product Note Badge (Tag-driven, e.g. 'einweisung') */
.ce-product-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.875rem;
  background: var(--ce-emerald-200);
  border: 1px solid var(--ce-emerald-300);
  border-radius: 999px;
  font-family: var(--ce-font-mono, 'GT Pressura Mono', monospace);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: #064E3B;
}
.ce-product-note__icon {
  display: inline-flex;
  font-size: 1rem;
  color: var(--ce-emerald-500);
}