/** Shopify CDN: Minification failed

Line 11148:54 Unexpected "--is-focused"
Line 11672:60 Unexpected "--is-focused"

**/
/* ============================================
   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;
  gap: 6px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  min-width: unset;
  min-height: unset;
}

.ce-btn-primary i,
.ce-btn-outline i {
  font-size: 16px;
  line-height: 1;
}

.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;
  /* Outline-Konvention: transparent BG + Border + heading-color Text
     (vorher text-secondary war zu blass – outline-Buttons sollen klar
     lesbar sein, nur die Fill-Differenz markiert sie als sekundär) */
  color: var(--ce-text-heading);
  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;
  gap: 6px;
  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);
}

/* Secondary: weißer BG + Brand-Kit-Shadow (analog ce-team-card__action--secondary).
   Sitzt visuell zwischen primary (dunkel-gefüllt) und ghost (transparent-outline). */
.ce-btn-secondary {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-button-outline);
  font-weight: 500;
  background: var(--ce-surface-card);
  color: var(--ce-text-heading);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm);
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color var(--ce-transition), box-shadow var(--ce-transition), background var(--ce-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--ce-shadow-card);
  min-width: unset;
  min-height: unset;
}

.ce-btn-secondary:hover {
  border-color: var(--ce-text-heading);
  box-shadow: var(--ce-shadow-card-hover);
}

.ce-btn-secondary i {
  font-size: 16px;
  line-height: 1;
}

/* Ghost-Alias (für naming-Konsistenz mit ce-team-card; mapped auf ce-btn-outline). */
.ce-btn-ghost {
  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;
  gap: 6px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
}

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

.ce-btn-ghost i {
  font-size: 16px;
  line-height: 1;
}

/* ---- 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;
}

/* Sticky top-0 z-30. Frosted-Glass: semi-transparenter Header (72% surface-
   card via color-mix → mode-aware) + Backdrop-Blur. Durchscrollender Content
   verschwimmt hinter der Fläche. color-mix nimmt die surface-card-Farbe (hell
   im Light-, dunkel im Dark-Mode) und macht sie translucent. */
.ce-header {
  position: relative;
  background: var(--ce-surface-card);
  box-shadow: var(--ce-shadow-card);
  border-bottom: 0;
}

/* Café-Bereich: Header im warmen Café-Ton statt neutral-weiß. */
body.template-suffix-cafe .ce-header {
  background: var(--ce-surface-page-warm);
}

.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;
    gap: 24px; /* Schutzabstand: Logo und Nav nie näher als 24px (space-between verteilt darüber hinaus) */
  }
}

/* -- 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 – ca. 20% größer als zuvor (132→158px), bleibt aber unter den
   44×44-Touch-Targets der Aktionen in einer Zeile. */
.ce-header__logo--mobile {
  width: 158px;
  height: auto;
  filter: var(--ce-logo-filter, none);
}

/* Logo nie quetschen: flex-shrink 0 (Logo behält Größe) + Schutzabstand zur Nav
   via gap auf .ce-header__desktop. Nav-Gap im engen Bereich kleiner.
   Volllogo bis ≤820px, dann Kurzlogo "Kliewe". Warenkorb-Label: siehe <940px-Regel. */
.ce-header__logo-link { flex-shrink: 0; }
.ce-header__logo--short { display: none; width: 92px; height: auto; }
@media screen and (min-width: 750px) and (max-width: 1119px) {
  .ce-header__nav { gap: 12px; }
}
@media screen and (min-width: 750px) and (max-width: 820px) {
  .ce-header__logo--full { display: none; }
  .ce-header__logo--short { display: block; }
}

/* -- 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);
}

/* Nav-Dropdown (Hover-Menu für Items mit Children, z.B. "Standorte") */
.ce-header__nav-dropdown {
  position: relative;
}

/* "Angebote": bei genug Platz offen ausgelegt (Inline-Links), im mittleren
   Viewport (Logo wird sonst gequetscht) als Sammel-Dropdown eingeklappt. */
.ce-header__nav-dropdown--collapsible { display: none; }
@media screen and (max-width: 1119px) {
  .ce-header__nav-link--flat { display: none; }
  .ce-header__nav-dropdown--collapsible { display: block; }
}

/* Button-Trigger erbt typo von .ce-header__nav-link (gleiche Klasse).
   font-family/size NICHT auf "inherit" setzen – sonst greift der Browser-
   Default für <button>, nicht die Theme-Typo. */
.ce-header__nav-link--has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--ce-text-secondary);
  cursor: pointer;
}

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

/* Dropdown-Links: gleiche Typo + Color wie nav-link für Konsistenz */
.ce-header__nav-dropdown-link {
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--ce-text-secondary);
}

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

.ce-header__nav-link-chevron {
  font-size: 16px;
  transition: transform 200ms ease;
}

.ce-header__nav-dropdown:hover .ce-header__nav-link-chevron,
.ce-header__nav-dropdown:focus-within .ce-header__nav-link-chevron {
  transform: rotate(180deg);
}

.ce-header__nav-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: none;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  box-shadow: var(--ce-shadow-card);
  min-width: 180px;
  z-index: 20;
}

/* Hover-Bridge: padding-top auf der ::before fängt 4px Gap zwischen Trigger
   und Dropdown ab, damit der Hover nicht beim Übergang abreißt */
.ce-header__nav-dropdown-list::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.ce-header__nav-dropdown:hover .ce-header__nav-dropdown-list,
.ce-header__nav-dropdown:focus-within .ce-header__nav-dropdown-list {
  display: block;
}

.ce-header__nav-dropdown-link {
  display: block;
  padding: 8px 16px;
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  color: var(--ce-text-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

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

/* 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-Count-Badge im Desktop-Cart-Button */
.ce-header__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 9px;
  background: var(--ce-text-heading, #18191a);
  color: #ffffff;
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.dark .ce-header__cart-count {
  background: #fafafa;
  color: #18191a;
}

/* Cart-Total im Desktop-Cart-Button – analog ce-mobile-menu__cart-total */
.ce-header__cart-total {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  line-height: 1;
  margin-left: 4px;
  white-space: nowrap;
  color: inherit;
}

/* 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;
  }
}

/* Eng (<940px): Warenkorb-Label entfällt → schafft Platz für den Logo-Schutzabstand.
   Steht NACH der display:inline-Regel, gewinnt daher bei gleicher Specificity. */
@media screen and (min-width: 750px) and (max-width: 939px) {
  .ce-header__cart-label {
    display: none;
  }
}

/* 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; }

/* -- Utility-Button-Group: Toggle + Account + Search als ein umrandetes Segment.
   Spart die Zwischen-Gaps + zwei Borders; Einzel-Buttons verlieren Border/Radius,
   Divider zwischen den Segmenten. Feste Höhe 32px (= Cart/Produkte), Border via
   box-sizing inklusive, Kinder strecken sich (align-items: stretch). */
.ce-header__util-group {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  overflow: hidden;
}
.ce-header__util-group > .ce-header__theme-toggle,
.ce-header__util-group > .ce-header__account-btn,
.ce-header__util-group > .ce-header__search-btn {
  border: 0;
  border-radius: 0;
  height: auto;
}
.ce-header__util-group > *:not(:first-child) {
  border-left: 1px solid var(--ce-border-default);
}
.ce-header__util-group > .ce-header__theme-toggle:hover,
.ce-header__util-group > .ce-header__account-btn:hover,
.ce-header__util-group > .ce-header__search-btn:hover {
  background: var(--ce-surface-muted);
  color: var(--ce-text-heading);
}

/* -- 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: 'Pressura', 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);
}

/* Flache Gruppen (Standorte/Angebote): die nicht-klickbaren Cluster-Labels treten als
   Eyebrow zurück (Pressura Mono, klein, uppercase, gedeckt, kein Hover-Background).
   Ihre Links (Köln, Service …) treten dafür im Top-Level-Format hervor (wie „Produkte"),
   linksbündig ohne Einrückung/Linie. Das Produkte-Akkordeon (ohne --flat) bleibt unberührt. */
.ce-header__drawer-link--heading {
  cursor: default;
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  padding: 16px 12px 8px;
}
.ce-header__drawer-link--heading:hover { background-color: transparent; }

.ce-header__drawer-group--flat .ce-header__drawer-subnav {
  /* padding-top = der eigentliche Abstand UNTER dem Eyebrow (die Eyebrow-padding-bottom
     allein wird vom Link-padding-top relativiert). 14px = klar sichtbare Luft. */
  padding: 14px 0 8px;
  margin: 0;
  border-left: none;
}
.ce-header__drawer-group--flat .ce-header__drawer-sublink {
  font-size: 15px;
  font-weight: 300;
  color: var(--ce-text-heading);
  padding: 8px 12px;
}
/* Divider über „Produkte" (einzige Nicht-flat-Gruppe = Akkordeon) – trennt den
   Sortiments-Block sichtbar von den Standort-/Angebot-Clustern darüber. */
.ce-header__drawer-group:not(.ce-header__drawer-group--flat) {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ce-border-default);
}

.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.
     Breiter (4 Spalten) → weniger quadratisch, besser scannbar. */
  width: min(1040px, 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: 4;
  column-gap: 16px;
  isolation: isolate;
}

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

@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: 14px;
  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: 4px 12px 8px 78px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-mega-menu__sublink {
  display: block;
  font-family: 'Pressura', sans-serif;
  font-size: 13px;
  font-weight: 400;
  /* Rest: secondary tone – establishes hierarchy with the heading-coloured tile label. */
  color: var(--ce-text-secondary);
  text-decoration: none;
  padding: 5px 8px;
  margin-left: -8px; /* keep left edge aligned with the sublist indent */
  border-radius: 4px;
  line-height: 1.35;
  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: 'Pressura', 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 */

/* max-width 1204 = 1140 Content + 2×32 Gutter. So bleibt der Inhalt auf großen
   Screens exakt 1140px breit (wie bisher), aber zwischen 750–1204px greift ein
   echter Gutter statt padding:0 – sonst kleben Sections bei mittlerer Breite am Rand. */
.page-width {
  max-width: 1204px;
  margin: 0 auto;
  padding: 0 24px;
}

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

/* ---- 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: 'Pressura', 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: 'Pressura', 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;
  /* Achse exakt wie der Collection-Body: Sidebar 260px + 32px gap + Grid.
     So fluchtet die Überschrift mit der Filter-Sidebar, der Text mit dem Produkt-Grid. */
  grid-template-columns: 260px 1fr;
  gap: 8px 32px;
  align-items: start;
  flex: 1 1 auto;
}

.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;
  text-wrap: balance;
  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: 65ch;
  margin: 0;
}

/* Kein Marken-Logo: Text-Wrapper nutzt die volle Breite statt nur 50%.
   Sonst quetscht sich die Beschreibung in eine schmale Spalte und die rechte
   Hälfte bleibt leer (wirkt "verloren"). Mit voller Breite bekommt die
   Beschreibung eine komfortable Lesespalte neben dem Titel. */
.collection-hero__text-wrapper:only-child {
  flex: 1 1 100%;
}
@media screen and (min-width: 750px) {
  .collection-hero__text-wrapper:only-child .collection-hero__description {
    max-width: 60ch;
  }
}

/* ================================================================
   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;
}

/* Padding-bottom auf <facet-filters-form> (Custom Element, direkter
   Sibling vor dem ::after Sticky-Fade). Default ist display: inline –
   muss explizit auf block, sonst hat padding-bottom keinen Effekt auf
   den Layout-Flow. Der margin-top: -72px des ::after zieht sich in
   die letzten 72px dieses Elements; mit 96px Padding-Bottom landet
   der Overlap in leerem Padding-Raum statt über den letzten Filtern.
   96px = 72px Overlap-Zone + 24px klare Luft über dem Fade. */
.facets-vertical .ce-facets-container > facet-filters-form.small-hide {
  display: block;
  padding-bottom: 96px;
}
.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;
  }
}

/* Kompakte Affordance-Icons (Varianten / Ausverkauft) – Ecke unten rechts, wie Quick-Add.
   Default versteckt; nur im dichten 2-Spalten-Mobile-Grid sichtbar, weil dort
   die Text-Varianten/Swatches/Soldout-Badge zu groß sind und überlagern. */
/* Exakt wie der Quick-Add-Button: 32×32, radius 8px, transparent, keine Border/Shadow, gleicher Hover + Spacing (right: 12px). */
.ce-pcard__compact-affordance {
  display: none;
  position: absolute;
  bottom: 8px;
  right: 12px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ce-text-secondary);
  box-shadow: none;
  transition: background 160ms ease, color 160ms ease;
}
.ce-pcard__compact-affordance i { font-size: 16px; line-height: 1; }
.ce-pcard__compact-affordance:hover {
  background: color-mix(in srgb, var(--ce-text-heading) 4%, transparent);
  color: var(--ce-text-heading);
}
.ce-pcard__compact-affordance--soldout { color: var(--ce-text-tertiary); }

@media (max-width: 749px) {
  #product-grid[data-density="2"] .ce-pcard__variants-hint,
  #product-grid[data-density="2"] .ce-pcard__swatches,
  #product-grid[data-density="2"] .ce-pcard__soldout-badge { display: none !important; }
  #product-grid[data-density="2"] .ce-pcard__compact-affordance { display: inline-flex; }
}

/* 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: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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: 500;
  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 {
  /* Eyebrow-Pattern theme-weit: Pressura Mono, uppercase, letter-spaced.
     Konsistent zu .ce-page-hero__eyebrow / .ce-service-overview__eyebrow etc. */
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 24px;
}

.ce-premium-partner__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  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: center;
  text-wrap: pretty;
}
/* Subline durchgehend zentriert (auch mobil) – passt zum zentrierten Heading/Eyebrow */
@media screen and (min-width: 768px) {
  .ce-premium-partner__subline {
    text-align: center;
    text-wrap: pretty;
  }
  /* Section-Setting: subline_width – narrow/medium nutzen balance für gleichmäßige Zeilen,
     wide nutzt pretty, damit kurze Texte tatsächlich auf 1-2 Zeilen kommen */
  .ce-premium-partner--width-narrow .ce-premium-partner__subline { max-width: 480px; text-wrap: balance; }
  .ce-premium-partner--width-medium .ce-premium-partner__subline { max-width: 600px; text-wrap: balance; }
  .ce-premium-partner--width-wide .ce-premium-partner__subline { max-width: 900px; }
  .ce-premium-partner--width-xwide .ce-premium-partner__subline { max-width: 1200px; }
}

/* ---- 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: 32px;
  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;
    /* Mehr Weißraum ums Produkt – Maschine atmet, berührt die Box-Kanten nicht. */
    padding: 48px 56px;
  }
}

.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: volle Produktbeschreibung, kein Truncate (genug Platz vorhanden).
   min-height hält einen 4-Zeilen-Boden, damit kurze Beschreibungen keine
   Mini-Slides erzeugen; längere Texte dürfen frei wachsen. */
.ce-hero-slide__desc {
  /* Pressura 17/28 – Markenkonsistenz mit allen anderen Marketing-Card-Bodies. */
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--ce-text-secondary);
  line-height: 28px;
  margin: 0;
  min-height: calc(4 * 28px);
  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: center;
}
.ce-hero-slide__actions .ce-hero-slide__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Lange Beschreibung scrollt intern, statt Preis/Buttons zu überlagern.
   Nur Desktop (dort ist der Slide auf max-height 560px gedeckelt). Der Text
   faded unten aus (mask), Footer (Preis + Buttons) bleibt immer sichtbar. */
@media screen and (min-width: 750px) {
  .ce-hero-slide__content { max-height: 560px; overflow: hidden; }
  .ce-hero-slide__desc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  }
}

/* Extras (Quick-Add / Color-Swatches) am rechten Rand der Action-Row.
   Snippets nutzen abs-Positionierung für den Card-Kontext – hier neutralisieren
   und im Flex-Flow als rechtes Element ausrichten. */
.ce-hero-slide__extras {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ce-hero-slide__extras .ce-pcard__quick-add,
.ce-hero-slide__extras .ce-pcard__swatches,
.ce-hero-slide__extras .ce-pcard__variants-hint {
  position: static;
  inset: auto;
}

/* Variant-Hint Pill – für Multi-Variant-Produkte OHNE Farb-Option.
   Visuelles Gewicht zwischen Quick-Add (laut) und Swatches (Information).
   Card-Variante: abs-positioniert wie die anderen Affordances (bottom-right).
   Hero-Variante: neutralisiert via .ce-hero-slide__extras .ce-pcard__variants-hint. */
.ce-pcard__variants-hint {
  position: absolute;
  /* bottom 12 angeglichen an .ce-pcard__swatches (Pill mit Inhalts-Tiefe).
     Quick-Add sitzt auf 8 wegen seines „leeren" Ghost-Charakters – Visual-
     Center-Trick. Variants-Hint hat ähnliche Inhalts-Tiefe wie Swatches,
     also gleiche bottom-Position. */
  bottom: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 8px 0 10px;
  border-radius: 8px;
  background: transparent;
  font-family: 'Pressura Mono', sans-serif;
  font-size: 11px;
  color: var(--ce-text-secondary);
  white-space: nowrap;
  transition: background 160ms ease;
  pointer-events: none; /* Click fällt durch zur Parent <a class="ce-pcard">. */
}
.ce-pcard__variants-hint i {
  font-size: 14px;
  line-height: 1;
}
.ce-pcard:hover .ce-pcard__variants-hint {
  background: color-mix(in srgb, var(--ce-text-heading) 4%, transparent);
  color: var(--ce-text-heading);
}
.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 Image Slider – Foto-Karussell (ce-image-slider.liquid)
   Slider-Visuals analog ce-hero-slider; Typo analog ce-page-hero.
   ============================================ */
.ce-image-slider__inner {
  display: flex;
  flex-direction: column;
  gap: 0; /* Abstand Header → Slider via header_spacing (margin-bottom am Header) */
}

.ce-image-slider__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Ausrichtung Überschrift (heading_align) */
.ce-image-slider--align-center .ce-image-slider__header { text-align: center; align-items: center; }
.ce-image-slider--align-center .ce-image-slider__lead { margin-left: auto; margin-right: auto; }

.ce-image-slider__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0;
}

/* Größe kommt von der globalen Utility-Klasse (.h2/.h1/.h0/.hxl/.hxxl), wie ce-premium-partner. */
.ce-image-slider__heading {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ce-text-heading);
  margin: 0;
}

/* Subline: gleiche Größe/Breiten-Logik wie ce-premium-partner */
.ce-image-slider__lead {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: var(--ce-fs-intro);
  line-height: var(--ce-lh-snug);
  color: var(--ce-text-body);
  max-width: 600px;
}
.ce-image-slider__lead p { margin: 0 0 0.5em; }
.ce-image-slider__lead p:last-child { margin-bottom: 0; }

.ce-image-slider--lead-narrow .ce-image-slider__lead { max-width: 480px; }
.ce-image-slider--lead-medium .ce-image-slider__lead { max-width: 600px; }
.ce-image-slider--lead-wide  .ce-image-slider__lead { max-width: 900px; }
.ce-image-slider--lead-xwide .ce-image-slider__lead { max-width: 1200px; }

.ce-image-slider__container {
  position: relative;
}

.ce-image-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--ce-radius-md, 12px);
}
.ce-image-slider__track::-webkit-scrollbar { display: none; }
.ce-image-slider__track:focus-visible {
  outline: 2px solid var(--ce-border-strong);
  outline-offset: 2px;
}

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

.ce-image-slider__media {
  width: 100%;
  overflow: hidden;
  border-radius: var(--ce-radius-md, 12px);
  background: #FFFFFF;
}
.ce-image-slider__img,
.ce-image-slider__placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ce-image-slider__caption {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-secondary);
  margin-top: 8px;
}

/* Arrows – auf dem Bild, an den Rändern */
.ce-image-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-image-slider__arrow:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}
.ce-image-slider__arrow--prev { left: 16px; }
.ce-image-slider__arrow--next { right: 16px; }

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

/* Dots + Playpause – unter dem Slider */
.ce-image-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}
.ce-image-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-image-slider__dot:hover { background: var(--ce-text-tertiary); }
.ce-image-slider__dot--active { background: var(--ce-surface-invert); }

.ce-image-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-image-slider__playpause:hover { color: var(--ce-text-heading); }

@media (prefers-reduced-motion: reduce) {
  .ce-image-slider__track { scroll-behavior: auto; }
}


/* ---- CE Café Hours (ce-cafe-hours.liquid): 2-Spalten Foto + Öffnungszeiten ---- */
.ce-cafe-hours__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.ce-cafe-hours--img-right .ce-cafe-hours__media { order: 2; }

/* Spalten-Verhältnis (Bildspalte relativ zum Inhalt) */
.ce-cafe-hours--ratio-image-narrow .ce-cafe-hours__grid { grid-template-columns: 0.8fr 1.2fr; }
.ce-cafe-hours--ratio-image-wide .ce-cafe-hours__grid { grid-template-columns: 1.3fr 0.7fr; }

/* Bildgröße innerhalb der Spalte (S/M/L) – nur im Flat-Modus; auf Cards füllt das Bild. + Rahmen */
.ce-cafe-hours--flat.ce-cafe-hours--imgsize-s .ce-cafe-hours__img { max-width: 55%; margin-inline: auto; }
.ce-cafe-hours--flat.ce-cafe-hours--imgsize-m .ce-cafe-hours__img { max-width: 78%; margin-inline: auto; }
.ce-cafe-hours--imgborder .ce-cafe-hours__img { border: 1px solid var(--ce-border-default); }

/* Card-Darstellung (konsistent mit ce-cta-card --theme-light): page-width = Gutter, __grid = Karte */
.ce-cafe-hours--card .ce-cafe-hours__grid {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  padding: 24px;
  transition: box-shadow var(--ce-transition);
}
.ce-cafe-hours--card .ce-cafe-hours__grid:hover { box-shadow: var(--ce-shadow-card-hover); }

/* Zwei Karten: Bild und Inhalt je in eigener Karte */
.ce-cafe-hours--two-cards .ce-cafe-hours__grid { align-items: stretch; }
.ce-cafe-hours--two-cards .ce-cafe-hours__media,
.ce-cafe-hours--two-cards .ce-cafe-hours__content {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  transition: box-shadow var(--ce-transition);
}
.ce-cafe-hours--two-cards .ce-cafe-hours__media:hover,
.ce-cafe-hours--two-cards .ce-cafe-hours__content:hover { box-shadow: var(--ce-shadow-card-hover); }
.ce-cafe-hours--two-cards .ce-cafe-hours__content { padding: 24px; }
/* Bild füllt seine Karte (cover) → beide Karten gleich hoch, kein Leerraum. */
.ce-cafe-hours--two-cards .ce-cafe-hours__media {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 260px;
}
.ce-cafe-hours--two-cards .ce-cafe-hours__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}
.ce-cafe-hours--two-cards .ce-cafe-hours__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 12px;
  background: var(--ce-surface-card);
}
@media (max-width: 749px) {
  .ce-cafe-hours--two-cards .ce-cafe-hours__media { min-height: 0; aspect-ratio: 3 / 2; }
}

@media (max-width: 749px) {
  .ce-cafe-hours__grid { grid-template-columns: 1fr; gap: 24px; }
  .ce-cafe-hours--img-right .ce-cafe-hours__media { order: 0; }
}

.ce-cafe-hours__media { margin: 0; }
.ce-cafe-hours__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #FFFFFF;
}
.ce-cafe-hours__caption {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-secondary);
  text-align: center;
  margin-top: 10px;
}

.ce-cafe-hours__subheading {
  font-family: 'Pressura', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ce-text-heading);
  margin: 0 0 16px;
}
.ce-cafe-hours__list + .ce-cafe-hours__subheading,
.ce-cafe-hours__note + .ce-cafe-hours__subheading { margin-top: 24px; }

.ce-cafe-hours__list { margin: 0 0 16px; }
.ce-cafe-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ce-border-default);
}
.ce-cafe-hours__day {
  font-family: 'Pressura', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ce-text-body);
}
.ce-cafe-hours__time {
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ce-text-body);
  white-space: nowrap;
}

.ce-cafe-hours__note {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  line-height: 16px;
  color: var(--ce-text-secondary);
  margin: 0 0 24px;
}
.ce-cafe-hours__address {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-body);
  margin: 0 0 20px;
}
.ce-cafe-hours__route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--ce-border-strong);
  border-radius: 8px;
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  color: var(--ce-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ce-cafe-hours__route:hover {
  color: var(--ce-text-heading);
  border-color: var(--ce-border-strong);
}
.ce-cafe-hours__route i { font-size: 16px; }

/* ---- CE Café Social (ce-cafe-social.liquid): dezenter Text + Instagram-Icon ---- */
.ce-cafe-social__inner { text-align: center; }
.ce-cafe-social__text {
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--ce-text-secondary);
  max-width: 560px;
  margin: 0 auto;
}
.ce-cafe-social__text p { margin: 0; }
.ce-cafe-social__text a {
  color: var(--ce-text-heading);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.ce-cafe-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  font-size: 24px;
  color: var(--ce-text-secondary);
  transition: color 0.2s ease;
}
.ce-cafe-social__icon: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--no-divider {
  border-top: 0;
}

.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 {
  /* Pressura 17/28 – Body-Optimierung (siehe ce-category-card__text) */
  font-family: 'Pressura', sans-serif;
  font-size: 17px;
  line-height: 28px;
  font-weight: 300;
  color: var(--ce-text-muted);
  text-align: center;
  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, minmax(0, 1fr));
  gap: 8px;
  justify-items: center;
}

@media screen and (min-width: 750px) {
  .ce-brand-showcase__grid {
    grid-template-columns: repeat(3, minmax(0, 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);
}

/* -- Brand Showcase: Bold variant – voll-opake Original-Logos, größer.
   Grid dynamisch in 2 Zeilen verteilt (cols = ceil(blocks/2) via --brand-cols). */
.ce-brand-showcase--bold .ce-brand-showcase__grid {
  /* Mobile: 2 cols, ungeachtet count */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}

@media (min-width: 750px) {
  .ce-brand-showcase--bold .ce-brand-showcase__grid {
    /* Tablet: 3 cols max, sonst dyn. minmax(0,…) verhindert Track-Blowout durch breite Logos. */
    grid-template-columns: repeat(min(var(--brand-cols, 3), 3), minmax(0, 1fr));
  }
}

@media (min-width: 990px) {
  .ce-brand-showcase--bold .ce-brand-showcase__grid {
    /* Desktop: cols = ceil(blocks/2), max 6 → 2-Zeilen-Verteilung optimal */
    grid-template-columns: repeat(min(var(--brand-cols, 5), 6), minmax(0, 1fr));
  }
}

.ce-brand-showcase--bold .ce-brand-showcase__item {
  opacity: 0.75;
  aspect-ratio: 16 / 9;
  padding: 12px;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ce-brand-showcase--bold .ce-brand-showcase__item:hover,
.ce-brand-showcase--bold .ce-brand-showcase__item:focus-visible {
  opacity: 1;
  transform: scale(1.04);
}

.ce-brand-showcase--bold .ce-brand-showcase__logo {
  max-width: 100%;
  max-height: 100px;
  filter: none;
  mix-blend-mode: multiply;
  transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 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);
  border-radius: var(--ce-radius-sm);
  /* Brand-Kit: Buttons = Pressura Mono (war Pressura nicht-Mono).
     Footer-Pills sind Buttons → an Konvention angeglichen. */
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  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: 'Pressura', 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: 'Pressura', 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 – 2026-05-26: Rückkehr zu aspect-ratio: 1 (E-Commerce-Standard).
   Begründung: Lennys Bildoptimierung exportiert Hochformat-Quellen auf 1:1-Canvas
   mit Padding – bei 1:1-Container greift das nahtlos, kein sichtbarer Whitespace.
   Zusätzlich entschärft mix-blend-mode: multiply auf den Bildern verbleibende
   Whitespace-Kanten. Damit ist der frühere Trade-off aus Iteration 4 (Bild zu
   dominant bei 1-col Density) hinnehmbar, da die Bilder optisch im Card-BG verschmelzen.

   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%;
  aspect-ratio: 1;
  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;
  mix-blend-mode: multiply;
}
.dark .ce-pcard__image img,
.dark .ce-pcard__image svg {
  mix-blend-mode: normal;
}

/* 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;
}

/* Sold-out badge: kompakt, dunkelgrau auf hellgrau, statt voller Preis-Größe */
.ce-pcard__sold-out {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Pressura Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  background: color-mix(in srgb, var(--ce-text-heading) 6%, transparent);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Ausverkauft-Badge: unten rechts auf der Card (Position wie der Quick-Add-Slot),
   da der Preis jetzt immer im Content-Slot steht. Klar lesbares, bordertes Pill. */
.ce-pcard__soldout-badge {
  position: absolute;
  /* 16/16 statt 12/12: gleichmäßiger Eck-Abstand. Das Badge steht bei sold-out
     allein im Slot (Variant-Hint wird dann ausgeblendet), darf also etwas mehr
     Luft nach unten/rechts bekommen, damit es sauber in der Ecke sitzt. */
  bottom: 16px;
  right: 16px;
  z-index: 2;
  font-family: 'Pressura Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

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

/* ============================================
   Quick-Add Button (Product Card)
   Position: absolute, unten rechts auf der Image-Area.
   Conditional rendering – siehe snippets/ce-quick-add.liquid (default-variant + available).
   State machine: data-state="idle|loading|success|error"
   ============================================ */
.ce-pcard__quick-add {
  position: absolute;
  /* User-Feedback: Button saß zu hoch. bottom 12 → 8 bringt ihn auf gleiche
     visuelle Höhe wie die Swatches-Pille (die durch ihre Asymmetrie tiefer
     wirkt – der Button ohne Inhalts-Tiefe muss aktiv nach unten gesetzt werden). */
  bottom: 8px;
  right: 12px;
  z-index: 2;
  display: block;
}

/* Ghost-Variant: transparent, keine Outline, keine Elevation.
   Sitzt visuell auf der Image-Area, ist aber dezent. Hover/Focus reveals subtle bg. */
.ce-pcard__quick-add-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ce-text-secondary);
  cursor: pointer;
  box-shadow: none;
  transition: background 160ms ease, color 160ms ease;
  font-family: inherit;
}

/* Hover: card-hover statt button-hover, damit Quick-Add UND Swatches
   konsistent denselben Hover-Effekt zeigen wenn der User über die Card fährt.
   :hover auf dem direkten Button bleibt für Tastatur-Tab-Wege funktional. */
.ce-pcard:hover .ce-pcard__quick-add-btn,
.ce-pcard__quick-add-btn:hover {
  background: color-mix(in srgb, var(--ce-text-heading) 4%, transparent);
  color: var(--ce-text-heading);
}

.ce-pcard__quick-add-btn:focus-visible {
  outline: 2px solid var(--ce-text-heading);
  outline-offset: 2px;
}

.ce-pcard__quick-add-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.ce-pcard__quick-add-icon {
  font-size: 16px;
  line-height: 1;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.ce-pcard__quick-add-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: ce-pcard-qa-spin 0.7s linear infinite;
}

@keyframes ce-pcard-qa-spin {
  to { transform: rotate(360deg); }
}

/* State: idle (default) – bag icon visible */
.ce-pcard__quick-add[data-state='idle'] .ce-pcard__quick-add-icon--idle { opacity: 1; }

/* State: loading – spinner */
.ce-pcard__quick-add[data-state='loading'] .ce-pcard__quick-add-spinner { opacity: 1; }

/* State: success – green check (kurz, 1.5s) – Feedback braucht Sichtbarkeit, daher gefüllt */
.ce-pcard__quick-add[data-state='success'] .ce-pcard__quick-add-icon--success { opacity: 1; }
.ce-pcard__quick-add[data-state='success'] .ce-pcard__quick-add-btn {
  background: #1F8A3B;
  color: #FFFFFF;
}

/* State: error – red cross */
.ce-pcard__quick-add[data-state='error'] .ce-pcard__quick-add-icon--error { opacity: 1; }
.ce-pcard__quick-add[data-state='error'] .ce-pcard__quick-add-btn {
  background: #C0392B;
  color: #FFFFFF;
}

/* Compact variant – kleinerer Button, matched compact image-padding (12px) */
.ce-pcard--compact .ce-pcard__quick-add { bottom: 12px; right: 12px; }
.ce-pcard--compact .ce-pcard__quick-add-btn { width: 36px; height: 36px; }
.ce-pcard--compact .ce-pcard__quick-add-icon { font-size: 16px; }

/* ============================================
   Pickup-Notice – Hinweise für Produkte mit Tag "nur-Abholung"
   3 Varianten: pdp (Info-Block), card (Badge), cart (Banner)
   Default-Farbschema: warmes Amber (sichtbar, ohne alarmistisch).
   ============================================ */

/* PDP-Variante: Info-Block direkt unter Titel */
.ce-pickup-notice--pdp {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: color-mix(in srgb, #F4A636 12%, var(--ce-surface-card));
  border-radius: 6px;
}

.ce-pickup-notice__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: #B47812;
  line-height: 1.2;
}

.ce-pickup-notice__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-pickup-notice__title {
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ce-text-heading);
  letter-spacing: 0.02em;
}

.ce-pickup-notice__text {
  font-family: 'Pressura', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ce-text-secondary);
}

/* Card-Badge: kompakt, oben links auf Image */
.ce-pickup-notice--card {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: color-mix(in srgb, #F4A636 18%, var(--ce-surface-card));
  color: #8A5A0A;
  font-family: 'Pressura Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}

.ce-pickup-notice--card i {
  font-size: 12px;
  line-height: 1;
}

/* Cart-Banner: Banner über den Cart-Items */
.ce-pickup-notice--cart {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: color-mix(in srgb, #F4A636 10%, var(--ce-surface-card));
  border-radius: 6px;
}

/* ============================================
   Color Swatches (Product Card)
   Affordance für Multi-Variant-Produkte mit Farboption – Info statt Action.
   ============================================ */
.ce-pcard__swatches {
  position: absolute;
  /* Symmetrisches Padding für eine ausgewogene Hover-Pill um den Stack.
     User-Feedback: diese Geometrie ist die richtige. */
  bottom: 12px;
  right: 12px;
  height: 32px;
  /* Padding-right größer (12) damit das "+2" mehr Atemraum zur rechten
     Pill-Kante hat – User-Feedback. Left bleibt 8 für die Dots. */
  padding: 0 12px 0 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0; /* Overlap via negative margin auf nicht-ersten Dots */
  border-radius: 8px;
  background: transparent;
  transition: background 160ms ease;
  /* pointer-events default (auto) damit native title-Tooltips auf Dots feuern.
     Click bubbled durch Parent <a class="ce-pcard"> zur PDP – kein Conflict. */
}

/* Card-Hover triggert dieselbe Hintergrund-Form wie beim Quick-Add */
.ce-pcard:hover .ce-pcard__swatches {
  background: color-mix(in srgb, var(--ce-text-heading) 4%, transparent);
}

.ce-pcard__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 0;
  /* Ring auf allen Dots: Trennung im Overlap-Stack und gegen Bild-Hintergrund */
  border: 1.5px solid #FFFFFF;
}

/* Overlap: jeder Dot außer dem ersten rutscht ~40% nach links unter den vorigen.
   DOM-Reihenfolge gewinnt visuell (späterer Dot überlappt früheren). */
.ce-pcard__swatch + .ce-pcard__swatch {
  margin-left: -6px;
}

/* Legacy --ring modifier behält Kompatibilität, ist aber jetzt no-op */
.ce-pcard__swatch--ring { border-color: var(--ce-border-default); }

.ce-pcard__swatch-more {
  font-family: 'Pressura Mono', sans-serif;
  font-size: 10px;
  color: var(--ce-text-secondary);
  line-height: 1;
  margin-left: 6px; /* echte Lücke vom Overlap-Stack zum Counter */
  white-space: nowrap;
}

/* Compact: padding-right größer für +2-Atemraum, links 6 */
.ce-pcard--compact .ce-pcard__swatches { bottom: 12px; right: 12px; height: 36px; padding: 0 10px 0 6px; }
.ce-pcard--compact .ce-pcard__swatch { width: 12px; height: 12px; }
.ce-pcard--compact .ce-pcard__swatch + .ce-pcard__swatch { margin-left: -5px; }
.ce-pcard--compact .ce-pcard__swatch-more { font-size: 9px; margin-left: 5px; }

/* Compact variant – Cart-Empfehlungen, kleinere Padding/Schrift */
.ce-pcard--compact {
  border-radius: 12px;
}
.ce-pcard--compact .ce-pcard__image {
  aspect-ratio: 1;
  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: 'Pressura', 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: 'Pressura', 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;
}

/* Hover: Shadow-Pop (Brand-Kit-Standard, konsistent mit .card--card und .ce-card).
   Base-Shadow im Ruhezustand (oben), --ce-shadow-card-hover beim Hover. */
.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)
   ============================================ */

/* Breadcrumb-Wrapper auf Sub-Pages übernimmt den USP-Bar-Slot visuell
   (gleiche Optik: muted BG, Border, zentriertes inner). USP-Bar rendert
   ihrerseits nur auf der Startseite → kein Doppel-Bar.
   Inner-Container matched .page-width (1140px / 24px mobile, 0 desktop) →
   Breadcrumb fluchtet exakt mit Logo + Header-Inhalt. */
/* ---- Café-Page: warmer Surface (Canvas + Breadcrumb + Footer) ----
   Token-basiert → dark-safe (--ce-surface-page-warm swappt im .dark-Block).
   Scope: body.template-suffix-cafe (an page.cafe.json gebunden). */
body.template-suffix-cafe.cafe-tint {
  --ce-surface-page: var(--ce-surface-page-warm);
  /* Ton-in-Ton: Borders/Divider/Icons + muted Flächen warm statt kühl-grau
     (Outline-Button, Footer-/Breadcrumb-Divider, Social-Icons, Footer-Suchfeld) */
  --ce-surface-muted:  #F2EAE7;
  --ce-border-default: #EBE5E3;
  --ce-border-strong:  #D8CFCC;
  --ce-border-muted:   #F1EAE8;
  --ce-text-secondary: #5F5854;
  --ce-text-tertiary:  #756F69;
  --ce-dotted-border:  rgba(70, 45, 40, 0.10);
}
.dark body.template-suffix-cafe.cafe-tint {
  /* Mauve-kühle Pendants der Dark-Tokens (kohärent zum dunklen Mauve-Canvas) */
  --ce-surface-muted:  #2A2430;
  --ce-border-default: #423C4A;
  --ce-border-strong:  #534C5C;
  --ce-border-muted:   #2F2937;
  --ce-text-secondary: #B8B2BE;
  --ce-text-tertiary:  #868090;
  --ce-dotted-border:  rgba(248, 245, 252, 0.10);
}
/* Breadcrumb + Footer: nur minimal dunklerer Tint im selben Ton, setzt sich dezent vom Canvas ab */
body.template-suffix-cafe.cafe-tint .ce-breadcrumb-wrapper { background: var(--ce-surface-page-warm-2); }
body.template-suffix-cafe.cafe-tint .ce-footer { background: var(--ce-surface-page-warm-2); }

/* Speisekarte bleibt auch im Dark-Mode hell (Paper-Look): dunkel auf hellem Mauve.
   Token-Re-Scope nur auf der Karte → Text, Divider und innere Linie bleiben dunkel. */
.dark body.template-suffix-cafe.cafe-tint .ce-menu-list__card {
  --ce-surface-card:   #F4EFF2;
  --ce-text-heading:   #1E1A24;
  --ce-text-body:      #2B2630;
  --ce-text-secondary: #6E6776;
  --ce-text-tertiary:  #8A8490;
  --ce-border-strong:  #CDC4CE;
  --ce-border-default: #DCD4DD;
}

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

.ce-breadcrumb-wrapper > * {
  max-width: 1204px;
  margin: 0 auto;
  padding: 0 24px;
}

@media screen and (min-width: 750px) {
  .ce-breadcrumb-wrapper > * {
    padding: 0 32px;
  }
}

/* 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;
    min-block-size: 0;
  }
  /* 32px min-block-size ist ein Mobile-Touch-Target. Auf Desktop entfällt es,
     damit die Breadcrumb-Bar dieselbe Höhe wie die USP-Bar hat (Padding 12px + Text). */
  .ce-breadcrumb__item { min-block-size: 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; }
}

/* ============================================
   Breadcrumb – rechter Slot: Verwandte Bereiche (Quer-Links)
   Trail links, Related-Links rechts (space-between). Desktop-only.
   Quelle: Shopify-Menü via Setting 'breadcrumb_related_menu'.
   ============================================ */
.ce-breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Trail darf schrumpfen/scrollen, Related bleibt intrinsisch breit */
.ce-breadcrumb-row > .ce-breadcrumb {
  min-width: 0;
  flex: 1 1 auto;
}

/* Mobil: kein Platz – Related entfällt komplett (Trail scrollt wie gehabt) */
.ce-breadcrumb__related {
  display: none;
}
@media (min-width: 768px) {
  .ce-breadcrumb__related {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Darf schrumpfen, damit die Link-Liste bei Überlauf scrollt statt abgeschnitten zu werden. */
    flex: 0 1 auto;
    min-width: 0;
    font-family: 'Pressura Mono', monospace;
    font-size: 11px;
    line-height: 16.5px;
    white-space: nowrap;
  }
}
.ce-breadcrumb__related-label {
  color: var(--ce-text-tertiary);
  flex: 0 0 auto;
}
.ce-breadcrumb__related-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Überlauf horizontal scrollen statt abschneiden; Scrollbar ausblenden (wie der Trail). */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ce-breadcrumb__related-list::-webkit-scrollbar { display: none; }
/* Trennpunkt zwischen den Links – inline mit symmetrischer Margin, damit links und
   rechts vom Middot exakt gleich viel Platz ist (vorher: flex-gap + padding + absoluter
   Middot → ungleich). */
.ce-breadcrumb__related-item + .ce-breadcrumb__related-item::before {
  content: '\00B7';
  margin: 0 12px;
  color: var(--ce-text-tertiary);
}
.ce-breadcrumb__related-link {
  /* Muted/zurückhaltend, aber discoverable – Hover hebt klar hervor. */
  color: var(--ce-text-tertiary);
  text-decoration: none;
  transition: color 150ms ease;
}
.ce-breadcrumb__related-link:hover {
  color: var(--ce-text-heading);
}

/* ============================================
   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;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ce-media-aspect, 1);
  overflow: hidden;
}

/* Sizing-Chain-Reset für PDP-Media (Box-in-Box-Drift, 2026-05-26):
   Dawn rendert .product-media-container mit Inline --ratio aus featured_media.aspect_ratio,
   schrumpft damit den Container unter unsere 1:1-Vorgabe. Plus: <modal-opener> ist ein
   Custom Element (display: inline by default), bricht die Höhen-Vererbung.
   Fix: alle Zwischenebenen auf 100% Breite, display: block, aspect-ratio: 1 forcieren. */
.product__media-wrapper .product__media-item .product-media-container {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ce-media-aspect, 1);
  padding-top: 0 !important;
}
/* 2026-05-29: modal-opener stapelt alle Kinder in EINER Grid-Zelle.
   Vorher (display:block) standen Zoom-Icon-Badge + loading-spinner im normalen
   Fluss VOR dem .media-Div und drückten es nach unten → weißer Rand OBEN.
   Grid-Stack = kein Push mehr, Bild füllt die Zelle randlos. */
.product__media-wrapper .product__media-item modal-opener,
.product__media-wrapper .product__media-item .product__modal-opener {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  height: 100%;
}
.product__media-wrapper .product__media-item modal-opener > *,
.product__media-wrapper .product__media-item .product__modal-opener > * {
  grid-area: stack;
  min-width: 0;
  min-height: 0;
}
/* Zoom-Badge klein oben-rechts statt cell-stretch; Spinner zentriert */
.product__media-wrapper .product__media-item .product__media-icon {
  place-self: start end;
}
.product__media-wrapper .product__media-item .loading-spinner {
  place-self: center;
}

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

/* 2026-05-29: Drei-Zustände-Modell via Alt-Text-Schalter (object-fit-Lever).
   Default (kein Tag)  = freigestelltes Produkt: contain, Container gibt weißen Rahmen (Padding-Lever unten).
   [cover]             = lifestyle füllend: cover (randlos, mittig beschnitten).
   [bleed]             = lifestyle vollflächig: contain, kein Rahmen (Padding-Reset unten).
   Liquid (product-media-gallery.liquid) setzt --cover / --bleed. */
.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: 0;
}
.product__media-wrapper .product__media-item--cover .media img {
  object-fit: cover;
}

/* 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: 'Pressura', 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.
   display:flex + align-items:center zentriert das 36px-Quantity-Input in
   der 48px-Action-Row – gleiche Y-Achse wie der ATC-Button. */
.ce-pdp-actions .product-form__quantity {
  margin: 0 !important;
  flex: 0 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
}

.ce-pdp-actions .price-per-item__container {
  height: 48px;
  display: flex;
  align-items: center;
}

.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);
}

/* Ausverkauft / nicht verfügbar: sichtbar deaktiviert – schlägt das invert-!important oben. */
.product__info-wrapper .product-form__submit:disabled,
.product__info-wrapper .product-form__submit[disabled] {
  background: var(--ce-surface-muted) !important;
  color: var(--ce-text-muted) !important;
  cursor: not-allowed;
}
.product__info-wrapper .product-form__submit:disabled:hover,
.product__info-wrapper .product-form__submit[disabled]:hover {
  background: var(--ce-surface-muted) !important;
  transform: none;
}

/* Sekundäre Beratungs-Aktion NEBEN dem Warenkorb-Button (gleiche Flex-Reihe in
   .ce-pdp-actions, Commercial/High-Ticket). ATC-Wrapper und CTA teilen die Restbreite
   nach dem Mengen-Stepper gleichmäßig; Outline-Stil hält den CTA klar sekundär. */
.ce-pdp-actions:has(> .ce-pdp-beratung) > div:not(.product-form__quantity):not(.ce-pdp-beratung):not(.shopify-app-block) {
  flex: 1 1 0;
  min-width: 0;
}
.ce-pdp-beratung {
  flex: 1 1 0;
  min-width: 0;
}
.ce-pdp-beratung .ce-btn-outline {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}
/* ATC-Button seine (gewachsene) Zelle füllen lassen, damit er gleich breit neben dem
   Beratung-Button steht statt links zu kleben (.ce-atc-stack ist sonst flex:0 1 auto). */
.ce-pdp-actions:has(> .ce-pdp-beratung) .ce-atc-stack {
  flex: 1 1 0;
}
/* Gleiche Höhe wie der Beratung-Button (44px), damit beide auf einer Linie sitzen. */
.ce-pdp-actions:has(> .ce-pdp-beratung) .product-form__submit {
  min-height: 44px;
}
/* Responsive Button-Labels in der Action-Reihe: volle Labels default, kurze
   ("Warenkorb" / "Beratung") sobald die Reihe eng wird. "In den Warenkorb" bricht
   ab ~510px Container-Breite um → Umschaltpunkt bei 520px (Container-Query, damit
   layout-unabhängig statt viewport-geraten). */
.ce-pdp-actions { container-type: inline-size; }
.ce-pdp-actions .ce-btn-label-short { display: none; }
@container (max-width: 520px) {
  .ce-pdp-actions .ce-btn-label-full { display: none; }
  .ce-pdp-actions .ce-btn-label-short { display: inline; }
}
/* Mobile: drei Elemente nebeneinander wird zu eng → CTA bricht in eigene Zeile, full-width. */
@media screen and (max-width: 749px) {
  .ce-pdp-actions:has(> .ce-pdp-beratung) { flex-wrap: wrap; }
  .ce-pdp-actions:has(> .ce-pdp-beratung) .ce-pdp-beratung { flex-basis: 100%; }
}

/* ── Brevo/PushOwl Back-in-Stock "Benachrichtige mich!"-Banner – on-brand.
   Selektoren via DOM-Inspect verifiziert (2026-06-04, KB90 PDP). PushOwl setzt
   den Button-Background per Inline-!important (#09090B ≈ Brand-Invert #18191A,
   optisch deckungsgleich, nicht theme-seitig überschreibbar). Schrift, Radius,
   Größe und Spacing richten wir auf das CE-Button-System aus (Pressura Mono,
   radius 8px, full-width, 44px). ── */
.pushowl-embedded-form-container .pushowl-optin-button {
  font-family: 'Pressura Mono', 'GT Pressura Mono', monospace !important;
  font-size: var(--ce-font-size-button-outline, 13px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 10px 0 0 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  /* Outlined-Stil: transparenter BG + Border + dunkler Text – sitzt an der Buy-Position
     (bei Ausverkauf ersetzt er den deaktivierten „In den Warenkorb"-Button). */
  background: transparent !important;
  color: var(--ce-text-heading) !important;
  border: 1px solid var(--ce-border-strong) !important;
  box-shadow: none !important;
  transition: border-color 150ms ease, transform 100ms ease;
}
.pushowl-embedded-form-container .pushowl-optin-button:hover {
  border-color: var(--ce-text-heading) !important;
}
.pushowl-embedded-form-container .pushowl-optin-button:active {
  transform: scale(0.98);
}

/* ── BIS-Button („Benachrichtige mich!") in die Buy-Reihe, NEBEN den Ausverkauft-Button.
   Der PushOwl-App-Block sitzt im block_order zwischen quantity_selector und buy_buttons,
   liegt also als Flex-Item in .ce-pdp-actions. order:9 schiebt ihn hinter Cart + Beratung.
   flex-wrap erlaubt, dass er bei vollen Reihen (Espresso: qty+cart+beratung) full-width
   umbricht. Bei Sold-out füllt er den freien Platz neben „Ausverkauft". ── */
.ce-pdp-actions { flex-wrap: wrap; row-gap: 10px; align-items: stretch; }
/* BIS-Button content-width (nur so breit wie der Text) und über align-items:stretch exakt so
   hoch wie der Nachbar-Button („Ausverkauft"/Cart). order:9 schiebt ihn ans Reihen-Ende.
   flex-wrap bricht ihn bei vollen Reihen (Espresso mit Beratung) automatisch um. */
.ce-pdp-actions > .shopify-app-block {
  order: 9;
  flex: 0 0 auto;
  display: flex;
}
/* Ausverkauft: Mengen-Counter ausblenden – bei nicht kaufbarem Produkt sinnlos. */
.ce-pdp-actions:has(.product-form__submit[disabled]) > .product-form__quantity { display: none !important; }

/* Variant-Picker inline: Label „VERSION:" links, Toggle direkt daneben in einer Zeile
   (nur Nicht-Farb-Optionen; Farben behalten das Label oben + den Wert). */
.product-form__input--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border: 0;
  margin: 0 0 4px;
  padding: 0;
}
/* <legend> rendert in Flex-Containern als separate Caption (Quirk). display:contents löst
   die Legend-Box auf → der Label-Text fließt als Flex-Item neben den Toggle. */
.product-form__input--inline > legend {
  display: contents;
}
.ce-pdp-actions > .shopify-app-block .pushowl-embedded-form-container,
.ce-pdp-actions > .shopify-app-block .pushowl-brevo-bis-form { width: auto; display: flex; }
.ce-pdp-actions > .shopify-app-block .pushowl-optin-button {
  margin: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Espresso: dort ist der Cart/Ausverkauft-Button 44px hoch (Beratung-Regel) → BIS angleichen. */
.ce-pdp-actions:has(.ce-pdp-beratung) > .shopify-app-block .pushowl-optin-button {
  min-height: 44px !important;
}
.pushowl-embedded-form-container .pushowl-optin-button .button-content {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* ── Ausgeklapptes BIS-Formular (#pushowl-bis-shadow-host > form.pushowl-bis-form-container):
   Titel + E-Mail-Input + Submit. Selektoren via DOM-Inspect verifiziert (2026-06-04, KB90 PDP).
   Hinweis: PushOwl re-applied den Input-border-radius (6px) per JS-Re-Render → nicht via CSS
   überschreibbar (6px ≈ 8px, optisch deckungsgleich); alles Übrige greift. ── */
.pushowl-bis-form-container #title {
  font-family: 'Pressura', 'GT Pressura', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ce-text-heading, #18191A) !important;
  padding-block-end: 12px !important;
}
.pushowl-bis-form-container .tree-rendered-text-input {
  font-family: 'Pressura', 'GT Pressura', sans-serif !important;
  font-size: 16px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
}
.pushowl-bis-form-container .pushowl-optin-button {
  font-family: 'Pressura Mono', 'GT Pressura Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
  min-height: 44px !important;
  margin-top: 8px !important;
  background: var(--surface-invert, #18191A) !important;
  color: var(--text-on-invert, #FFFFFF) !important;
}
.pushowl-bis-form-container .pushowl-optin-button .button-content {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* 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: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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;
}

/* Cart-item-error: nur sichtbar machen, wenn tatsächlich ein Fehler-Text drinsteht.
   Vorher reservierte der leere Error-Block Platz unter den Quantity-Buttons und
   verschob die optische Mitte → Buttons sahen höher aus als der Preis rechts.
   :has() ist seit 2023 broad supported (Safari 15.4+, Chrome 105+, Firefox 121+). */
.cart-item__error {
  display: none;
}
.cart-item__error:has(.cart-item__error-text:not(:empty)) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* 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 – flacher Hintergrund matched page-surface (kein Fade) */
.cart__footer {
  padding: 24px 0 96px;
  background: var(--ce-surface-page);
}

.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: 'Pressura', 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: 'Pressura', 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, '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, '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, '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, '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, '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, '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, '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: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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: 12px 0 24px; 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; }

/* GEO/SEO-Discovery im Empty-State der Suche */
.ce-search-page__discover { max-width: 760px; margin: 0 auto; padding: 0 0 48px; text-align: center; }
.ce-search-page__discover-group { margin: 0 0 24px; }
.ce-search-page__discover-label { font-family: 'Pressura Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ce-text-secondary); margin: 0 0 12px; }
.ce-search-page__discover-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ce-search-page__chip {
  display: inline-flex;
  align-items: center;
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  color: var(--ce-text-heading);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--ce-border-default);
  border-radius: 999px;
  transition: border-color var(--ce-transition), background var(--ce-transition);
}
.ce-search-page__chip:hover { border-color: var(--ce-border-strong); background: var(--ce-surface-muted); }
.ce-search-page__discover-note { font-family: 'Pressura', sans-serif; font-size: 14px; line-height: 1.6; color: var(--ce-text-secondary); margin: 24px auto 0; max-width: 60ch; }

.ce-search-page__empty-note {
  font-family: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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;
  /* Weißer Rahmen um freigestellte Produkte (Default-Zustand, kein Alt-Text-Tag).
     Prozent = relativ zur Slot-Breite, skaliert über Breakpoints. */
  --ce-product-frame: 12%;
}

/* ---------- 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);
}

/* 2026-05-29: Padding-Lever (Drei-Zustände-Modell).
   Default (freigestelltes Produkt) = weißer Rahmen via Padding. Der Rahmen ist
   weiß, weil .product__media-wrapper #ffffff ist und .product__media transparent.
   [cover] / [bleed] (lifestyle) = Rahmen-Reset auf 0 → Bild bis an den Frame-Rand.
   Gewinnt via !important über ce-components.css:6108. */
.product__media,
.product__media.media,
.product__media.media--transparent {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--ce-product-frame, 8%) !important;
}
.product__media-item--cover .product__media,
.product__media-item--bleed .product__media {
  padding: 0 !important;
}

.product__media img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Fallback; --cover-Variante in ce-components.css:6155-Block steuert cover */
  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: 100%;
    max-height: 100%;
  }

  /* 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, '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, '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;
  /* Dezenter Divider oben statt Mask-Fade – markiert Scroll-Beginn klar.
     Bottom-Fade als Scroll-Affordance bleibt. */
  padding: 16px 8px 16px;
  border-top: 1px solid var(--ce-border-default, rgba(24, 25, 26, 0.08));
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0,
    black calc(100% - 24px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    black 0,
    black calc(100% - 24px),
    transparent 100%
  );
}

.dark .ce-leasing-overlay__body {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* 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, '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, '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, '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, '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, '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, '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, 'Pressura', sans-serif) !important;
}

/* Option-Items: Coffee-Elements on-brand statt React-Select-Default-Blau.
   Maximal robuste Selektoren mit case-insensitive Flag (CSS Selectors L4):
   - React-Select v4 emotion: css-XXX-Option (Capital O)
   - React-Select v5 BEM: select__option--is-selected
   - LeasingGo Custom-Prefix: lgo__option--isSelected (CamelCase möglich)
   - ARIA-Fallback: [role="option"][aria-selected="true"] für jeden Setup */
.ce-leasing-overlay [class*="option" i],
.ce-leasing-overlay [role="option"] {
  padding: 10px 14px !important;
  font-family: var(--ce-font-pressura-mono, 'Pressura Mono', monospace) !important;
  font-size: 13px !important;
  color: var(--lgo-ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: background-color 120ms ease;
}

/* Focused (Keyboard) und Hover – hellgrau */
.ce-leasing-overlay [class*="focused" i]:not([class*="selected" i]),
.ce-leasing-overlay [class*="option" i]:hover:not([aria-selected="true"]),
.ce-leasing-overlay [role="option"]:hover:not([aria-selected="true"]),
.ce-leasing-overlay [role="option"][data-focused="true"]:not([aria-selected="true"]) {
  background: var(--lgo-surface-hover) !important;
  background-color: var(--lgo-surface-hover) !important;
  color: var(--lgo-ink) !important;
}

/* Selected – schwarz + weiße Schrift. !important schlägt emotion-inline-styles. */
.ce-leasing-overlay [class*="selected" i],
.ce-leasing-overlay [aria-selected="true"][role="option"],
.ce-leasing-overlay [role="option"][aria-selected="true"] {
  background: var(--lgo-ink) !important;
  background-color: 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, '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, '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: 160px !important;
  padding: 8px 16px !important;
  margin: 8px auto 0 !important;
  background: var(--lgo-ink) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: 'Pressura Mono', monospace !important;
  font-size: 13px !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, '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: literal "?" in rundem Border-Kreis.
   Bewusst kein Icon-Font – Pressura-Font ist garantiert geladen, das Glyph
   sitzt rendering-stabil und ist klar als "Hilfe"-Affordance lesbar.
   Vorgängerversion nutzte ri-information-line, das Icon war je nach Font-Load
   nicht erkennbar. */
.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: 1px solid currentColor !important;
  border-radius: 50% !important;
  color: rgba(24, 25, 26, 0.55) !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: var(--ce-font-pressura, 'Pressura', sans-serif) !important;
  content: "?" !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: inherit !important;
  margin-top: -1px; /* optischer Zentrierungs-Adjust */
}

/* Tooltip-Popover: schwarz, on-brand, schmal genug damit nicht links abgeschnitten */
.ce-leasing-overlay [role="tooltip"],
.ce-leasing-overlay [class*="lgo-tooltip"][class*="-popover"],
.ce-leasing-overlay [class*="Tooltip" i],
.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, '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: 200px !important;
  z-index: 9999 !important;
}

/* =========== 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*="option" i],
.dark .ce-leasing-overlay [role="option"] {
  color: #fafafa !important;
}
.dark .ce-leasing-overlay [class*="focused" i]:not([class*="selected" i]),
.dark .ce-leasing-overlay [role="option"]:hover:not([aria-selected="true"]),
.dark .ce-leasing-overlay [role="option"][data-focused="true"]:not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .ce-leasing-overlay [class*="selected" i],
.dark .ce-leasing-overlay [aria-selected="true"][role="option"],
.dark .ce-leasing-overlay [role="option"][aria-selected="true"] {
  background: #fafafa !important;
  background-color: #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: '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);
}

/* ---- Hint: Leasing vs. Mietkauf Mini-Erklärung unter der Intro ---- */
.ce-leasing-overlay__hint {
  font-family: 'Pressura', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(24, 25, 26, 0.6);
  padding: 0 40px 24px 40px;
  margin: 0;
}

.ce-leasing-overlay__hint strong {
  color: rgba(24, 25, 26, 0.9);
  font-weight: 600;
}

.ce-leasing-overlay__hint-link {
  display: inline-block;
  margin-top: 6px;
  color: rgba(24, 25, 26, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}

.ce-leasing-overlay__hint-link:hover,
.ce-leasing-overlay__hint-link:focus-visible {
  color: var(--ce-text-heading, #18191a);
  text-decoration-thickness: 1.5px;
}

.dark .ce-leasing-overlay__hint {
  color: rgba(255, 255, 255, 0.6);
}

.dark .ce-leasing-overlay__hint strong {
  color: rgba(255, 255, 255, 0.9);
}

.dark .ce-leasing-overlay__hint-link {
  color: rgba(255, 255, 255, 0.7);
}

.dark .ce-leasing-overlay__hint-link:hover,
.dark .ce-leasing-overlay__hint-link:focus-visible {
  color: #fafafa;
}

/* ---- 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: '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 {
  /* Top-Padding für labeled wrapper. Label liegt absolut auf top: -20px. */
  margin-top: 16px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Gekoppelte Feldpaare (Anzahlung Euro+%, Restwert Euro+%) tight coupling:
   Der "nackte" Sibling-Wrapper ohne eigenes Label gehört zum vorherigen Input.
   UX-Best-Practice für unit-gekoppelte Inputs: 4–8px Gap.

   Trick: die labelled Row bekommt margin-bottom 8px (statt 18px),
   wenn ihr eine naked-wrapper-Row folgt. Plus naked-wrapper margin-top: 0. */
.ce-leasing-overlay .lgo-row:has(+ .lgo-row > .lgo-col-12 > .lgo-input-wrapper:not(:has(.lgo-input-label))) {
  margin-bottom: 8px !important;
}
.ce-leasing-overlay .lgo-input-wrapper:not(:has(.lgo-input-label)) {
  margin-top: 0 !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: 'Pressura', 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: 'Pressura', 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: 'Pressura', 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
   ========================================================================= */
/* Inhalts-Breite (konsistent zu ce-rich-text: 680 / 840 / voll).
   Innerhalb page-width zentriert; bei 2 Spalten greift im Liquid „wide". */
.ce-faq__container { margin-inline: auto; }
.ce-faq__container--width-narrow { max-width: 680px; }
.ce-faq__container--width-medium { max-width: 840px; }
/* „Voll" = Page-Width (1204px, identisch zu .page-width), NICHT randlos – sonst sind die
   2-Spalten-FAQ-Seiten breiter als Hero/Breadcrumb. `none` war ein Bug (Label sagt
   „Voll (Page-Width)"). */
.ce-faq__container--width-wide { max-width: 1204px; }

.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--size-s { font-size: var(--ce-headline-s); }
.ce-faq__heading--size-m { font-size: var(--ce-headline-m); }
.ce-faq__heading--size-l { font-size: var(--ce-headline-l); }
.ce-faq__heading--size-xl { font-size: var(--ce-headline-xl); }
.ce-faq__heading--align-left { text-align: left; }
.ce-faq__heading--align-center { text-align: center; }

.ce-faq__heading:last-child {
  margin-bottom: var(--ce-faq-heading-gap, 3rem);
}

.ce-faq__subheading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body, 16px);
  line-height: 1.55;
  color: var(--ce-text-body);
  margin: 0 0 var(--ce-faq-heading-gap, 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);
}

/* Flache Variante (ohne Karte): Card-Container neutralisieren, damit das
   Akkordeon direkt auf dem Seitenhintergrund sitzt (vgl. WP-Original auf
   barista-kurse). Header + Items behalten ihr Styling. */
.ce-faq--style-flat .ce-faq__category {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.ce-faq--style-flat .ce-faq__categories--cols-2 .ce-faq__category:hover {
  transform: none;
  box-shadow: none;
}

.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: 'Pressura', 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;
}
/* Download-Gruppen ab Tablet zweispaltig – analog zu den 2-spaltigen FAQ-Kategorie-Cards,
   damit die Seite die Breite füllt statt schmal gestapelt zu wirken. */
@media (min-width: 768px) {
  .ce-downloads__categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
}

.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')
   2026-05-26 Restyling: dezenter (helleres Grün, kleiner), mit eigener Zeile
   unter dem Titel (display: flex + width: fit-content) – konsistent in Cart + PDP. */
.ce-product-note {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.375rem;
  margin: 0.625rem 0 0;
  padding: 0.25rem 0.625rem;
  background: color-mix(in srgb, var(--ce-emerald-200) 45%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--ce-emerald-300) 50%, #FFFFFF);
  border-radius: 999px;
  font-family: var(--ce-font-mono, 'Pressura Mono', monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--ce-emerald-700, #047857);
}
.ce-product-note__icon {
  display: inline-flex;
  font-size: 0.875rem;
  color: var(--ce-emerald-500);
}

/* Pickup-Variante (amber) – analoge Geometrie, andere Semantik */
.ce-product-note--pickup {
  background: color-mix(in srgb, #F4A636 18%, #FFFFFF);
  border-color: color-mix(in srgb, #F4A636 35%, #FFFFFF);
  color: #8A5A0A;
}
.ce-product-note--pickup .ce-product-note__icon {
  color: #B47812;
}

/* Variant-Variante (neutral) – z.B. Farbe oder andere Optionen */
.ce-product-note--variant {
  background: var(--ce-surface-page, #F4F4F5);
  border-color: var(--ce-border-default, #E4E4E7);
  color: var(--ce-text-heading, #18191A);
}
.ce-product-note__swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ce-border-default, #E4E4E7) 60%, #000000);
  flex-shrink: 0;
}

/* Line-Item Badges Container – Flex-Row mit Wrap */
.ce-line-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}
.ce-line-item-badges > .ce-product-note {
  margin-top: 0;
}

/* =========================================================================
   Leasingrechner (Inline-Schnellkalkulator auf PDP) – Tooltip-Overflow-Fix
   -------------------------------------------------------------------------
   Hintergrund: LeasingGo liefert native Info-Tooltips an "gewünschte Anzahlung"
   und "gewünschter Restwert". Im Coffee-Elements-Theme wurde der Tooltip-Popover
   bislang durch overflow:hidden des Calculator-Containers abgeschnitten und nicht
   on-brand gestylt (nur die .ce-leasing-overlay-Modal-Variante hatte Styles).

   Dieser Block:
   1. Erlaubt Overflow auf Wrapper + Calculator-Container, damit der Tooltip
      über die Rechner-Kante ragen darf.
   2. Spiegelt die Modal-Tooltip-Styles auf die Inline-Variante (gleiche optische Sprache).

   Notion: #16 (Infokästchen abgeschnitten), löst #18 (Anzahlungsspannen-Erklärung) mit.
   Sprint: Leasingrechner UX-Überarbeitung.
   ========================================================================= */

.ce-leasingo-wrap,
.ce-leasingo-calc,
.ce-leasingo-wrap .leasingo-calculator {
  overflow: visible !important;
}

/* Tooltip-Trigger-Icon: literal "?" in rundem Border-Kreis (analog Modal). */
.ce-leasingo-wrap .lgo-tooltip-trigger,
.ce-leasingo-wrap [class*="lgo-tooltip"] > :first-child,
.ce-leasingo-wrap .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: 1px solid currentColor !important;
  border-radius: 50% !important;
  color: rgba(24, 25, 26, 0.55) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  position: relative;
  cursor: help;
  vertical-align: middle;
}

.ce-leasingo-wrap .lgo-tooltip-trigger::before,
.ce-leasingo-wrap [class*="lgo-tooltip"] > :first-child::before,
.ce-leasingo-wrap .lgo-form-label > :last-child:not(:only-child)::before {
  font-family: var(--ce-font-pressura, 'Pressura', sans-serif) !important;
  content: "?" !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: inherit !important;
  margin-top: -1px;
}

/* Tooltip-Popover: on-brand schwarz, oberhalb anderer PDP-Elemente */
.ce-leasingo-wrap [role="tooltip"],
.ce-leasingo-wrap [class*="lgo-tooltip"][class*="-popover"],
.ce-leasingo-wrap [class*="Tooltip"],
.ce-leasingo-wrap .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, '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;
  z-index: 30;
}

/* =========================================================================
   Leasingrechner (Inline) – Tab-Switcher (Leasing | Mietkauf, Neu | Gebraucht)
   -------------------------------------------------------------------------
   LeasingGo rendert die Tabs als .lgo-radio-inline. Der Default-Active-State
   hat einen subtilen Hell-Dunkel-Gradient von oben nach unten ("Hochglanz-Effekt"),
   den Coffee Elements im Modal bereits flachgelegt hat. Hier dieselbe Behandlung
   für die Inline-Variante auf der PDP – flat Schwarz ohne Gradient.

   TODO VERIFY: Wenn das Problem nicht der Active-Gradient war, sondern ein
   separater Scroll-Indikator-Overlay, ist dieser Fix neutral; David inspiziert
   und sagt Bescheid, dann nachjustieren.

   Notion: Tab-Switcher Leasing/Mietkauf Fade. Sprint: Leasingrechner UX-Überarbeitung.
   ========================================================================= */

.ce-leasingo-wrap {
  --lgo-surface-active: #18191a;
  --lgo-surface-hover: #eeeef0;
  --lgo-focus-ring: 0 0 0 4px rgba(24, 25, 26, 0.04);
}

.ce-leasingo-wrap .lgo-radio-inline:has(input:checked) {
  background: var(--lgo-surface-active) !important;
  background-image: none !important; /* killt den Default-Gradient von LeasingGo */
  color: #ffffff !important;
  border-color: var(--lgo-surface-active) !important;
  box-shadow: none !important;
  z-index: 1;
}

.ce-leasingo-wrap .lgo-radio-inline:hover:not(:has(input:checked)) {
  background: var(--lgo-surface-hover) !important;
  background-image: none !important;
}

.ce-leasingo-wrap .lgo-radio-inline:has(input:focus-visible) {
  box-shadow: var(--lgo-focus-ring) !important;
  z-index: 2;
}

/* Dark Mode: aktiver Tab bleibt visuell konsistent */
.dark .ce-leasingo-wrap {
  --lgo-surface-active: #fafafa;
  --lgo-surface-hover: rgba(255, 255, 255, 0.08);
}

.dark .ce-leasingo-wrap .lgo-radio-inline:has(input:checked) {
  background: var(--lgo-surface-active) !important;
  background-image: none !important;
  color: #18191a !important;
  border-color: var(--lgo-surface-active) !important;
}

/* =========================================================================
   react-tooltip (Klasse .lgo-tooltip / .__react_component_tooltip)
   -------------------------------------------------------------------------
   LeasingGo nutzt react-tooltip. Trigger-Elemente haben data-tip-Attribute,
   Tooltip-DOM wird an document.body portaliert (also außerhalb von
   .ce-leasing-overlay). Daher OHNE Parent-Selector.

   Erkenntnisse aus DOM-Inspektion:
   - Tooltip-Klasse: .lgo-tooltip + .__react_component_tooltip
   - Inline-<style>-Tag setzt background: #222 (kein !important → überschreibbar)
   - Position absolute, von react-tooltip dynamisch gesetzt
   ========================================================================= */

/* Trigger-Element: alles mit data-tip wird zum runden (?)-Icon */
[data-tip] {
  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: 1px solid currentColor !important;
  border-radius: 50% !important;
  color: rgba(24, 25, 26, 0.55) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: help !important;
  vertical-align: middle !important;
}

/* Original-Glyph (SVG/Icon-Char) verstecken */
[data-tip] > * {
  display: none !important;
}

/* Eigenes "?" als ::before-Pseudo, absolut zentriert (Font-Baseline-unabhängig) */
[data-tip]::before {
  content: "?" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: var(--ce-font-pressura, 'Pressura', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Parent braucht position: relative für absolutes ::before */
[data-tip] {
  position: relative !important;
}

.dark [data-tip] {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Tooltip-Popover: on-brand schwarz */
.lgo-tooltip,
.__react_component_tooltip.lgo-tooltip {
  background: #18191a !important;
  background-color: #18191a !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: var(--ce-font-pressura, '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: 220px !important;
  z-index: 9999 !important;
}

/* Pfeil (::before / ::after auf unique-class-Selector im Inline-<style>):
   die nutzen background-color: #222 ohne !important → mit !important überschreibbar */
.lgo-tooltip::after,
.lgo-tooltip::before,
.__react_component_tooltip.lgo-tooltip::after,
.__react_component_tooltip.lgo-tooltip::before,
[class*="t"][class*="-"][class*="lgo-tooltip"]::after,
[class*="t"][class*="-"][class*="lgo-tooltip"]::before {
  background: #18191a !important;
  background-color: #18191a !important;
  border-color: #18191a !important;
}

/* =========================================================================
   react-select v4 (emotion CSS-in-JS) Dropdown – PORTALED TO body!
   -------------------------------------------------------------------------
   Erkenntnis aus DOM-Inspektion: dummyInput hat Klasse css-XXX-dummyInput.
   Emotion-Klassen sind CamelCase (Option, Menu, etc.). Das Menu wird
   typischerweise per menuPortalTarget={document.body} außerhalb des
   .ce-leasing-overlay-Subtrees gerendert – daher KEIN Parent-Scope.

   Selector-Strategie: [class^="css-"] + case-insensitive Modifier matching.
   Restriktiv genug, damit nicht andere CSS-in-JS-Komponenten der Site
   getroffen werden (alle emotion-Klassen beginnen mit css-).
   ========================================================================= */

/* Menu-Container (portaled) */
[class^="css-"][class*="Menu" i]:not([class*="MenuList" i]),
[class^="css-"][class*="MenuPortal" i] {
  z-index: 9999 !important;
}

[class^="css-"][class*="menu" i]:not([class*="menulist" i]) {
  background: #ffffff !important;
  border: 1px solid rgba(24, 25, 26, 0.12) !important;
  border-radius: 8px !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, 'Pressura', sans-serif) !important;
}

/* Option-Base */
[class^="css-"][class*="Option" i],
[class^="css-"][class*="-option" i] {
  padding: 10px 14px !important;
  font-family: 'Pressura Mono', monospace !important;
  font-size: 13px !important;
  color: #18191a !important;
  background: transparent !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: background-color 120ms ease;
}

/* Selected (CamelCase emotion + kebab fallback + ARIA) */
[class^="css-"][class*="Option" i][class*="Selected" i],
[class^="css-"][class*="-option" i][class*="--is-selected" i],
[class^="css-"][role="option"][aria-selected="true"],
[role="option"][aria-selected="true"]:not([class*="lgo-radio"]):not([class*="ce-"]) {
  background: #18191a !important;
  background-color: #18191a !important;
  color: #ffffff !important;
}

/* Focused (Keyboard) + Hover */
[class^="css-"][class*="Option" i][class*="Focused" i]:not([class*="Selected" i]),
[class^="css-"][class*="-option" i][class*="--is-focused" i]:not([class*="--is-selected" i]),
[class^="css-"][class*="Option" i]:hover:not([class*="Selected" i]),
[class^="css-"][class*="-option" i]:hover:not([class*="--is-selected" i]),
[class^="css-"][role="option"]:hover:not([aria-selected="true"]) {
  background: rgba(24, 25, 26, 0.06) !important;
  background-color: rgba(24, 25, 26, 0.06) !important;
  color: #18191a !important;
}

/* Dark Mode */
.dark [class^="css-"][class*="menu" i]:not([class*="menulist" i]) {
  background: #1c1d1f !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.dark [class^="css-"][class*="Option" i],
.dark [class^="css-"][class*="-option" i] {
  color: #fafafa !important;
}
.dark [class^="css-"][class*="Option" i][class*="Selected" i],
.dark [class^="css-"][class*="-option" i][class*="--is-selected" i] {
  background: #fafafa !important;
  background-color: #fafafa !important;
  color: #18191a !important;
}
.dark [class^="css-"][class*="Option" i][class*="Focused" i]:not([class*="Selected" i]),
.dark [class^="css-"][class*="Option" i]:hover:not([class*="Selected" i]) {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* =========================================================================
   Anzahlung + Restwert: 2-Spalten-Layout aktivieren
   -------------------------------------------------------------------------
   LeasingGo nutzt Bootstrap-Grid mit lgo-col-lg-6 für die beiden Blöcke.
   Im Modal (schmaler als lg=992px) kollabiert das auf 1-Spalte. Hier:
   Breakpoint-Override → immer 2-Spalten.

   Innerhalb jedes Blocks: Euro + % gestapelt (lgo-col-sm-6 → 100%), weil
   bei 50% Modal-Breite die einzelnen Inputs sonst zu schmal werden.
   ========================================================================= */

.ce-leasing-overlay .lgo-row:has(> .lgo-col-lg-6),
.ce-leasing-overlay__body .lgo-row:has(> .lgo-col-lg-6) {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Abstand 2: nach den col-lg-6-Blöcken zur nächsten Section (Rates).
     margin UND padding gesetzt – Belt-and-Suspenders gegen overriden Inline-Styles. */
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  padding-bottom: 0 !important;
}

.ce-leasing-overlay .lgo-col-lg-6 {
  flex: 1 1 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Innerhalb des col-lg-6: Label-Row + alle Margin/Padding-Quellen
   defensiv resetten. DOM-bestätigt (David-Inspect):
     div.lgo-row.lgo-mt-4
       └─ div.lgo-col-12
            └─ label.sc-dkrFOg jNwFoN
                  └─ "gewünschte Anzahlung" + <a data-tip>...</a>
     div.lgo-row
       ├─ div.lgo-col-sm-6
       │    └─ div.lgo-input-group
       │         ├─ input.lgo-form-control
       │         └─ div.lgo-input-group-append
       └─ div.lgo-col-sm-6.lgo-mt-2.lgo-mt-sm-0 (% input, gleich struktur)

   Aggressiver Reset, weil unklar wo die 24px verloren gehen – Bootstrap-
   Utility lgo-mt-4 (margin-top: 1.5rem) ist primärer Verdacht, plus
   styled-components-Label-Padding plus mögliche lgo-col-12-padding. */

/* Label-Row: kein Top-Margin, ~14px Bottom-Spacing (Abstand 1).
   Belt-and-suspenders: margin-bottom UND padding-bottom – falls eine
   LeasingGo-Inline-Style die margin überschreibt, greift wenigstens padding. */
.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row.lgo-mt-4,
.ce-leasing-overlay__body .lgo-col-lg-6 > .lgo-row.lgo-mt-4 {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* lgo-col-12 innerhalb Label-Row: Bootstrap-Standard-Gutter beibehalten,
   damit Label visuell mit Input-Border-Edge fluchtet (nicht am Container-Rand
   klebt). Vorher hatten wir padding: 0 → führte zu falschem Label-Einzug. */
.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row.lgo-mt-4 > .lgo-col-12 {
  margin: 0 !important;
}

/* Label-Element: Hard-Reset gegen styled-components-Defaults */
.ce-leasing-overlay .lgo-col-lg-6 label {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: inline-block;
}

/* Input-Row direkt nach Label-Row: kein margin/padding */
.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row.lgo-mt-4 + .lgo-row {
  margin: 0 !important;
  padding: 0 !important;
}

/* lgo-col-sm-6 Cols innerhalb Input-Row: kein padding/margin oben */
.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row:not(.lgo-mt-4) > .lgo-col-sm-6 {
  padding: 0 !important;
  margin: 0 !important;
}

/* % Col stacked unter € Col: 6px Gap */
.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row:not(.lgo-mt-4) > .lgo-col-sm-6 + .lgo-col-sm-6 {
  margin-top: 6px !important;
}

/* lgo-input-group + zugehöriges input: kein Margin */
.ce-leasing-overlay .lgo-col-lg-6 .lgo-input-group {
  margin: 0 !important;
}
.ce-leasing-overlay .lgo-col-lg-6 .lgo-input-group input.lgo-form-control {
  margin: 0 !important;
}

/* Innerhalb des col-lg-6: Input-Row (Euro + %) – vertikal stacked,
   da 50%-Spalte zu schmal für nebeneinander */
.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row:not(.lgo-mt-4) {
  display: block !important;
  margin: 0 !important;
}

.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row:not(.lgo-mt-4) > .lgo-col-sm-6 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin-top: 6px !important;
}

.ce-leasing-overlay .lgo-col-lg-6 > .lgo-row:not(.lgo-mt-4) > .lgo-col-sm-6:first-child {
  margin-top: 0 !important;
}

/* Override lgo-mt-2 lgo-mt-sm-0 → wir kontrollieren via :first-child oben */
.ce-leasing-overlay .lgo-col-lg-6 .lgo-col-sm-6.lgo-mt-2,
.ce-leasing-overlay .lgo-col-lg-6 .lgo-col-sm-6.lgo-mt-sm-0 {
  margin-top: 6px !important;
}

/* Spacing nach Vertragsdauer – NUR Direct-Children von .lgo-calculator,
   sonst matched es auch die Label-Row :first-child INNERHALB von col-lg-6
   und die Input-Rows mit form-control INNERHALB col-lg-6. */
.ce-leasing-overlay .lgo-calculator > .lgo-row:not(:has(> .lgo-col-lg-6)):first-child,
.ce-leasing-overlay .lgo-calculator > .lgo-row:not(:has(> .lgo-col-lg-6)):has(.lgo-form-control) {
  margin-bottom: 24px !important;
}

/* =========================================================================
   Label-Highlight (Browser-Selection oder Hover) entfernen
   ========================================================================= */
.ce-leasing-overlay label,
.ce-leasing-overlay label * {
  user-select: none !important;
  -webkit-user-select: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.ce-leasing-overlay label:hover,
.ce-leasing-overlay label:focus,
.ce-leasing-overlay label:active {
  background: transparent !important;
  background-color: transparent !important;
}

/* =========================================================================
   Brute-Force Override für React-Select-Default-Blau (#2684FF)
   -------------------------------------------------------------------------
   Wenn alle vorherigen Klassen-Selektoren nicht greifen, hier per Inline-Style-
   Attribute-Selector den konkreten Default-Blau-Wert matchen und überschreiben.
   React-Select v4 setzt diese Werte als Inline-CSS via emotion.
   ========================================================================= */
[style*="rgb(38, 132, 255)"],
[style*="#2684FF" i],
[style*="rgba(38, 132, 255" i] {
  background: #18191a !important;
  background-color: #18191a !important;
  color: #ffffff !important;
}

[style*="rgb(222, 235, 255)"],
[style*="#DEEBFF" i] {
  background: rgba(24, 25, 26, 0.06) !important;
  background-color: rgba(24, 25, 26, 0.06) !important;
}

/* Plus: targeting children of option-selected (falls Blau auf inner div liegt) */
[class^="css-"][class*="Option" i][class*="Selected" i],
[class^="css-"][class*="Option" i][class*="Selected" i] *,
[role="option"][aria-selected="true"]:not([class*="lgo-radio"]):not([class*="ce-"]),
[role="option"][aria-selected="true"]:not([class*="lgo-radio"]):not([class*="ce-"]) * {
  background-color: #18191a !important;
  color: #ffffff !important;
}

/* "Monate"-Einheit für Vertragsdauer wird jetzt direkt INS Label per JS gepatcht
   (siehe snippets/ce-leasingo-calculator.liquid → updateMonateLabel).
   Vorher als CSS-::after auf dem Dropdown-Container, war optisch separater. */

/* =========================================================================
   Leasingrechner Helptext (Bonitätserklärung + Link zur Leasing-Page)
   -------------------------------------------------------------------------
   Direkt unterhalb des Widgets (also nach Submit-Button) gerendert.
   Sub-optimal positionell (würde gerne zwischen Raten und Button sitzen),
   aber das LeasingGo-Widget rendert die Innen-Struktur und wir können nicht
   ohne DOM-Hack dazwischen injecten.

   Notion-Ticket "Subtext + FAQ-Link unter den Raten".
   Link-Ziel /pages/leasing existiert noch nicht → Marius legt die Page an,
   sobald der Content-Entwurf reviewed ist (Notion #22).
   ========================================================================= */
.ce-leasingo-helptext {
  margin: 12px 0 12px;
  max-width: none;
  padding: 0;
  text-align: left;
  font-family: var(--ce-font-pressura, 'Pressura', sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(24, 25, 26, 0.6);
}

.ce-leasingo-helptext strong {
  color: rgba(24, 25, 26, 1);
  font-weight: 400 !important;
}

.dark .ce-leasingo-helptext strong {
  color: #fafafa;
  font-weight: 400 !important;
}

.ce-leasingo-helptext__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}

.ce-leasingo-helptext__link:hover,
.ce-leasingo-helptext__link:focus-visible {
  color: var(--ce-text-heading, #18191a);
  text-decoration-thickness: 1.5px;
}

.dark .ce-leasingo-helptext {
  color: rgba(255, 255, 255, 0.6);
}

.dark .ce-leasingo-helptext__link:hover,
.dark .ce-leasingo-helptext__link:focus-visible {
  color: #fafafa;
}

/* =========================================================================
   Prozent-Felder als "Derived Field" visuell markiert
   -------------------------------------------------------------------------
   Per JS (snippets/ce-leasingo-calculator.liquid → applyPercentReadonly) wird
   die Klasse .ce-lgo-percent-readonly + readonly-Attribut gesetzt. Hier nur
   das visuelle Pattern, damit User sofort sieht: "Anzeige, nicht Eingabe".

   Pattern wie Amazons read-only Order-Summary oder Steuerrechner:
   - Container: muted Background, kein sichtbarer Border, kein focus-ring
   - Input-Text: gedämpft, default-cursor, kein Caret
   - Suffix-Box (%): noch dezenter
   ========================================================================= */

/* Input selbst: pointer-events: none verhindert Klick/Focus komplett.
   Damit kann LeasingGo's Focus-Handler den Wert nicht re-rendern/normalisieren.
   Cursor wird vom Container vererbt (default-Pfeil). */
.ce-leasing-overlay .ce-lgo-percent-readonly,
.ce-leasingo-wrap .ce-lgo-percent-readonly,
.ce-leasing-overlay .ce-lgo-percent-readonly:hover,
.ce-leasingo-wrap .ce-lgo-percent-readonly:hover,
.ce-leasing-overlay .ce-lgo-percent-readonly:focus,
.ce-leasingo-wrap .ce-lgo-percent-readonly:focus,
.ce-leasing-overlay .ce-lgo-percent-readonly:focus-visible,
.ce-leasingo-wrap .ce-lgo-percent-readonly:focus-visible {
  pointer-events: none !important;
  cursor: default !important;
  color: rgba(24, 25, 26, 0.55) !important;
  caret-color: transparent !important;
  font-weight: 400 !important;
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  user-select: none !important;
}

/* Container (lgo-input-group enthält readonly-Input):
   muted BG, kein Border, KEINE Hover/Focus-State-Veränderung */
.ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly),
.ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly),
.ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly):hover,
.ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly):hover,
.ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly):focus-within,
.ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly):focus-within {
  background: rgba(24, 25, 26, 0.025) !important;
  background-color: rgba(24, 25, 26, 0.025) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Cursor explizit auf default – alle möglichen Selektor-Quellen abdecken,
   inkl. :read-only Pseudo, [readonly] Attribut, plus alle Children */
.ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly),
.ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly) *,
.ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly),
.ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly) * {
  cursor: default !important;
}

/* Brute-force readonly: Cursor + KEIN Hover-BG-Change. Selektor nutzt
   [readonly]-Attribut (stabil über React-Re-Renders, anders als Klassen). */

/* Container .lgo-input-group:has(input[readonly]) – alle States */
.ce-leasing-overlay .lgo-input-group:has(input[readonly]),
.ce-leasing-overlay .lgo-input-group:has(input[readonly]):hover,
.ce-leasing-overlay .lgo-input-group:has(input[readonly]):focus-within,
.ce-leasing-overlay .lgo-input-group:has(input:read-only),
.ce-leasing-overlay .lgo-input-group:has(input:read-only):hover,
.ce-leasing-overlay .lgo-input-group:has(input:read-only):focus-within,
.ce-leasingo-wrap .lgo-input-group:has(input[readonly]),
.ce-leasingo-wrap .lgo-input-group:has(input[readonly]):hover,
.ce-leasingo-wrap .lgo-input-group:has(input[readonly]):focus-within {
  cursor: default !important;
  background: rgba(24, 25, 26, 0.025) !important;
  background-color: rgba(24, 25, 26, 0.025) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Alle Children im Container: cursor default, transparenter BG */
.ce-leasing-overlay .lgo-input-group:has(input[readonly]) *,
.ce-leasing-overlay .lgo-input-group:has(input:read-only) *,
.ce-leasingo-wrap .lgo-input-group:has(input[readonly]) *,
.ce-leasingo-wrap .lgo-input-group:has(input:read-only) * {
  cursor: default !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Input selbst: zusätzlich gedämpfte Farbe + caret-color none */
.ce-leasing-overlay input[readonly],
.ce-leasing-overlay input[readonly]:hover,
.ce-leasing-overlay input[readonly]:focus,
.ce-leasing-overlay input:read-only,
.ce-leasingo-wrap input[readonly],
.ce-leasingo-wrap input:read-only {
  color: rgba(24, 25, 26, 0.55) !important;
  caret-color: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Append-Suffix (% in der group) noch dezenter */
.ce-leasing-overlay .lgo-input-group:has(input[readonly]) .lgo-input-group-text,
.ce-leasingo-wrap .lgo-input-group:has(input[readonly]) .lgo-input-group-text {
  color: rgba(24, 25, 26, 0.4) !important;
}

/* Dark Mode */
.dark .ce-leasing-overlay .lgo-input-group:has(input[readonly]),
.dark .ce-leasing-overlay .lgo-input-group:has(input[readonly]):hover,
.dark .ce-leasing-overlay .lgo-input-group:has(input[readonly]):focus-within,
.dark .ce-leasingo-wrap .lgo-input-group:has(input[readonly]) {
  background: rgba(255, 255, 255, 0.035) !important;
  background-color: rgba(255, 255, 255, 0.035) !important;
  border-color: transparent !important;
}

.dark .ce-leasing-overlay input[readonly],
.dark .ce-leasing-overlay input:read-only,
.dark .ce-leasingo-wrap input[readonly] {
  color: rgba(255, 255, 255, 0.5) !important;
}

.dark .ce-leasing-overlay .lgo-input-group:has(input[readonly]) .lgo-input-group-text {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* %-Suffix-Box: transparenter BG (lässt Container-BG durchscheinen) */
.ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly) .lgo-input-group-text,
.ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly) .lgo-input-group-text,
.ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly):hover .lgo-input-group-text,
.ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly):hover .lgo-input-group-text {
  color: rgba(24, 25, 26, 0.4) !important;
  background: transparent !important;
  background-color: transparent !important;
  cursor: default !important;
}

/* Dark Mode */
.dark .ce-leasing-overlay .ce-lgo-percent-readonly,
.dark .ce-leasingo-wrap .ce-lgo-percent-readonly {
  color: rgba(255, 255, 255, 0.45) !important;
}

.dark .ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly),
.dark .ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly),
.dark .ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly):hover,
.dark .ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly):focus-within {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: transparent !important;
}

.dark .ce-leasing-overlay .lgo-input-group:has(.ce-lgo-percent-readonly) .lgo-input-group-text,
.dark .ce-leasingo-wrap .lgo-input-group:has(.ce-lgo-percent-readonly) .lgo-input-group-text {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ============================================
   Filter-Update-Feedback (Phase 3 #8)
   Desktop-Pulse nach Filter-Klick – kein Auto-Scroll (UX-Best-Practice).
   Mobile bekommt Scroll im JS (facets.js renderProductGridContainer).
   ============================================ */
@keyframes ce-grid-update-flash {
  0%   { background-color: transparent; }
  20%  { background-color: color-mix(in srgb, var(--ce-text-heading) 4%, transparent); }
  100% { background-color: transparent; }
}

.ce-grid-update-flash {
  animation: ce-grid-update-flash 700ms ease-out;
}

/* ============================================
   Stock-Notice (Phase 3 #11 + #19)
   PDP: ÜBERLAGERT den ATC-Button (kein Layout-Shift, Content unten bleibt stabil).
   Cart: inline am Item (.ce-stock-notice--inline).
   ============================================ */

/* Containing Block für PDP-Overlay: matches NUR die ATC-Button-Größe.
   .ce-pdp-actions .product-form__buttons hat explizit height:48px,
   aber Button selbst ist height:36px – align-self:center lässt Stack
   nur Button-Höhe nehmen statt sich auf 48px zu strecken.
   display:flex eliminiert Inline-Block-Baseline-Issues. */
.ce-atc-stack {
  position: relative;
  display: flex;
  align-self: center;
  align-items: stretch;
  line-height: 0;
}

.ce-atc-stack > button {
  flex: 1;
  line-height: normal;
  margin: 0;
}

/* PDP-Variante: absolute overlay über ATC-Button.
   `:not([hidden])` zwingt Display nur im sichtbaren Zustand – bei [hidden]
   greift die übergreifende .ce-stock-notice[hidden]-Rule. */
.ce-atc-stack > .ce-stock-notice:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, #F4A636 14%, var(--ce-surface-card));
  border: 1px solid color-mix(in srgb, #F4A636 35%, var(--ce-surface-card));
  border-radius: 8px;
  font-family: 'Pressura', sans-serif;
  font-size: 12px;
  line-height: 1.2;
  color: #6B4709;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.ce-atc-stack > .ce-stock-notice .ce-stock-notice__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* High-specificity Hidden-Override – überschreibt jeden display:flex/block */
.ce-stock-notice[hidden],
.ce-atc-stack > .ce-stock-notice[hidden],
.product-form__error-message-wrapper[hidden] {
  display: none !important;
}

/* Wrapper auch ausblenden wenn Text leer ist (PDP: Quantity-Change leert Text) */
.ce-atc-stack > .ce-stock-notice:has(.product-form__error-message:empty),
.ce-atc-stack > .ce-stock-notice:not(:has(.product-form__error-message)) {
  display: none !important;
}

.ce-stock-notice__icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #B47812;
}

.ce-stock-notice__text {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* Cart-Inline-Variante: kompakter, sitzt RECHTS neben Quantity+Delete im
   quantity-popover-Container (statt darunter). Flex-Wrap als Fallback für
   schmale Viewports – wrapt dann unter die Quantity-Reihe. */
quantity-popover {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ce-stock-notice--inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  background: color-mix(in srgb, #F4A636 12%, var(--ce-surface-card));
  border-radius: 6px;
  font-family: 'Pressura', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ce-text-secondary);
  transition: opacity 300ms ease;
}

.ce-stock-notice--inline .ce-stock-notice__icon {
  font-size: 13px;
  flex-shrink: 0;
}

/* Hide-Inline-Wrapper wenn kein Error-Text drin ist */
.cart-item__error.ce-stock-notice:has(.cart-item__error-text:empty),
.cart-item__error.ce-stock-notice:not(:has(.cart-item__error-text)) {
  display: none !important;
}

/* PDP: Dawn-Default-svg wegblenden, wir nutzen Remixicon */
.product-form__error-message-wrapper.ce-stock-notice svg,
.product-form__error-message-wrapper.ce-stock-notice .svg-wrapper {
  display: none;
}

/* ============================================
   CE Newsletter-Confirm Section (Phase 3 #12)
   Brand-konforme Bestätigungsseite nach Newsletter-Anmeldung.
   Sitzt in customers/subscribe.json + page.newsletter-bestaetigt.json.
   ============================================ */
.ce-newsletter-confirm {
  background: var(--ce-surface-page);
}

.ce-newsletter-confirm__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

.ce-newsletter-confirm__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  padding: 48px 40px;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: 12px;
  box-shadow: var(--ce-shadow-card);
}

.ce-newsletter-confirm__icon {
  font-size: 48px;
  color: var(--ce-text-heading);
  margin-bottom: 16px;
  line-height: 1;
}

.ce-newsletter-confirm__heading {
  font-family: 'Pressura', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.ce-newsletter-confirm__body {
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ce-text-secondary);
  margin: 0 0 32px;
}

.ce-newsletter-confirm__body p {
  margin: 0 0 12px;
}
.ce-newsletter-confirm__body p:last-child {
  margin-bottom: 0;
}

.ce-newsletter-confirm__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 480px) {
  .ce-newsletter-confirm__card {
    padding: 32px 20px;
  }
  .ce-newsletter-confirm__heading {
    font-size: 22px;
  }
  .ce-newsletter-confirm__ctas {
    flex-direction: column;
    width: 100%;
  }
  .ce-newsletter-confirm__ctas .button {
    width: 100%;
  }
}

/* Stock-Notice Entry-Animation (subtle slide-in + fade-in) */
@keyframes ce-stock-notice-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ce-stock-notice--inline,
.ce-atc-stack > .ce-stock-notice:not([hidden]) {
  animation: ce-stock-notice-in 250ms ease-out;
}

/* Stock-Notice Fade-Out (Auto-Dismiss-Animation) */
.ce-stock-notice--fading {
  opacity: 0 !important;
  transition: opacity 350ms ease !important;
  pointer-events: none;
}

/* ============================================
   Content-Page Sections (Migration Phase 1–3)
   ============================================ */

/* ---- CE Page Hero ---- */

.ce-page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-page-hero--centered .ce-page-hero__inner {
  text-align: center;
  align-items: center;
}

.ce-page-hero__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-page-hero__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-hxl);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ce-text-heading);
  margin: 0;
}
/* Headline-Größe (clamp = responsive; erhöhte Spezifität, damit sie die
   feste Mobile-Regel weiter unten überschreibt). */
.ce-page-hero .ce-page-hero__heading--size-s { font-size: var(--ce-headline-s); }
.ce-page-hero .ce-page-hero__heading--size-m { font-size: var(--ce-headline-m); }
.ce-page-hero .ce-page-hero__heading--size-l { font-size: var(--ce-headline-l); }
.ce-page-hero .ce-page-hero__heading--size-xl { font-size: var(--ce-headline-xl); }

.ce-page-hero__lead {
  /* Pressura 18/30 – Section-Prose-Skala, konsistent zu Frontpage-Sublines/Outros.
     War vorher Inter + --ce-font-size-intro (~28px) → konkurrierte visuell mit Heading. */
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: var(--ce-text-body);
  max-width: 640px;
}
.ce-page-hero__lead--width-narrow { max-width: 520px; }
.ce-page-hero__lead--width-medium { max-width: 640px; }
.ce-page-hero__lead--width-wide { max-width: 820px; }
/* Lead-Schriftgröße (gemeinsame Text-Skala; erhöhte Spezifität schlägt die
   feste Mobile-Regel). */
.ce-page-hero .ce-page-hero__lead--size-s { font-size: var(--ce-text-s); }
.ce-page-hero .ce-page-hero__lead--size-m { font-size: var(--ce-text-m); }
.ce-page-hero .ce-page-hero__lead--size-l { font-size: var(--ce-text-l); }

.ce-page-hero--centered .ce-page-hero__lead {
  margin-left: auto;
  margin-right: auto;
}

.ce-page-hero__lead p { margin: 0 0 0.5em; }
.ce-page-hero__lead p:last-child { margin-bottom: 0; }

.ce-page-hero__cta {
  align-self: flex-start;
  margin-top: 8px;
}

.ce-page-hero--centered .ce-page-hero__cta {
  align-self: center;
}

.ce-page-hero__media {
  margin-top: 24px;
  border-radius: var(--ce-radius-md, 12px);
  overflow: hidden;
  background: #FFFFFF;
}

.ce-page-hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 749px) {
  .ce-page-hero__heading { font-size: 32px; }
  .ce-page-hero__lead { font-size: 18px; }
}

/* ---- CE Rich Text ---- */

.ce-rich-text__content {
  margin-left: auto;
  margin-right: auto;
}

.ce-rich-text--width-narrow .ce-rich-text__content { max-width: 680px; }
.ce-rich-text--width-medium .ce-rich-text__content { max-width: 840px; }
.ce-rich-text--width-wide .ce-rich-text__content { max-width: none; }

.ce-rich-text__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ce-text-heading);
  margin: 0 0 var(--ce-rt-heading-gap, 24px);
}
.ce-rich-text__heading--size-s { font-size: var(--ce-headline-s); }
.ce-rich-text__heading--size-m { font-size: var(--ce-headline-m); }
.ce-rich-text__heading--size-l { font-size: var(--ce-headline-l); }
.ce-rich-text__heading--size-xl { font-size: var(--ce-headline-xl); line-height: 1.1; }
.ce-rich-text__heading--align-left { text-align: left; }
.ce-rich-text__heading--align-center { text-align: center; }

.ce-rich-text__body {
  font-family: 'Pressura', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ce-text-body);
}
.ce-rich-text__body--size-s { font-size: var(--ce-text-s); }
.ce-rich-text__body--size-m { font-size: var(--ce-text-m); }
.ce-rich-text__body--size-l { font-size: var(--ce-text-l); }

.ce-rich-text__body p { margin: 0 0 1em; }
.ce-rich-text__body p:last-child { margin-bottom: 0; }
.ce-rich-text__body a { color: var(--ce-text-heading); text-decoration: underline; text-underline-offset: 3px; }
.ce-rich-text__body a:hover { color: var(--ce-text-secondary); }
.ce-rich-text__body h2,
.ce-rich-text__body h3 {
  font-family: 'Pressura', sans-serif;
  color: var(--ce-text-heading);
  margin: 1.5em 0 0.5em;
  line-height: 1.2;
}
.ce-rich-text__body h2 { font-size: 24px; }
.ce-rich-text__body h3 { font-size: 18px; }
.ce-rich-text__body ul,
.ce-rich-text__body ol { padding-left: 1.25em; margin: 0 0 1em; }
.ce-rich-text__body li { margin: 0 0 0.4em; }
.ce-rich-text__body blockquote {
  border-left: 3px solid var(--ce-border-strong);
  padding-left: 16px;
  margin: 1.5em 0;
  font-style: italic;
  color: var(--ce-text-secondary);
}

/* ---- CE Page Content (nativer Seiten-Body, lesbare Pressura-Typografie) ----
   Für Legal-/Info-Seiten. Bewusst durchgehend Pressura (nicht Inter), auf
   Lesbarkeit getrimmt: kontrolliertes Maß (max-width), großzügige Zeilenhöhe. */
.ce-page-content__body {
  font-family: 'Pressura', sans-serif !important;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ce-text-body);
}
/* Pressura durchgehend erzwingen – eingefügtes Markup (IT-Recht etc.) bringt evtl. eigene Inline-Styles mit */
.ce-page-content__body * { font-family: 'Pressura', sans-serif !important; }
/* Fremd-Embeds (IT-Recht-Logo, iFrames) nur in Graustufen */
.ce-page-content__body img,
.ce-page-content__body iframe { filter: grayscale(1); }
/* Ohne TOC: schmale Lesebreite */
.ce-page-content__body--narrow { max-width: 680px; }

.ce-page-content__body > *:first-child { margin-top: 0; }
.ce-page-content__body > *:last-child { margin-bottom: 0; }
.ce-page-content__body p { margin: 0 0 1.1em; }
.ce-page-content__body h1 {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ce-text-heading);
  margin: 0 0 0.8em;
  scroll-margin-top: 100px;
}
.ce-page-content__body h2,
.ce-page-content__body h3,
.ce-page-content__body h4 {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  line-height: 1.3;
  margin: 1.8em 0 0.6em;
  scroll-margin-top: 100px;
}
.ce-page-content__body h2 { font-size: 24px; }
.ce-page-content__body h3 { font-size: 19px; }
.ce-page-content__body h4 { font-size: 17px; }
.ce-page-content__body ul,
.ce-page-content__body ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.ce-page-content__body li { margin: 0 0 0.5em; }
.ce-page-content__body li:last-child { margin-bottom: 0; }
.ce-page-content__body a {
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ce-page-content__body a:hover { color: var(--ce-text-secondary); }
.ce-page-content__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1em;
  font-size: 15px;
}
.ce-page-content__body th,
.ce-page-content__body td {
  border: 1px solid var(--ce-border-default);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.ce-page-content__body hr {
  border: none;
  border-top: 1px solid var(--ce-border-default);
  margin: 2em 0;
}

/* ── Shopify-Policy-Seiten on-brand (/policies/* – Datenschutz/AGB/Widerruf/Impressum,
   IT-Recht-gepflegte Volltexte). Shopify rendert festes Markup (.shopify-policy__container/
   __title/__body) OHNE Section-Support (policy ist kein OS-2.0-Template) – daher CSS statt
   Template. Spiegelt die .ce-page-content-Typografie, damit die Policies wie die uebrigen
   Legal-/Content-Seiten wirken. TOC-Anker stellt snippets/ce-policy-anchors.liquid bereit. */
.shopify-policy__container {
  max-width: 1204px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
@media (min-width: 750px) {
  .shopify-policy__container { padding: 56px 32px 96px; }
}
.shopify-policy__title {
  text-align: center;
  margin: 0 0 40px;
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-headline-l);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ce-text-heading);
}
.shopify-policy__title h1 {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
.shopify-policy__body {
  max-width: 760px;
  margin: 0 auto;
  font-family: 'Pressura', sans-serif !important;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ce-text-body);
}
.shopify-policy__body * { font-family: 'Pressura', sans-serif !important; }
.shopify-policy__body img,
.shopify-policy__body iframe { filter: grayscale(1); }
.shopify-policy__body > *:first-child { margin-top: 0; }
.shopify-policy__body > *:last-child { margin-bottom: 0; }
.shopify-policy__body p { margin: 0 0 1.1em; }
.shopify-policy__body h1,
.shopify-policy__body h2,
.shopify-policy__body h3,
.shopify-policy__body h4 {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  line-height: 1.3;
  margin: 1.8em 0 0.6em;
  scroll-margin-top: 100px;
}
.shopify-policy__body h1 { font-size: 28px; line-height: 1.2; }
.shopify-policy__body h2 { font-size: 24px; }
.shopify-policy__body h3 { font-size: 19px; }
.shopify-policy__body h4 { font-size: 17px; }
.shopify-policy__body ul,
.shopify-policy__body ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.shopify-policy__body li { margin: 0 0 0.5em; }
.shopify-policy__body li:last-child { margin-bottom: 0; }
.shopify-policy__body a {
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shopify-policy__body a:hover { color: var(--ce-text-secondary); }
.shopify-policy__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1em;
  font-size: 15px;
}
.shopify-policy__body th,
.shopify-policy__body td {
  border: 1px solid var(--ce-border-default);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.shopify-policy__body hr {
  border: none;
  border-top: 1px solid var(--ce-border-default);
  margin: 2em 0;
}
/* IT-Recht-Copyright-Block (z.B. Impressum „Stand: …"): die mitgelieferten Inline-Styles
   (margin-top:8em, float:right, white-space:nowrap) reissen den Fliesstext unten auf und
   riskieren Overflow auf schmalen Viewports. Auf ein dezentes, linksbuendiges Footer-Zeilchen
   normalisieren. */
.shopify-policy__body #itkanzlei_txt_copyright {
  margin-top: 2.5em !important;
  font-size: 12px;
  color: var(--ce-text-tertiary);
}
.shopify-policy__body #itkanzlei_txt_copyright > div {
  float: none !important;
  white-space: normal !important;
  text-align: left !important;
  margin-left: 0 !important;
}

/* ---- TOC-Layout: 1:3, sticky Inhaltsverzeichnis links ---- */
.ce-page-content--toc .ce-page-content__layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 48px;
  align-items: start;
}
.ce-page-content--toc .ce-page-content__body { max-width: 760px; }
.ce-page-content__toc { position: sticky; top: 96px; align-self: start; }
.ce-page-content__toc-title {
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 12px;
}
.ce-page-content__toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ce-page-content__toc-link {
  display: block;
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ce-text-secondary);
  text-decoration: none;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--ce-border-default);
  transition: color var(--ce-transition), border-color var(--ce-transition);
}
.ce-page-content__toc-link:hover { color: var(--ce-text-heading); border-left-color: var(--ce-text-heading); }
/* keine h2 → kein TOC → einspaltig */
.ce-page-content__layout--no-toc { display: block; }
.ce-page-content__layout--no-toc .ce-page-content__toc { display: none; }
.ce-page-content__layout--no-toc .ce-page-content__body { max-width: 680px; }

@media (max-width: 899px) {
  .ce-page-content--toc .ce-page-content__layout { grid-template-columns: 1fr; gap: 20px; }
  .ce-page-content__toc { position: static; }
  .ce-page-content__toc-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ce-page-content__toc-link {
    border-left: none;
    border: 1px solid var(--ce-border-default);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
  }
  .ce-page-content--toc .ce-page-content__body { max-width: none; }
}

/* ---- CE Widerruf-Formular ---- */
.ce-widerruf__card {
  max-width: 760px;
  margin-inline: auto;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  padding: 32px;
}
.ce-widerruf__heading { font-family: 'Pressura', sans-serif; font-weight: 500; font-size: 24px; color: var(--ce-text-heading); margin: 0 0 8px; scroll-margin-top: 100px; }
.ce-widerruf__intro { font-family: 'Pressura', sans-serif; font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--ce-text-body); margin: 0 0 16px; }
.ce-widerruf__recipient { font-family: 'Pressura Mono', monospace; font-size: 13px; color: var(--ce-text-secondary); margin: 0 0 24px; }
.ce-widerruf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ce-widerruf__field { display: flex; flex-direction: column; gap: 6px; }
.ce-widerruf__field--full { grid-column: 1 / -1; }
.ce-widerruf__label { font-family: 'Pressura Mono', monospace; font-size: 12px; letter-spacing: 0.02em; color: var(--ce-text-secondary); }
.ce-widerruf__field input,
.ce-widerruf__field textarea {
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  color: var(--ce-text-heading);
  background: var(--ce-surface-page);
  border: 1px solid var(--ce-border-default);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
.ce-widerruf__field input:focus,
.ce-widerruf__field textarea:focus { outline: none; border-color: var(--ce-border-strong); }
.ce-widerruf__submit { margin-top: 20px; }
.ce-widerruf__note { font-family: 'Pressura', sans-serif; font-size: 13px; color: var(--ce-text-tertiary); margin: 12px 0 0; }
.ce-widerruf__success { font-family: 'Pressura', sans-serif; font-size: 16px; color: var(--ce-text-heading); margin: 0; }
.ce-widerruf__error { font-family: 'Pressura', sans-serif; font-size: 14px; color: #b00020; margin: 0 0 12px; }
@media (max-width: 599px) {
  .ce-widerruf__grid { grid-template-columns: 1fr; }
  .ce-widerruf__card { padding: 24px; }
}

/* ---- CE Image + Text ---- */

.ce-image-text__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Bild-Ratio (Bildgröße relativ zum Text) */
.ce-image-text--ratio-image-narrow .ce-image-text__layout { grid-template-columns: 0.8fr 1.2fr; }
.ce-image-text--ratio-image-wide .ce-image-text__layout { grid-template-columns: 1.3fr 0.7fr; }
.ce-image-text--ratio-image-third .ce-image-text__layout { grid-template-columns: 1fr 2fr; }

/* Vertikale Ausrichtung des Text-Blocks (content_align) */
.ce-image-text--valign-top .ce-image-text__layout { align-items: start; }
.ce-image-text--valign-center .ce-image-text__layout { align-items: center; }
.ce-image-text--valign-stretch .ce-image-text__layout { align-items: stretch; }
.ce-image-text--valign-stretch .ce-image-text__cta,
.ce-image-text--valign-stretch .ce-image-text__actions { margin-top: auto; }

/* Card-Darstellung (konsistent mit ce-cta-card --theme-light): page-width = Gutter, __layout = Karte */
.ce-image-text--card .ce-image-text__layout {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  padding: 24px;
  transition: box-shadow var(--ce-transition);
}
.ce-image-text--card .ce-image-text__layout:hover { box-shadow: var(--ce-shadow-card-hover); }

/* Zwei Karten: Bild und Text je in eigener Karte */
/* Bento (zwei Karten): Spalten-Abstand auf Card-Grid-Niveau (24px) – der Basis-48px ist für
   die flache Variante gedacht und wirkt zwischen zwei Karten zu groß (vgl. Location-Bento 20px). */
.ce-image-text--two-cards .ce-image-text__layout { align-items: stretch; gap: 24px; }
.ce-image-text--two-cards .ce-image-text__media,
.ce-image-text--two-cards .ce-image-text__content {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  transition: box-shadow var(--ce-transition);
}
.ce-image-text--two-cards .ce-image-text__media:hover,
.ce-image-text--two-cards .ce-image-text__content:hover { box-shadow: var(--ce-shadow-card-hover); }
.ce-image-text--two-cards .ce-image-text__content { padding: 24px; }
/* Bild füllt seine Karte (cover) → beide Karten gleich hoch, kein Leerraum.
   Höhe wird von der Content-Karte bestimmt; min-height als Fallback bei kurzem Text. */
.ce-image-text--two-cards .ce-image-text__media {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}
.ce-image-text--two-cards .ce-image-text__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}
/* Mit festem Bildformat gilt das Seitenverhältnis exakt: die Bild-Karte
   behält ihre aspect-ratio (nicht vom Grid gestreckt → kein Overflow), die
   Text-Karte streckt sich darauf. (Der "Bild füllt Karte"-Versuch erzeugte
   Overflow/Grid-Bruch → zurückgenommen; #65-Gap wird separat sauber gelöst.) */
.ce-image-text--two-cards.ce-image-text--has-aspect .ce-image-text__layout {
  align-items: start;
}
.ce-image-text--two-cards.ce-image-text--has-aspect .ce-image-text__media {
  min-height: 0;
  aspect-ratio: var(--ce-it-image-aspect);
  align-self: start;
}
.ce-image-text--two-cards.ce-image-text--has-aspect .ce-image-text__content {
  align-self: stretch;
}
/* Bildunterschrift als Badge unten links (statt Balken über volle Breite). */
.ce-image-text--two-cards .ce-image-text__caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: auto;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 12px;
  background: var(--ce-surface-card);
  border-radius: 8px;
  box-shadow: var(--ce-shadow-card);
  text-align: left;
  white-space: normal;
  line-height: 1.35;
}
@media (max-width: 899px) {
  /* gestapelt: Bild bekommt ein definiertes, etwas größeres Format (4:3 statt 3:2), cover */
  .ce-image-text--two-cards .ce-image-text__media { min-height: 0; aspect-ratio: 4 / 3; }
}

.ce-image-text--image-right .ce-image-text__media {
  order: 2;
}

/* Vertikale Layouts (Bild über/unter Text) + Nur-Bild: eine Spalte gestapelt.
   Kommt nach den ratio-Regeln → überschreibt deren grid-template-columns. */
.ce-image-text--image-top .ce-image-text__layout,
.ce-image-text--image-bottom .ce-image-text__layout,
.ce-image-text--image-only .ce-image-text__layout {
  grid-template-columns: 1fr;
}
.ce-image-text--image-bottom .ce-image-text__media {
  order: 2;
}

.ce-image-text__media { margin: 0; }

.ce-image-text__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ce-radius-md, 12px);
  background: #FFFFFF;
}

/* Bild-Seitenverhältnis (Standard, wie ce-cta-card): per CSS-Variable aus
   dem inline-style. original = unbeschnitten; feste Verhältnisse croppen
   mittig (object-fit: cover). */
.ce-image-text--has-aspect .ce-image-text__media img {
  aspect-ratio: var(--ce-it-image-aspect);
  object-fit: cover;
}

/* Bildgröße innerhalb der Spalte (S/M/L) – nur im Flat-Modus; auf Cards füllt das Bild */
.ce-image-text--flat.ce-image-text--imgsize-s .ce-image-text__media img { max-width: 55%; margin-inline: auto; }
.ce-image-text--flat.ce-image-text--imgsize-m .ce-image-text__media img { max-width: 78%; margin-inline: auto; }
/* Rahmen ums Bild */
.ce-image-text--imgborder .ce-image-text__media img { border: 1px solid var(--ce-border-default); }
/* Bildunterschrift */
.ce-image-text__caption {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-secondary);
  text-align: center;
  margin-top: 10px;
}

.ce-image-text__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-image-text__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-image-text__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ce-text-heading);
  margin: 0;
}

.ce-image-text__body {
  font-family: 'Pressura', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ce-text-body);
}

.ce-image-text__body p { margin: 0 0 0.75em; }
.ce-image-text__body p:last-child { margin-bottom: 0; }

/* Zusätzliche Absatz-Blöcke mit optionaler Zwischenüberschrift */
.ce-image-text__text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ce-image-text__sub-heading {
  font-family: 'Pressura', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ce-text-heading);
  margin: 0;
}

/* Button-Gruppe (bis zu 3 Links) */
.ce-image-text__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* Button-Höhe an CTA-Card-Standard angleichen (40px). Ohne diese Regel
   nutzen die Buttons (inkl. cal.com-Action) die Basis-Höhe (~34px) und
   wirken niedriger als die Buttons in anderen Komponenten. padding-vertical 0,
   inline-flex zentriert den Content – Höhe ist mit/ohne Icon identisch. */
.ce-image-text__actions .ce-btn-primary,
.ce-image-text__actions .ce-btn-secondary,
.ce-image-text__actions .ce-btn-outline,
.ce-image-text__actions .ce-btn-ghost {
  height: 40px;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.ce-image-text__cta {
  align-self: flex-start;
  margin-top: 8px;
}

@media (max-width: 899px) {
  .ce-image-text__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ce-image-text--image-right .ce-image-text__media { order: 0; }
}

/* ---- CE Contact Card ---- */

.ce-contact-card-section__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ce-text-heading);
  margin: 0 0 24px;
}

.ce-contact-card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ce-contact-card-grid--cols-1 {
  grid-template-columns: minmax(260px, 480px);
}

.ce-contact-card {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md, 12px);
  padding: 24px;
  box-shadow: var(--ce-shadow-card);
}

.ce-contact-card__title {
  font-family: 'Pressura', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 4px;
}

.ce-contact-card__subtitle {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-text-secondary);
  margin: 0 0 12px;
}

.ce-contact-card__address {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  font-style: normal;
  color: var(--ce-text-body);
  margin: 0 0 16px;
  line-height: 1.5;
}

.ce-contact-card__address p { margin: 0; }

.ce-contact-card__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-contact-card__links li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
}

.ce-contact-card__links i {
  color: var(--ce-text-secondary);
  font-size: 18px;
}

.ce-contact-card__links a {
  color: var(--ce-text-heading);
  text-decoration: none;
}

.ce-contact-card__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- CE CTA Card ---- */

.ce-cta-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  border-radius: var(--ce-radius-md, 12px);
}

/* Mit-Bild-Varianten: top (Bild oben, full-width 16:9) oder left (Split-Grid) */
.ce-cta-card--with-image {
  padding: 16px;
}

.ce-cta-card__media {
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}

.ce-cta-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Variant TOP: Bild full-width, Aspect via --ce-cta-image-aspect, Content darunter */
.ce-cta-card--image-top .ce-cta-card__media img {
  aspect-ratio: var(--ce-cta-image-aspect, 16 / 9);
  height: auto;
}

.ce-cta-card--image-top .ce-cta-card__content {
  padding: 16px;
  flex: 1;
}

.ce-cta-card--image-top .ce-cta-card__actions {
  padding: 0 16px 16px;
  margin-top: auto;
}

/* Variant LEFT: Split-Grid Bild + (Content-Spalte mit Actions am Boden).
   grid-template-areas: media (Bild) spans 2 rows; content + actions
   stacken rechts → Buttons sitzen in Content-Spalte unten rechts.
   Stack auf Mobile (< 990px). */
.ce-cta-card--image-left {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "content"
    "actions";
  gap: 16px;
  align-items: stretch;
}

.ce-cta-card--image-left .ce-cta-card__media { grid-area: media; }
.ce-cta-card--image-left .ce-cta-card__content { grid-area: content; }
.ce-cta-card--image-left .ce-cta-card__actions { grid-area: actions; }

@media (min-width: 990px) {
  .ce-cta-card--image-left {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "media content"
      "media actions";
    row-gap: 16px;
    column-gap: 24px;
  }
  /* 1:2 – Bild eine Spalte, Content/Actions zwei. */
  .ce-cta-card--image-left.ce-cta-card--ratio-image-third {
    grid-template-columns: 1fr 2fr;
  }
}

.ce-cta-card--image-left .ce-cta-card__media {
  aspect-ratio: var(--ce-cta-image-aspect, 4 / 3);
}

@media (min-width: 990px) {
  .ce-cta-card--image-left .ce-cta-card__media {
    aspect-ratio: var(--ce-cta-image-aspect, 4 / 3);
    height: 100%;
    min-height: 280px;
  }
  .ce-cta-card--image-left .ce-cta-card__media img {
    aspect-ratio: auto;
    height: 100%;
  }
}

.ce-cta-card--image-left .ce-cta-card__content {
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-cta-card--image-left .ce-cta-card__actions {
  padding: 0 8px 8px;
}

/* Button-Größen-Angleich an Bento-Quick-Action-Pattern (.ce-team-card__action,
   .ce-location__quick-action). Scope auf ce-cta-card__actions – global bleiben
   die ce-btn-*-Klassen unverändert. Minimal-invasiv.
   height: 40px fest (Brand-Kit-Default „~40px high") – padding vertical 0,
   inline-flex zentriert Content (text 13px / icon 16px) vertikal. Mit/ohne
   Icon exakt gleich hoch. */
.ce-cta-card__actions .ce-btn-primary,
.ce-cta-card__actions .ce-btn-secondary,
.ce-cta-card__actions .ce-btn-outline,
.ce-cta-card__actions .ce-btn-ghost {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 16px;
  gap: 6px;
  border-radius: 8px;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}

/* FLAT – kein Card-Background, kein Border, kein Shadow. Reine Section-Komposition. */
.ce-cta-card--theme-flat {
  padding: 0;
  border-radius: 0;
}

.ce-cta-card--theme-light {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
  transition: box-shadow var(--ce-transition);
}

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

.ce-cta-card--theme-muted {
  background: var(--ce-surface-muted);
  box-shadow: var(--ce-shadow-card);
  transition: box-shadow var(--ce-transition);
}

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

.ce-cta-card--theme-dark {
  background: var(--ce-surface-invert);
  color: var(--ce-text-on-invert);
  box-shadow: var(--ce-shadow-card);
  transition: box-shadow var(--ce-transition);
}

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

/* Centered Layout – Heading/Body/Actions horizontal mittig */
.ce-cta-card--centered {
  align-items: center;
  text-align: center;
}

.ce-cta-card--centered .ce-cta-card__body {
  margin-left: auto;
  margin-right: auto;
}

.ce-cta-card--centered .ce-cta-card__actions {
  justify-content: center;
}

.ce-cta-card--theme-dark .ce-cta-card__heading,
.ce-cta-card--theme-dark .ce-cta-card__body { color: var(--ce-text-on-invert); }
.ce-cta-card--theme-dark .ce-cta-card__eyebrow { color: var(--ce-text-on-invert); opacity: 0.7; }

.ce-cta-card--theme-dark .ce-btn-primary {
  background: var(--ce-text-on-invert);
  color: var(--ce-surface-invert);
}
.ce-cta-card--theme-dark .ce-btn-outline {
  color: var(--ce-text-on-invert);
  border-color: rgba(255,255,255,0.3);
}
.ce-cta-card--theme-dark .ce-btn-outline:hover {
  border-color: var(--ce-text-on-invert);
  color: var(--ce-text-on-invert);
}

/* Content-Wrapper: vertikaler Type-Rhythmus zwischen Eyebrow/Heading/Body */
.ce-cta-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-cta-card__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-cta-card__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0;
  text-wrap: balance;
}

.ce-cta-card__heading--h2 { font-size: var(--ce-fs-h2); line-height: 1.25; }
.ce-cta-card__heading--h0 { font-size: var(--ce-fs-h0); line-height: 1.2; }
.ce-cta-card__heading--hxl { font-size: var(--ce-fs-hxl); line-height: 1.15; }
.ce-cta-card__heading--h1 { font-size: var(--ce-fs-h1); line-height: 1.1; }

.ce-cta-card__body {
  /* Pressura 18/30 – Fließtext-Variante (CTA-Card mit Lesetext, nicht nur Lead).
     Größer als Card-Body (17/28), weil echte Lesedistanz statt nur 1-2 Zeilen. */
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: var(--ce-text-body);
  max-width: 640px;
}

.ce-cta-card__body p { margin: 0 0 0.5em; }
.ce-cta-card__body p:last-child { margin-bottom: 0; }

.ce-cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* ---- CTA Card BENTO – Bild und Text je in eigener Karte (analog ce-image-text two-cards) ----
   Outer ist nur Grid-Container; die beiden Karten tragen das Card-Styling.
   Theme greift hier nicht (Liquid erzwingt 'flat') – immer helle Karten, wie ce-image-text. */
.ce-cta-card--image-bento {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 990px) {
  .ce-cta-card--image-bento {
    grid-template-columns: 5fr 7fr;
    column-gap: 24px;
  }
  .ce-cta-card--image-bento.ce-cta-card--ratio-image-third {
    grid-template-columns: 1fr 2fr;
  }
}
/* Bild-Karte: eigenes Card-Styling, festes Seitenverhältnis (Bild treibt die Höhe). */
.ce-cta-card--image-bento .ce-cta-card__media {
  border: 1px solid var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
  border-radius: var(--ce-radius-lg);
  aspect-ratio: var(--ce-cta-image-aspect, 4 / 3);
  align-self: start;
}
.ce-cta-card--image-bento .ce-cta-card__media img {
  height: 100%;
  border-radius: inherit;
}
/* Text-Karte: umschließt Content + Actions, Buttons sinken nach unten (margin-top:auto). */
.ce-cta-card--image-bento .ce-cta-card__textcard {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
  border-radius: var(--ce-radius-lg);
  transition: box-shadow var(--ce-transition);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ce-cta-card--image-bento .ce-cta-card__textcard:hover { box-shadow: var(--ce-shadow-card-hover); }
.ce-cta-card--image-bento .ce-cta-card__content { padding: 0; }
.ce-cta-card--image-bento .ce-cta-card__actions { padding: 0; margin-top: auto; }
@media (max-width: 989px) {
  .ce-cta-card--image-bento .ce-cta-card__textcard { padding: 24px; }
}

@media (max-width: 749px) {
  .ce-cta-card { padding: 28px 20px; }
  .ce-cta-card--theme-flat { padding: 0; }
}

/* ---- CE Location ---- */

/* Intro-Alignment: pro Section umschaltbar (left/centered) */
.ce-location--intro-centered .ce-location__intro {
  text-align: center;
  align-items: center;
}

.ce-location__intro {
  margin-bottom: 24px;
}

.ce-location__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 8px;
}

.ce-location__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ce-text-heading);
  margin: 0;
}

.ce-location__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.ce-location__card {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md, 12px);
  padding: 24px;
  box-shadow: var(--ce-shadow-card);
}

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

.ce-location__address {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  font-style: normal;
  color: var(--ce-text-body);
  margin: 0 0 16px;
  line-height: 1.5;
}
.ce-location__address p { margin: 0; }

.ce-location__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-location__links li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
}

.ce-location__links i {
  color: var(--ce-text-secondary);
  font-size: 18px;
}

.ce-location__links a {
  color: var(--ce-text-heading);
  text-decoration: none;
}

.ce-location__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ce-location__hours {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.ce-location__hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  gap: 16px;
}

.ce-location__hours-row dt {
  color: var(--ce-text-secondary);
  font-weight: 500;
}

.ce-location__hours-row dd {
  color: var(--ce-text-heading);
  margin: 0;
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
}

.ce-location__hours-note {
  margin: 16px 0 0;
  font-size: var(--ce-font-size-small);
  color: var(--ce-text-tertiary);
}

.ce-location__info-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ce-border-muted);
}

.ce-location__info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ce-location__info-item:first-child {
  padding-top: 0;
}

.ce-location__info-item i {
  color: var(--ce-text-secondary);
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
}

.ce-location__info-item h4 {
  font-family: 'Pressura', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 4px;
}

.ce-location__info-item div > div {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small);
  color: var(--ce-text-body);
  line-height: 1.5;
}

.ce-location__info-item p { margin: 0; }

/* ============================================================
   CE Location – Bento Layout
   ============================================================
   Main-Card (8 col) + Map-Card (4 col) im Top-Grid.
   Info-Cards als auto-fit-Grid darunter.
   Card-Frame durchgehend (Brand-Kit-Konvention).
*/

/* Bento-Top + Info-Grid auf gemeinsames 3-Spalten-Raster:
   Standort-Card span 2, Map-Card span 1 (Desktop) → fluchtet exakt
   mit den 3 gleichbreiten Info-Cards darunter. */
.ce-location--bento .ce-location__bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 24px;
}

@media (min-width: 990px) {
  .ce-location--bento .ce-location__bento {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .ce-location--bento .ce-location__bento .ce-location__card--main {
    grid-column: span 2;
  }
}

.ce-location--bento .ce-location__info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
  align-items: stretch;
}

@media (min-width: 750px) {
  .ce-location--bento .ce-location__info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 990px) {
  .ce-location--bento .ce-location__info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card-Frame: Brand-Kit-Konvention (weiß + border + shadow), 24px padding.
   Hover-Shadow-Pop konsistent zu allen anderen Cards im Theme. */
.ce-location--bento .ce-location__card,
.ce-location--bento .ce-location__info-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);
  transition: box-shadow var(--ce-transition);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-location--bento .ce-location__card:hover,
.ce-location--bento .ce-location__info-card:hover {
  box-shadow: var(--ce-shadow-card-hover);
}

/* Map-Card: edge-to-edge iframe + Graustufen + clean Banner.
   OSM-Banner unten (~28px) wird durch overflow:hidden + iframe-overflow versteckt.
   Attribution-Pflicht (ODbL): dezenter Mini-Pill unten rechts. */
.ce-location--bento .ce-location__card--map {
  padding: 0;
  overflow: hidden;
  gap: 0;
  position: relative;
  aspect-ratio: var(--map-aspect, 4 / 3);
}

.ce-location--bento .ce-location__card--map iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 60px);
  border: 0;
  filter: grayscale(100%) contrast(1.05);
}

.ce-location--bento .ce-location__card--map::after {
  content: '© OpenStreetMap';
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: 'Pressura Mono', monospace;
  font-size: 10px;
  color: var(--ce-text-secondary);
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  letter-spacing: 0.02em;
  z-index: 2;
}

@media (min-width: 990px) {
  .ce-location--bento .ce-location__card--map {
    /* Map fills the column height when Main-Card is taller */
    aspect-ratio: auto;
    min-height: 320px;
  }
  .ce-location--bento .ce-location__card--map iframe {
    height: calc(100% + 60px);
  }
}

/* Main-Card Content */
.ce-location--bento .ce-location__card--main .ce-location__card-title {
  margin: 0;
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ce-text-heading);
}

.ce-location--bento .ce-location__address {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  font-style: normal;
  color: var(--ce-text-body);
}

.ce-location--bento .ce-location__address p { margin: 0; }

.ce-location--bento .ce-location__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  color: var(--ce-text-secondary);
}

.ce-location--bento .ce-location__hours-row {
  display: contents;
}

.ce-location--bento .ce-location__hours-row dt {
  font-weight: 500;
  color: var(--ce-text-heading);
}

.ce-location--bento .ce-location__hours-row dd {
  margin: 0;
}

.ce-location--bento .ce-location__hours-note {
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  color: var(--ce-text-secondary);
  margin: 0;
}

/* Welcome-Text: einladender Absatz oberhalb der Quick-Actions.
   flex:1 schiebt die Quick-Actions ans Card-Ende. */
.ce-location--bento .ce-location__welcome {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: var(--ce-text-body);
  margin: 0;
  flex: 1;
}

.ce-location--bento .ce-location__welcome p { margin: 0 0 0.5em; }
.ce-location--bento .ce-location__welcome p:last-child { margin-bottom: 0; }

/* Quick-Actions: Pressura-Mono Buttons im Brand-Kit-Stil.
   margin-top:auto stützt das flex-grow:1 vom welcome-Block (falls vorhanden). */
.ce-location__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.ce-location__quick-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}

.ce-location__quick-action i {
  font-size: 16px;
  line-height: 1;
}

/* Primary: dunkel gefüllt */
.ce-location__quick-action--primary {
  background: var(--ce-text-heading);
  color: var(--ce-surface-card);
  border-color: var(--ce-text-heading);
}

.ce-location__quick-action--primary:hover {
  background: var(--ce-text-secondary);
  border-color: var(--ce-text-secondary);
}

/* Secondary: weißer BG mit Shadow (konsistent mit ce-category-cards--cta-secondary) */
.ce-location__quick-action--secondary {
  background: var(--ce-surface-card);
  color: var(--ce-text-heading);
  border-color: var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
}

.ce-location__quick-action--secondary:hover {
  border-color: var(--ce-text-heading);
  box-shadow: var(--ce-shadow-card-hover);
}

/* Ghost: transparent + border, ohne Shadow (analog ce-team-card__action--ghost) */
.ce-location__quick-action--ghost {
  background: transparent;
  color: var(--ce-text-heading);
  border-color: var(--ce-border-default);
}

.ce-location__quick-action--ghost:hover {
  border-color: var(--ce-text-heading);
  background: var(--ce-surface-page);
}

/* Info-Cards: Icon + Heading + Body, kompakt */
.ce-location--bento .ce-location__info-card {
  text-align: left;
  gap: 12px;
}

.ce-location--bento .ce-location__info-card i {
  font-size: 28px;
  color: var(--ce-text-heading);
  line-height: 1;
}

.ce-location--bento .ce-location__info-card h4 {
  margin: 0;
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ce-text-heading);
}

.ce-location--bento .ce-location__info-body {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: var(--ce-text-body);
  /* flex:1 sorgt für ausgleichende Höhe innerhalb der Card –
     Whitespace nach dem Body, nicht zwischen Title+Body. */
  flex: 1;
}

.ce-location--bento .ce-location__info-body p { margin: 0; }

/* ---- CE Team Cards ---- */

/* Intro-Alignment: pro Section umschaltbar. Wirkt auf Eyebrow + Heading + Lead. */
.ce-team-cards--intro-centered .ce-team-cards__intro {
  text-align: center;
  align-items: center;
}

.ce-team-cards--intro-centered .ce-team-cards__lead {
  margin-left: auto;
  margin-right: auto;
}

.ce-team-cards__intro {
  margin-bottom: 32px;
}

.ce-team-cards__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 8px;
}

.ce-team-cards__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ce-text-heading);
  margin: 0 0 8px;
}

.ce-team-cards__lead {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-body);
  max-width: 640px;
}

.ce-team-cards__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Team-Card: Brand-Kit-konformer Card-Frame (analog ce-category-card).
   Bild sitzt mit weißem Innenrahmen in der Card (16px Padding), Body
   flex-stretcht, Actions rutschen ans Card-Ende. */
.ce-team-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);
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  transition: box-shadow var(--ce-transition);
}

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

.ce-team-card__media {
  aspect-ratio: var(--ce-team-aspect, 1 / 1);
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}

.ce-team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ce-team-card__media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ce-surface-muted);
  color: var(--ce-text-muted);
  font-size: 48px;
}

.ce-team-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

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

.ce-team-card__role {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-team-card__description {
  /* Pressura 17/28 – Marketing-Card-Body, konsistent zu ce-category-card__text */
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: var(--ce-text-body);
  margin: 0;
  flex: 1;
}

.ce-team-card__description p { margin: 0 0 0.5em; }
.ce-team-card__description p:last-child { margin-bottom: 0; }

/* Actions: Icon-Buttons (Pressura Mono), nebeneinander, am Card-Boden.
   Konsistent zu .ce-location__quick-action und .ce-category-cards__cta-secondary.
   padding-top: zusätzlicher Action-Group-Abstand zum Content (Branchen-Standard
   16-24px für Card-Footer-Spacing). */
.ce-team-card__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.ce-team-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}

.ce-team-card__action i {
  font-size: 16px;
  line-height: 1;
}

.ce-team-card__action--primary {
  background: var(--ce-text-heading);
  color: var(--ce-surface-card);
  border-color: var(--ce-text-heading);
}

.ce-team-card__action--primary:hover {
  background: var(--ce-text-secondary);
  border-color: var(--ce-text-secondary);
}

.ce-team-card__action--secondary {
  background: var(--ce-surface-card);
  color: var(--ce-text-heading);
  border-color: var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
}

.ce-team-card__action--secondary:hover {
  border-color: var(--ce-text-heading);
  box-shadow: var(--ce-shadow-card-hover);
}

/* Ghost: transparent + border, ohne Shadow – klassischer Outline-Button */
.ce-team-card__action--ghost {
  background: transparent;
  color: var(--ce-text-heading);
  border-color: var(--ce-border-default);
}

.ce-team-card__action--ghost:hover {
  border-color: var(--ce-text-heading);
  background: var(--ce-surface-page);
}

/* ---- CE Repair Form ---- */

.ce-repair-form__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ce-text-heading);
  margin: 0 0 24px;
  text-align: left;
}

.ce-repair-form-wrap {
  /* 960px max-width centered – sweet spot für 2-Spalten-Forms (Form-only Mode).
     Im Bild+Form-Modus (--with-image) wird das per Override aufgehoben,
     damit die Form-Card stabil die ganze 2fr-Spalte füllt. */
  max-width: 960px;
  margin: 0 auto;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md, 16px);
  padding: 32px;
  box-shadow: var(--ce-shadow-card);
  transition: box-shadow var(--ce-transition);
}

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

.ce-repair-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ce-repair-form__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

.ce-repair-form__steps li {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
  text-align: center;
}

.ce-repair-form__steps li::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--ce-border-default);
  z-index: 0;
}

.ce-repair-form__steps li:last-child::after { display: none; }

.ce-repair-form__steps li span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ce-surface-muted);
  color: var(--ce-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  position: relative;
  z-index: 1;
  border: 1px solid var(--ce-border-default);
}

.ce-repair-form__steps li.is-active {
  color: var(--ce-text-heading);
}

.ce-repair-form__steps li.is-active span,
.ce-repair-form__steps li.is-done span {
  background: var(--ce-emerald-500, #10B981);
  color: #FFFFFF;
  border-color: transparent;
}

.ce-repair-form__step {
  border: none;
  padding: 0;
  margin: 0;
  display: none;
}

.ce-repair-form__step.is-active {
  display: block;
}

.no-js .ce-repair-form__step,
html:not(.js) .ce-repair-form__step {
  display: block;
  margin-bottom: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--ce-border-default);
}

.ce-repair-form__field {
  /* margin entfernt – Grid-Gap übernimmt das Spacing */
  margin: 0;
}

.ce-repair-form__row {
  display: grid;
  gap: 16px;
}

.ce-repair-form__row--2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 599px) {
  .ce-repair-form__row--2 {
    grid-template-columns: 1fr;
  }
}

/* Field-Label (Tier 3): kompakt, gleiche Gewichtung wie Input-Text.
   WICHTIG: :not()-Ausschluss der Radio/Checkbox-Labels. Sonst matcht die
   Regel auch <label class="ce-repair-form__checkbox"> (die sind direkte
   Kinder von .ce-repair-form__field--notice!) und überschreibt deren
   display:grid / font-size / line-height. Die Radio-Labels sind in
   .ce-repair-form__radio-group verschachtelt – die wären schon durch >
   raus, aber die Checkboxen brauchen den expliziten Ausschluss. Im
   Browser gemessen: ohne :not() saß die Box ~4px zu hoch (block-flow
   statt grid). */
.ce-repair-form__field > label:not(.ce-repair-form__radio):not(.ce-repair-form__checkbox) {
  display: block;
  font-family: 'Pressura', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 8px;
}

/* Group-Label (Frage für Radio-/Checkbox-Gruppe, Tier 2.5): eine
   halbe Stufe prominenter als Field-Labels – klare Hierarchie zwischen
   „das ist die Frage" und „das sind die Optionen". */
.ce-repair-form__group-label {
  display: block;
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 12px;
}

.ce-repair-form input[type="text"],
.ce-repair-form input[type="email"],
.ce-repair-form input[type="tel"],
.ce-repair-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm, 8px);
  background: var(--ce-surface-card);
  color: var(--ce-text-heading);
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  line-height: 1.4;
}

.ce-repair-form input:focus,
.ce-repair-form textarea:focus,
.ce-repair-form select:focus {
  outline: 2px solid var(--ce-text-heading);
  outline-offset: 2px;
  border-color: var(--ce-text-secondary);
}

.ce-repair-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Select-Dropdown (Hersteller, Modell): gleiches Feld-Styling wie Inputs,
   appearance: none + Custom-Pfeil (Brand-Schwarz) statt Browser-Default.
   Zeigt bei jedem Klick die volle Liste – Default-UX. */
.ce-repair-form__select-wrap {
  position: relative;
}

.ce-repair-form select {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-sm, 8px);
  background: var(--ce-surface-card);
  color: var(--ce-text-heading);
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Custom-Pfeil via Pseudo-Element auf dem Wrapper */
.ce-repair-form__select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-60%) rotate(45deg);
  border-right: 1.5px solid var(--ce-text-heading);
  border-bottom: 1.5px solid var(--ce-text-heading);
  pointer-events: none;
}

/* Disabled-Select (z.B. Modell, wenn „Anderer Hersteller" aktiv) */
.ce-repair-form select:disabled {
  background: var(--ce-surface-muted);
  color: var(--ce-text-secondary);
  cursor: not-allowed;
}
.ce-repair-form__select-wrap:has(select:disabled)::after {
  border-color: var(--ce-text-secondary);
}

.ce-repair-form__radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-repair-form__radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

/* Radio + Checkbox: einheitliches 2-Spalten-Grid. Spalte 1 = Box (fix),
   Spalte 2 = Text. Text bricht immer in Spalte 2 – Zeile 2+ startet
   bündig unter Zeile 1, läuft nie unter die Box. align-items:start +
   margin-top auf der Box zentriert sie vertikal zur ERSTEN Textzeile.
   Funktioniert für single-line (Wartung/Reparatur) wie multi-line
   (lange Standort-Adressen) gleichermaßen – ein Pattern für beide. */
.ce-repair-form__radio,
.ce-repair-form__checkbox {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  line-height: 1.4;
  /* Option-Text im Light-Cut (300) – tritt hinter dem 500er-Group-Label
     zurück, bleibt aber durch body-Farbe klar lesbar (Auswahloptionen
     dürfen nicht so blass werden wie Caption-Text). */
  font-weight: 300;
  color: var(--ce-text-body);
}

.ce-repair-form__radio input,
.ce-repair-form__checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  /* Box vertikal mittig zur ersten Textzeile: (Zeilenhöhe − Box) / 2.
     Zeilenhöhe = 1.4 × 16px = 22.4px → margin-top ≈ 2px. */
  margin-top: calc((1.4 * var(--ce-font-size-body) - 18px) / 2);
  /* Brand bleibt monochrom: ausgewählte Radios/Checkboxen im Heading-Schwarz */
  accent-color: var(--ce-text-heading);
}

.ce-repair-form__field--notice {
  background: var(--ce-surface-muted);
  border-radius: var(--ce-radius-sm, 8px);
  padding: 20px;
}

/* Notice-Box-Label als Eyebrow (Tier 4): Mono mini-uppercase als
   Kategorie-Marker, konsistent mit __eyebrow-Pattern auf dem Rest der
   Site (Service-Overview, Location, etc.). Hebt sich klar von den
   Field-Labels (Pressura 14px) ab. */
.ce-repair-form__field--notice .ce-repair-form__group-label {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 10px;
}

/* Rhythmus in Tab „Anliegen": Notice-Boxen (Stornokosten/Dauer/DSGVO) sind
   eine semantische Gruppe (Bestätigungen). Gegen den uniformen 20px-Grid-Gap:
   die erste Notice-Box bekommt mehr Abstand zur Frage darüber (20+8=28px),
   die Notices untereinander rücken enger (20−8=12px). Margin auf Grid-Items
   ist additiv zum row-gap. */
.ce-repair-form__field:not(.ce-repair-form__field--notice) + .ce-repair-form__field--notice {
  margin-top: 8px;
}
.ce-repair-form__field--notice + .ce-repair-form__field--notice {
  margin-top: -8px;
}

.ce-repair-form__actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.ce-repair-form__actions .ce-btn-primary {
  margin-left: auto;
}

.ce-repair-form__actions .ce-btn-primary:only-child {
  margin-left: auto;
  margin-right: 0;
}

.ce-repair-form__errors {
  background: var(--ce-red-200, #FECACA);
  border-radius: var(--ce-radius-sm, 8px);
  padding: 16px 20px;
  margin-bottom: 24px;
  color: var(--ce-red-500, #D93F33);
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small);
}

.ce-repair-form__errors h3 {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ce-repair-form__errors ul {
  margin: 0;
  padding-left: 20px;
}

.ce-repair-form__success {
  text-align: center;
  padding: 32px 16px;
}

.ce-repair-form__success i {
  font-size: 48px;
  /* Brand bleibt monochrom: kein Success-Grün */
  color: var(--ce-text-heading);
  margin-bottom: 12px;
  display: inline-block;
}

.ce-repair-form__success h3 {
  font-family: 'Pressura', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 8px;
}

.ce-repair-form__success p {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-body);
  margin: 0;
}

@media (max-width: 599px) {
  .ce-repair-form-wrap { padding: 20px; }
  .ce-repair-form__steps li { font-size: 11px; }
}

/* ---- CE Pricing Tiers ---- */

.ce-pricing-tiers__intro {
  margin-bottom: 32px;
}

.ce-pricing-tiers__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 8px;
}

.ce-pricing-tiers__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ce-text-heading);
  margin: 0 0 8px;
}

.ce-pricing-tiers__lead {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-body);
  max-width: 640px;
}

.ce-pricing-tiers__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ce-pricing-tier {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md, 12px);
  padding: 24px;
  box-shadow: var(--ce-shadow-card);
  display: flex;
  flex-direction: column;
}

.ce-pricing-tier__icon {
  color: var(--ce-text-secondary);
  font-size: 24px;
  margin-bottom: 12px;
}

.ce-pricing-tier__title {
  font-family: 'Pressura', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0 0 12px;
}

.ce-pricing-tier__price {
  font-family: 'Pressura Mono', monospace;
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ce-pricing-tier__price-prefix,
.ce-pricing-tier__price-suffix {
  font-size: 13px;
  color: var(--ce-text-secondary);
  font-weight: 500;
}

.ce-pricing-tier__price-value {
  font-size: 28px;
  font-weight: 500;
  color: var(--ce-text-heading);
}

.ce-pricing-tier__body {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small);
  color: var(--ce-text-body);
  line-height: 1.5;
}

.ce-pricing-tier__body p { margin: 0 0 0.5em; }
.ce-pricing-tier__body p:last-child { margin-bottom: 0; }

.ce-pricing-tiers__footnote {
  margin: 24px 0 0;
  padding: 16px;
  background: var(--ce-surface-muted);
  border-radius: var(--ce-radius-sm, 8px);
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small);
  color: var(--ce-text-secondary);
  line-height: 1.5;
}

.ce-pricing-tiers__footnote p { margin: 0; }

/* ---- CE Booking Embed ---- */

.ce-booking-embed__heading {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h0);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ce-text-heading);
  margin: 0 0 8px;
  text-align: center;
}

.ce-booking-embed__lead {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-body);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}

.ce-booking-embed__card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-md, 12px);
  padding: 32px;
  text-align: center;
  box-shadow: var(--ce-shadow-card);
}

.ce-booking-embed__card-body {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body);
  color: var(--ce-text-body);
  margin-bottom: 20px;
}

.ce-booking-embed__card-body p { margin: 0; }

.ce-booking-embed__cta {
  gap: 8px;
}

.ce-booking-embed__provider-note {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-caption);
  color: var(--ce-text-tertiary);
  margin: 16px 0 0;
}
/* Im ButlerApp-Embed-Modus steht der Hinweis unter dem Widget – zentriert. */
.ce-booking-embed__provider-note--embed {
  text-align: center;
}

/* ButlerApp-Buchungswidget (.ws-element) an den Service-Formular-Look
   angleichen. Light-DOM, daher per CSS erreichbar. NUR stabile Hooks:
   ws-*-Klassen (ButlerApps eigene) + href-Selektor. NICHT die sc-*-
   styled-components-Hashes – die ändern sich bei jedem ButlerApp-Update.
   Was NICHT geht: DOM/Verhalten (Stepper-Logik) – nur die Optik. */
.ws-element {
  font-family: 'Pressura', sans-serif !important;
}

/* Card-Container (wie ce-repair-form-wrap) */
.ce-booking-embed__widget .ws-element {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  padding: 28px;
}

/* ButlerApp-Branding-Link („Kursverwaltung von Butlerapp") ausblenden */
.ws-element a[href*="butlerapp.de"] {
  display: none !important;
}

/* Step-Navigation als Tab-Bar (statt grüner Stepper).
   Kein Per-Tab-Underline – der aktive Schritt wird über schwarzen Kreis
   + fette Headline markiert. Der einzige Divider ist die ButlerApp-Row
   unter der Step-Gruppe (s.u., gepunktet → durchgezogen). */
.ws-element .ws-step-nav {
  border-bottom: 0 !important;
  gap: 4px;
}
.ws-element .ws-step-nav-group-title,
.ws-element .ws-step-nav-title {
  font-family: 'Pressura Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
}

/* Step-Kreis quadratisch (war 32×34 → oval). Gleiche Maße, Ziffer zentriert. */
.ws-element .ws-button-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  box-sizing: border-box;
  text-align: center;
}

/* Nav-Divider: ButlerApps gepunktete Linie → durchgezogene Brand-Hairline.
   Zielt exakt die Row, die die Step-Gruppe als direktes Kind enthält. */
.ws-element .ws-flex-row:has(> .ws-step-nav-group) {
  border-bottom: 1px solid var(--ce-border-default) !important;
}

/* Monochrom: ButlerApp-Grün (rgb 57,181,74) → Brand-Schwarz */
.ws-element .ws-button-icon,
.ws-element .ws-step-nav-title,
.ws-element .ws-step-nav-selected {
  color: var(--ce-text-heading) !important;
  border-color: var(--ce-text-heading) !important;
}

/* Felder = Brand-Inputs (wie ce-repair-form) */
.ws-element .ws-input,
.ws-element .ws-select,
.ws-element .ws-search-select-input {
  border: 1px solid var(--ce-border-default) !important;
  border-radius: var(--ce-radius-sm, 8px) !important;
  font-family: 'Pressura', sans-serif !important;
  padding: 10px 14px !important;
}
.ws-element .ws-input-label,
.ws-element .ws-select-label {
  font-family: 'Pressura', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ce-text-heading) !important;
}

/* "Frame weg": manche Felder (z.B. "Veranstaltung oder Gutschein") packen
   das native <select> zusätzlich in eine .ws-input-group mit eigenem
   Border + Radius + Padding → Doppelrahmen. Den Rahmen soll nur das
   <select> selbst tragen, nicht die Gruppe. So sehen beide Dropdowns
   gleich (nativ) aus. */
.ws-element .ws-input-group {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Fließtext im Widget (z.B. "Noch Fragen …") erbt sonst die Theme-Body-
   Schrift (Inter), weil die Theme-`p`-Regel die Vererbung von .ws-element
   schlägt. Direkt auf p/li zwingen. Gewicht 300 (Light): Pressura ist nur
   in 300/500 geladen, ein angefordertes 400 rendert sonst als 500 (Medium)
   und wirkt im Fließtext zu fett. Fett-Auszeichnungen (strong/b) behalten
   ihr eigenes Gewicht. */
.ws-element p,
.ws-element li {
  font-family: 'Pressura', sans-serif !important;
  font-weight: 300 !important;
}

/* Buttons */
.ws-element .ws-button {
  font-family: 'Pressura Mono', monospace !important;
}
.ws-element .ws-button-primary,
.ws-element .ws-button-submit {
  background: var(--ce-surface-invert) !important;
  color: var(--ce-text-on-invert) !important;
  border-radius: var(--ce-radius-sm, 8px) !important;
}
.ws-element .ws-button-back {
  background: transparent !important;
  color: var(--ce-text-heading) !important;
}

/* Button-Reihe wie im Reparatur-Formular (ce-repair-form__actions):
   "Weiter/Buchen" war flex-grow:1 (391px Vollbreite). Jetzt content-width,
   Zurück links, Weiter rechts via margin-left:auto + space-between. */
.ws-element .ws-form-buttons {
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 24px !important;
}
.ws-element .ws-form-buttons .ws-button {
  flex-grow: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
}
.ws-element .ws-form-buttons .ws-button-primary,
.ws-element .ws-form-buttons .ws-button-submit {
  margin-left: auto !important;
}

/* Zurück-Button auf Step 1 ausblenden. Auf dem ersten Step gibt es kein
   Stepper-Zurück – ButlerApps Handler macht dort history.back() und
   verlässt den Buchungsflow (das "führt auf andere Seite"). Analog zum
   Reparatur-Formular, dessen Tab 1 bewusst keinen Zurück-Button hat.
   Bedingung: erster Step-Nav-Button (first-of-type, da davor ein
   group-title-<span> steht) ist selected. :has() ist live-reaktiv →
   auf Step 2 wird der zweite Step selected, die Bedingung greift nicht
   mehr, und der Zurück-Button erscheint wieder. */
.ws-element:has(.ws-step-nav-group > .ws-step-nav:first-of-type.ws-step-nav-selected) .ws-button-back {
  display: none !important;
}

/* Search-Select-Dropdown ("Veranstaltung oder Gutschein") war dunkel
   (Liste rgb 81, Such-Header rgb 73, weißer Text) → helle Brand-Card.
   Stabile ws-*-Hooks. Panel ist ein Overlay → elevated Shadow.
   Der Submit-Button (ws-button-submit, rgb 24) bleibt bewusst dunkel. */
.ws-element .ws-search-select-options {
  background: var(--ce-surface-card) !important;
  border: 1px solid var(--ce-border-default) !important;
  border-radius: var(--ce-radius-lg) !important;
  box-shadow: var(--ce-shadow-elevated) !important;
}
/* Such-Header hell + Trennlinie zur Liste */
.ws-element .ws-search-select-query {
  background: var(--ce-surface-card) !important;
  border-bottom: 1px solid var(--ce-border-default) !important;
}
/* Optionen + Suchfeld-Eingabe: dunkler Brand-Text statt weiß */
.ws-element .ws-search-select-option,
.ws-element .ws-search-select-query-input {
  color: var(--ce-text-heading) !important;
  background: transparent !important;
}
/* Group-Headings (Juni/Juli) sekundär, aber lesbar */
.ws-element .ws-search-select-group {
  color: var(--ce-text-secondary) !important;
}
/* Nicht buchbare Einträge gedämpft */
.ws-element .ws-search-select-option-disabled {
  color: var(--ce-text-tertiary) !important;
}
/* Hover/aktive Zeile: helle Brand-Fläche statt dunkel-transparent */
.ws-element .ws-search-select-option:hover,
.ws-element .ws-search-select-option[aria-selected="true"] {
  background: var(--ce-surface-muted) !important;
  color: var(--ce-text-heading) !important;
}

.ce-booking-embed__iframe-wrap {
  border-radius: var(--ce-radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--ce-border-default);
  box-shadow: var(--ce-shadow-card);
}

/* ---- CE Menu List ---- (1:1 Original Café Kliewe: gerundete Karte, einspaltig) */

.ce-menu-list__card {
  position: relative;
  max-width: 625px;
  margin: 0 auto;
  background: var(--ce-surface-card);
  border: 1.5px solid var(--ce-border-strong);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--ce-shadow-card);
  transition: transform 0.18s ease-out, box-shadow 0.25s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Innere umlaufende Border (1:1 Original: hellgrau, inset) */
.ce-menu-list__card::before {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1.5px solid var(--ce-text-body);
  border-radius: 8px;
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .ce-menu-list__card { transition: box-shadow 0.25s ease; transform: none !important; }
}

.ce-menu-list__intro {
  text-align: center;
  margin-bottom: 24px;
}

.ce-menu-list__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 8px;
}

.ce-menu-list__heading {
  font-family: 'Pressura', sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: var(--ce-text-body);
  margin: 0;
}

.ce-menu-list__items {
  margin: 0;
}

.ce-menu-list__group-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 4px 0;
  margin: 0;
  border-bottom: 1px solid var(--ce-text-body);
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
}

.ce-menu-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ce-text-body);
}

.ce-menu-list__item-name {
  font-family: 'Pressura', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ce-text-body);
  max-width: 80%;
}

.ce-menu-list__item-price {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--ce-text-body);
  white-space: nowrap;
}

.ce-menu-list__note {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  color: var(--ce-text-body);
  margin: 36px 0 0;
}

@media (max-width: 749px) {
  .ce-menu-list__card { padding: 24px; }
  /* Innere Linie mittig zwischen Rand und Content halten (12px außen / 12px innen) */
  .ce-menu-list__card::before { inset: 12px; }
  .ce-menu-list__heading { font-size: 28px; }
}

/* ---- CE Downloads: Kategorie-Einleitung ---- */

.ce-downloads__category-desc {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small);
  line-height: 1.6;
  color: var(--ce-text-body);
  margin: 0 0 16px;
  max-width: 640px;
}

.ce-downloads__category-desc p { margin: 0 0 0.5em; }
.ce-downloads__category-desc p:last-child { margin-bottom: 0; }

/* ---- CE Job List ---- */

.ce-job-list__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ce-job-list__grid { grid-template-columns: repeat(2, 1fr); }
}

.ce-job-card {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  padding: 28px;
  box-shadow: var(--ce-shadow-card);
  display: flex;
  flex-direction: column;
}

/* Standort-Badge (verlinkt) */
.ce-job-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  background: var(--ce-surface-muted);
  border: 1px solid var(--ce-border-default);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  margin-bottom: 20px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ce-job-card__badge i { font-size: 13px; line-height: 1; }
a.ce-job-card__badge:hover { color: var(--ce-text-heading); border-color: var(--ce-border-strong); }

.ce-job-card__meta {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  letter-spacing: 0.04em;
  color: var(--ce-text-tertiary);
  margin: 0 0 8px;
}

.ce-job-card__title {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-fs-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ce-text-heading);
  margin: 0 0 8px;
}

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

.ce-job-card__body {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-small);
  line-height: 1.6;
  color: var(--ce-text-body);
  margin-bottom: 28px;
}
.ce-job-card__body p { margin: 0 0 0.5em; }
/* Abschnitts-Header (Deine Aufgaben / Das erwartet dich / Das bringst du mit) als Label */
.ce-job-card__body p strong {
  display: block;
  font-family: 'Pressura Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ce-text-tertiary);
  margin: 22px 0 8px;
}
.ce-job-card__body ul {
  margin: 0 0 8px;
  padding-left: 0;
  list-style: none;
}
.ce-job-card__body li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
}
.ce-job-card__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ce-text-tertiary);
}

.ce-job-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.ce-job-card__actions .ce-btn-primary,
.ce-job-card__actions .ce-btn-outline { flex: 0 0 auto; }

/* ---- CE Category Cards ---- */

/* Intro-Block (Eyebrow + Heading): Spacing kontextabhängig nach Position */
.ce-category-cards__intro--before {
  margin-bottom: 40px;
}

.ce-category-cards__intro--after {
  margin-top: 32px;
}

.ce-category-cards__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  margin: 0 0 12px;
}

/* Heading-Basis – Größe wird per Modifier-Klasse gesetzt (--h2 / --h0 / --hxl / --h1) */
.ce-category-cards__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  color: var(--ce-text-heading);
  margin: 0;
  text-wrap: balance;
}

.ce-category-cards__heading--h2 { font-size: var(--ce-fs-h2); line-height: 1.25; }
.ce-category-cards__heading--h0 { font-size: var(--ce-fs-h0); line-height: 1.2; }
.ce-category-cards__heading--hxl { font-size: var(--ce-fs-hxl); line-height: 1.15; }
.ce-category-cards__heading--h1 { font-size: var(--ce-fs-h1); line-height: 1.1; }

/* Vor-Grid-Intro mit Subline darunter: enger anschließen */
.ce-category-cards__intro--before:has(+ .ce-category-cards__prose) {
  margin-bottom: 24px;
}

.ce-category-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Mobile: alle Layouts kollabieren zu 1 Spalte (Default oben). */

@media (min-width: 768px) {
  .ce-category-cards__grid--3-equal { grid-template-columns: repeat(2, 1fr); }
  .ce-category-cards__grid--2-asym-narrow-wide { grid-template-columns: 2fr 3fr; }
  .ce-category-cards__grid--2-asym-wide-narrow { grid-template-columns: 3fr 2fr; }
  .ce-category-cards__grid--2-equal { grid-template-columns: 1fr 1fr; }
  /* 1-single bleibt 1 Spalte */
}

@media (min-width: 1000px) {
  /* Ab Desktop: alle 2-asym + 3-equal Layouts auf dasselbe 3-Spalten-Raster,
     damit Grid-Linien zwischen Sections konsistent bleiben.
     2-asym-narrow-wide: erste Card 1 col, zweite span 2.
     2-asym-wide-narrow: erste Card span 2, zweite 1 col. */
  .ce-category-cards__grid--3-equal,
  .ce-category-cards__grid--2-asym-narrow-wide,
  .ce-category-cards__grid--2-asym-wide-narrow {
    grid-template-columns: repeat(3, 1fr);
  }
  .ce-category-cards__grid--2-asym-narrow-wide > *:nth-child(2) {
    grid-column: span 2;
  }
  .ce-category-cards__grid--2-asym-wide-narrow > *:first-child {
    grid-column: span 2;
  }
}

/* Default-Cards bekommen Brand-Kit-Frame (bg + border + shadow).
   Image-only und Icon-Cards bleiben rahmenlos (Override unten). */
.ce-category-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  transition: box-shadow var(--ce-transition);
}

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

/* Alle Card-Varianten haben durchgehend den Brand-Kit-Frame
   (weißer BG + Border + Shadow) und 20px Padding (siehe Base-Rule oben).
   Keine rahmenlosen Sonderfälle, keine variant-spezifischen Padding-Overrides. */

.ce-category-card:focus-visible {
  outline: 2px solid var(--ce-text-heading);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Gap angeglichen an das Section-Grid-Gap (20px), damit Multi-Image-Cards
   und Einzel-Cards visuell denselben Rhythmus haben. Spacing nach unten kommt
   vom Card-Gap, nicht von hartem margin-bottom. */
.ce-category-card__images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
}

.ce-category-card__images--2 {
  grid-template-columns: 1fr 1fr;
}

/* Scope auf .ce-category-cards__grid, um Collection-Card-Defaults (snippets/card-collection.liquid)
   zu überschreiben, die padding-top:75% + position:absolute height:100% setzen. */
.ce-category-cards__grid .ce-category-card__media {
  display: block;
  margin: 0;
  position: relative;
  padding-top: 0;
  overflow: visible;
  background: transparent;
}

.ce-category-cards__grid .ce-category-card__media img,
.ce-category-cards__grid .ce-category-card__media :is(picture, span) img {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: var(--ce-card-aspect, 4 / 5);
  object-fit: cover;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
}

/* Natürliches Bildverhältnis (aspect: auto) → object-fit deaktiviert */
.ce-category-cards__grid .ce-category-card[style*="--ce-card-aspect: auto"] .ce-category-card__media img {
  aspect-ratio: auto;
  height: auto;
  object-fit: initial;
}

.ce-category-card__caption {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  line-height: 16px;
  color: var(--ce-text-secondary);
  /* margin-top so dimensioniert, dass die Caption optisch in der Mitte
     des Whitespaces zwischen Bild und Card-Bottom-Padding sitzt */
  margin: 20px 0 0;
  text-align: left;
}

.ce-category-card__body {
  flex: 1;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-category-card__title {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-h2-section);
  font-weight: 500;
  /* Relative LH skaliert mit font-size (war 32px fix → brach bei kleineren Sizes).
     Container-Gap (16px im __body) übernimmt Title-Body-Abstand – kein margin nötig. */
  line-height: 1.3;
  color: var(--ce-text-heading);
  text-align: left;
  margin: 0;
}

.ce-category-card__text {
  /* Pressura für Frontpage/Marketing-Card-Surfaces (Brand-Konsistenz).
     17/28 (LH ~1.65) – Display-Schrift braucht mehr Leading als Inter (~1.5)
     für vergleichbare Lesbarkeit.
     Long-form Body bleibt auf ce-rich-text-Sections → Inter. */
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: var(--ce-text-body);
  text-align: left;
}

.ce-category-card__text p {
  margin: 0 0 0.75em;
}

.ce-category-card__text p:last-child {
  margin-bottom: 0;
}

.ce-category-card__text strong,
.ce-category-card__text b {
  font-weight: 700;
  color: var(--ce-text-heading);
}

.ce-category-card__text em,
.ce-category-card__text i {
  font-style: italic;
}

.ce-category-card__text a {
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ce-category-card__text a:hover {
  text-decoration-thickness: 2px;
}

/* Actions: 1+ Pfeil-Link(s) gestapelt – eine visuelle Sprache für alle CTA-Mengen */
.ce-category-card__actions {
  /* Row + wrap: 1 CTA = links, 2 CTAs = nebeneinander, bei Platzmangel wrap auf 2 Zeilen.
     Vermeidet Spacing-Asymmetrie gegenüber dem Card-Body-Spacing. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* 2-Bild-Card: Actions als 2-col Grid, damit jeder CTA visuell unter "seinem" Bild sitzt.
   Gap an das Section-Grid (20px) angeglichen für konsistenten Rhythmus. */
.ce-category-cards__grid .ce-category-card:has(.ce-category-card__images--2) .ce-category-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ---- Container, Alignment, Intro/Outro-Prose, Section-CTA ---- */

.ce-category-cards__container {
  /* transparenter Wrapper – kein eigener Frame, FLAT durchgehend */
}

/* Section-Elemente (Heading, Eyebrow, Section-CTA) immer zentriert.
   Prose-Blöcke (intro/outro) bleiben Text-intern linksbündig – siehe weiter unten. */
.ce-category-cards__intro,
.ce-category-cards__heading,
.ce-category-cards__eyebrow,
.ce-category-cards__section-cta {
  text-align: center;
}

/* Prose-Block: Text intern immer links. Block-Position folgt `text_alignment`-Setting:
   - left (default): Block am linken Section-Rand
   - center: Block horizontal mittig (margin auto unten in --align-center) */
.ce-category-cards__prose {
  /* Pressura 18/30 – Fließtext-Variante (mehrzeiliger Intro/Outro-Text).
     Card-Bodies bleiben 17/28 (max 2-3 Zeilen). Hier mehr Größe + Leading
     für echte Lese-Distanz. */
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: var(--ce-text-secondary);
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* Section-Subline (kurz, ein-/zwei-zeilig). Pressura für Markenkonsistenz. */
.ce-category-cards__subline {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: var(--ce-text-secondary);
  max-width: 70ch;
  margin: 0 auto 24px;
  text-align: center;
}

/* Card-level Text-Alignment Modifier – überschreibt Variant-Defaults (z.B. icon-card center).
   Scoped auf .ce-category-cards__grid für höhere Specificity gegen Variant-Rules. */
.ce-category-cards__grid .ce-category-card--align-left .ce-category-card__body,
.ce-category-cards__grid .ce-category-card--align-left .ce-category-card__title,
.ce-category-cards__grid .ce-category-card--align-left .ce-category-card__text,
.ce-category-cards__grid .ce-category-card--align-left .ce-category-card__caption {
  text-align: left;
}
.ce-category-cards__grid .ce-category-card--align-left .ce-category-card__actions {
  justify-content: flex-start;
}

.ce-category-cards__grid .ce-category-card--align-center .ce-category-card__body,
.ce-category-cards__grid .ce-category-card--align-center .ce-category-card__title,
.ce-category-cards__grid .ce-category-card--align-center .ce-category-card__text,
.ce-category-cards__grid .ce-category-card--align-center .ce-category-card__caption {
  text-align: center;
}
.ce-category-cards__grid .ce-category-card--align-center .ce-category-card__actions {
  justify-content: center;
}

/* Swipe-on-mobile: horizontales Scroll-Snap unter md-Breakpoint */
@media (max-width: 749px) {
  .ce-category-cards__grid--swipe-mobile {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    gap: 16px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ce-category-cards__grid--swipe-mobile > * {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}


/* Nur vertikale Margins setzen – horizontale werden von `--align-center` gesteuert.
   Nie `margin` als Shorthand, sonst überschreibt das implizit margin-left/right. */
.ce-category-cards__prose--intro {
  margin-bottom: 32px;
}

.ce-category-cards__prose--outro {
  margin-top: 32px;
}

.ce-category-cards__prose p {
  margin: 0 0 12px;
}

.ce-category-cards__prose p:last-child {
  margin: 0;
}

.ce-category-cards__prose strong,
.ce-category-cards__prose b {
  font-weight: 700;
  color: var(--ce-text-heading);
}

.ce-category-cards__prose em,
.ce-category-cards__prose i {
  font-style: italic;
}

.ce-category-cards__prose a {
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ce-category-cards__prose a:hover {
  text-decoration-thickness: 2px;
}

.ce-category-cards__section-cta {
  margin-top: 24px;
}

/* Section-CTA-Button: Style kommt von .ce-category-cards--cta-* Modifier weiter unten.
   Base-Properties teilen sich mit Card-Action (gemeinsamer Selektor). */

/* ---- Card-Variante: image-only ---- */

/* image-only nutzt die gleiche padding wie Default-Cards – konsistenter
   Innen-Atemraum, kein eigener Override mehr nötig */

.ce-category-cards__grid .ce-category-card--image-only .ce-category-card__images {
  margin: 0;
}

/* ---- Card-Variante: icon-card (Icon zentriert, kein full-bleed) ---- */

.ce-category-cards__grid .ce-category-card--icon-card {
  text-align: center;
  align-items: center;
}

.ce-category-cards__grid .ce-category-card--icon-card .ce-category-card__images {
  width: 120px;
  max-width: 100%;
  margin: 0 auto;
}

.ce-category-cards__grid .ce-category-card--icon-card .ce-category-card__media img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
}

/* Brand-Icon (asset_url + <img> aus assets/icon-<handle>.svg) – Light/Dark Toggle */
.ce-category-card__icon {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.ce-category-card__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ce-category-card__icon-img--dark { display: none; }

@media (prefers-color-scheme: dark) {
  .ce-category-card__icon-img--light { display: none; }
  .ce-category-card__icon-img--dark { display: block; }
}

.ce-category-cards__grid .ce-category-card--icon-card .ce-category-card__body,
.ce-category-cards__grid .ce-category-card--icon-card .ce-category-card__title,
.ce-category-cards__grid .ce-category-card--icon-card .ce-category-card__text {
  text-align: center;
}

.ce-category-cards__grid .ce-category-card--icon-card .ce-category-card__actions {
  justify-content: center;
  align-items: center;
}

.ce-category-cards__grid .ce-category-card--icon-card .ce-category-card__action {
  justify-self: center;
  align-self: center;
}

/* CTA-Buttons (Card-Action + Section-CTA) – Style via `cta_style` Section-Setting:
   outlined (default), primary, secondary. Base-Properties hier, Farben in den
   Modifiers weiter unten. */
.ce-category-card__action,
.ce-category-cards__section-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  align-self: start;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid;
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  white-space: nowrap;
}

.ce-category-card__action:focus-visible,
.ce-category-cards__section-cta-button:focus-visible {
  outline: 2px solid var(--ce-text-heading);
  outline-offset: 2px;
}

/* Outlined (default) – Border, transparenter BG */
.ce-category-cards--cta-outlined .ce-category-card__action,
.ce-category-cards--cta-outlined .ce-category-cards__section-cta-button {
  border-color: var(--ce-border-default);
  background: transparent;
  color: var(--ce-text-secondary);
}

.ce-category-cards--cta-outlined .ce-category-card__action:hover,
.ce-category-cards--cta-outlined .ce-category-cards__section-cta-button:hover {
  border-color: var(--ce-text-heading);
  color: var(--ce-text-heading);
  background: var(--ce-surface-page);
}

/* Primary – dunkel gefüllt, weißer Text */
.ce-category-cards--cta-primary .ce-category-card__action,
.ce-category-cards--cta-primary .ce-category-cards__section-cta-button {
  border-color: var(--ce-text-heading);
  background: var(--ce-text-heading);
  color: var(--ce-surface-card);
}

.ce-category-cards--cta-primary .ce-category-card__action:hover,
.ce-category-cards--cta-primary .ce-category-cards__section-cta-button:hover {
  background: var(--ce-text-secondary);
  border-color: var(--ce-text-secondary);
  color: var(--ce-surface-card);
}

/* Secondary – weißer BG mit Brand-Kit-Shadow für Elevation gegen Card-Surface */
.ce-category-cards--cta-secondary .ce-category-card__action,
.ce-category-cards--cta-secondary .ce-category-cards__section-cta-button {
  border-color: var(--ce-border-default);
  background: var(--ce-surface-card);
  color: var(--ce-text-heading);
  box-shadow: var(--ce-shadow-card);
}

.ce-category-cards--cta-secondary .ce-category-card__action:hover,
.ce-category-cards--cta-secondary .ce-category-cards__section-cta-button:hover {
  border-color: var(--ce-text-heading);
  background: var(--ce-surface-card);
  color: var(--ce-text-heading);
  box-shadow: var(--ce-shadow-card-hover);
}

/* ============================================================
   CE SEO/GEO Text – dezenter Footer-Textblock
   Visuell ruhig, Pressura-tonal, expand/collapse-fähig.
*/

.ce-seo-text {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
}

.ce-seo-text__inner {
  /* max-width = Footer (1200px), damit der Content links/rechts mit den Footer-Spalten fluchtet */
  max-width: 1200px;
  margin: 0 auto;
}

/* Visuelle Varianten */
.ce-seo-text--muted {
  background: var(--ce-surface-muted);
}
.ce-seo-text--transparent {
  background: transparent;
}
.ce-seo-text--bordered {
  background: transparent;
  border-top: 1px solid var(--ce-border-muted);
}

/* Intro-Alignment */
.ce-seo-text--intro-centered .ce-seo-text__eyebrow,
.ce-seo-text--intro-centered .ce-seo-text__heading,
.ce-seo-text--intro-centered .ce-seo-text__intro {
  text-align: center;
}

.ce-seo-text__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-tertiary);
  margin: 0 0 12px;
}

.ce-seo-text__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: var(--ce-fs-h2);
  line-height: 1.25;
  color: var(--ce-text-heading);
  margin: 0 0 16px;
}

.ce-seo-text__intro {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: var(--ce-text-secondary);
  max-width: 70ch;
  margin: 0 0 48px;
}

.ce-seo-text--intro-centered .ce-seo-text__intro {
  margin-left: auto;
  margin-right: auto;
}

.ce-seo-text__intro p { margin: 0 0 12px; }
.ce-seo-text__intro p:last-child { margin-bottom: 0; }

/* Sub-Sektionen-Grid: Spaltenzahl matched Sub-Section-Count via --seo-cols
   (gesetzt in Liquid, capped auf 4). Tablet auf 2 cols, Mobile gestackt. */
.ce-seo-text__sub-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 750px) {
  .ce-seo-text__sub-sections {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 990px) {
  .ce-seo-text__sub-sections {
    grid-template-columns: repeat(var(--seo-cols, 3), 1fr);
  }
}

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

.ce-seo-text__body {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--ce-text-secondary);
}

.ce-seo-text__body p { margin: 0 0 8px; }
.ce-seo-text__body p:last-child { margin-bottom: 0; }

.ce-seo-text__bullets {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  list-style: disc;
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--ce-text-secondary);
}

.ce-seo-text__bullets li::marker {
  color: var(--ce-text-tertiary);
}

.ce-seo-text__bullets li { margin: 0 0 4px; }
.ce-seo-text__bullets li:last-child { margin-bottom: 0; }

/* Collapsed-Variante: <details>-Wrapper */
.ce-seo-text__details {
  border: 0;
}

.ce-seo-text__summary {
  cursor: pointer;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ce-text-secondary);
  padding: 12px 0;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ce-seo-text__summary::-webkit-details-marker { display: none; }

.ce-seo-text__summary::after {
  content: '↓';
  font-family: 'Pressura Mono', monospace;
  transition: transform 200ms ease;
}

.ce-seo-text__details[open] .ce-seo-text__summary::after {
  transform: rotate(180deg);
}

.ce-seo-text__details[open] .ce-seo-text__content {
  margin-top: 16px;
}

/* ============================================================
   CE Service Overview – Bento Ablauf + Hours + Pricing-Strip
*/

.ce-service-overview__intro {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-service-overview--intro-centered .ce-service-overview__intro {
  text-align: center;
  align-items: center;
}

.ce-service-overview__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: var(--ce-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-tertiary);
  margin: 0;
}

.ce-service-overview__heading {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: var(--ce-fs-h2);
  line-height: 1.25;
  color: var(--ce-text-heading);
  margin: 0;
}

.ce-service-overview__subline {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 28px;
  color: var(--ce-text-secondary);
  max-width: 70ch;
}
/* Größe + Breite konsistent zum Page-Hero-Lead (gemeinsame Text-Skala). */
.ce-service-overview__subline--size-s { font-size: var(--ce-text-s); }
.ce-service-overview__subline--size-m { font-size: var(--ce-text-m); }
.ce-service-overview__subline--size-l { font-size: var(--ce-text-l); }
.ce-service-overview__subline--width-narrow { max-width: 520px; }
.ce-service-overview__subline--width-medium { max-width: 640px; }
.ce-service-overview__subline--width-wide { max-width: 820px; }

.ce-service-overview--intro-centered .ce-service-overview__subline {
  margin-left: auto;
  margin-right: auto;
}

/* Bento-Grid: 1:1:1 – alle drei Cards (Ablauf, Hours, Pricing) gleichbreit.
   Mobile gestackt, Tablet 2 col mit Pricing breit, Desktop alle drei nebeneinander. */
.ce-service-overview__bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 750px) {
  .ce-service-overview__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ce-service-overview__card--pricing {
    grid-column: 1 / -1;
  }
}

@media (min-width: 990px) {
  .ce-service-overview__bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ce-service-overview__card--pricing {
    grid-column: auto;
  }
}

/* Cards müssen min-width: 0 erlauben, damit innere Flex/Grid-Children nicht
   die Spalte sprengen (z.B. lange Pricing-Examples, Beispielnamen-Listen) */
.ce-service-overview__card {
  min-width: 0;
}

/* Card-Frame: Brand-Kit-Konvention (weiß + Border + Shadow + Hover-Pop) */
.ce-service-overview__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);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: box-shadow var(--ce-transition);
}

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

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

/* Intro-Text steht jetzt direkt als Card-Child unter dem Heading – nutzt
   damit den regulären 24px-Card-Gap (gleich wie Heading → Ablauf-Liste
   oder Heading → Pricing-Strip). Vorher per __card-header-Wrapper auf
   8px gequetscht, was zu eng wirkte. */
.ce-service-overview__card-intro {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ce-text-secondary);
  margin: 0;
}

/* Abgabe-Group: Wrapper um Werkstatt Münster + Köln. Eigenes Gap
   (16px) macht die zwei Werkstätten zur erkennbaren Gruppe. Plus
   margin-top (24px = Atmung über den Card-Gap hinaus), damit zur
   Intro mehr Distanz steht als zwischen den Werkstätten. */
.ce-service-overview__abgabe-group {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 24px;
}

/* Ablauf-Liste: nummerierte Steps mit visuellem Marker */
.ce-service-overview__ablauf {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-service-overview__ablauf-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ce-service-overview__ablauf-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ce-text-heading);
  color: var(--ce-surface-card);
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ce-service-overview__ablauf-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-service-overview__ablauf-label {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  color: var(--ce-text-heading);
}

.ce-service-overview__ablauf-body {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--ce-text-secondary);
}

/* Hours-Liste: Tag-Zeit-Paare */
.ce-service-overview__hours {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-family: 'Pressura Mono', monospace;
  font-size: 14px;
}

.ce-service-overview__hours-row {
  display: contents;
}

.ce-service-overview__hours-row dt {
  font-weight: 500;
  color: var(--ce-text-heading);
}

.ce-service-overview__hours-row dd {
  margin: 0;
  color: var(--ce-text-secondary);
}

/* Abgabe-Disclaimer unten: gleiches Textformat wie die Pricing-Footnote
   (Pressura 300 / 13px / tertiary) – rundet die Card ab, tritt zurück.
   margin-top: auto schiebt ihn ans Card-Bottom, falls die Card durchs
   Bento auf Ablauf-Höhe gestreckt wird. */
.ce-service-overview__hours-note {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--ce-text-tertiary);
  margin: 0;
  padding-top: 4px;
}

/* Abgabe-Sub-Blöcke: pro Standort Heading + Adresse + (optional) Hours/Note.
   Keine Trennlinie zwischen Blöcken – Trennung erfolgt über space-between
   im Card-Container und einen Mindestabstand. */
.ce-service-overview__abgabe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.ce-service-overview__abgabe-address {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-service-overview__abgabe-note {
  font-family: 'Pressura Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: var(--ce-text-heading);
  margin: 4px 0 0;
}

.ce-service-overview__abgabe .ce-service-overview__hours {
  margin-top: 4px;
}

/* Textlink-Style (kein Button): minimaler Pressura-Mono-Link mit
   Pfeil. Tritt zurück gegenüber den Standort-Daten, bleibt aber
   klar als CTA erkennbar. */
.ce-service-overview__abgabe-cta {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--ce-transition);
}
.ce-service-overview__abgabe-cta:hover {
  color: var(--ce-text-secondary);
}

/* Standort-Info in der Hours-Card: schlanke Liste, dezent gesetzt */
.ce-service-overview__locations {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--ce-text-secondary);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--ce-border-muted);
}

.ce-service-overview__locations p { margin: 0 0 4px; }
.ce-service-overview__locations p:last-child { margin-bottom: 0; }

.ce-service-overview__locations strong {
  color: var(--ce-text-heading);
  font-weight: 500;
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ce-service-overview__locations a {
  color: var(--ce-text-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ce-service-overview__locations a:hover {
  text-decoration-thickness: 2px;
}

/* Pricing-Liste: vertikal, Label+Examples links / Preis rechts.
   Tabellen-Optik mit Trennlinie pro Zeile – Self-Selection-Pattern. */
.ce-service-overview__pricing-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ce-service-overview__price-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ce-border-muted);
}

.ce-service-overview__price-tier:last-child {
  border-bottom: 0;
}

.ce-service-overview__price-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ce-service-overview__price-label {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--ce-text-heading);
}

.ce-service-overview__price-examples {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--ce-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-service-overview__price-from {
  font-family: 'Pressura Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--ce-text-heading);
  white-space: nowrap;
  flex-shrink: 0;
}

.ce-service-overview__pricing-footnote {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--ce-text-tertiary);
  margin: 0;
}

.ce-service-overview__pricing-footnote p {
  font-family: 'Pressura', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  margin: 0 0 4px;
  color: var(--ce-text-tertiary);
}
.ce-service-overview__pricing-footnote p:last-child { margin-bottom: 0; }

/* ============================================================
   CE Repair Form – Tab-Layout (refactor von Stepper)
   Tabs sind echte Buttons, Panels haben hidden-Attribut.
*/

.ce-repair-form__login-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  color: var(--ce-text-secondary);
  background: var(--ce-surface-muted);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 24px;
}

.ce-repair-form__login-hint i {
  color: var(--ce-text-heading);
  font-size: 16px;
}

.ce-repair-form__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--ce-border-default);
  /* overflow-x: auto braucht explizites overflow-y: hidden, sonst
     reserviert der Browser eine vertikale Scrollbar (Quirk in Chrome/Safari) */
  overflow-x: auto;
  overflow-y: hidden;
}

.ce-repair-form__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ce-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}

.ce-repair-form__tab:hover {
  color: var(--ce-text-heading);
}

.ce-repair-form__tab.is-active {
  color: var(--ce-text-heading);
  border-bottom-color: var(--ce-text-heading);
}

.ce-repair-form__tab-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ce-surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
}

.ce-repair-form__tab.is-active .ce-repair-form__tab-num {
  background: var(--ce-text-heading);
  color: var(--ce-surface-card);
}

/* Tab-Panels: aktives Panel als flex column, DYNAMISCHE Höhe – kein
   min-height, keine künstliche Streckung. Form ist genau so hoch wie
   ihr Inhalt; Tab-Wechsel und conditional Fields ändern die Höhe
   organisch. Tab-Nav folgt direkt nach den Feldern (gap regelt Abstand). */
.ce-repair-form__panel {
  border: 0;
  padding: 0;
  margin: 0;
  display: none;
  flex-direction: column;
  gap: 32px;
}

.ce-repair-form__panel.is-active {
  display: flex;
}

/* Inneres Grid für die Felder. Mobile 1-Spalte, Desktop 2-Spalten. */
.ce-repair-form__panel-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 750px) {
  .ce-repair-form__panel-fields {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
}

/* Felder die über beide Spalten spannen */
.ce-repair-form__panel-fields .ce-repair-form__field--full,
.ce-repair-form__panel-fields .ce-repair-form__field--notice,
.ce-repair-form__panel-fields .ce-repair-form__row {
  grid-column: 1 / -1;
}

/* Readonly inputs visuell als „nicht bearbeitbar" markieren */
.ce-repair-form input[readonly] {
  background: var(--ce-surface-muted);
  cursor: not-allowed;
  color: var(--ce-text-secondary);
}

/* Tab-Nav-Footer: [Zurück] links | [Weiter] [Submit] rechts. Folgt
   direkt nach den Feldern (32px gap vom Panel). Kein Divider, kein
   margin-top:auto – die Card hat dynamische Höhe. */
.ce-repair-form__tab-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ce-repair-form__tab-nav > span {
  /* unsichtbarer Spacer für Tab 1 (kein Zurück) */
  display: block;
}

.ce-repair-form__tab-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* 1:2 Bento-Layout: Bild links, Formular rechts (nur wenn Bild gesetzt) */
.ce-repair-form-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 900px) {
  /* 3-Spalten-Grid wie das Service-Overview-Bento darüber → Bild-Card
     ist exakt gleich breit wie eine 1:1:1-Card. Form spannt 2 Spalten.
     Vorher: 1fr 2fr mit 1 Gap dazwischen → Spalten ~gap/3 breiter
     pro Stück als bei 3 Cards mit 2 Gaps. */
  .ce-repair-form-section--with-image .ce-repair-form-section__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  .ce-repair-form-section--with-image .ce-repair-form-wrap {
    grid-column: span 2;
  }
  .ce-repair-form-section--image-right .ce-repair-form-section__media {
    order: 2;
  }
}

/* Media-Card: Brand-Kit-Konvention (weiß + Border + Shadow), Bild mit
   20px Innenrand wie bei anderen Bildkarten auf der Site */
.ce-repair-form-section__media {
  margin: 0;
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-repair-form-section__media img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ce-repair-image-aspect, 4/5);
  object-fit: cover;
  display: block;
  border-radius: calc(var(--ce-radius-lg) - 8px);
}

.ce-repair-form-section__caption {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-repair-form-section--with-image .ce-repair-form-wrap {
  background: var(--ce-surface-card);
  border: 1px solid var(--ce-border-default);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-card);
  padding: 28px;
  /* Override der globalen 960px-Begrenzung: im Bento (1:2) soll die Form-Card
     die volle 2fr-Spalte füllen, unabhängig vom Tab-Inhalt */
  max-width: none;
  margin: 0;
  width: 100%;
}

/* min-width: 0 auf beide Grid-Items, damit weder das img-width-Attribut
   noch der Form-min-content das 1:2-Verhältnis sprengen */
.ce-repair-form-section__media,
.ce-repair-form-section--with-image .ce-repair-form-wrap {
  min-width: 0;
}

/* Heading sitzt jetzt INNER-Card (oben in form-wrap), nicht außen */
.ce-repair-form-section--with-image .ce-repair-form__heading {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.25;
}

/* Submit disabled-State: Brand-Kit-konform, klar als inaktiv erkennbar */
.ce-repair-form .ce-btn-primary[disabled],
.ce-repair-form .ce-btn-primary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   CE Info Grid – kompaktes Icon/Titel/Text-Karten-Grid
   Brand-Karten-Konvention (vgl. ce-location--bento info-cards).
   ============================================================ */
.ce-info-grid__eyebrow {
  font-family: 'Pressura Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
  text-align: center;
  margin: 0 0 8px;
}
.ce-info-grid__heading {
  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 0 8px;
}
.ce-info-grid__heading--center { text-align: center; }
.ce-info-grid__heading--left { text-align: left; }
.ce-info-grid__heading--size-s { font-size: var(--ce-headline-s); }
.ce-info-grid__heading--size-m { font-size: var(--ce-headline-m); }
.ce-info-grid__heading--size-l { font-size: var(--ce-headline-l); line-height: 1.1; }
.ce-info-grid__heading--size-xl { font-size: var(--ce-headline-xl); line-height: 1.1; }
.ce-info-grid__intro {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body, 16px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ce-text-body);
  max-width: 65ch;
  margin: 0 auto 8px;
  text-align: center;
}
.ce-info-grid__intro--narrow { max-width: 48ch; }
.ce-info-grid__intro--medium { max-width: 65ch; }
.ce-info-grid__intro--wide { max-width: 90ch; }
.ce-info-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: var(--ce-ig-heading-gap, 24px);
  align-items: stretch;
}
@media (min-width: 750px) {
  .ce-info-grid__grid--cols-2,
  .ce-info-grid__grid--cols-3,
  .ce-info-grid__grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 990px) {
  .ce-info-grid__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ce-info-grid__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ce-info-grid__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);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--ce-transition), transform var(--ce-transition);
}
.ce-info-grid__card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ce-info-grid__card--link:hover {
  box-shadow: var(--ce-shadow-card-hover);
  transform: translateY(-2px);
}
.ce-info-grid__icon {
  font-size: 28px;
  line-height: 1;
  color: var(--ce-text-heading);
}
.ce-info-grid__title {
  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);
  margin: 0;
}
.ce-info-grid__body {
  font-family: 'Pressura', sans-serif;
  font-size: var(--ce-font-size-body, 16px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ce-text-body);
}
.ce-info-grid__body p { margin: 0; }
.ce-info-grid__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Pressura Mono', monospace;
  font-size: 13px;
  color: var(--ce-text-heading);
}
.ce-info-grid__card--link:hover .ce-info-grid__link i { transform: translateX(3px); }
.ce-info-grid__link i { transition: transform var(--ce-transition); }

@media (prefers-reduced-motion: reduce) {
  .ce-info-grid__card,
  .ce-info-grid__card--link:hover { transform: none; transition: none; }
  .ce-info-grid__link i { transition: none; }
}

/* ============================================================
   Inline-Bold in allen CE-Modulen: echter Pressura-Medium-Schnitt (500)
   statt synthetischem Browser-Bold. Greift über den Section-Wrapper
   (class="ce-section-…"), deckt also alle Content-Module ab.
   ============================================================ */
[class*="ce-section-"] strong,
[class*="ce-section-"] b {
  font-family: 'Pressura', sans-serif;
  font-weight: 500;
}

/* Beratungsprodukt-PDP: cal.com-CTA statt Warenkorb, volle Breite wie der ATC-Button */
.ce-beratung-cta { display: flex; }
.ce-beratung-cta .ce-btn-primary,
.ce-beratung-cta .ce-btn-outline { width: 100%; justify-content: center; }