@charset "UTF-8";
/* Tokens */
/* Design Tokens (SCSS-Quelle) */
/* SCSS Breakpoints (für Media Queries) */
:root {
  /* === BASISFARBEN === */
  --accent-color: #A5AA32;
  --accent-hover: #8a8e2a;
  /* === TRANSPARENZEN UND VARIANTEN === */
  --accent-transparent: rgba(165, 170, 50, 0.2);
  --accent-transparent-light: rgba(165, 170, 50, 0.05);
  --accent-transparent-hover: rgba(165, 170, 50, 0.1);
  --accent-border: rgba(165, 170, 50, 0.7);
  --accent-glow: rgba(165, 170, 50, 0.4);
  /* === NEUTRALE FARBEN === */
  --line-color: #e5e5e5;
  --upcoming-color: #333;
  --text-color-disabled: #b8b8b8;
  /* === GRÖSSENDEFINITIONEN === */
  --circle-size: 40px;
  --min-circle-size: 24px;
  --effective-circle-size: clamp(var(--min-circle-size), 5vw, var(--circle-size));
  /* === STATUSFARBEN === */
  --completed-color: var(--accent-color);
  --completed-text: #5a6810;
  --completed-bg-color: #f1f2e1;
  --completed-border: #b7bc59;
  --active-text-color: var(--accent-color);
  /* === SCHATTEN UND EFFEKTE === */
  --accent-glow-shadow: 0 0 8px var(--accent-glow), inset 0 0 0 2px var(--accent-transparent);
  /* === TIMING UND ANIMATIONEN === */
  --progress-transition: 0.3s;
  --standard-transition: 0.3s ease;
  /* === RESPONSIVE BREAKPOINTS === */
  --mobile-breakpoint: 600px;
  --tablet-breakpoint: 768px;
  --small-phone: 375px;
  /* === GLOBALE SCHRIFT === */
  font-family: sans-serif;
  /* Erweiterte Neutrals, Rahmen und Flächen */
  --neutral-dark: #343a40;
  --neutral-gray: #6c757d;
  --neutral-hover: #ebebeb;
  --neutral-mid: #555555;
  --neutral-verydark: #212529;
  --border-light: #e0e0e0;
  --border-subtle: #eeeeee;
  --bg-muted: #f8f9fa;
  --bg-panel: #ffffff;
  /* === DP THEME-HARMONISIERUNG === */
  --dp-primary: var(--accent-color, #A5AA32);
  --dp-primary-dark: var(--accent-hover, #8a8e2a);
  --dp-primary-light: var(--accent-transparent-light, rgba(165, 170, 50, 0.05));
  --dp-primary-glow: var(--accent-glow, rgba(165, 170, 50, 0.4));
  --dp-primary-border: var(--accent-border, rgba(165, 170, 50, 0.7));
  /* Neutrale Farben (Theme-harmonisch) */
  --dp-neutral-light: #F2F3F1;
  --dp-neutral-light-hover: #E5E6E3;
  --dp-neutral-dark: #343a40;
  --dp-neutral-gray: #6c757d;
  --dp-line-color: var(--line-color, #e5e5e5);
  /* Layout & Spacing */
  --dp-radius: 6px;
  --dp-gap: 12px;
  --dp-gap-small: 8px;
  --dp-gap-large: 16px;
  /* Schatten */
  --dp-shadow-light: 0 1px 3px rgba(0,0,0,.08);
  --dp-shadow-medium: 0 2px 8px rgba(0,0,0,.12);
  --dp-shadow-strong: 0 4px 12px rgba(0,0,0,.14);
  /* Transitions */
  --dp-transition-fast: 0.15s ease;
  --dp-transition-normal: 0.2s ease;
  --dp-transition-slow: var(--standard-transition, 0.3s ease);
  /* Typografie */
  --dp-font-family: var(--font-family, sans-serif);
  --dp-font-size-small: 0.85rem;
  --dp-font-size-normal: 0.9rem;
  --dp-font-size-large: 1rem;
  --dp-line-height: 1.3;
  /* Zusätzliche Status-/Semantik-Tokens */
  --dp-success: #4caf50;
  --dp-success-light: #e8f5e9;
  --dp-error: #e53935;
  --dp-error-light: #ffebee;
  --dp-neutral-medium: #9aa0a6;
}

.dp_container {
  --accent-color: #A5AA32 !important;
  accent-color: var(--accent-color) !important;
}

/* Globale DP-Komponenten */
/* Tokens */
/* Globales DP Grid (SCSS-Quelle) */
.dp_container .dp-custom-field-grid {
  --gap: var(--dp-gap, 12px);
  display: grid;
  /* Karten mit Mindestbreite 250px, ansonsten automatische Spaltenanzahl */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--gap);
  justify-content: stretch;
  /* Karten volle Breite in der Spalte */
  justify-items: stretch;
  align-items: stretch;
  /* Container-Query wird auf .dp_group definiert */
}

/* Kleinere Gaps bei schmaleren Containern (optional, relativ zu .dp_group) */
@container dp-group (max-width: $tablet) {
  .dp_container .dp-custom-field-grid {
    gap: var(--dp-gap-small, 8px);
  }
}
/* Hartes 1-Spalten-Fallback bei sehr schmaler Gruppenbreite */
@container dp-group (max-width: 600px) {
  .dp_container .dp-custom-field-grid {
    grid-template-columns: 1fr;
  }
}
/* Tokens */
/* Globale DP Cards (SCSS-Quelle) */
/* Optimiert: Gruppierte Selektoren zur Reduzierung von Duplikaten */
/* ==========================================================================
   Card Scale Support
   --dp-card-scale: Skalierungsfaktor (0.5 - 2.0, Default: 1)
   Wird über ProductFieldConfig.cardScale gesetzt
   ========================================================================== */
#dp_ui_accessory_configurator {
  --dp-card-scale: 1;
}
#dp_ui_accessory_configurator[style*="--dp-card-scale"].dp-accessory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dp_ui_accessory_configurator .dp-product-card {
  font-size: calc(0.85rem * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-product-name {
  padding: calc(10px * var(--dp-card-scale, 1)) calc(8px * var(--dp-card-scale, 1));
  font-size: calc(0.9rem * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-product-price {
  font-size: calc(1rem * var(--dp-card-scale, 1));
  margin: calc(8px * var(--dp-card-scale, 1)) calc(8px * var(--dp-card-scale, 1)) calc(4px * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-buttons-container {
  gap: calc(8px * var(--dp-card-scale, 1));
  padding: calc(12px * var(--dp-card-scale, 1)) calc(8px * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-select-button,
#dp_ui_accessory_configurator .dp-product-card .dp-details-button {
  padding: calc(8px * var(--dp-card-scale, 1)) calc(12px * var(--dp-card-scale, 1));
  font-size: calc(0.75rem * var(--dp-card-scale, 1));
  border-radius: calc(6px * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-variant-selectors {
  padding: calc(8px * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-variant-select-container label {
  font-size: calc(0.75rem * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-variant-select-container select {
  padding: calc(4px * var(--dp-card-scale, 1)) calc(8px * var(--dp-card-scale, 1));
  font-size: calc(0.75rem * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-image-navigation {
  height: calc(38px * var(--dp-card-scale, 1));
  padding: calc(6px * var(--dp-card-scale, 1)) calc(8px * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-nav-arrow {
  width: calc(26px * var(--dp-card-scale, 1));
  height: calc(26px * var(--dp-card-scale, 1));
  font-size: calc(12px * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-image-dot {
  width: calc(6px * var(--dp-card-scale, 1));
  height: calc(6px * var(--dp-card-scale, 1));
  min-width: calc(6px * var(--dp-card-scale, 1));
  min-height: calc(6px * var(--dp-card-scale, 1));
}
#dp_ui_accessory_configurator .dp-product-card .dp-image-dot.active {
  width: calc(8px * var(--dp-card-scale, 1));
  height: calc(8px * var(--dp-card-scale, 1));
  min-width: calc(8px * var(--dp-card-scale, 1));
  min-height: calc(8px * var(--dp-card-scale, 1));
}

/* Card Basis (inkl. Product Card) */
.dp_container .dp-custom-field-option, .dp_container .dp-fold-type-option, .dp_container .dp-glider-cord-option, .dp_container .dp-category-product-option, .dp_container .dp-curtain-finish-option,
.dp_container .dp-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  box-shadow: var(--dp-shadow-light, 0 1px 3px rgba(0, 0, 0, 0.08));
  transition: box-shadow var(--dp-transition-normal, 0.2s), border-color var(--dp-transition-normal, 0.2s);
  font-size: var(--dp-font-size-small, 0.85rem);
  overflow: hidden;
}
.dp_container .dp-custom-field-option:hover, .dp_container .dp-fold-type-option:hover, .dp_container .dp-glider-cord-option:hover, .dp_container .dp-category-product-option:hover, .dp_container .dp-curtain-finish-option:hover,
.dp_container .dp-product-card:hover {
  box-shadow: var(--dp-shadow-strong, 0 4px 12px rgba(0, 0, 0, 0.14));
}
.dp_container .dp-custom-field-option--selected, .dp_container .dp-custom-field-option.dp-selected, .dp_container .dp-fold-type-option--selected, .dp_container .dp-fold-type-option.dp-selected, .dp_container .dp-glider-cord-option--selected, .dp_container .dp-glider-cord-option.dp-selected, .dp_container .dp-category-product-option--selected, .dp_container .dp-category-product-option.dp-selected, .dp_container .dp-curtain-finish-option--selected, .dp_container .dp-curtain-finish-option.dp-selected,
.dp_container .dp-product-card--selected,
.dp_container .dp-product-card.dp-selected {
  border: 1px solid var(--dp-primary, var(--accent-color, #A5AA32));
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
  background: var(--bg-panel, #fff);
}
.dp_container .dp-custom-field-option--hidden, .dp_container .dp-custom-field-option.dp-hidden, .dp_container .dp-fold-type-option--hidden, .dp_container .dp-fold-type-option.dp-hidden, .dp_container .dp-glider-cord-option--hidden, .dp_container .dp-glider-cord-option.dp-hidden, .dp_container .dp-category-product-option--hidden, .dp_container .dp-category-product-option.dp-hidden, .dp_container .dp-curtain-finish-option--hidden, .dp_container .dp-curtain-finish-option.dp-hidden,
.dp_container .dp-product-card--hidden,
.dp_container .dp-product-card.dp-hidden {
  display: none !important;
}
.dp_container .dp-custom-field-option__image, .dp_container .dp-fold-type-option__image, .dp_container .dp-glider-cord-option__image, .dp_container .dp-category-product-option__image, .dp_container .dp-curtain-finish-option__image,
.dp_container .dp-product-card__image {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle, #eee);
  margin-bottom: 0;
}
.dp_container .dp-custom-field-option__content, .dp_container .dp-fold-type-option__content, .dp_container .dp-glider-cord-option__content, .dp_container .dp-category-product-option__content, .dp_container .dp-curtain-finish-option__content,
.dp_container .dp-product-card__content {
  padding: 10px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dp_container .dp-custom-field-option__title, .dp_container .dp-fold-type-option__title, .dp_container .dp-glider-cord-option__title, .dp_container .dp-category-product-option__title, .dp_container .dp-curtain-finish-option__title,
.dp_container .dp-product-card__title {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-weight: 600;
  font-size: 0.85rem;
  line-height: var(--dp-line-height, 1.3);
  color: var(--neutral-dark, #343a40);
  margin: 0 0 6px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-clamp: 2;
}
.dp_container .dp-custom-field-option__description, .dp_container .dp-fold-type-option__description, .dp_container .dp-glider-cord-option__description, .dp_container .dp-category-product-option__description, .dp_container .dp-curtain-finish-option__description,
.dp_container .dp-product-card__description {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-size: 0.7rem;
  color: var(--neutral-gray, #6c757d);
  line-height: 1.4;
  margin: 0 0 10px 0;
  flex: 1;
}
.dp_container .dp-custom-field-option__price, .dp_container .dp-fold-type-option__price, .dp_container .dp-glider-cord-option__price, .dp_container .dp-category-product-option__price, .dp_container .dp-curtain-finish-option__price,
.dp_container .dp-product-card__price {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--neutral-dark, #343a40);
  margin: 8px 8px 4px;
}
.dp_container .dp-custom-field-option__actions, .dp_container .dp-fold-type-option__actions, .dp_container .dp-glider-cord-option__actions, .dp_container .dp-category-product-option__actions, .dp_container .dp-curtain-finish-option__actions,
.dp_container .dp-product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle, #eee);
}

/* Responsive Typografie & Paddings */
@media (max-width: 768px) {
  .dp_container .dp-custom-field-option__content, .dp_container .dp-fold-type-option__content, .dp_container .dp-glider-cord-option__content, .dp_container .dp-category-product-option__content, .dp_container .dp-curtain-finish-option__content {
    padding: 10px 8px;
  }
  .dp_container .dp-custom-field-option__title, .dp_container .dp-fold-type-option__title, .dp_container .dp-glider-cord-option__title, .dp_container .dp-category-product-option__title, .dp_container .dp-curtain-finish-option__title {
    font-size: 0.8rem;
    margin-bottom: 5px;
  }
  .dp_container .dp-custom-field-option__description, .dp_container .dp-fold-type-option__description, .dp_container .dp-glider-cord-option__description, .dp_container .dp-category-product-option__description, .dp_container .dp-curtain-finish-option__description {
    font-size: 0.7rem;
    margin-bottom: 8px;
  }
  .dp_container .dp-custom-field-option__actions, .dp_container .dp-fold-type-option__actions, .dp_container .dp-glider-cord-option__actions, .dp_container .dp-category-product-option__actions, .dp_container .dp-curtain-finish-option__actions {
    padding: 10px 8px;
  }
}
@media (max-width: 600px) {
  .dp_container .dp-custom-field-option__content, .dp_container .dp-fold-type-option__content, .dp_container .dp-glider-cord-option__content, .dp_container .dp-category-product-option__content, .dp_container .dp-curtain-finish-option__content {
    padding: 8px 8px;
  }
  .dp_container .dp-custom-field-option__title, .dp_container .dp-fold-type-option__title, .dp_container .dp-glider-cord-option__title, .dp_container .dp-category-product-option__title, .dp_container .dp-curtain-finish-option__title {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .dp_container .dp-custom-field-option__description, .dp_container .dp-fold-type-option__description, .dp_container .dp-glider-cord-option__description, .dp_container .dp-category-product-option__description, .dp_container .dp-curtain-finish-option__description {
    font-size: 0.68rem;
  }
  .dp_container .dp-custom-field-option__actions, .dp_container .dp-fold-type-option__actions, .dp_container .dp-glider-cord-option__actions, .dp_container .dp-category-product-option__actions, .dp_container .dp-curtain-finish-option__actions {
    padding: 8px 8px;
    gap: 6px;
  }
}
/* Globale DP Buttons (SCSS-Quelle) */
/* Optimiert: Gruppierte Selektoren zur Reduzierung von Duplikaten */
.dp_container .dp-custom-field-btn, .dp_container .dp-fold-type-select-btn, .dp_container .dp-glider-cord-select-btn, .dp_container .dp-curtain-finish-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  border-radius: var(--dp-radius, 6px);
  cursor: pointer;
  transition: background-color var(--dp-transition-normal, 0.2s), color var(--dp-transition-normal, 0.2s), border-color var(--dp-transition-normal, 0.2s), transform var(--dp-transition-normal, 0.2s), box-shadow var(--dp-transition-normal, 0.2s);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-muted, #f8f9fa);
  color: var(--neutral-dark, #333);
  border: 1px solid var(--border-light, #ddd);
  font-weight: 600;
}
.dp_container .dp-custom-field-btn:hover, .dp_container .dp-custom-field-btn:focus, .dp_container .dp-fold-type-select-btn:hover, .dp_container .dp-fold-type-select-btn:focus, .dp_container .dp-glider-cord-select-btn:hover, .dp_container .dp-glider-cord-select-btn:focus, .dp_container .dp-curtain-finish-select-btn:hover, .dp_container .dp-curtain-finish-select-btn:focus {
  background: var(--neutral-hover, #ebebeb);
  color: var(--neutral-dark, #333);
  border-color: var(--border-light, #ddd);
  box-shadow: var(--dp-shadow-light, 0 1px 3px rgba(0, 0, 0, 0.08));
  transform: translateY(-2px);
  outline: none;
}
.dp_container .dp-custom-field-btn.dp-selected, .dp_container .dp-fold-type-select-btn.dp-selected, .dp_container .dp-glider-cord-select-btn.dp-selected, .dp_container .dp-curtain-finish-select-btn.dp-selected {
  background: var(--dp-primary, var(--accent-color, #A5AA32));
  color: #fff;
  border-color: var(--dp-primary, var(--accent-color, #A5AA32));
  font-weight: 700;
  transform: none;
  box-shadow: none;
}
.dp_container .dp-custom-field-btn:focus-visible, .dp_container .dp-fold-type-select-btn:focus-visible, .dp_container .dp-glider-cord-select-btn:focus-visible, .dp_container .dp-curtain-finish-select-btn:focus-visible {
  outline: 2px solid var(--dp-primary, var(--accent-color, #A5AA32));
  outline-offset: 1px;
}
.dp_container .dp-custom-field-btn:disabled, .dp_container .dp-fold-type-select-btn:disabled, .dp_container .dp-glider-cord-select-btn:disabled, .dp_container .dp-curtain-finish-select-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Tokens */
/* Toggle/Switch Component (SCSS-Quelle) */
/* Modernes, elegantes Design für binäre Entscheidungen */
/* === TOGGLE CONTAINER === */
.dp-toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  width: fit-content;
  margin: 0 auto;
}

/* === TOGGLE LABELS === */
.dp-toggle-label {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-size: var(--dp-font-size-normal, 0.9rem);
  font-weight: 500;
  color: var(--neutral-dark, #343a40);
  transition: color var(--dp-transition-normal, 0.2s ease), font-weight var(--dp-transition-normal, 0.2s ease);
  user-select: none;
  cursor: default;
}
.dp-toggle-label--off {
  color: var(--neutral-gray, #6c757d);
}
.dp-toggle-label--on {
  color: var(--neutral-gray, #6c757d);
}

/* Active State: Hervorhebung des aktiven Labels */
.dp-toggle-container--on .dp-toggle-label--on {
  color: var(--dp-primary, var(--accent-color, #A5AA32));
  font-weight: 600;
}

.dp-toggle-container--off .dp-toggle-label--off {
  color: var(--neutral-dark, #343a40);
  font-weight: 600;
}

/* === TOGGLE SWITCH === */
.dp-toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--dp-transition-fast, 0.15s ease);
  /* Focus State für Accessibility */
}
.dp-toggle-switch:hover {
  transform: scale(1.02);
}
.dp-toggle-switch:active {
  transform: scale(0.98);
}
.dp-toggle-switch:focus-visible {
  outline: 2px solid var(--dp-primary, var(--accent-color, #A5AA32));
  outline-offset: 3px;
  border-radius: 14px;
}

/* Hidden Checkbox (funktional, nicht sichtbar) */
.dp-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: none;
}

/* === TOGGLE SLIDER (der sichtbare Switch) === */
.dp-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--neutral-hover, #e0e0e0);
  border: 1px solid var(--border-light, #d0d0d0);
  border-radius: 14px;
  transition: background-color var(--dp-transition-normal, 0.2s ease), border-color var(--dp-transition-normal, 0.2s ease), box-shadow var(--dp-transition-normal, 0.2s ease);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Slider Button (der bewegliche Kreis) */
}
.dp-toggle-slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform var(--dp-transition-normal, 0.2s ease), box-shadow var(--dp-transition-normal, 0.2s ease);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Active State: Slider bewegt sich nach rechts, grüner Hintergrund */
.dp-toggle-input:checked + .dp-toggle-slider {
  background-color: var(--dp-primary, var(--accent-color, #A5AA32));
  border-color: var(--dp-primary-dark, var(--accent-hover, #8a8e2a));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 rgba(165, 170, 50, 0.3);
}
.dp-toggle-input:checked + .dp-toggle-slider::before {
  transform: translateX(24px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Hover auf aktivem Toggle: Leichter Glow-Effekt */
.dp-toggle-switch:hover .dp-toggle-input:checked + .dp-toggle-slider {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 8px rgba(165, 170, 50, 0.4);
}

/* === GRÖSSEN-VARIANTEN === */
/* Small */
.dp-toggle-container--small {
  gap: 8px;
  padding: 6px;
}
.dp-toggle-container--small .dp-toggle-label {
  font-size: 0.8rem;
}
.dp-toggle-container--small .dp-toggle-switch {
  width: 42px;
  height: 22px;
}
.dp-toggle-container--small .dp-toggle-slider {
  border-radius: 11px;
}
.dp-toggle-container--small .dp-toggle-slider::before {
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
}
.dp-toggle-container--small .dp-toggle-input:checked + .dp-toggle-slider::before {
  transform: translateX(20px);
}

/* Large */
.dp-toggle-container--large {
  gap: 16px;
  padding: 10px;
}
.dp-toggle-container--large .dp-toggle-label {
  font-size: 1.1rem;
}
.dp-toggle-container--large .dp-toggle-switch {
  width: 62px;
  height: 34px;
}
.dp-toggle-container--large .dp-toggle-slider {
  border-radius: 17px;
}
.dp-toggle-container--large .dp-toggle-slider::before {
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 2px;
}
.dp-toggle-container--large .dp-toggle-input:checked + .dp-toggle-slider::before {
  transform: translateX(28px);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .dp-toggle-container {
    gap: 10px;
  }
  .dp-toggle-label {
    font-size: 0.85rem;
  }
}
@media (max-width: 600px) {
  .dp-toggle-container {
    gap: 8px;
    padding: 6px;
  }
  .dp-toggle-label {
    font-size: 0.8rem;
  }
  /* Auf Mobile: Etwas größerer Touch-Target */
  .dp-toggle-switch {
    width: 56px;
    height: 30px;
  }
  .dp-toggle-switch:focus-visible {
    outline-offset: 2px;
  }
  .dp-toggle-slider::before {
    height: 24px;
    width: 24px;
  }
  .dp-toggle-input:checked + .dp-toggle-slider::before {
    transform: translateX(26px);
  }
}
/* === ERROR STATE === */
.dp-toggle-error {
  padding: 12px;
  background-color: var(--dp-error-light, #ffebee);
  color: var(--dp-error, #e53935);
  border: 1px solid var(--dp-error, #e53935);
  border-radius: var(--dp-radius, 6px);
  font-size: var(--dp-font-size-small, 0.85rem);
  text-align: center;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .dp-toggle-switch,
  .dp-toggle-label,
  .dp-toggle-slider,
  .dp-toggle-slider::before {
    transition: none;
  }
}
/* Tokens */
/**
 * Binary Cards Component - Professional Design
 * Harmonized with Product Cards Design System
 * Version: 2.0 (Complete Redesign)
 */
/* === BINARY CARDS CONTAINER === */
.dp-binary-cards {
  display: grid;
  gap: 10px;
  margin: 0 15px 24px 15px;
  /* Mobile-First: 2 Karten nebeneinander (50/50) */
  grid-template-columns: 1fr 1fr;
  /* Desktop: Mehr Platz für Karten */
}
@media (min-width: 768px) {
  .dp-binary-cards {
    gap: 12px;
  }
}

/* Stacked Layout auf Mobile (optional) */
.dp-binary-cards--stacked {
  grid-template-columns: 1fr;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* === EINZELNE BINARY CARD === */
.dp-binary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  overflow: hidden;
  /* Styling - Matching Product Cards */
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  box-shadow: var(--dp-shadow-light, 0 1px 3px rgba(0, 0, 0, 0.08));
  /* Interaktion */
  cursor: pointer;
  transition: box-shadow var(--dp-transition-normal, 0.2s ease), border-color var(--dp-transition-normal, 0.2s ease);
  user-select: none;
  /* Accessibility */
  outline: none;
  /* Focus State für Keyboard-Navigation */
  /* Desktop: Etwas größere Karten */
}
.dp-binary-card:hover {
  box-shadow: var(--dp-shadow-strong, 0 4px 12px rgba(0, 0, 0, 0.14));
}
.dp-binary-card:active {
  box-shadow: var(--dp-shadow-medium, 0 2px 8px rgba(0, 0, 0, 0.12));
}
.dp-binary-card:focus-visible {
  outline: 2px solid var(--dp-primary, var(--accent-color, #A5AA32));
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .dp-binary-card {
    min-height: 110px;
  }
}

/* === CARD CONTENT (Text-Bereich mit Padding) === */
.dp-binary-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  flex: 1;
  /* Dezente Trennlinie vom Bild */
  border-top: 1px solid var(--border-subtle, #eeeeee);
}
@media (min-width: 768px) {
  .dp-binary-card__content {
    padding: 14px 12px;
    gap: 8px;
  }
}

/* === SELECTED STATE === */
.dp-binary-card--selected {
  /* Professional Selection - Matching Button Focus */
  background: var(--bg-panel, #fff);
  border: 1px solid var(--dp-primary, var(--accent-color, #A5AA32));
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dp-binary-card--selected:hover {
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15), 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* === CARD ICON/EMOJI === */
.dp-binary-card__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 4px;
  /* Emoji als Icon */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
@media (min-width: 768px) {
  .dp-binary-card__icon {
    font-size: 3rem;
  }
}

/* === CARD IMAGE HEADER === */
.dp-binary-card__image-header {
  width: 100%;
  height: 140px;
  background: rgba(0, 0, 0, 0.01);
  flex-shrink: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dp-binary-card__image-header img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  mask-image: radial-gradient(ellipse 85% 85% at center, black 20%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 80%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at center, black 20%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 80%, transparent 95%);
}
@media (min-width: 768px) {
  .dp-binary-card__image-header {
    height: 160px;
    padding: 16px;
  }
}
@media (max-width: 600px) {
  .dp-binary-card__image-header {
    height: 110px;
    padding: 8px;
  }
}

/* === CARD LABEL === */
.dp-binary-card__label {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--neutral-dark, #343a40);
  text-align: center;
  line-height: 1.3;
  /* Selected State: Primärfarbe */
}
.dp-binary-card--selected .dp-binary-card__label {
  color: var(--dp-primary, var(--accent-color, #A5AA32));
  font-weight: 700;
}
@media (min-width: 768px) {
  .dp-binary-card__label {
    font-size: 0.9rem;
  }
}

/* === CARD DESCRIPTION === */
.dp-binary-card__description {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-size: 0.7rem;
  color: var(--neutral-gray, #6c757d);
  text-align: center;
  line-height: 1.4;
  margin-top: 4px;
  /* Begrenze Textlänge */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 768px) {
  .dp-binary-card__description {
    font-size: 0.75rem;
    -webkit-line-clamp: 3;
  }
}

/* === CARD PRICE === */
.dp-binary-card__price {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--neutral-dark, #343a40);
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, #eeeeee);
  width: 100%;
}
.dp-binary-card--selected .dp-binary-card__price {
  color: var(--dp-primary, var(--accent-color, #A5AA32));
  font-weight: 700;
}
@media (min-width: 768px) {
  .dp-binary-card__price {
    font-size: 1rem;
  }
}

/* === SIZE VARIANTS === */
/* Small */
.dp-binary-cards--small {
  gap: 8px;
}
.dp-binary-cards--small .dp-binary-card {
  min-height: 80px;
}
.dp-binary-cards--small .dp-binary-card__content {
  padding: 10px 8px;
  gap: 4px;
}
.dp-binary-cards--small .dp-binary-card__icon {
  font-size: 2rem;
}
.dp-binary-cards--small .dp-binary-card__image-header {
  height: 100px;
}
.dp-binary-cards--small .dp-binary-card__label {
  font-size: 0.9rem;
}
.dp-binary-cards--small .dp-binary-card__description {
  font-size: 0.75rem;
}
.dp-binary-cards--small .dp-binary-card--no-description {
  min-height: auto;
}
.dp-binary-cards--small .dp-binary-card--no-description .dp-binary-card__content {
  padding: 12px 10px;
  gap: 0;
}
.dp-binary-cards--small .dp-binary-card--no-description .dp-binary-card__label {
  font-weight: 500;
}
.dp-binary-cards--small .dp-binary-card--no-description.dp-binary-card--selected .dp-binary-card__label {
  font-weight: 600;
}

/* Compact - Optimiert für einfache Ja/Nein ohne Beschreibung */
.dp-binary-cards--compact {
  gap: 10px;
}
.dp-binary-cards--compact .dp-binary-card {
  min-height: auto;
}
.dp-binary-cards--compact .dp-binary-card__content {
  padding: 10px 12px;
  gap: 0;
  border-top: none;
}
.dp-binary-cards--compact .dp-binary-card__label {
  font-size: 0.9rem;
  font-weight: 500;
}
.dp-binary-cards--compact .dp-binary-card--selected .dp-binary-card__label {
  font-weight: 600;
}
.dp-binary-cards--compact .dp-binary-card__icon + .dp-binary-card__label {
  margin-top: 4px;
}

/* Large */
.dp-binary-cards--large {
  gap: 20px;
}
.dp-binary-cards--large .dp-binary-card {
  min-height: 180px;
}
@media (min-width: 768px) {
  .dp-binary-cards--large .dp-binary-card {
    min-height: 200px;
  }
}
.dp-binary-cards--large .dp-binary-card__content {
  padding: 28px 24px;
  gap: 14px;
}
@media (min-width: 768px) {
  .dp-binary-cards--large .dp-binary-card__content {
    padding: 32px 28px;
  }
}
.dp-binary-cards--large .dp-binary-card__icon {
  font-size: 3rem;
}
@media (min-width: 768px) {
  .dp-binary-cards--large .dp-binary-card__icon {
    font-size: 3.5rem;
  }
}
.dp-binary-cards--large .dp-binary-card__image-header {
  height: 150px;
}
@media (min-width: 768px) {
  .dp-binary-cards--large .dp-binary-card__image-header {
    height: 180px;
  }
}
.dp-binary-cards--large .dp-binary-card__label {
  font-size: 1.1rem;
}
@media (min-width: 768px) {
  .dp-binary-cards--large .dp-binary-card__label {
    font-size: 1.25rem;
  }
}
.dp-binary-cards--large .dp-binary-card__description {
  font-size: 0.9rem;
}
@media (min-width: 768px) {
  .dp-binary-cards--large .dp-binary-card__description {
    font-size: 0.95rem;
  }
}

/* === MOBILE OPTIMIERUNGEN === */
@media (max-width: 600px) {
  .dp-binary-cards {
    gap: 10px;
    margin: 0 0 24px 0;
    width: 100%;
  }
  .dp-binary-card {
    min-height: 110px;
    min-width: 0;
  }
  .dp-binary-card__content {
    padding: 14px 10px;
  }
  /* Auf sehr kleinen Screens: Text kleiner */
}
@media (max-width: 600px) and (max-width: 360px) {
  .dp-binary-card__label {
    font-size: 0.9rem;
  }
  .dp-binary-card__description {
    font-size: 0.75rem;
  }
}
/* === ERROR STATE === */
.dp-binary-error {
  padding: 12px;
  background-color: var(--dp-error-light, #ffebee);
  color: var(--dp-error, #e53935);
  border: 1px solid var(--dp-error, #e53935);
  border-radius: var(--dp-radius, 6px);
  font-size: var(--dp-font-size-small, 0.85rem);
  text-align: center;
  margin: 12px 0;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .dp-binary-card {
    transition: none;
  }
}
/**
 * Elegant Slider Component - Professional UX
 * Harmonized with Product Cards Design System
 * Version: 2.0 (Complete Redesign)
 */
.dp-slider__wrapper {
  box-sizing: border-box !important;
  margin: 0 15px 8px 15px;
  display: block !important;
}
.dp-slider__wrapper.dp-slider--hidden {
  display: none !important;
}

.dp-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--dp-gap, 12px);
}

.dp-slider__label {
  display: block;
  font-size: var(--dp-font-size-normal, 0.9rem);
  font-weight: 500;
  color: var(--dp-neutral-dark, #343a40);
  margin-bottom: 0;
  line-height: var(--dp-line-height, 1.3);
}
.dp-slider__wrapper > .dp-slider__label {
  margin-bottom: var(--dp-gap, 12px);
}

.dp-slider__input-wrapper--top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: var(--dp-font-size-normal, 0.9rem);
  color: var(--dp-neutral-dark, #343a40);
}

.dp-slider__input-label {
  font-weight: 500;
  white-space: nowrap;
}

.dp-slider__manual-input {
  width: 80px;
  padding: 8px 12px;
  font-size: var(--dp-font-size-normal, 0.9rem);
  font-weight: 600;
  color: var(--dp-primary, #A5AA32);
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  text-align: center;
  transition: all var(--dp-transition-fast, 0.15s) ease;
  -moz-appearance: textfield;
}
.dp-slider__manual-input:focus {
  outline: none;
  border-color: var(--dp-primary, #A5AA32);
  box-shadow: 0 0 0 3px var(--dp-primary-light, rgba(165, 170, 50, 0.05));
}
.dp-slider__manual-input:hover {
  border-color: var(--dp-primary-border, rgba(165, 170, 50, 0.7));
  background: var(--dp-primary-light, rgba(165, 170, 50, 0.05));
}
.dp-slider__manual-input::-webkit-inner-spin-button, .dp-slider__manual-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dp-slider__input-unit {
  font-weight: 500;
  color: var(--dp-neutral-gray, #6c757d);
}

@media (max-width: 768px) {
  .dp-slider__input-wrapper--top {
    gap: 6px;
    margin-bottom: 10px;
  }
  .dp-slider__manual-input {
    width: 70px;
    padding: 6px 10px;
    font-size: 0.85rem;
  }
  .dp-slider__input-label,
  .dp-slider__input-unit {
    font-size: 0.85rem;
  }
}
@media (max-width: 360px) {
  .dp-slider__input-wrapper--top {
    gap: 4px;
  }
  .dp-slider__manual-input {
    width: 60px;
    padding: 5px 8px;
    font-size: 0.8rem;
  }
  .dp-slider__input-label,
  .dp-slider__input-unit {
    font-size: 0.8rem;
  }
}
.dp-slider__container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dp-gap-large, 16px);
  padding: 20px 24px;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  box-shadow: var(--dp-shadow-light, 0 1px 3px rgba(0, 0, 0, 0.08));
  transition: box-shadow var(--dp-transition-normal, 0.2s ease), border-color var(--dp-transition-normal, 0.2s ease);
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.dp-slider__container:hover {
  box-shadow: var(--dp-shadow-medium, 0 2px 8px rgba(0, 0, 0, 0.12));
}
.dp-slider__container:focus-within {
  border-color: var(--dp-primary, #A5AA32);
  box-shadow: var(--dp-shadow-medium, 0 2px 8px rgba(0, 0, 0, 0.12)), 0 0 0 3px var(--dp-primary-light, rgba(165, 170, 50, 0.05));
}
@media (max-width: 768px) {
  .dp-slider__container {
    padding: 16px 20px;
    gap: var(--dp-gap, 12px);
  }
}

.dp-slider__wrapper.dp-slider--input-top {
  padding: 20px 24px;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  box-shadow: var(--dp-shadow-light, 0 1px 3px rgba(0, 0, 0, 0.08));
  transition: box-shadow var(--dp-transition-normal, 0.2s ease), border-color var(--dp-transition-normal, 0.2s ease);
}
.dp-slider__wrapper.dp-slider--input-top:hover {
  box-shadow: var(--dp-shadow-medium, 0 2px 8px rgba(0, 0, 0, 0.12));
}
.dp-slider__wrapper.dp-slider--input-top:focus-within {
  border-color: var(--dp-primary, #A5AA32);
  box-shadow: var(--dp-shadow-medium, 0 2px 8px rgba(0, 0, 0, 0.12)), 0 0 0 3px var(--dp-primary-light, rgba(165, 170, 50, 0.05));
}
@media (max-width: 768px) {
  .dp-slider__wrapper.dp-slider--input-top {
    padding: 16px 20px;
  }
}
.dp-slider__wrapper.dp-slider--input-top .dp-slider__input-wrapper--top {
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .dp-slider__wrapper.dp-slider--input-top .dp-slider__input-wrapper--top {
    margin-bottom: 12px;
  }
}
.dp-slider__wrapper.dp-slider--input-top .dp-slider__container {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.dp-slider__wrapper.dp-slider--input-top .dp-slider__container:hover {
  box-shadow: none;
}
.dp-slider__wrapper.dp-slider--input-top .dp-slider__container:focus-within {
  box-shadow: none;
}

.dp-slider__buttons {
  display: flex;
  gap: var(--dp-gap-small, 8px);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .dp-slider__buttons {
    display: none;
  }
}

.dp-slider__button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light, #e0e0e0);
  background: var(--bg-panel, #fff);
  color: var(--dp-primary, #A5AA32);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dp-transition-fast, 0.15s) ease;
  user-select: none;
  flex-shrink: 0;
  outline: none;
}
.dp-slider__button:focus {
  outline: none;
}
.dp-slider__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dp-primary, #A5AA32);
}
.dp-slider__button:hover {
  background: var(--dp-primary, #A5AA32);
  color: #fff;
  border-color: var(--dp-primary, #A5AA32);
  transform: scale(1.05);
}
.dp-slider__button:active {
  transform: scale(0.95);
}
.dp-slider__button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}
.dp-slider__button:disabled:hover {
  background: var(--bg-panel, #fff);
  color: var(--dp-primary, #A5AA32);
  border-color: var(--border-light, #e0e0e0);
}

.dp-slider__track-container {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0 11px;
  --thumb-width: 22px;
  --thumb-offset: calc(var(--thumb-width) / 2);
  touch-action: pan-y;
}
.dp-slider--centimeter-layout .dp-slider__track-container {
  --thumb-width: 28px;
  --thumb-offset: 14px;
}
.dp-slider--centimeter-layout .dp-slider__track-container {
  padding: 0;
}

.dp-slider__track {
  position: relative;
  height: 3px;
  background: var(--dp-neutral-light, #F2F3F1);
  border-radius: 2px;
  margin: 19px 0;
}
.dp-slider--centimeter-layout .dp-slider__track {
  height: 6px;
  border-radius: 3px;
}

.dp-slider__track-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--dp-primary, #A5AA32), var(--dp-primary-dark, #8a8e2a));
  border-radius: 3px;
  transition: width var(--dp-transition-fast, 0.15s) ease-out;
  pointer-events: none;
}

.dp-slider__input {
  position: relative;
  width: calc(100% + 22px);
  height: 41px;
  margin: -19px -11px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  outline: none;
  cursor: pointer;
  z-index: 100;
  touch-action: pan-x;
}
.dp-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: -9.5px !important;
  background: var(--dp-primary, #A5AA32) !important;
  background-color: var(--dp-primary, #A5AA32) !important;
  opacity: 1 !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 999 !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-webkit-slider-thumb {
  width: 24px !important;
  height: 24px !important;
  margin-top: -9px !important;
}
.dp-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--dp-primary-dark, #8a8e2a) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.dp-slider__input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
  background: var(--dp-primary-dark, #8a8e2a) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.dp-slider__input::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  background: var(--dp-primary, #A5AA32) !important;
  background-color: var(--dp-primary, #A5AA32) !important;
  opacity: 1 !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 999 !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-moz-range-thumb {
  width: 28px !important;
  height: 28px !important;
}
.dp-slider__input::-moz-range-thumb:hover {
  transform: scale(1.2);
  background: var(--dp-primary-dark, #8a8e2a) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.dp-slider__input::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
  background: var(--dp-primary-dark, #8a8e2a) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.dp-slider__input::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none !important;
  height: 3px !important;
  border-radius: 2px !important;
}
.dp-slider__input::-moz-range-track {
  background: transparent !important;
  border: none !important;
  height: 3px !important;
  border-radius: 2px !important;
}

.dp-slider__value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  font-size: var(--dp-font-size-normal, 0.9rem);
  font-weight: 700;
  color: var(--dp-primary, #A5AA32);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dp-transition-fast, 0.15s) ease;
}
.dp-slider__value:not(.dp-slider__value--input) {
  align-self: center;
  margin-top: -2.5px;
}
.dp-slider__container:hover .dp-slider__value {
  border-color: var(--dp-primary-border, rgba(165, 170, 50, 0.7));
  background: var(--dp-primary-light, rgba(165, 170, 50, 0.05));
}
.dp-slider__value--input {
  cursor: text;
  text-align: center;
  font-family: inherit;
  -moz-appearance: textfield;
}
.dp-slider__value--input::-webkit-outer-spin-button, .dp-slider__value--input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dp-slider__value--input:focus {
  outline: none;
  border-color: var(--dp-primary, #A5AA32);
  box-shadow: 0 0 0 3px var(--dp-primary-light, rgba(165, 170, 50, 0.05));
}

.dp-slider__value-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
  margin-top: -2.5px;
}

.dp-slider__value-unit {
  font-size: var(--dp-font-size-small, 0.85rem);
  font-weight: 600;
  color: var(--dp-neutral-gray, #6c757d);
  white-space: nowrap;
  user-select: none;
}

.dp-slider__labels {
  position: relative;
  width: 100%;
  height: 20px;
  margin-top: var(--dp-gap-small, 8px);
  font-size: var(--dp-font-size-small, 0.85rem);
  color: var(--dp-neutral-gray, #6c757d);
  user-select: none;
}

.dp-slider__label-tick {
  position: absolute;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
  color: var(--dp-neutral-gray, #6c757d);
}

.dp-slider__wrapper:not(.dp-slider--centimeter-layout) .dp-slider__label-tick.dp-slider__label-min {
  transform: translateX(0);
  font-weight: 600;
  color: var(--dp-neutral-dark, #343a40);
}

.dp-slider__wrapper:not(.dp-slider--centimeter-layout) .dp-slider__label-tick.dp-slider__label-max {
  transform: translateX(-100%);
  font-weight: 600;
  color: var(--dp-neutral-dark, #343a40);
}

@media (prefers-contrast: high) {
  .dp-slider__container {
    border-width: 2px;
  }
  .dp-slider__track {
    background: #ddd;
  }
  .dp-slider__track-fill {
    background: var(--dp-primary, #A5AA32);
  }
  .dp-slider__input::-webkit-slider-thumb {
    border-width: 3px;
  }
  .dp-slider__input::-moz-range-thumb {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dp-slider__container,
  .dp-slider__button,
  .dp-slider__track-fill,
  .dp-slider__input::-webkit-slider-thumb,
  .dp-slider__input::-moz-range-thumb,
  .dp-slider__value {
    transition: none;
  }
}
.dp-slider__input:focus-visible {
  outline: 2px solid var(--dp-primary, #A5AA32);
  outline-offset: 4px;
  border-radius: 3px;
}

.dp-slider--thumb-small .dp-slider__track-container {
  padding: 0 9px;
}
.dp-slider--thumb-small .dp-slider__input {
  width: calc(100% + 18px);
  margin: -19px -9px;
}
.dp-slider--thumb-small .dp-slider__input::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  margin-top: -7.5px !important;
}
.dp-slider--thumb-small .dp-slider__input::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
}

.dp-slider--thumb-large .dp-slider__track-container {
  padding: 0 15px;
}
.dp-slider--thumb-large .dp-slider__input {
  width: calc(100% + 30px);
  margin: -19px -15px;
}
.dp-slider--thumb-large .dp-slider__input::-webkit-slider-thumb {
  width: 30px !important;
  height: 30px !important;
  margin-top: -13.5px !important;
}
.dp-slider--thumb-large .dp-slider__input::-moz-range-thumb {
  width: 30px !important;
  height: 30px !important;
}

.dp-slider--value-top .dp-slider__value {
  order: -1;
  margin-bottom: var(--dp-gap-small, 8px);
  margin-left: 0;
}

.dp-slider--scale-above .dp-slider__labels {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--dp-gap-small, 8px);
}
.dp-slider--scale-above .dp-slider__track-container {
  display: flex;
  flex-direction: column;
}

.dp-slider--input-left.dp-slider__wrapper {
  margin: 0 15px 24px 15px;
  padding: 16px 20px;
  background: white;
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: visible !important;
}
@media (max-width: 480px) {
  .dp-slider--input-left.dp-slider__wrapper {
    margin: 0 0 24px 0;
    padding: 12px 14px;
  }
}
.dp-slider--input-left .dp-slider__container {
  display: flex;
  align-items: center;
  gap: 16px;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  overflow: visible !important;
}
@media (max-width: 480px) {
  .dp-slider--input-left .dp-slider__container {
    gap: 10px;
  }
}
.dp-slider--input-left .dp-slider__input-wrapper--left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dp-slider--input-left .dp-slider__btn-minus,
.dp-slider--input-left .dp-slider__btn-plus {
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  outline: none;
}
.dp-slider--input-left .dp-slider__btn-minus:focus,
.dp-slider--input-left .dp-slider__btn-plus:focus {
  outline: none;
}
.dp-slider--input-left .dp-slider__btn-minus:focus-visible,
.dp-slider--input-left .dp-slider__btn-plus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dp-primary, #A5AA32);
}
.dp-slider--input-left .dp-slider__btn-minus:hover:not(:disabled),
.dp-slider--input-left .dp-slider__btn-plus:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: var(--dp-primary, #A5AA32);
  color: var(--dp-primary, #A5AA32);
}
.dp-slider--input-left .dp-slider__btn-minus:disabled,
.dp-slider--input-left .dp-slider__btn-plus:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .dp-slider--input-left .dp-slider__btn-minus,
  .dp-slider--input-left .dp-slider__btn-plus {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }
}
.dp-slider--input-left .dp-slider__manual-input {
  width: 60px;
  padding: 6px 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dp-primary, #A5AA32);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  text-align: center;
  transition: all 0.15s ease;
  -moz-appearance: textfield;
}
.dp-slider--input-left .dp-slider__manual-input:focus {
  outline: none;
  border-color: var(--dp-primary, #A5AA32);
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15);
}
.dp-slider--input-left .dp-slider__manual-input:hover:not(:focus) {
  border-color: #d1d5db;
}
.dp-slider--input-left .dp-slider__manual-input::-webkit-inner-spin-button, .dp-slider--input-left .dp-slider__manual-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 480px) {
  .dp-slider--input-left .dp-slider__manual-input {
    width: 50px;
    padding: 5px 6px;
    font-size: 0.9rem;
  }
}
.dp-slider--input-left .dp-slider__input-unit {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  margin-left: -2px;
}
@media (max-width: 480px) {
  .dp-slider--input-left .dp-slider__input-unit {
    font-size: 0.75rem;
  }
}
.dp-slider--input-left .dp-slider__track-container {
  flex: 1;
  min-width: 0;
  padding: 0;
  position: relative;
  overflow: visible !important;
}
.dp-slider--input-left .dp-slider__track {
  position: relative !important;
  height: 3px !important;
  margin: 1rem 0 0 0 !important;
  background: transparent !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.dp-slider--input-left .dp-slider__track-fill {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 0 !important;
  width: auto !important;
  height: 1.5px !important;
  background: linear-gradient(to right, var(--dp-primary, #A5AA32) 0%, var(--dp-primary, #A5AA32) var(--slider-percentage, 0%), #e0e0e0 var(--slider-percentage, 0%), #e0e0e0 100%) !important;
  border-radius: 0.75px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.dp-slider--input-left .dp-slider__ticks {
  position: absolute !important;
  top: 0 !important;
  left: 12px !important;
  right: 12px !important;
  height: 1.5px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.dp-slider--input-left .dp-slider__tick {
  position: absolute !important;
  width: 1px !important;
  height: 3px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  transform: translateX(-50%) !important;
}
.dp-slider--input-left .dp-slider__input {
  width: 100% !important;
  height: 1.5px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border-radius: 0.75px !important;
  outline: none !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  display: block !important;
}
.dp-slider--input-left .dp-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(160deg, #ffffff 0%, #fafafa 100%) !important;
  border: 2px solid var(--dp-primary, #A5AA32) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgb(255, 255, 255) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top: -11.25px !important;
  opacity: 1 !important;
}
.dp-slider--input-left .dp-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.08) !important;
  border-color: var(--dp-primary-dark, #8a8e2a) !important;
  box-shadow: 0 4px 12px rgba(165, 170, 50, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgb(255, 255, 255) !important;
}
.dp-slider--input-left .dp-slider__input::-webkit-slider-thumb:active {
  transform: scale(1.02) !important;
}
.dp-slider--input-left .dp-slider__input::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(160deg, #ffffff 0%, #fafafa 100%) !important;
  border: 2px solid var(--dp-primary, #A5AA32) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgb(255, 255, 255) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
}
.dp-slider--input-left .dp-slider__input::-moz-range-thumb:hover {
  transform: scale(1.08) !important;
  border-color: var(--dp-primary-dark, #8a8e2a) !important;
  box-shadow: 0 4px 12px rgba(165, 170, 50, 0.2), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgb(255, 255, 255) !important;
}
.dp-slider--input-left .dp-slider__input::-moz-range-thumb:active {
  transform: scale(1.02) !important;
}
.dp-slider--input-left .dp-slider__input::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 1.5px !important;
  cursor: pointer !important;
  background: transparent !important;
  border-radius: 0.75px !important;
  border: none !important;
}
.dp-slider--input-left .dp-slider__input::-moz-range-track {
  width: 100% !important;
  height: 1.5px !important;
  cursor: pointer !important;
  background: transparent !important;
  border-radius: 0.75px !important;
  border: none !important;
}
.dp-slider--input-left .dp-slider__labels,
.dp-slider--input-left .dp-slider__labels--flex {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 18px !important;
  margin-top: 8px !important;
  font-size: 0.75rem !important;
  color: #9ca3af !important;
}
.dp-slider--input-left .dp-slider__label-tick {
  position: absolute !important;
  transform: translateX(-50%) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.dp-slider--input-left .dp-slider__label-min {
  left: 12px !important;
}
.dp-slider--input-left .dp-slider__label-max {
  left: calc(100% - 12px) !important;
}
.dp-slider--input-left .dp-slider__buttons {
  display: none !important;
}
.dp-slider--input-left .dp-slider__value,
.dp-slider--input-left .dp-slider__value-wrapper {
  display: none !important;
}
.dp-slider--input-left.dp-slider--thumb-solid .dp-slider__input::-webkit-slider-thumb {
  background: var(--dp-primary, #A5AA32) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dp-slider--input-left.dp-slider--thumb-solid .dp-slider__input::-moz-range-thumb {
  background: var(--dp-primary, #A5AA32) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dp-slider--input-left.dp-slider--thumb-ring .dp-slider__input::-webkit-slider-thumb, .dp-slider--input-left.dp-slider--thumb-subtle .dp-slider__input::-webkit-slider-thumb {
  background: #fff !important;
  border: 2px solid var(--dp-primary, #A5AA32) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.dp-slider--input-left.dp-slider--thumb-ring .dp-slider__input::-moz-range-thumb, .dp-slider--input-left.dp-slider--thumb-subtle .dp-slider__input::-moz-range-thumb {
  background: #fff !important;
  border: 2px solid var(--dp-primary, #A5AA32) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.dp-slider--centimeter-layout.dp-slider__wrapper {
  margin: 0 15px 24px 15px;
  padding: 0.75rem;
  background: white;
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout.dp-slider__wrapper {
    padding: 0.65rem;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout.dp-slider__wrapper {
    padding: 0.5rem 1rem;
    margin: 0 0 24px 0;
    width: 100%;
  }
}
.dp-slider--centimeter-layout .dp-slider__container {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.dp-slider--centimeter-layout .dp-slider__track-container {
  padding: 0;
  position: relative;
  width: 100% !important;
  box-sizing: border-box !important;
}
.dp-slider--centimeter-layout .dp-slider__track {
  position: relative !important;
  margin: 1rem 0 0 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__track {
    margin: 0.75rem 0 0 0 !important;
  }
}
.dp-slider--centimeter-layout .dp-slider__track-bar {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 0 !important;
  height: 6px !important;
  background: linear-gradient(to right, var(--dp-primary, #A5AA32) 0%, var(--dp-primary, #A5AA32) var(--slider-percentage, 27.2%), #e5e7eb var(--slider-percentage, 27.2%), #e5e7eb 100%) !important;
  border-radius: 3px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.dp-slider--centimeter-layout .dp-slider__input {
  width: 100% !important;
  height: 6px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border-radius: 3px !important;
  outline: none !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  display: block !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--dp-primary, #A5AA32) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(165, 170, 50, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top: -9px !important;
  opacity: 1 !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 6px 20px rgba(165, 170, 50, 0.6), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-webkit-slider-thumb:active {
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(165, 170, 50, 0.7), 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  background: var(--dp-primary, #A5AA32) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(165, 170, 50, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-moz-range-thumb:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 6px 20px rgba(165, 170, 50, 0.6), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-moz-range-thumb:active {
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(165, 170, 50, 0.7), 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  cursor: pointer !important;
  background: transparent !important;
  border-radius: 3px !important;
  border: none !important;
  box-sizing: border-box !important;
}
.dp-slider--centimeter-layout .dp-slider__input::-moz-range-track {
  width: 100% !important;
  height: 6px !important;
  cursor: pointer !important;
  background: transparent !important;
  border-radius: 3px !important;
  border: none !important;
  box-sizing: border-box !important;
}
.dp-slider--centimeter-layout .dp-slider__ticks {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.dp-slider--centimeter-layout .dp-slider__tick {
  position: absolute !important;
  width: 3px !important;
  height: 6px !important;
  background: white !important;
  transform: translateX(-50%) !important;
}
.dp-slider--centimeter-layout .dp-slider__labels {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  color: #6b7280 !important;
  font-size: 0.875rem !important;
  height: 20px !important;
  margin-top: 14px !important;
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout .dp-slider__labels {
    font-size: 0.8125rem !important;
    margin-top: 12px !important;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__labels {
    font-size: 0.75rem !important;
    margin-top: 10px !important;
    height: 18px !important;
  }
}
.dp-slider--centimeter-layout .dp-slider__label-tick {
  position: absolute !important;
  transform: translateX(-50%) !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
}
.dp-slider--centimeter-layout .dp-slider__label-tick.dp-slider__label-min, .dp-slider--centimeter-layout .dp-slider__label-tick.dp-slider__label-max {
  transform: translateX(-50%) !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__label-tick {
    font-weight: 400 !important;
  }
}
.dp-slider--centimeter-layout .dp-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout .dp-slider__controls {
    gap: 0.35rem;
    margin-bottom: 0.2rem;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__controls {
    gap: 0.3rem;
    margin-bottom: 0.2rem;
  }
}
.dp-slider--centimeter-layout .dp-slider__control-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  margin-right: 0.75rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout .dp-slider__control-label {
    font-size: 0.85rem;
    margin-right: 0.65rem;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__control-label {
    font-size: 0.8rem;
    margin-right: 0.5rem;
  }
}
.dp-slider--centimeter-layout .dp-slider__control-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: white;
  font-size: 1rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-slider--centimeter-layout .dp-slider__control-btn:hover:not(:disabled) {
  border-color: var(--dp-primary, #A5AA32);
  color: var(--dp-primary, #A5AA32);
}
.dp-slider--centimeter-layout .dp-slider__control-btn:focus {
  outline: none;
  border-color: var(--dp-primary, #A5AA32);
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15);
}
.dp-slider--centimeter-layout .dp-slider__control-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout .dp-slider__control-btn {
    width: 26px;
    height: 26px;
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__control-btn {
    width: 24px;
    height: 24px;
    font-size: 0.875rem;
    border-width: 1px;
    border-radius: 0.3rem;
  }
}
.dp-slider--centimeter-layout .dp-slider__value-display {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem;
  min-width: 100px;
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout .dp-slider__value-display {
    min-width: 85px;
    gap: 0.125rem;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__value-display {
    min-width: 70px;
    gap: 0.1rem;
  }
}
.dp-slider--centimeter-layout .dp-slider__value--large {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--dp-primary, #A5AA32);
  line-height: 1;
  margin: 0;
  border: none;
  background: transparent;
  text-align: center;
  width: 65px;
  outline: none;
  padding: 0.025rem 0.075rem;
  border-radius: 0.375rem;
  transition: background 0.2s;
  -moz-appearance: textfield;
}
.dp-slider--centimeter-layout .dp-slider__value--large:hover {
  background: #f3f4f6;
}
.dp-slider--centimeter-layout .dp-slider__value--large:focus {
  background: #e5e7eb;
}
.dp-slider--centimeter-layout .dp-slider__value--large::-webkit-outer-spin-button, .dp-slider--centimeter-layout .dp-slider__value--large::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout .dp-slider__value--large {
    font-size: 1.05rem;
    width: 58px;
    padding: 0.02rem 0.06rem;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__value--large {
    font-size: 0.95rem;
    width: 50px;
    padding: 0.015rem 0.05rem;
  }
}
.dp-slider--centimeter-layout .dp-slider__unit {
  font-size: 0.875rem;
  color: #9ca3af;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 768px) {
  .dp-slider--centimeter-layout .dp-slider__unit {
    font-size: 0.8rem;
  }
}
@media (max-width: 480px) {
  .dp-slider--centimeter-layout .dp-slider__unit {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   SLIDER DISABLED STATE
   ========================================================================== */
.dp-slider--disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(30%);
}
.dp-slider--disabled input[type=range],
.dp-slider--disabled input[type=number],
.dp-slider--disabled input[type=text],
.dp-slider--disabled button {
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.dp-slider--disabled .dp-slider__track-bar,
.dp-slider--disabled .dp-slider__track-fill {
  background: #ccc !important;
}
.dp-slider--disabled input[type=range]::-webkit-slider-thumb {
  background: #e5e5e5 !important;
  border-color: #bbb !important;
  box-shadow: none !important;
}
.dp-slider--disabled input[type=range]::-moz-range-thumb {
  background: #e5e5e5 !important;
  border-color: #bbb !important;
  box-shadow: none !important;
}
.dp-slider--disabled .dp-slider__label,
.dp-slider--disabled .dp-slider__scale-label {
  color: #999 !important;
}

.dp-slider__accessory-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 15px 8px 15px;
  padding: 12px 16px;
  border-radius: var(--dp-radius, 6px);
  font-size: 0.9rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.dp-slider__accessory-info-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dp-slider__accessory-icon {
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.7;
}

.dp-slider__accessory-info-text {
  color: var(--dp-neutral-gray, #6c757d);
  font-weight: 400;
}

.dp-slider__accessory-info-label {
  color: var(--dp-neutral-gray, #6c757d);
  font-weight: 400;
}

.dp-slider__accessory-info-value {
  font-weight: 600;
  color: var(--dp-neutral-dark, #495057);
}

.dp-slider__accessory-info--hidden {
  background: var(--dp-neutral-light, #f8f9fa);
  border: 1px solid var(--border-light, #e9ecef);
}
.dp-slider__accessory-info--hidden .dp-slider__accessory-icon {
  color: var(--dp-neutral-gray, #868e96);
}

.dp-slider__accessory-info--readonly {
  background: var(--dp-neutral-light, #f8f9fa);
  border: 1px solid var(--border-light, #e0e0e0);
  padding: 8px 12px;
  font-size: 0.85rem;
}
.dp-slider__accessory-info--readonly .dp-slider__accessory-icon {
  color: var(--dp-neutral-gray, #6c757d);
}
.dp-slider__accessory-info--readonly .dp-slider__accessory-info-text {
  color: var(--dp-neutral-gray, #6c757d);
}

.dp-slider__accessory-info--compact {
  background: transparent;
  border: none;
  padding: 8px 0;
}

.dp-slider__accessory-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dp-slider__accessory-compact-label {
  font-weight: 500;
  color: var(--dp-neutral-dark, #343a40);
}

.dp-slider__accessory-compact-value {
  font-weight: 600;
  color: var(--dp-primary, #A5AA32);
  background: var(--dp-primary-light, rgba(165, 170, 50, 0.08));
  padding: 4px 10px;
  border-radius: var(--dp-radius, 6px);
}

.dp-slider__accessory-compact-hint {
  font-size: 0.85em;
  color: var(--dp-neutral-gray, #6c757d);
}

@media (max-width: 768px) {
  .dp-slider__accessory-info {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
  .dp-slider__accessory-info-content {
    gap: 8px;
    flex-wrap: wrap;
  }
  .dp-slider__accessory-info-label {
    flex: 1;
  }
  .dp-slider__accessory-info-value {
    font-size: 1rem;
    font-weight: 700;
  }
  .dp-slider__accessory-compact {
    gap: 6px;
  }
  .dp-slider__accessory-compact-label {
    font-size: 0.85rem;
  }
  .dp-slider__accessory-compact-value {
    padding: 3px 8px;
    font-size: 0.85rem;
  }
  .dp-slider__accessory-compact-hint {
    font-size: 0.8em;
    width: 100%;
    margin-top: 4px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   Measurement Guide - Trigger Link & Popup
   ═══════════════════════════════════════════════════════════════════════════════ */
.dp-measurement-guide__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--dp-primary, #2c5aa0);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
  margin-left: auto;
}
.dp-measurement-guide__trigger:hover {
  color: var(--dp-primary-dark, #1e4080);
  text-decoration: underline;
}
.dp-measurement-guide__trigger:focus {
  outline: 2px solid var(--dp-primary, #2c5aa0);
  outline-offset: 2px;
  border-radius: 4px;
}
.dp-measurement-guide__trigger--floating {
  position: absolute;
  bottom: calc(100% + 28px);
  right: 0;
  margin: 0;
  transform: translateY(50%);
}

.dp-slider--has-floating-guide {
  position: relative;
}

.dp-measurement-guide__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--dp-primary, #2c5aa0);
  border-radius: 50%;
  flex-shrink: 0;
}

.dp-measurement-guide__trigger-text {
  font-weight: 500;
}

.dp-measurement-guide__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dp-measurement-guide__overlay--visible {
  opacity: 1;
}

.dp-measurement-guide__popup {
  position: relative;
  max-width: 700px;
  max-height: 85vh;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(10px);
  transition: transform 0.2s ease;
}
.dp-measurement-guide__overlay--visible .dp-measurement-guide__popup {
  transform: translateY(0);
}

.dp-measurement-guide__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.dp-measurement-guide__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #343a40;
}

.dp-measurement-guide__close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: #6c757d;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dp-measurement-guide__close-btn:hover {
  background: #e9ecef;
  color: #343a40;
}
.dp-measurement-guide__close-btn:focus {
  outline: 2px solid var(--dp-primary, #2c5aa0);
  outline-offset: 2px;
}

.dp-measurement-guide__content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.dp-measurement-guide__text {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #495057;
}

.dp-measurement-guide__heading {
  margin: 24px 0 12px;
  color: #343a40;
}
.dp-measurement-guide__heading--1 {
  font-size: 1.15rem;
  font-weight: 600;
}
.dp-measurement-guide__heading--2 {
  font-size: 1rem;
  font-weight: 600;
}
.dp-measurement-guide__heading--3 {
  font-size: 0.95rem;
  font-weight: 500;
}
.dp-measurement-guide__heading:first-child {
  margin-top: 0;
}

.dp-measurement-guide__figure {
  margin: 20px 0;
  text-align: center;
}

.dp-measurement-guide__image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dp-measurement-guide__caption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #6c757d;
  font-style: italic;
}

.dp-measurement-guide__video-wrapper {
  position: relative;
  margin: 20px 0;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.dp-measurement-guide__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.dp-measurement-guide__list {
  margin: 16px 0;
  padding-left: 24px;
}

.dp-measurement-guide__list-item {
  margin-bottom: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #495057;
}
.dp-measurement-guide__list-item:last-child {
  margin-bottom: 0;
}

.dp-measurement-guide__steps {
  margin: 20px 0;
}

.dp-measurement-guide__step {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.dp-measurement-guide__step:last-child {
  margin-bottom: 0;
}

.dp-measurement-guide__step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--dp-primary, #2c5aa0);
  border-radius: 50%;
}

.dp-measurement-guide__step-content {
  flex: 1;
  padding-top: 4px;
}

.dp-measurement-guide__step-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: #343a40;
}

.dp-measurement-guide__step-desc {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #6c757d;
}

.dp-measurement-guide__step-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .dp-measurement-guide__overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .dp-measurement-guide__popup {
    max-height: 90vh;
    border-radius: 12px 12px 0 0;
  }
  .dp-measurement-guide__header {
    padding: 14px 16px;
  }
  .dp-measurement-guide__title {
    font-size: 1.1rem;
  }
  .dp-measurement-guide__content {
    padding: 16px;
  }
  .dp-measurement-guide__step {
    gap: 12px;
  }
  .dp-measurement-guide__step-number {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
}
/* Tokens */
/**
 * Custom Field Question/Title Styling
 * Displays above each custom field
 * Clear hierarchy: Group Label (1.2rem/600/#111) → Field Question (1rem/600/#2c3e50)
 */
.dp-field-question {
  font-family: var(--dp-font-family, var(--font-family, sans-serif));
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.4;
  margin: 0 0 16px 0;
}
@media (max-width: 768px) {
  .dp-field-question {
    font-size: 0.95rem;
    margin-bottom: 14px;
  }
}
@media (max-width: 600px) {
  .dp-field-question {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
}

/* Design Tokens (SCSS-Quelle) */
/* SCSS Breakpoints (für Media Queries) */
:root {
  /* === BASISFARBEN === */
  --accent-color: #A5AA32;
  --accent-hover: #8a8e2a;
  /* === TRANSPARENZEN UND VARIANTEN === */
  --accent-transparent: rgba(165, 170, 50, 0.2);
  --accent-transparent-light: rgba(165, 170, 50, 0.05);
  --accent-transparent-hover: rgba(165, 170, 50, 0.1);
  --accent-border: rgba(165, 170, 50, 0.7);
  --accent-glow: rgba(165, 170, 50, 0.4);
  /* === NEUTRALE FARBEN === */
  --line-color: #e5e5e5;
  --upcoming-color: #333;
  --text-color-disabled: #b8b8b8;
  /* === GRÖSSENDEFINITIONEN === */
  --circle-size: 40px;
  --min-circle-size: 24px;
  --effective-circle-size: clamp(var(--min-circle-size), 5vw, var(--circle-size));
  /* === STATUSFARBEN === */
  --completed-color: var(--accent-color);
  --completed-text: #5a6810;
  --completed-bg-color: #f1f2e1;
  --completed-border: #b7bc59;
  --active-text-color: var(--accent-color);
  /* === SCHATTEN UND EFFEKTE === */
  --accent-glow-shadow: 0 0 8px var(--accent-glow), inset 0 0 0 2px var(--accent-transparent);
  /* === TIMING UND ANIMATIONEN === */
  --progress-transition: 0.3s;
  --standard-transition: 0.3s ease;
  /* === RESPONSIVE BREAKPOINTS === */
  --mobile-breakpoint: 600px;
  --tablet-breakpoint: 768px;
  --small-phone: 375px;
  /* === GLOBALE SCHRIFT === */
  font-family: sans-serif;
  /* Erweiterte Neutrals, Rahmen und Flächen */
  --neutral-dark: #343a40;
  --neutral-gray: #6c757d;
  --neutral-hover: #ebebeb;
  --neutral-mid: #555555;
  --neutral-verydark: #212529;
  --border-light: #e0e0e0;
  --border-subtle: #eeeeee;
  --bg-muted: #f8f9fa;
  --bg-panel: #ffffff;
  /* === DP THEME-HARMONISIERUNG === */
  --dp-primary: var(--accent-color, #A5AA32);
  --dp-primary-dark: var(--accent-hover, #8a8e2a);
  --dp-primary-light: var(--accent-transparent-light, rgba(165, 170, 50, 0.05));
  --dp-primary-glow: var(--accent-glow, rgba(165, 170, 50, 0.4));
  --dp-primary-border: var(--accent-border, rgba(165, 170, 50, 0.7));
  /* Neutrale Farben (Theme-harmonisch) */
  --dp-neutral-light: #F2F3F1;
  --dp-neutral-light-hover: #E5E6E3;
  --dp-neutral-dark: #343a40;
  --dp-neutral-gray: #6c757d;
  --dp-line-color: var(--line-color, #e5e5e5);
  /* Layout & Spacing */
  --dp-radius: 6px;
  --dp-gap: 12px;
  --dp-gap-small: 8px;
  --dp-gap-large: 16px;
  /* Schatten */
  --dp-shadow-light: 0 1px 3px rgba(0,0,0,.08);
  --dp-shadow-medium: 0 2px 8px rgba(0,0,0,.12);
  --dp-shadow-strong: 0 4px 12px rgba(0,0,0,.14);
  /* Transitions */
  --dp-transition-fast: 0.15s ease;
  --dp-transition-normal: 0.2s ease;
  --dp-transition-slow: var(--standard-transition, 0.3s ease);
  /* Typografie */
  --dp-font-family: var(--font-family, sans-serif);
  --dp-font-size-small: 0.85rem;
  --dp-font-size-normal: 0.9rem;
  --dp-font-size-large: 1rem;
  --dp-line-height: 1.3;
  /* Zusätzliche Status-/Semantik-Tokens */
  --dp-success: #4caf50;
  --dp-success-light: #e8f5e9;
  --dp-error: #e53935;
  --dp-error-light: #ffebee;
  --dp-neutral-medium: #9aa0a6;
}

.dp_container {
  --accent-color: #A5AA32 !important;
  accent-color: var(--accent-color) !important;
}

/*  ==================================================================
    style.css · Zubehör‑Konfigurator   +   Produkt‑Details‑Popup
    Befa Perde  ·  Mai 2025   ·   Version 1.8  (final)
    ------------------------------------------------------------------
    Changelog v1.8  (Thumbnail‑Scroller + UX‑Polish)
    ▸ Popup‑Titel kräftiger (1.6 rem / 700 / #1A1A1A)
    ▸ Pfeile im Popup = identisches White‑Circle‑Design wie Karten‑Slider.
    ▸ Keine Scroll‑Leisten mehr: overflow‑x:hidden + box‑sizing.
    ▸ Thumbnail‑Leiste = echter Horizontal‑Scroller mit scroll‑snap  +  
      fade‑mask‑Hint & JS‑Klassen .is-scrollable-left/right.
    ------------------------------------------------------------------ */
/* Utility & shared states (added) */
label.dp-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* (entfernt) Bild-Fallback-Utilities – zentralisiert in assets/css/components/_utilities.css */
.dp-variant-warning {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #9c2c2c;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  padding: 4px 6px;
}

.is-fullscreen {
  background: #000 !important;
}

.is-fullscreen .dp-popup-image, .is-fullscreen .dp-product-image {
  object-fit: contain !important;
  background: #000 !important;
}

.is-fullscreen .dp-fs-controls {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.is-fullscreen .dp-fs-topbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  z-index: 3;
}

.is-fullscreen .dp-fs-counter {
  font: 600 14px/1 var(--font-family, inherit);
}

.is-fullscreen .dp-fs-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--neutral-dark, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.is-fullscreen .dp-fs-close:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.dp-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  backdrop-filter: saturate(180%) blur(2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  outline: none;
}

.dp-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.55);
}

.dp-zoom-btn:focus {
  outline: none;
}

.dp-zoom-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary, #A5AA32), 0 1px 3px rgba(0, 0, 0, 0.25);
}

@media (hover: none) {
  .dp-zoom-btn {
    width: 36px;
    height: 36px;
  }
}
.dp-zoom-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.is-fullscreen .dp-zoom-btn {
  display: none;
}

.dp-media-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-media-overlay .dp-fs-controls {
  position: absolute;
  inset: 0;
}

.dp-media-overlay .dp-popup-slider, .dp-media-overlay .dp-image-slider {
  max-width: 90vw;
  max-height: 80vh;
}

.dp-media-overlay .dp-popup-image, .dp-media-overlay .dp-product-image, .dp-media-overlay .dp-fs-main {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.dp-media-overlay .dp-fs-main {
  max-width: 90vw;
  max-height: 80vh;
  display: block;
  margin: auto;
}

.dp-overlay-mode {
  display: none !important;
}

.dp-overlay-mode .dp-image-slide, .dp-overlay-mode .dp-popup-slide {
  display: none !important;
}

.dp-media-overlay .dp-fs-topbar {
  background: rgba(0, 0, 0, 0.45);
}

.dp-fs-enterfs {
  display: none !important;
}

.is-fullscreen .dp-fs-arrow {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.is-fullscreen .dp-fs-prev {
  left: 16px;
}

.is-fullscreen .dp-fs-next {
  right: 16px;
}

.is-fullscreen .dp-fs-arrow:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.is-fullscreen .dp-fs-thumbs {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px;
  background: rgba(0, 0, 0, 0.35);
}

.is-fullscreen .dp-fs-thumbs::-webkit-scrollbar {
  height: 6px;
}

.is-fullscreen .dp-fs-thumb {
  width: 74px;
  height: 74px;
  border-radius: 4px;
  border: 2px solid transparent;
  background: #fff;
  object-fit: cover;
  flex: 0 0 auto;
  cursor: pointer;
}

.is-fullscreen .dp-fs-thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15);
}

.is-fullscreen .dp-fs-ls {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #000;
}

.is-fullscreen .dp-fs-ls .lightSlider {
  flex: 1;
}

/*  --------------------------------------------------------------------------
   0 · Design‑Tokens (Markenfarben via _variables.css)
   -------------------------------------------------------------------------- */
:root {
  /* Farbpalette */
  --primary: var(--accent-color, #A5AA32);
  --primary-dark: var(--accent-hover, #8C9230);
  --neutral-light: #F2F3F1;
  --neutral-light-hover: #E5E6E3;
  /* Radius & Schatten */
  --radius: 6px;
  --shadow-light: 0 1px 3px rgba(0,0,0,.08);
  --shadow-strong: 0 4px 12px rgba(0,0,0,.14);
  /* Thumbnail‑Scroller Fade */
  --fade-width: 36px;
  --fade-color: #FFF;
}

/* Scope Theme-Variablen unter .dp_container und mappe auf --dp-* Tokens */
.dp_container {
  --primary: var(--dp-primary, var(--accent-color, #A5AA32));
  --primary-dark: var(--dp-primary-dark, var(--accent-hover, #8C9230));
  --neutral-light: var(--dp-neutral-light, #F2F3F1);
  --neutral-light-hover: var(--dp-neutral-light-hover, #E5E6E3);
  --radius: var(--dp-radius, 6px);
  --shadow-light: var(--dp-shadow-light, 0 1px 3px rgba(0,0,0,.08));
  --shadow-strong: var(--dp-shadow-strong, 0 4px 12px rgba(0,0,0,.14));
  /* Lokale Komponenten-Variablen */
  --fade-width: 36px;
  --fade-color: #FFF;
}

/* ==========================================================================
   1 · Zubehör‑Konfigurator  (#dp_ui_accessory_configurator)
   ========================================================================== */
.dp_container #dp_ui_accessory_configurator {
  /* ---------- 1.1 Grid */
  /* 1-Spalten-Fallback bei schmalen Gruppencontainern */
  /* ---------- 1.2 Produktkarte */
  /* Bild‑Ratio 5 : 3 */
  /* Verhindere Layout-Sprünge beim ersten Bildladen: reserviere Platz */
  /* Produktinfo */
  /* --- NEU: Variantenauswahl Styling --- */
  /* Layout-Modifier: 1- oder 2-spaltig per Konfiguration */
  /* Mobile: bestimmte Varianten nebeneinander (zweispaltig) */
  /* UX HARMONIZATION: Single-option dropdowns styling */
  /* --- ENDE UX HARMONIZATION --- */
  /* FORCE OVERRIDE: Garantiert angewendete Styles für Single-Option Dropdowns */
  /* Preis pro Meter im Card-Kontext ausblenden */
  /* Mobile-only: Preisgrößen +30% */
  /* Buttons */
  /* Layout-Modifier: 1- oder 2-spaltig per Konfiguration */
  /* Erzwinge zweispaltige Buttons innerhalb der Karte, sobald die Kartenbreite >= 250px ist. 
     Diese Regel steht bewusst NACH der Basis-/Viewport-Definition, damit sie gewinnt. */
  /* Buttons nutzen globale Komponenten-Styles; nur deltas hier belassen */
  /* Keep selected visual stable on hover/focus */
  /* Slider Navigation mit scrollbaren Punkten */
  /* Touch: Pfeile nicht grün halten – Hover deaktivieren, aktiver Tap neutral */
  /* Scrollbarer Container für Punkte */
  /* Tastatur‑Focus */
}

.dp_container #dp_ui_accessory_configurator.dp-accessory-grid {
  --gap: var(--dp-gap);
  display: grid;
  /* Immer 2 Spalten - auch auf Mobile */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0 15px 24px 15px;
  /* Karten volle Breite in der Spalte */
  justify-items: stretch;
  align-items: stretch;
}

@container dp-group (max-width: $tablet) {
  .dp_container #dp_ui_accessory_configurator.dp-accessory-grid {
    gap: var(--dp-gap-small);
  }
}
/* 2-spaltig bleibt auch auf Mobile - keine 1fr Fallback mehr */
/* Mobile: Keine Margins */
@media (max-width: 480px) {
  .dp_container #dp_ui_accessory_configurator.dp-accessory-grid {
    margin: 0 0 24px 0 !important;
    width: 100% !important;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #fff;
  border: 1px solid #e8e8e8; /* Hellere Border für dezenteres Aussehen */
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  transition: box-shadow 0.2s, border-color 0.2s;
  font-size: 0.85rem;
  overflow: hidden; /* Neu: Verhindert, dass innere Elemente die abgerundeten Ecken überlagern */
}

/* Retina/High-DPI: Dünnere Karten-Borders für dezenteres Aussehen */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dp_container #dp_ui_accessory_configurator .dp-product-card {
    border-width: 0.5px;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-selected {
    border-width: 1px; /* Selection Border bleibt sichtbar */
  }
}
.dp_container #dp_ui_accessory_configurator .dp-product-card:hover {
  box-shadow: var(--shadow-strong);
}

.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-selected {
  /* Harmonisiert mit Binary Cards Selection Style */
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Ausgewählt-Badge in der oberen linken Ecke - Eleganter Glasmorphismus-Style */
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-selected::before {
  content: "✓";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 16; /* Higher than badge (15) */
  width: 18px;
  height: 18px;
  /* Glasmorphismus: Semi-transparenter Hintergrund */
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Grünes Häkchen statt weiß-auf-grün */
  color: var(--dp-primary, #A5AA32);
  border-radius: 50%;
  /* Subtiler Rahmen für bessere Definition */
  border: 1px solid rgba(165, 170, 50, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  /* Dezenterer Schatten */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  /* Sanftere Animation */
  animation: dp-badge-pop 0.2s ease-out;
}

/* Retina: Dünnerer Border */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-selected::before {
    border-width: 0.5px;
  }
}
/* Wenn Card selected UND Badge top-left: Badge nach rechts verschieben für Häkchen-Platz */
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-selected .dp-card-badge--top-left {
  /* Häkchen: left 8px + 18px breit + 6px gap = 32px */
  left: 32px !important;
  /* top bleibt unverändert bei 10px - keine vertikale Verschiebung! */
}

@keyframes dp-badge-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* ===================================================================
   HORIZONTALES CARD-LAYOUT
   Aktiviert via: display.cardLayout: 'horizontal' in Config
   Bild links, Content rechts (CSS Grid-basiert)
   =================================================================== */
/* Grid auf 1 Spalte umstellen wenn horizontale Cards vorhanden */
.dp_container .dp-accessory-grid:has(.dp-product-card--horizontal) {
  grid-template-columns: 1fr !important;
  gap: 12px;
}

/* ID-Selektor für höhere Spezifität (um andere Regeln zu überschreiben) */
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal {
  /* CSS Grid: 2 Spalten - Bild links (65%), Content rechts (35%) */
  /* !important nötig um display:flex von #dp_ui_accessory_configurator zu überschreiben */
  display: grid !important;
  flex-direction: unset !important;
  grid-template-columns: 65% 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "image info" "image price" "image variants" "image buttons";
  min-height: auto;
  max-height: none;
  height: auto;
  /* Bild-Container links - über alle Zeilen */
  /* Info-Bereich - minimal */
  /* Preis - minimal */
  /* Varianten-Bereich - minimal */
  /* Variants untereinander bei horizontalem Layout */
  /* Buttons unten rechts - minimal */
  /* Navigation-Bar unter dem Bild anpassen */
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-image-container {
  grid-area: image;
  width: 100%;
  padding-bottom: 0;
  height: 100%;
  min-height: 60px;
  aspect-ratio: auto;
  border-bottom: none !important;
  border-right: none !important;
  position: relative;
  /* Vertikale Trennlinie als Pseudo-Element */
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #ddd;
  z-index: 1;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-info {
  grid-area: info;
  padding: 4px 8px 0;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-name {
  font-size: 0.8rem;
  margin-bottom: 0;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-price {
  grid-area: price;
  font-size: 0.85rem;
  margin: 0 8px;
  padding: 0;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-variant-selectors {
  grid-area: variants;
  padding: 0 8px;
  min-height: 0;
  overflow-y: auto;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-variant-selectors-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-variant-selectors-card .dp-variant-select-container {
  width: 100% !important;
  flex: 0 0 100% !important;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-variant-selectors-card .dp-variant-select-container label {
  font-size: 0.7rem;
  margin-bottom: 0;
  display: block;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-variant-selectors-card .dp-variant-select-container select {
  width: 100%;
  padding: 2px 4px;
  font-size: 0.75rem;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-buttons-container {
  grid-area: buttons;
  padding: 2px 8px 3px;
  gap: 2px;
  grid-template-columns: 1fr;
  border-top: none;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-select-button,
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-details-button {
  padding: 3px 6px;
  font-size: 0.7rem;
  min-height: auto;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-image-navigation {
  padding: 3px 5px;
  height: auto;
  min-height: 24px;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-nav-arrow {
  width: 20px;
  height: 20px;
  font-size: 9px;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-image-dot {
  width: 4px;
  height: 4px;
  min-width: 4px;
  min-height: 4px;
}
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-image-dot.active {
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
}

/* Responsive: Mobile behält horizontales Layout mit vertikaler Trennlinie */
@media (max-width: 600px) {
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal {
    /* Horizontales Layout beibehalten, nur kompakter */
    display: grid !important;
    grid-template-columns: 65% 1fr; /* Bild 65%, Optionen Rest */
    min-height: auto;
    max-height: none;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-image-container {
    width: 100%;
    padding-bottom: 0;
    height: 100%;
    min-height: 80px;
    border-right: none !important;
    border-bottom: none !important;
    position: relative;
    /* Vertikale Trennlinie auch in Mobile sichtbar */
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-image-container::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 1px !important;
    height: 100% !important;
    background-color: #ddd !important;
    z-index: 1 !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-info {
    padding: 4px 8px 0;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-product-price {
    margin: 0 8px;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-variant-selectors {
    padding: 0 8px;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-buttons-container {
    padding: 2px 8px 3px;
    grid-template-columns: 1fr;
    border-top: none;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-product-card--horizontal .dp-variant-selectors-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
  }
}
/* Klickbare Karte (wenn interaction.clickSelectsCard: true) */
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable {
  cursor: pointer;
  user-select: none;
}

/* Hover nur auf Geräten mit echter Maus */
@media (hover: hover) {
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:hover:not(.dp-selected) {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(165, 170, 50, 0.1), var(--shadow-strong);
  }
}
/* Touch-Geräte: kein klebriger Hover/Focus-State - mit !important um alle States zu überschreiben */
/* Verwende sowohl hover:none als auch pointer:coarse für bessere Touch-Erkennung */
@media (hover: none), (pointer: coarse) {
  /* Nicht-ausgewählte Karten: immer grauer Rand - alle Pseudo-States explizit überschreiben */
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:not(.dp-selected),
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:not(.dp-selected):hover,
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:not(.dp-selected):focus,
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:not(.dp-selected):focus-within,
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:not(.dp-selected):active {
    border-color: #e0e0e0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
  }
  /* Ausgewählte Karten: immer grüner Rand */
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable.dp-selected,
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable.dp-selected:hover,
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable.dp-selected:focus,
  .dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable.dp-selected:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }
}
/* Fallback: Klasse dp-touch-reset erzwingt grauen Rand (wird per JS gesetzt) */
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable.dp-touch-reset {
  border-color: #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  outline: none !important;
  transition: none !important;
}

/* Kein Browser-Focus-Outline auf Karten */
.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:focus {
  outline: none;
}

.dp_container #dp_ui_accessory_configurator .dp-product-card.dp-card-clickable:active:not(:has(.dp-nav-arrow:active, .dp-image-dot:active, .dp-zoom-btn:active, .dp-variant-select-container:active, select:active, .dp-image-slider:active)) {
  transform: scale(0.99);
}

.dp_container #dp_ui_accessory_configurator .dp-product-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  overflow: hidden;
  background: transparent; /* Geändert von #f8f8f8 */
  border-bottom: 1px solid #eee; /* Neu: Dezente Trennlinie */
}

.dp_container #dp_ui_accessory_configurator .dp-product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--dp-image-position, center); /* Configurable via imagePosition */
  transform: scale(var(--dp-image-scale, 1)); /* Configurable via imageScale (e.g. 0.8 = 80%) */
  display: block;
}

.dp_container #dp_ui_accessory_configurator .dp-product-image-container .dp-no-image {
  min-height: 1px;
}

.dp_container #dp_ui_accessory_configurator .dp-image-slider {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.3s ease;
  cursor: grab;
  user-select: none;
  /* Prevent default browser image dragging */
}
.dp_container #dp_ui_accessory_configurator .dp-image-slider img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.dp_container #dp_ui_accessory_configurator .dp-image-slider:active {
  cursor: grabbing;
}

.dp_container #dp_ui_accessory_configurator .dp-image-slide {
  flex: 0 0 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}

.dp_container #dp_ui_accessory_configurator .dp-image-slide.active {
  display: flex;
}

.dp_container #dp_ui_accessory_configurator .dp-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  border-radius: inherit;
}

.dp_container #dp_ui_accessory_configurator .dp-product-name {
  font-family: var(--font-family, inherit);
  font-weight: bold; /* War 600 */
  font-size: 0.9rem; /* War .86rem */
  line-height: 1.3;
  color: #343a40; /* War #111 */
  background-color: transparent; /* Geändert von #f8f9fa */
  padding: 10px 16px; /* Mehr horizontaler Abstand (Desktop) */
  margin: 0;
  border-bottom: 1px solid #eee; /* Neu: Dezente Trennlinie */
  display: block;
  box-sizing: border-box;
  /* Höhe dynamisch, da Variantenzeile separat dargestellt wird */
}

.dp_container #dp_ui_accessory_configurator .dp-product-name-base {
  display: block;
}

.dp_container #dp_ui_accessory_configurator .dp-product-name-variants {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  color: #555;
}

/* Produkteigenschaften (Features) - z.B. Schienenhöhe, Durchmesser */
/* Jetzt als span innerhalb des Titel-h4 */
.dp_container #dp_ui_accessory_configurator .dp-product-features {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #888;
  margin-top: 2px;
  line-height: 1.3;
}

/* Mobile: Kompakter */
@media (max-width: 600px) {
  .dp_container #dp_ui_accessory_configurator .dp-product-features {
    font-size: 0.7rem;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-variant-selectors {
  padding: 6px 16px; /* Mehr horizontaler Abstand (Desktop) */
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

/* Variante ohne Hintergrund (behält Trennlinie) */
.dp_container #dp_ui_accessory_configurator .dp-variant-selectors.dp-variant-selectors--no-bg {
  background: transparent;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-selectors-card.dp-variant-selectors--1col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-selectors-card.dp-variant-selectors--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-selectors-card .dp-variant-select-container {
  min-width: 0;
}

@media (max-width: 600px) {
  .dp_container #dp_ui_accessory_configurator {
    /* Standard: jedes Select nimmt volle Breite über beide Spalten */
    /* Für Schienenfarbe/Schienentyp: halbe Breite pro Element */
  }
  .dp_container #dp_ui_accessory_configurator .dp-variant-selectors-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    grid-auto-flow: dense; /* Füllt Lücken, damit zwei Half-Elemente nebeneinander landen */
  }
  .dp_container #dp_ui_accessory_configurator .dp-variant-selectors-card .dp-variant-select-container {
    grid-column: 1/-1;
    min-width: 0;
  }
  .dp_container #dp_ui_accessory_configurator .dp-variant-selectors-card .dp-variant-select-container.dp-variant--half {
    grid-column: span 1;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-variant-select-container {
  margin-bottom: 3px;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container:last-child {
  margin-bottom: 0;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container label {
  display: block;
  /* Responsive: schrumpft auf sehr schmalen Screens stark */
  font-size: clamp(0.5rem, 2vw, 0.75rem);
  font-weight: 600;
  color: #495057;
  margin-bottom: 1px;
  font-family: var(--font-family, inherit);
  text-align: left;
  /* Text umbrechen statt abschneiden */
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.2;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select {
  width: 100%;
  padding: 4px 24px 4px 6px;
  font-size: clamp(0.65rem, 2.5vw, 0.75rem); /* Responsive: kleiner auf engen Screens */
  font-family: var(--font-family, inherit);
  border: 1px solid #e0e0e0; /* Hellere Border für dezenteres Aussehen */
  border-radius: 3px;
  background: #fff;
  color: #495057;
  box-sizing: border-box;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  /* Konsistentes Aussehen auf allen Plattformen (iOS, Android, Desktop) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Custom Dropdown-Pfeil */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}

/* Retina/High-DPI: Dünnere Borders für dezenteres Aussehen */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dp_container #dp_ui_accessory_configurator .dp-variant-select-container select {
    border-width: 0.5px;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.25);
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select:hover {
  border-color: #adb5bd;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select.dp-variant-select-single-option {
  background-color: #ffffff !important; /* Weißer Hintergrund für mehr Kontrast */
  color: var(--neutral-verydark, #212529) !important; /* Deutlich dunkler für maximale Sichtbarkeit */
  font-weight: 500 !important; /* Etwas fetter für mehr Präsenz */
  border-color: #ced4da !important; /* Sichtbarere Umrandung */
  cursor: default !important;
  /* Dropdown-Pfeil entfernen */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding: 4px 8px !important; /* Konsistenter Padding wie normale Dropdowns */
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select.dp-variant-select-single-option:hover {
  border-color: #ced4da !important; /* Konsistent mit normalem Zustand */
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select.dp-variant-select-single-option:focus {
  outline: none !important;
  border-color: #ced4da !important;
  box-shadow: none !important; /* Kein Focus-Effekt bei disabled */
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select[class=dp-variant-select-single-option] {
  background: #ffffff !important;
  color: var(--neutral-verydark, #212529) !important;
  font-weight: 500 !important;
  border: 1px solid #ced4da !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding: 4px 8px !important;
  cursor: default !important;
}

.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select[class=dp-variant-select-single-option]:hover,
.dp_container #dp_ui_accessory_configurator .dp-variant-select-container select[class=dp-variant-select-single-option]:focus {
  border-color: #ced4da !important;
  outline: none !important;
  box-shadow: none !important;
}

.dp_container #dp_ui_accessory_configurator .dp-product-price {
  font-family: var(--font-family, inherit);
  font-weight: 700; /* bold */
  font-size: 1rem; /* Basis, Mobile-Override weiter unten */
  line-height: 1.2;
  color: #343a40; /* dark color */
  margin: 8px 16px 4px; /* Mehr horizontaler Abstand (Desktop) */
  text-align: center;
}

.dp_container #dp_ui_accessory_configurator .dp-product-price .dp-price-per-meter {
  display: none !important;
}

.dp_container #dp_ui_accessory_configurator .dp-price-per-meter {
  font-size: 0.8em; /* Basis, Mobile-Override weiter unten */
  font-weight: normal; /* Not bold */
  color: #6c757d; /* A muted color, e.g., Bootstrap's text-muted */
  margin-left: 4px; /* Spacing from the total price */
}

@media (max-width: 600px) {
  .dp_container #dp_ui_accessory_configurator .dp-product-price {
    font-size: 1.1rem;
  }
  .dp_container #dp_ui_accessory_configurator .dp-popup-price {
    font-size: 1.1rem;
  }
  .dp_container #dp_ui_accessory_configurator .dp-price-per-meter {
    font-size: 0.88em;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-product-wall-brackets {
  font-size: 0.8rem; /* Adjust as needed */
  color: var(--neutral-mid, #555); /* Adjust as needed */
  margin: 4px 8px 8px; /* Adjust as needed, similar to price or description */
  padding-top: 8px; /* Add some space above */
  border-top: 1px solid #eee; /* Fine line separator */
}

.dp_container #dp_ui_accessory_configurator .dp-buttons-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 16px; /* Mehr horizontaler Abstand (Desktop) */
  margin-top: auto;
  border-top: 1px solid #eee; /* Neu: Dezente Trennlinie */
}

/* Einzelner Button nimmt volle Breite */
.dp_container #dp_ui_accessory_configurator .dp-buttons-container > button:only-child {
  grid-column: 1/-1;
}

.dp_container #dp_ui_accessory_configurator .dp-buttons-container.dp-actions--1col {
  grid-template-columns: 1fr;
}

.dp_container #dp_ui_accessory_configurator .dp-buttons-container.dp-actions--2col {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
  .dp_container #dp_ui_accessory_configurator {
    /* Modifiers auch mobil berücksichtigen */
  }
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container.dp-actions--1col {
    grid-template-columns: 1fr;
  }
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container.dp-actions--2col {
    grid-template-columns: 1fr 1fr;
  }
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container .dp-select-button,
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container .dp-details-button {
    width: 100%;
  }
}
@container dp-card (min-width: 250px) {
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container .dp-select-button,
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container .dp-details-button {
    width: 100%;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-select-button, .dp_container #dp_ui_accessory_configurator .dp-details-button {
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.dp_container #dp_ui_accessory_configurator .dp-select-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px; /* Kompakter */
  font-size: 0.75rem;
  font-family: var(--font-family, inherit);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s, box-shadow 0.2s;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  /* Default state: like details button but bolder text */
  background: var(--bg-muted, #f8f8f8);
  color: var(--neutral-dark, #333);
  border: 1px solid var(--border-light, #ddd);
  font-weight: 600; /* Bolder than details button (which is 500) */
}

.dp_container #dp_ui_accessory_configurator .dp-select-button:hover,
.dp_container #dp_ui_accessory_configurator .dp-select-button:focus {
  background: var(--neutral-hover, #ebebeb); /* Match details button hover */
  color: var(--neutral-dark, #333);
  border-color: var(--border-light, #ddd); /* Match details button hover */
  box-shadow: var(--shadow-light); /* Match details button hover */
  transform: translateY(-2px); /* Match details button hover */
  outline: none;
}

.dp_container #dp_ui_accessory_configurator .dp-select-button.dp-selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 700; /* Even bolder when selected */
  transform: none; /* Reset transform if any from hover */
  box-shadow: none; /* Reset box-shadow if any from hover */
}

.dp_container #dp_ui_accessory_configurator .dp-select-button.dp-selected:hover,
.dp_container #dp_ui_accessory_configurator .dp-select-button.dp-selected:focus {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: none;
  box-shadow: none;
  outline: none;
}

.dp_container #dp_ui_accessory_configurator .dp-details-button {
  border: 1px solid var(--border-light, #ddd);
  background: var(--bg-muted, #f8f8f8);
  color: var(--neutral-dark, #333);
  font-weight: 500;
  font-size: 0.75rem;
  font-family: var(--font-family, inherit);
}

.dp_container #dp_ui_accessory_configurator .dp-details-button:hover,
.dp_container #dp_ui_accessory_configurator .dp-details-button:focus {
  background: var(--neutral-hover, #ebebeb);
  box-shadow: var(--shadow-light);
  transform: translateY(-2px);
  outline: none;
}

/* Touch-Geräte: kein klebriger Focus-State auf Action-Buttons */
@media (hover: none), (pointer: coarse) {
  .dp_container #dp_ui_accessory_configurator .dp-select-button,
  .dp_container #dp_ui_accessory_configurator .dp-select-button:hover,
  .dp_container #dp_ui_accessory_configurator .dp-select-button:focus,
  .dp_container #dp_ui_accessory_configurator .dp-select-button:active {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-select-button.dp-selected,
  .dp_container #dp_ui_accessory_configurator .dp-select-button.dp-selected:hover,
  .dp_container #dp_ui_accessory_configurator .dp-select-button.dp-selected:focus,
  .dp_container #dp_ui_accessory_configurator .dp-select-button.dp-selected:active {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-details-button,
  .dp_container #dp_ui_accessory_configurator .dp-details-button:hover,
  .dp_container #dp_ui_accessory_configurator .dp-details-button:focus,
  .dp_container #dp_ui_accessory_configurator .dp-details-button:active {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-image-navigation {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: #fafafa;
  height: 38px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0; /* Hellere Border */
  gap: 8px; /* Harmonischer Abstand zwischen Pfeilen und Punkte-Container */
}

/* Retina/High-DPI: Dünnere Navigation-Borders */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dp_container #dp_ui_accessory_configurator .dp-image-navigation {
    border-bottom-width: 0.5px;
  }
  .dp_container #dp_ui_accessory_configurator .dp-nav-arrow {
    border-width: 0.5px;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-nav-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--neutral-dark, #333);
  border: 1px solid #e0e0e0; /* Hellere Border */
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.dp_container #dp_ui_accessory_configurator .dp-nav-arrow:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

@media (hover: none) {
  .dp_container #dp_ui_accessory_configurator .dp-nav-arrow:hover,
  .dp_container #dp_ui_accessory_configurator .dp-nav-arrow:active,
  .dp_container #dp_ui_accessory_configurator .dp-nav-arrow:focus {
    background: #fff;
    color: var(--neutral-dark, #333);
    border-color: var(--border-light, #ddd);
    box-shadow: none;
  }
  .dp_container #dp_ui_accessory_configurator .dp-nav-arrow:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
  }
}
.dp_container #dp_ui_accessory_configurator .dp-dots-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Linksbündig für Sicherheit */
  padding: 0 8px; /* Harmonischer Abstand zu den Pfeilen - entspricht dem gap */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  opacity: 0; /* Initial unsichtbar */
  transition: opacity 0.3s ease; /* Glatter Übergang für Opacity-Änderungen */
}

.dp_container #dp_ui_accessory_configurator .dp-dots-container::-webkit-scrollbar {
  display: none;
}

.dp_container #dp_ui_accessory_configurator .dp-dots-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  padding: 0; /* Kein zusätzliches Padding - wird vom Container gehandhabt */
}

.dp_container #dp_ui_accessory_configurator .dp-image-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c0c0c0;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 6px;
  min-height: 6px;
}

.dp_container #dp_ui_accessory_configurator .dp-image-dot.active {
  background: var(--primary);
  /* Use fixed size instead of scale to avoid distortion */
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
}

.dp_container #dp_ui_accessory_configurator .dp-image-dot:hover {
  background: var(--primary-dark);
}

.dp_container #dp_ui_accessory_configurator .dp-nav-arrow:focus-visible, .dp_container #dp_ui_accessory_configurator .dp-image-dot:focus-visible, .dp_container #dp_ui_accessory_configurator .dp-select-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ==========================================================================
   2 · Produkt‑Details‑Popup (global – wird in .dp-layers gerendert)
   ========================================================================== */
/* ==========================================================================
   POPUP V3 - Premium, Elegant, Professional
   Ein modernes, hochwertiges Produktdetail-Popup
   ========================================================================== */
body.dp-popup-open {
  overflow: hidden;
}

/* ---------- Overlay mit elegantem Blur-Effekt */
.dp-product-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 16px;
  box-sizing: border-box;
}

.dp-product-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ---------- Popup-Container - Großzügig und elegant */
.dp-product-popup {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 960px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  box-sizing: border-box;
}

.dp-product-popup-overlay.active .dp-product-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---------- Header - Minimalistisch und clean */
.dp-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  flex-shrink: 0;
}

.dp-popup-title {
  font-family: var(--font-family, system-ui, -apple-system, sans-serif);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-popup-close {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #999;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 8px;
  padding: 0;
  outline: none;
  margin-left: 12px;
  flex-shrink: 0;
}

.dp-popup-close:hover {
  color: #333;
  background: #f5f5f5;
}

.dp-popup-close:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.2);
}

/* ---------- Content Wrapper - Mobile First */
.dp-popup-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0;
}

/* Mobile: Vertikales Layout */
.dp-popup-image-container {
  position: relative;
  width: 100%;
  background: #fff;
  margin: 0;
}

.dp-popup-thumbnails-container {
  margin: 0;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.dp-popup-details {
  background: #fff;
}

/* ---------- TABLET (640px+) ---------- */
@media (min-width: 640px) {
  .dp-product-popup {
    max-width: 720px;
    max-height: calc(100vh - 48px);
  }
  .dp-popup-header {
    padding: 18px 24px;
  }
  .dp-popup-title {
    font-size: 1.15rem;
  }
  .dp-popup-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    min-height: 400px;
    overflow: hidden;
  }
  .dp-popup-image-container {
    grid-column: 1;
    grid-row: 1;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dp-popup-thumbnails-container {
    grid-column: 1;
    grid-row: 2;
    border-bottom: none;
    border-top: 1px solid #eee;
    padding: 12px 16px;
  }
  .dp-popup-details {
    grid-column: 2;
    grid-row: 1/3;
    border-left: 1px solid #f0f0f0;
    overflow-y: auto;
  }
}
/* ---------- DESKTOP (900px+) ---------- */
@media (min-width: 900px) {
  .dp-product-popup-overlay {
    padding: 32px;
  }
  .dp-product-popup {
    max-width: 960px;
    max-height: calc(100vh - 64px);
    border-radius: 16px;
  }
  .dp-popup-header {
    padding: 20px 28px;
  }
  .dp-popup-title {
    font-size: 1.25rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .dp-popup-close {
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
  }
  .dp-popup-content {
    grid-template-columns: 58% 42%;
    min-height: 480px;
  }
  .dp-popup-image-container {
    min-height: 420px;
  }
  .dp-popup-thumbnails-container {
    padding: 14px 20px;
  }
}
/* ---------- 2.3.1 Bild‑Slider - Premium Darstellung ---------- */
.dp-popup-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #fff;
  cursor: grab;
  user-select: none;
  /* Prevent default browser image dragging */
}
.dp-popup-slider img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.dp-popup-slider:active {
  cursor: grabbing;
}

.dp-popup-slide {
  position: absolute;
  inset: 0;
  display: none;
  padding: 12px;
  box-sizing: border-box;
}

.dp-popup-slide.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-popup-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: transparent;
  transition: transform 0.3s ease;
}

/* Hover-Zoom nur auf Desktop */
@media (hover: hover) {
  .dp-popup-slide:hover .dp-popup-image {
    transform: scale(1.02);
  }
}
/* Slider‑Pfeile – Elegant und unaufdringlich */
.dp-popup-image-container .dp-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #666;
  border: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  outline: none;
  opacity: 0;
}

.dp-popup-image-container:hover .dp-nav-arrow {
  opacity: 1;
}

/* Mobile: Pfeile immer sichtbar */
@media (hover: none) {
  .dp-popup-image-container .dp-nav-arrow {
    opacity: 0.9;
  }
}
.dp-popup-image-container .dp-nav-arrow:focus {
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(165, 170, 50, 0.3);
}

.dp-popup-image-container .dp-prev {
  left: 12px;
}

.dp-popup-image-container .dp-next {
  right: 12px;
}

.dp-popup-image-container .dp-nav-arrow:hover {
  background: #fff;
  color: var(--primary);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dp-popup-image-container .dp-nav-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

/* ---------- 2.3.2 Thumbnail‑Galerie - Größer und eleganter ---------- */
.dp-popup-thumbnails-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 12px 16px;
  min-height: auto;
  scroll-snap-type: x mandatory;
  background: #f8f8f8;
}

.dp-popup-thumbnails-container::-webkit-scrollbar {
  display: none;
}

.dp-popup-thumbnail {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 6px;
  flex: 0 0 auto;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  box-sizing: border-box;
  scroll-snap-align: center;
  opacity: 0.7;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Tablet+: Größere Thumbnails */
@media (min-width: 640px) {
  .dp-popup-thumbnails-container {
    gap: 10px;
    padding: 14px 20px;
  }
  .dp-popup-thumbnail {
    width: 64px;
    height: 64px;
  }
}
/* Desktop: Noch größer */
@media (min-width: 900px) {
  .dp-popup-thumbnail {
    width: 72px;
    height: 72px;
    border-radius: 8px;
  }
}
.dp-popup-thumbnail:focus {
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(165, 170, 50, 0.2);
}

.dp-popup-thumbnail:hover {
  opacity: 1;
  border-color: #ddd;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.dp-popup-thumbnail.active {
  border-color: var(--primary);
  opacity: 1;
  box-shadow: 0 2px 6px rgba(165, 170, 50, 0.25);
}

/* ---------- 2.3.3 Details-Bereich - Übersichtlich strukturiert ---------- */
.dp-popup-details {
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tablet+ */
@media (min-width: 640px) {
  .dp-popup-details {
    padding: 20px;
    gap: 18px;
  }
}
/* Desktop */
@media (min-width: 900px) {
  .dp-popup-details {
    padding: 24px;
    gap: 20px;
  }
}
/* ---------- Preis - Als Badge rechtsbündig ---------- */
.dp-popup-price {
  font-family: var(--font-family, inherit);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--primary, #A5AA32);
  margin: 0;
  padding: 10px 16px;
  text-align: center;
  background: linear-gradient(135deg, rgba(165, 170, 50, 0.08) 0%, rgba(165, 170, 50, 0.12) 100%);
  border: 1px solid rgba(165, 170, 50, 0.2);
  border-radius: 8px;
  align-self: flex-start;
  margin-left: auto;
}

@media (min-width: 640px) {
  .dp-popup-price {
    font-size: 1.4rem;
    padding: 12px 20px;
  }
}
@media (min-width: 900px) {
  .dp-popup-price {
    font-size: 1.5rem;
    padding: 14px 24px;
    border-radius: 10px;
  }
}
/* Preis pro Meter im Popup ausblenden */
.dp-popup-price .dp-price-per-meter {
  display: none !important;
}

/* ---------- Buttons Container - Premium Layout ---------- */
.dp-popup-details .dp-buttons-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  padding: 0 !important;
  margin-top: auto !important;
  border-top: none !important;
  background: transparent !important;
}

.dp-popup-details .dp-buttons-container > button {
  flex: 1 !important;
}

/* ---------- Button Base Styles - Popup spezifisch ---------- */
.dp-popup-details .dp-select-button,
.dp-popup-details .dp-details-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  font-family: var(--font-family, inherit) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  text-transform: none !important;
  box-sizing: border-box !important;
}

/* ---------- Primärer Button (Auswählen) ---------- */
.dp-popup-details .dp-select-button {
  background: linear-gradient(135deg, var(--primary, #A5AA32) 0%, var(--primary-dark, #8a8e32) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(165, 170, 50, 0.35) !important;
}

.dp-popup-details .dp-select-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(165, 170, 50, 0.45) !important;
}

.dp-popup-details .dp-select-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(165, 170, 50, 0.3) !important;
}

.dp-popup-details .dp-select-button:focus {
  box-shadow: 0 3px 10px rgba(165, 170, 50, 0.35), 0 0 0 3px rgba(165, 170, 50, 0.25) !important;
}

/* ---------- Sekundärer Button (Zurück) ---------- */
.dp-popup-details .dp-details-button {
  background: #fff !important;
  border: 2px solid #e0e0e0 !important;
  color: #444 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.dp-popup-details .dp-details-button:hover {
  background: #f8f8f8 !important;
  border-color: #ccc !important;
  color: #222 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

.dp-popup-details .dp-details-button:active {
  background: #f0f0f0 !important;
  transform: translateY(0) !important;
}

.dp-popup-details .dp-details-button:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(165, 170, 50, 0.15) !important;
}

/* ---------- Selected State (Abwählen) ---------- */
.dp-popup-details .dp-select-button.dp-selected {
  background: linear-gradient(135deg, #555 0%, #3a3a3a 100%) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

.dp-popup-details .dp-select-button.dp-selected:hover {
  background: linear-gradient(135deg, #444 0%, #2a2a2a 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

/* ---------- 2.3.4 Technische Details - Informationsbox ---------- */
.dp-popup-config-info {
  margin-top: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f4f5f6 100%);
  border: 1px solid #eaecef;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .dp-popup-config-info {
    padding: 16px 18px;
    border-radius: 12px;
  }
}
.dp-popup-config-info h4 {
  flex-basis: 100%;
  margin: 0 0 6px;
  font-family: var(--font-family, inherit);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
}

.dp-popup-config-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 100%;
}

.dp-popup-config-info li {
  flex: 1 1 auto;
  min-width: 100px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: #444;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8eaed;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dp-popup-config-info li strong {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #888;
  margin-bottom: 2px;
}

.dp-popup-config-info li:hover {
  border-color: #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Remove duplicate headings inside description within popup */
.dp-popup-description h1,
.dp-popup-description h2,
.dp-popup-description h3 {
  display: none;
}

/* Normalize any remaining description typography */
.dp-popup-description {
  color: #343a40;
  font: 400 0.95rem/1.5 var(--font-family, inherit);
}

.dp-popup-description p,
.dp-popup-description li,
.dp-popup-description div {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.6rem 0;
}

.dp-popup-description strong {
  font-weight: 600;
}

.dp-popup-description :first-child {
  margin-top: 0;
}

.dp-popup-description :last-child {
  margin-bottom: 0;
}

/* ---------- Variantenauswahl im Popup - Elegant & Clean ---------- */
/* Container hat beide Klassen: dp-variant-selectors dp-variant-selectors-popup */
.dp-popup-details .dp-variant-selectors-popup {
  padding: 8px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* Tablet+: 2 Spalten */
@media (min-width: 480px) {
  .dp-popup-details .dp-variant-selectors-popup {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}
.dp-popup-details .dp-variant-select-container {
  margin-bottom: 0 !important;
}

.dp-popup-details .dp-variant-select-container label {
  display: block !important;
  font-family: var(--font-family, inherit) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #555 !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.dp-popup-details .dp-variant-select-container select {
  width: 100% !important;
  padding: 11px 36px 11px 14px !important;
  font-family: var(--font-family, inherit) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  /* Konsistentes Aussehen auf allen Plattformen */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.dp-popup-details .dp-variant-select-container select:hover {
  border-color: #bbb !important;
  background-color: #fafafa !important;
}

.dp-popup-details .dp-variant-select-container select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(165, 170, 50, 0.15) !important;
  background-color: #fff !important;
}

/* Disabled select styling */
.dp-popup-details .dp-variant-select-container select:disabled,
.dp-popup-details .dp-variant-select-container select.dp-variant-select-single-option {
  background-color: #f5f5f5 !important;
  color: #888 !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

/* --- ENDE NEU --- */
/* ---------- 2.4 Focus‑Ringe (kein schwarzer Outline, nur für Keyboard-Navigation) */
.dp-popup-close:focus-visible,
.dp-popup-select-button:focus-visible,
.dp-popup-thumbnail:focus-visible,
.dp-popup-image-container .dp-nav-arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary, #A5AA32);
}

/* Kompakte Ansicht für ausgewählte Produkte */
/* Konsistent mit Binary Cards Selection Style */
.dp_container .dp-product-card.dp-selected {
  border: 1px solid var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Dropdown-Labels für ALLE Produktkarten (nicht nur selected) */
.dp_container .dp-variant-select-container {
  margin: 8px 0 !important;
}

.dp_container .dp-variant-select-container label {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #666 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}

.dp_container .dp-variant-select-container select {
  width: 100% !important;
  padding: 6px 24px 6px 8px !important;
  font-size: 0.85rem !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  height: 32px !important;
  /* Konsistentes Aussehen auf allen Plattformen */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 12px !important;
}

/* Retina/High-DPI: Dünnere Borders */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dp_container .dp-variant-select-container select {
    border-width: 0.5px !important;
  }
}
/* ==========================================================================
   3 · GliderCord Hook Attachment Buttons (Ja/Nein Options)
   ========================================================================== */
/* Container für Hook-Attachment Section */
.dp-hook-attachment-buttons {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0 24px 0;
}

/* Question Header */
.dp-hook-attachment-question {
  font-size: 0.95rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: 12px;
  text-align: left;
  font-family: var(--font-family, inherit);
}

/* Button Container */
.dp-hook-attachment-options {
  display: flex;
  gap: 8px;
}

/* Hook-Attachment Button - Kompakt und Modern */
.dp-hook-attachment-button {
  flex: 1;
  max-width: 120px;
  padding: 8px 16px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  font-family: var(--font-family, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  box-shadow: none;
}

/* Button Title (Ja/Nein) - Kompakt */
.dp-hook-attachment-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
  line-height: 1.2;
}

/* Button Description - Versteckt für kompaktes Design */
.dp-hook-attachment-description {
  display: none;
}

/* Button Hover State */
.dp-hook-attachment-button:hover {
  border-color: var(--primary);
  background: #f8f9fa;
  color: var(--primary);
}

/* Button Selected State */
.dp-hook-attachment-button.dp-selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.2);
}

.dp-hook-attachment-button.dp-selected .dp-hook-attachment-title {
  color: #fff;
}

/* Button Focus State für Accessibility */
.dp-hook-attachment-button:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Products Container für echte Produktkarten */
.dp-glider-cord-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

/* Product Selection Header */
.dp-product-selection-header {
  margin: 16px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}

.dp-product-selection-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-verydark, #212529);
  margin: 0;
  font-family: var(--font-family, inherit);
}

/* Enhanced Product Cards für bessere UX */
.dp-glider-cord-products .dp-glider-cord-option {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dp-glider-cord-products .dp-glider-cord-option:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(165, 170, 50, 0.15);
  transform: translateY(-1px);
}

.dp-glider-cord-products .dp-glider-cord-option.dp-glider-cord-option--selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(165, 170, 50, 0.2);
}

/* Responsive für Hook-Attachment Buttons */
@media (max-width: 768px) {
  .dp-hook-attachment-options {
    gap: 6px;
  }
  .dp-hook-attachment-button {
    max-width: none;
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .dp-glider-cord-products {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* ============================================================
   TABLET OPTIMIERUNGEN - ProductCards (768px)
   ============================================================ */
@media (max-width: 768px) {
  .dp_container #dp_ui_accessory_configurator .dp-product-name {
    padding: 10px 12px; /* Tablet: 12px horizontal */
  }
  .dp_container #dp_ui_accessory_configurator .dp-variant-selectors {
    padding: 6px 12px; /* Tablet: 12px horizontal */
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-price {
    margin: 8px 12px 4px; /* Tablet: 12px horizontal */
  }
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container {
    padding: 8px 12px; /* Tablet: 12px horizontal */
  }
}
/* ============================================================
   MOBILE OPTIMIERUNGEN - ProductCards (480px)
   Am Ende der Datei für höhere Spezifität
   ============================================================ */
@media (max-width: 480px) {
  /* Produktname */
  .dp_container #dp_ui_accessory_configurator .dp-product-name {
    font-size: 0.72rem !important;
    padding: 6px 10px !important; /* Mobile: 10px horizontal */
    line-height: 1.25 !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-product-name-variants {
    font-size: 0.65rem !important;
    margin-top: 1px !important;
  }
  /* Preis */
  .dp_container #dp_ui_accessory_configurator .dp-product-price {
    font-size: 0.8rem !important;
    margin: 4px 10px 2px !important; /* Mobile: 10px horizontal */
  }
  /* Buttons - kompakter */
  .dp_container #dp_ui_accessory_configurator .dp-select-button,
  .dp_container #dp_ui_accessory_configurator .dp-details-button {
    font-size: 0.65rem !important;
    padding: 5px 8px !important;
    min-height: 26px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container {
    padding: 6px 10px !important; /* Mobile: 10px horizontal */
    gap: 5px !important;
  }
  /* Einzelner Button volle Breite auch mobil */
  .dp_container #dp_ui_accessory_configurator .dp-buttons-container > button:only-child {
    grid-column: 1/-1 !important;
  }
  /* Variant Selectors */
  .dp_container #dp_ui_accessory_configurator .dp-variant-selectors {
    padding: 6px 10px !important; /* Mobile: 10px horizontal */
  }
  .dp_container #dp_ui_accessory_configurator .dp-variant-select-container {
    margin-bottom: 4px !important;
  }
  /* Labels */
  .dp_container #dp_ui_accessory_configurator .dp-variant-select-container label {
    font-size: 0.6rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }
  /* Dropdowns - kompakter, gleiche Höhe wie Label */
  .dp_container #dp_ui_accessory_configurator .dp-variant-select-container select {
    font-size: 0.6rem !important;
    padding: 2px 20px 2px 4px !important; /* Platz für Dropdown-Pfeil rechts */
    height: 22px !important;
    line-height: 1 !important;
    background-position: right 4px center !important;
    background-size: 10px !important;
  }
  /* Image Navigation */
  .dp_container #dp_ui_accessory_configurator .dp-image-navigation {
    height: 26px !important;
    padding: 4px 5px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-nav-arrow {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-dot.active {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
  }
  /* Details Button Icon */
  .dp_container #dp_ui_accessory_configurator .dp-details-button svg {
    width: 14px !important;
    height: 14px !important;
  }
}
/* =============================================================================
   IMAGE SLIDER - OVERLAY NAVIGATION
   Pfeile werden über dem Bild positioniert, keine Dots darunter
   ============================================================================= */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay {
  /* Position über dem Bild */
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  /* Layout: Pfeile unten an den Seiten */
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  /* Kein Hintergrund, keine Border */
  background: transparent !important;
  border: none !important;
  padding: 0 8px 12px 8px !important; /* Mehr Abstand unten */
  margin: 0 !important;
  /* Pointer Events nur auf den Pfeilen */
  pointer-events: none !important;
}

/* Overlay Navigation - Pfeile */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow {
  pointer-events: auto !important;
  /* Größe - kompakt aber gut tappbar */
  width: 28px !important;
  height: 28px !important;
  /* Premium Design - dezent, halbtransparent */
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 50% !important;
  /* Kein Browser-Fokus-Outline */
  outline: none !important;
  /* Subtiler Schatten */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  /* Icon */
  color: #555 !important;
  font-size: 11px !important;
  /* Flex centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Animation */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Default: leicht transparent */
  opacity: 0.85 !important;
}

/* Hover State */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow:hover {
  background: #fff !important;
  border-color: var(--dp-primary, #A5AA32) !important;
  color: var(--dp-primary, #A5AA32) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--dp-primary, #A5AA32) inset !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* Active/Press State */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow:active {
  transform: scale(0.95) !important;
}

/* Touch-Geräte: kein Hover-Effekt dauerhaft */
@media (hover: none) {
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    transform: none !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow:active {
    background: #fff !important;
    border-color: var(--dp-primary, #A5AA32) !important;
    color: var(--dp-primary, #A5AA32) !important;
    transform: scale(0.95) !important;
  }
}
/* Dots-Container in Overlay - verstecken */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-dots-container {
  display: none !important;
}

/* Focus States - kein schwarzer Rand */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow:focus {
  outline: none !important;
}

/* Focus-Visible für Keyboard-Navigation (Accessibility) */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--dp-primary, #A5AA32), 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  opacity: 1 !important;
}

/* Responsive: Kleinere Pfeile auf sehr kleinen Screens */
@media (max-width: 400px) {
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay .dp-nav-arrow {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }
}
/* =============================================================================
   OVERLAY BAR NAVIGATION
   Navigation bar positioned OVER the image (at bottom), transparent background,
   arrows without circles - just plain chevrons
   Only visible on hover!
   ============================================================================= */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar {
  /* Position über dem Bild (unten) */
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10 !important;
  /* Layout: Pfeile an den Seiten, Dots in der Mitte */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Transparenter Hintergrund */
  background: transparent !important;
  border: none !important;
  padding: 6px 2px !important;
  margin: 0 !important;
  gap: 0 !important;
  /* WICHTIG: Initial unsichtbar, nur bei Hover sichtbar */
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  pointer-events: none !important;
}

/* Navigation sichtbar bei Hover über Image-Container */
.dp_container #dp_ui_accessory_configurator .dp-product-image-container:hover .dp-image-slider__nav--overlay-bar {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Overlay Bar - Pfeile OHNE Kreis, dezente dünne Chevrons */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow {
  /* Keine Kreisform, kein Hintergrund */
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Kompakte Pfeile */
  padding: 6px !important;
  /* DEZENT & DÜNN */
  color: rgba(0, 0, 0, 0.35) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.6) !important;
  /* Cursor und Transition */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  /* Flex centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover State - Pfeile */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow:hover {
  color: var(--dp-primary, #A5AA32) !important;
  transform: scale(1.1) !important;
}

/* Active/Press State - Pfeile */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow:active {
  transform: scale(0.95) !important;
}

/* Focus States */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow:focus {
  outline: none !important;
}

.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow:focus-visible {
  outline: none !important;
  color: var(--dp-primary, #A5AA32) !important;
}

/* Dots Container in Overlay Bar - SICHTBAR */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-dots-container {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  overflow: visible !important;
  opacity: 1 !important;
}

/* Dots Wrapper */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-dots-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Dots - sehr dezente, kleine Punkte */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-image-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

/* Active Dot */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-image-dot.active,
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-image-dot--active {
  background: var(--dp-primary, #A5AA32) !important;
  transform: scale(1.15) !important;
  box-shadow: none !important;
}

/* Dot Hover */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-image-dot:hover:not(.active):not(.dp-image-dot--active) {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Touch-Geräte: Navigation immer sichtbar (kein Hover möglich) */
@media (hover: none) {
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow:hover {
    color: rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow:active {
    color: var(--dp-primary, #A5AA32) !important;
    transform: scale(0.95) !important;
  }
}
/* Responsive: Kleinere Elemente auf kleinen Screens */
@media (max-width: 400px) {
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-nav-arrow {
    font-size: 10px !important;
    padding: 4px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-image-dot {
    width: 3px !important;
    height: 3px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--overlay-bar .dp-dots-wrapper {
    gap: 4px !important;
  }
}
/* =============================================================================
   BELOW-MINIMAL NAVIGATION
   Navigation bar below the image with minimal/subtle styling
   Same subtle design as overlay-bar but positioned below the image
   ============================================================================= */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal {
  /* Position unter dem Bild */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Transparenter/dezenter Hintergrund */
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #eee !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Below-Minimal - Pfeile dezent aber gut sichtbar */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-nav-arrow {
  /* Keine Kreisform, kein Hintergrund */
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Größere Pfeile mit mehr Abstand vom Rand */
  padding: 6px 10px !important;
  /* Dezent aber lesbar */
  color: rgba(0, 0, 0, 0.4) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  /* Cursor und Transition */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  /* Flex centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover State - Pfeile */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-nav-arrow:hover {
  color: var(--dp-primary, #A5AA32) !important;
  transform: scale(1.1) !important;
}

/* Active/Press State - Pfeile */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-nav-arrow:active {
  transform: scale(0.95) !important;
}

/* Focus States */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-nav-arrow:focus {
  outline: none !important;
}

.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-nav-arrow:focus-visible {
  outline: none !important;
  color: var(--dp-primary, #A5AA32) !important;
}

/* Dots Container - SICHTBAR */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-dots-container {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  overflow: visible !important;
  opacity: 1 !important;
}

/* Dots Wrapper */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-dots-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Dots - sehr dezente, kleine Punkte */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-image-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

/* Active Dot */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-image-dot.active,
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-image-dot--active {
  background: var(--dp-primary, #A5AA32) !important;
  transform: scale(1.15) !important;
  box-shadow: none !important;
}

/* Dot Hover */
.dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-image-dot:hover:not(.active):not(.dp-image-dot--active) {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Responsive: Etwas kleinere Elemente auf kleinen Screens */
@media (max-width: 400px) {
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-nav-arrow {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-image-dot {
    width: 4px !important;
    height: 4px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-image-slider__nav--below-minimal .dp-dots-wrapper {
    gap: 4px !important;
  }
}
/* =============================================================================
   NAVIGATION BAR - Click isolation
   Prevent clicks on navigation from selecting the card
   ============================================================================= */
.dp_container #dp_ui_accessory_configurator .dp-image-navigation {
  /* Navigation bar should capture clicks */
  pointer-events: auto !important;
}

.dp_container #dp_ui_accessory_configurator .dp-image-dot,
.dp_container #dp_ui_accessory_configurator .dp-nav-arrow {
  /* Interactive elements explicitly capture clicks */
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* =============================================================================
   CARD BADGE / LABEL
   Konfigurierbares Badge auf dem Bild (z.B. "Empfehlung", "Neu", "Sale")
   ============================================================================= */
/* ==========================================================================
   BADGE - Elegant Pill Design
   Premium, minimal badge that complements rather than competes with content
   ========================================================================== */
.dp_container #dp_ui_accessory_configurator .dp-card-badge {
  position: absolute !important;
  z-index: 15 !important;
  /* Typography - Clean, understated */
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  /* Layout - Compact pill shape */
  padding: 5px 10px !important;
  /* Pill shape - Fully rounded */
  border-radius: 100px !important;
  /* Refined shadow for subtle depth */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  /* Smooth transition for hover states */
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Subtle lift on hover */
.dp_container #dp_ui_accessory_configurator .dp-card-badge:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Position: Top-Left (Default) - Aligned with checkmark */
.dp_container #dp_ui_accessory_configurator .dp-card-badge--top-left {
  top: 8px !important;
  left: 10px !important;
}

/* Position: Top-Right */
.dp_container #dp_ui_accessory_configurator .dp-card-badge--top-right {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
}

/* Style: Primary (Default) - Primärfarbe mit leichter Transparenz */
.dp_container #dp_ui_accessory_configurator .dp-card-badge--primary {
  background: rgba(165, 170, 50, 0.92) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Style: Secondary - Elegantes Grau */
.dp_container #dp_ui_accessory_configurator .dp-card-badge--secondary {
  background: rgba(108, 117, 125, 0.9) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Style: Accent - Dezentes Rot */
.dp_container #dp_ui_accessory_configurator .dp-card-badge--accent {
  background: rgba(200, 60, 70, 0.9) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Style: Custom - Farben werden inline gesetzt */
.dp_container #dp_ui_accessory_configurator .dp-card-badge--custom {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Responsive: Noch kompakter auf kleinen Screens */
@media (max-width: 480px) {
  .dp_container #dp_ui_accessory_configurator .dp-card-badge {
    font-size: 0.6rem !important;
    padding: 4px 8px !important;
    top: 8px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-card-badge--top-left {
    left: 8px !important;
  }
  .dp_container #dp_ui_accessory_configurator .dp-card-badge--top-right {
    right: 8px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   2 · OptionCard Styles (.dp-option-card)
   ═══════════════════════════════════════════════════════════════════════════════ */
.dp_container .dp-option-card {
  /* Basis-Layout und Schatten */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
  /* Titel - zentriert, kompakt */
  /* Beschreibung */
  /* Meta-Bereich */
  /* Preis - prominent, zentriert */
  /* Info-Bereich */
  /* Buttons-Container */
  /* Select Button */
}
.dp_container .dp-option-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.dp_container .dp-option-card.dp-selected {
  border-color: #198754;
  box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
}
.dp_container .dp-option-card .dp-product-name {
  font-family: var(--font-family, inherit);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #343a40;
  padding: 10px 12px 2px;
  margin: 0;
  text-align: center;
}
.dp_container .dp-option-card .dp-option-card__desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #666;
  margin-top: 4px;
  text-align: center;
  padding: 0 12px;
}
.dp_container .dp-option-card .dp-option-meta {
  padding: 0 12px;
  margin-bottom: 8px;
  text-align: center;
}
.dp_container .dp-option-card .dp-meta-row {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 2px;
}
.dp_container .dp-option-card .dp-meta-key {
  font-weight: 500;
  margin-right: 4px;
}
.dp_container .dp-option-card .dp-product-price {
  font-family: var(--font-family, inherit);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #2c5aa0; /* Akzentfarbe für Preis */
  padding: 8px 12px 12px;
  margin: 0;
  text-align: center;
}
.dp_container .dp-option-card .dp-product-info {
  padding: 0;
  flex-grow: 0;
}
.dp_container .dp-option-card .dp-option-card__actions {
  padding: 0 12px 12px;
  margin-top: auto;
}
.dp_container .dp-option-card .dp-option-card__select-btn {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #198754;
  background: #fff;
  color: #198754;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dp_container .dp-option-card .dp-option-card__select-btn:hover {
  background: #198754;
  color: #fff;
}
.dp_container .dp-option-card .dp-option-card__select-btn.dp-selected {
  background: #198754;
  color: #fff;
}

/* Mobile-Anpassungen für OptionCard */
@media (max-width: 600px) {
  .dp_container .dp-option-card .dp-product-name {
    font-size: 0.82rem;
    padding: 8px 10px 2px;
  }
  .dp_container .dp-option-card .dp-product-price {
    font-size: 1rem;
    padding: 6px 10px 10px;
  }
  .dp_container .dp-option-card .dp-option-card__actions {
    padding: 0 10px 10px;
  }
  .dp_container .dp-option-card .dp-option-card__select-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

/* Feature-/Spezifische Komponenten */
/* Fortschrittsanzeige (SCSS-Quelle) */
/* Container für Schrittnavigation */
.dp_steps.btn-group {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 10px;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  counter-reset: step-counter;
  /* Steuerbare Lücke zwischen Steps (für Compact per Container-Query) */
  --step-gap: 22px;
  /* Neue Variablen: verfügbare Strecke bis zum letzten aktivierbaren Step */
  --available-width: 0px; /* px oder % je nach Modus */
  --available-color: rgba(0,0,0,.55); /* stärkerer Kontrast für aktivierbare Schritte */
  --base-line-height: 1px;
  --disabled-text-color: rgba(0,0,0,.35);
  --disabled-text-weight: 200; /* deutlich feiner */
  --disabled-wght: 300; /* Variationsgewicht, falls Variable Font vorhanden */
  /* Defaults, falls nicht global gesetzt */
  --effective-circle-size: var(--circle-size, 40px);
  --progress-transition: 300ms;
  /* Container Query für adaptive Darstellung */
  container-type: inline-size;
  /* Verhindere Clipping von Kreisen/Tooltips bei schmaleren Breiten */
  overflow: visible;
}

/* Horizontale Basislinie */
.dp_steps.btn-group::before {
  content: "";
  position: absolute;
  top: calc(var(--effective-circle-size) / 2);
  left: var(--progress-left, calc(var(--effective-circle-size) / 2));
  right: var(--progress-right, calc(var(--effective-circle-size) / 2));
  height: var(--base-line-height, 1px);
  /* Basislinie: links bis available schwarz, Rest grau */
  background: linear-gradient(to right, var(--available-color) 0, var(--available-color) var(--available-width, 0px), var(--dp-line-color, var(--line-color)) var(--available-width, 0px), var(--dp-line-color, var(--line-color)) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Horizontale Fortschrittslinie */
.dp_steps.btn-group::after {
  content: "";
  position: absolute;
  top: calc(var(--effective-circle-size) / 2);
  left: var(--progress-left, calc(var(--effective-circle-size) / 2));
  height: 2px; /* grüne Fortschrittslinie bleibt etwas kräftiger */
  background: var(--dp-primary, var(--accent-color));
  z-index: 0;
  transition: width var(--progress-transition) ease-in-out;
  width: var(--progress-width, 0%);
  pointer-events: none;
}

/* Präzise Pixel-Fortschrittsbreite */
.dp_steps.btn-group[data-precise-progress=true]::after {
  width: var(--progress-width, 0px);
  right: auto;
}

/* Schritt-Button (Kreis + Text) */
.dp_steps.btn-group .btn {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding-top: calc(var(--effective-circle-size) + clamp(6px, 1vw, 10px));
  cursor: pointer;
  font-size: clamp(10px, 1.6vw, 14px);
  text-align: center;
  color: var(--neutral-dark, #333);
  white-space: normal;
  hyphens: none;
  overflow-wrap: break-word;
  box-sizing: border-box;
  min-height: 40px;
  font-weight: 400;
  transition: color var(--progress-transition) ease;
  outline: none;
  counter-increment: step-counter;
  scroll-snap-align: none; /* per JS gesetzt, falls Kompaktmodus aktiv */
}

.dp_steps.btn-group .btn .step-text {
  max-width: clamp(60px, 12vw, 140px);
}

/* Kompaktmodus: Abstände reduzieren und Labels optional verbergen */
.dp_steps.btn-group[data-steps-compact=gap] {
  --base-line-height: 1px;
}

.dp_steps.btn-group[data-steps-compact=gap] {
  justify-content: flex-start;
}

.dp_steps.btn-group[data-steps-compact=gap] .btn {
  flex: 0 0 auto;
}

.dp_steps.btn-group[data-labels-hidden=true] .btn {
  font-size: 0;
}

.dp_steps.btn-group[data-labels-hidden=true] .btn .step-text {
  display: none;
}

/* Im Kompaktmodus Labels ausblenden, wenn es eng wird */
.dp_steps.btn-group[data-steps-compact=gap] .btn .step-text {
  display: none;
}

/* Ultra-Kompakt (Tablets): verkleinere Schrift und reduziere vertikale Abstände */
@media (max-width: 1100px) {
  .dp_steps.btn-group .btn {
    font-size: clamp(10px, 1.4vw, 13px);
  }
}
/* Entfernt: zu aggressive Ausblendung der Labels unter 1200px.
   Labels bleiben zwischen 900px und 1200px sichtbar, damit Desktop/Tablet breiter besser lesbar bleibt. */
/* Mobile: Labels ausblenden, nur Kreise anzeigen (bereits in _responsive-mobile.scss, hier Safety-Net) */
@media (max-width: 600px) {
  .dp_steps.btn-group .btn {
    font-size: 0;
  }
}
/* Tablet/Schmaler Desktop: Labels kompakter oder ausblenden, um alle Schritte sichtbar zu halten */
@media (max-width: 900px) {
  .dp_steps.btn-group .btn {
    font-size: 0; /* Beschriftung verstecken, nur Kreise/Nummern */
    padding-top: calc(var(--effective-circle-size) + 6px);
    min-height: calc(var(--effective-circle-size) + 14px);
  }
}
/* Container Query Stufen (unabhängig von Viewport) */
@container (max-width: 660px) {
  .dp_steps.btn-group {
    --effective-circle-size: 36px;
  }
}
@container (max-width: 610px) {
  .dp_steps.btn-group {
    --effective-circle-size: 34px;
  }
}
@container (max-width: 570px) {
  .dp_steps.btn-group {
    --effective-circle-size: 30px;
  }
}
/* Labels-Ausblendung per Container-Query vorerst entfernt – Text bleibt sichtbar,
   bis eine konkrete Grenze festgelegt wird. */
/* Erzwinge Desktop-Basisoptik ab 900px, auch wenn Tablet-Styles global greifen */
@media (min-width: 900px) {
  .dp_steps.btn-group {
    justify-content: space-between;
    padding: 0 0 10px;
  }
  .dp_steps.btn-group .btn {
    font-size: clamp(10px, 1.6vw, 14px);
    padding-top: calc(var(--effective-circle-size) + clamp(6px, 1vw, 10px));
    min-height: 40px;
  }
}
/* Labels unter 1200px generell ausblenden (wie zuvor) */
@media (max-width: 1200px) {
  .dp_container .dp_steps.btn-group .btn {
    font-size: 0;
  }
  .dp_container .dp_steps.btn-group .btn .step-text {
    display: none;
  }
  /* Sicherstellen, dass der Haken nicht durch font-size:0 verschwindet */
  .dp_container .dp_steps.btn-group .btn.completed::after {
    content: "✓" !important; /* ✓ */
    font-size: 18px !important;
    color: var(--completed-border) !important;
    line-height: 1 !important;
  }
}
/* Pure-CSS Kompakt-Packen: unter engeren Containerbreiten Lücken reduzieren und Pack-Layout nutzen */
@container (max-width: 1100px) {
  .dp_steps.btn-group {
    justify-content: flex-start;
    column-gap: var(--step-gap);
  }
  .dp_steps.btn-group .btn {
    flex: 0 0 auto;
  }
}
@container (max-width: 1000px) {
  .dp_steps.btn-group {
    --step-gap: 16px;
  }
}
@container (max-width: 900px) {
  .dp_steps.btn-group {
    --step-gap: 12px;
  }
}
@container (max-width: 820px) {
  .dp_steps.btn-group {
    --step-gap: 10px;
  }
}
@container (max-width: 760px) {
  .dp_steps.btn-group {
    --step-gap: 8px;
  }
}
@container (max-width: 700px) {
  .dp_steps.btn-group {
    --step-gap: 6px;
  }
}
/* Aktivierbare (nicht-aktive, nicht-deaktivierte) Schritte: Farbe an dunkle Linie angleichen */
.dp_steps.btn-group .btn:not(.active):not(.completed):not([disabled]):not(.disabled):not([aria-disabled=true]) {
  color: var(--available-color);
}

.dp_steps.btn-group .btn:not(.active):not(.completed):not([disabled]):not(.disabled):not([aria-disabled=true])::before {
  border-color: var(--available-color);
}

.dp_steps.btn-group .btn:not(.active):not(.completed):not([disabled]):not(.disabled):not([aria-disabled=true])::after {
  color: var(--available-color);
}

/* Deaktivierte Steps: feinerer, dezenter Text */
.dp_steps.btn-group .btn[disabled],
.dp_steps.btn-group .btn[aria-disabled=true],
.dp_steps.btn-group .btn.disabled {
  color: var(--disabled-text-color);
  font-weight: var(--disabled-text-weight);
}

@supports (font-variation-settings: normal) {
  .dp_steps.btn-group .btn[disabled],
  .dp_steps.btn-group .btn[aria-disabled=true],
  .dp_steps.btn-group .btn.disabled {
    font-variation-settings: "wght" var(--disabled-wght, 300);
  }
}
.dp_steps.btn-group .btn:focus-visible {
  outline: 2px solid var(--dp-primary, var(--accent-color));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Kreis */
.dp_steps.btn-group .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--effective-circle-size);
  height: var(--effective-circle-size);
  border-radius: 50%;
  transform: translateX(-50%);
  background-color: white;
  border: 1px solid var(--upcoming-color);
  z-index: 1;
}

/* Zahl */
.dp_steps.btn-group .btn::after {
  content: counter(step-counter);
  position: absolute;
  top: calc(var(--effective-circle-size) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 500;
  z-index: 4;
  transition: color var(--progress-transition) ease;
}

/* Zahl bei deaktivierten Steps etwas feiner und farblich dezent */
.dp_steps.btn-group .btn[disabled]::after,
.dp_steps.btn-group .btn[aria-disabled=true]::after,
.dp_steps.btn-group .btn.disabled::after {
  color: var(--disabled-text-color);
  font-weight: var(--disabled-text-weight);
}

@supports (font-variation-settings: normal) {
  .dp_steps.btn-group .btn[disabled]::after,
  .dp_steps.btn-group .btn[aria-disabled=true]::after,
  .dp_steps.btn-group .btn.disabled::after {
    font-variation-settings: "wght" var(--disabled-wght, 300);
  }
}
/* ========================================
   Navigation Buttons (Next/Back)
   ======================================== */
.dp_steps_buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.dp_step_prev,
.dp_step_next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid var(--dp-primary, var(--accent-color, #24b9d7));
  border-radius: 6px;
  background-color: transparent;
  color: var(--dp-primary, var(--accent-color, #24b9d7));
  cursor: pointer;
  transition: all 0.2s ease;
  /* Material Icons styling */
}
.dp_step_prev .material-icons,
.dp_step_prev [class*=chevron],
.dp_step_next .material-icons,
.dp_step_next [class*=chevron] {
  font-size: 1.25rem;
  line-height: 1;
}

.dp_step_prev:hover,
.dp_step_next:hover {
  background-color: var(--dp-primary, var(--accent-color, #24b9d7));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(36, 185, 215, 0.25);
}

.dp_step_prev:active,
.dp_step_next:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(36, 185, 215, 0.2);
}

.dp_step_prev:focus-visible,
.dp_step_next:focus-visible {
  outline: 2px solid var(--dp-primary, var(--accent-color, #24b9d7));
  outline-offset: 2px;
}

/* Back button - leicht dezenter */
.dp_step_prev {
  border-color: var(--neutral-medium, #999);
  color: var(--neutral-dark, #666);
}

.dp_step_prev:hover {
  background-color: var(--neutral-dark, #666);
  border-color: var(--neutral-dark, #666);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive: Buttons kompakter auf kleinen Screens */
@media (max-width: 600px) {
  .dp_steps_buttons {
    gap: 0.5rem;
  }
  .dp_step_prev,
  .dp_step_next {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}
/* Progressbar Zustände (SCSS-Quelle) */
/* Optimiert: Reduzierte Duplikation durch SCSS-Verschachtelung */
.dp_container .dp_steps.btn-group .btn {
  /* === ACTIVE STATE === */
  /* === COMPLETED STATE === */
  /* === HOVER STATE (not disabled) === */
  /* === DISABLED STATE === */
  /* Font variation settings support */
}
.dp_container .dp_steps.btn-group .btn.active {
  color: var(--dp-primary, var(--accent-color));
  font-weight: 500;
}
.dp_container .dp_steps.btn-group .btn.active::before {
  border-color: var(--dp-primary, var(--accent-color));
  background-color: white;
  box-shadow: var(--accent-glow-shadow);
  transform: translateX(-50%) scale(1.05);
  z-index: 3;
}
.dp_container .dp_steps.btn-group .btn.active::after {
  color: var(--dp-primary, var(--accent-color));
  font-weight: 600;
  z-index: 4;
}
.dp_container .dp_steps.btn-group .btn.completed {
  color: var(--completed-text);
  font-weight: 500;
}
.dp_container .dp_steps.btn-group .btn.completed::before {
  border-color: var(--completed-border);
  background-color: var(--completed-bg-color);
  box-shadow: 0 0 4px rgba(125, 129, 38, 0.2);
  z-index: 2;
}
.dp_container .dp_steps.btn-group .btn.completed::after {
  content: "✓";
  color: var(--completed-border);
  font-weight: bold;
  font-size: 1.2em;
}
.dp_container .dp_steps.btn-group .btn.completed:hover::before {
  background-color: var(--completed-bg-color);
  border-color: var(--dp-primary-dark, var(--accent-hover));
}
.dp_container .dp_steps.btn-group .btn:not([disabled]):hover {
  color: var(--dp-primary-dark, var(--accent-hover));
}
.dp_container .dp_steps.btn-group .btn:not([disabled]):hover::before {
  transform: translateX(-50%) scale(1.03);
  border-color: var(--dp-primary-dark, var(--accent-hover));
  transition: border-color var(--standard-transition), transform var(--standard-transition);
}
.dp_container .dp_steps.btn-group .btn[disabled], .dp_container .dp_steps.btn-group .btn:disabled, .dp_container .dp_steps.btn-group .btn.disabled {
  opacity: 1;
  color: var(--text-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
  font-weight: var(--disabled-text-weight, 200) !important;
}
.dp_container .dp_steps.btn-group .btn[disabled]::before, .dp_container .dp_steps.btn-group .btn:disabled::before, .dp_container .dp_steps.btn-group .btn.disabled::before {
  background-color: #fff;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px;
  opacity: 1;
  box-shadow: none;
  transform: translateX(-50%) scale(0.95);
  z-index: 1;
}
.dp_container .dp_steps.btn-group .btn[disabled]::after, .dp_container .dp_steps.btn-group .btn:disabled::after, .dp_container .dp_steps.btn-group .btn.disabled::after {
  color: #999999;
  opacity: 1;
  font-weight: var(--disabled-text-weight, 200) !important;
}
.dp_container .dp_steps.btn-group .btn[disabled]:hover::after, .dp_container .dp_steps.btn-group .btn:disabled:hover::after, .dp_container .dp_steps.btn-group .btn.disabled:hover::after {
  content: "Bitte erst vorherige Schritte abschließen";
  position: absolute;
  top: calc(var(--effective-circle-size) + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  cursor: default;
}
@supports (font-variation-settings: normal) {
  .dp_container .dp_steps.btn-group .btn.disabled, .dp_container .dp_steps.btn-group .btn:disabled {
    font-variation-settings: "wght" var(--disabled-wght, 300) !important;
  }
  .dp_container .dp_steps.btn-group .btn[disabled]::after, .dp_container .dp_steps.btn-group .btn:disabled::after {
    font-variation-settings: "wght" var(--disabled-wght, 300) !important;
  }
}

/* Farbauswahl (SCSS-Quelle) */
.dp_container {
  /* Entfernt leere Rulesets und belässt nur funktionale Deklarationen */
}
.dp_container .product-variants > .product-variants-item ul#group_1 .color,
.dp_container .product-variants > .product-variants-item ul#group_1 input {
  height: 3.5rem;
  width: 3.5rem;
}
.dp_container #selected_variant_color {
  display: block;
  font-size: 1.1em;
  color: var(--neutral-dark, #333);
}
.dp_container .attribute-name-below {
  display: block;
  text-align: center;
  margin-top: 1px;
  font-size: 12px;
  color: var(--neutral-dark, #333);
}

/* Layout */
/* Formular-Layout (SCSS-Quelle) */
fieldset.dp_group_measures {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

fieldset.dp_group_measures div.content {
  display: flex;
  flex-direction: column;
  /* gap removed - individual fields handle their own spacing */
}
fieldset.dp_group_measures div.content .dp-slider__wrapper {
  margin-bottom: 0 !important;
}

/* Harmonisierung: nutze Tokens für generische Abstände und Linienfarbe, ohne visuelles Verhalten zu ändern */
.dp_container fieldset.dp_group_measures {
  border-radius: var(--dp-radius, 6px);
}

/* Gruppen-Container (SCSS-Quelle) */
.dp_group {
  border: 1px solid var(--border-light, #e4e4e4);
  border-radius: var(--dp-radius, 6px);
  background: var(--bg-panel, #fff);
  box-shadow: var(--dp-shadow-light, 0 2px 4px rgba(0, 0, 0, 0.05));
  margin-bottom: 24px;
  padding: 24px;
  position: relative;
  /* Container-Queries auf Gruppenbreite ausrichten */
  container-type: inline-size;
  container-name: dp-group;
}

.dp_group > .dp_group_label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 1rem 0;
  padding: 0;
  background: none !important;
  font-size: 1.2rem !important;
  font-weight: 600;
  color: #111;
}

.dp_group > .dp_group_label::before {
  content: none;
}

.dp_group > .content {
  padding: 0;
}

.dp_group > .content > *:first-child {
  margin-top: 0.4em;
}

.dp_group .ps-radio-options {
  display: flex;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.dp_group .input-radio + .radio-label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--border-light, #ccc);
  border-radius: var(--dp-radius, 4px);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.dp_group .input-radio:checked + .radio-label {
  background: var(--dp-primary-light, #ddebb0);
  border-color: var(--dp-primary-border, #afb847);
}

/* Responsive */
/* Tokens */
/* Tablet-Ansicht (SCSS-Quelle) */
@media (max-width: 768px) {
  /* Vereinheitlichung: nutze --effective-circle-size (ProgressBar liest diese Variable) */
  :root {
    --effective-circle-size: 40px;
    --form-font-size: 16px;
    --tablet-line-adjust: 9px;
  }
  /* Verteile Kreise über die gesamte Breite wie Desktop, damit die Linie am ersten/letzten Kreis endet */
  .dp_steps.btn-group {
    justify-content: space-between;
    padding: 10px 0 15px;
  }
  /* Linie exakt mittig (ggf. mit Feinkorrektur) */
  .dp_steps.btn-group::before,
  .dp_steps.btn-group::after {
    top: calc(var(--effective-circle-size) / 2 + var(--tablet-line-adjust));
  }
  /* Labels auf Tablet ausblenden (konsistent zu <=900px-Regel), Höhe wie Desktop */
  .dp_steps.btn-group .btn {
    font-size: 14px !important; /* Labels wieder sichtbar */
    min-height: 50px;
    padding-top: calc(var(--effective-circle-size) + clamp(4px, 1vw, 8px));
  }
  fieldset.dp_group_measures div.content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "ui_input_room_name ui_input_room_name" "ui_input_width ui_input_height" "draft draft" "ui_switch_split_curtain ui_switch_split_curtain";
    row-gap: 0;
    column-gap: 20px;
  }
  fieldset.dp_group_measures div.content .dp-slider__wrapper {
    margin-bottom: 0 !important;
  }
  .dp_input_container input,
  .dp_input_container select,
  .dp_input_container .ui-spinner {
    font-size: var(--form-font-size);
    height: 44px;
  }
  .dp-radio-option {
    padding: 0.7em 1em;
    margin-bottom: 8px;
    width: 100%;
    max-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* FORCE: SLIDER VOLLE BREITE AUF TABLET - über beide Grid-Spalten */
  fieldset.dp_group_measures div.content div[data-name]:has(.dp-slider__wrapper),
  fieldset.dp_group_measures div.content .dp-slider__wrapper,
  .dp-slider__wrapper {
    grid-column: 1/-1 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  fieldset.dp_group_measures div.content div[data-name]:has(.dp-slider__wrapper):not(.dp-slider--hidden),
  fieldset.dp_group_measures div.content .dp-slider__wrapper:not(.dp-slider--hidden),
  .dp-slider__wrapper:not(.dp-slider--hidden) {
    display: block !important;
  }
  /* Accessory Info Box: Gleiche Breite wie Slider auf Tablet */
  .dp-slider__accessory-info {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .dp-slider__container {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    /* Keep display: flex for internal layout (buttons + track) */
  }
}
/* Tokens */
/* Mobile-Ansicht (SCSS-Quelle) */
@media (max-width: 600px) {
  :root {
    --effective-circle-size: 40px;
    --progress-line-position: calc(var(--effective-circle-size) / 2);
    --mobile-line-adjust: 2px; /* Feinausrichtung der Linie relativ zur Kreismitte */
    --mobile-activatable-adjust: -2px; /* aktivierbare Kreise minimal anheben */
  }
  .dp_steps.btn-group {
    height: 56px;
    position: sticky;
    top: var(--progress-sticky-top, 0px);
    background: #fff;
    z-index: 5;
    transform: translateZ(0);
    will-change: transform;
    display: flex;
    justify-content: space-between; /* gleichmäßig über Breite verteilen */
    align-items: center;
    padding: 0; /* Kreise bis an den Rahmen */
    overflow: visible;
  }
  .dp_steps.btn-group::-webkit-scrollbar {
    display: none;
  }
  .dp_steps.btn-group::before,
  .dp_steps.btn-group::after {
    content: "";
    position: absolute;
    left: var(--progress-left, calc(var(--effective-circle-size) / 2));
    right: var(--progress-right, calc(var(--effective-circle-size) / 2));
    top: calc(var(--progress-line-position) + var(--mobile-line-adjust));
    transform: none;
    z-index: 1;
  }
  /* Desktop-Konsistenz: Basis 1px, Progress 2px */
  .dp_steps.btn-group::before {
    height: 1px;
    background-color: var(--dp-line-color, var(--line-color));
  }
  .dp_steps.btn-group::after {
    height: 2px;
    background-color: var(--dp-primary, var(--accent-color));
    width: var(--progress-width, 0%);
  }
  .dp_steps.btn-group .btn {
    flex: 0 0 var(--effective-circle-size); /* erste/letzte liegen am Rand */
    margin: 0;
    padding: 0 !important;
    max-width: none;
    position: relative;
    font-size: 0 !important;
    color: transparent !important;
    background: transparent;
    border: none !important;
    overflow: visible;
    z-index: 2;
    height: var(--effective-circle-size) !important;
  }
  .dp_steps.btn-group .btn::before {
    content: "" !important;
    position: absolute !important;
    width: var(--effective-circle-size) !important;
    height: var(--effective-circle-size) !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    border: 1px solid var(--upcoming-color) !important; /* wie Desktop-Basis */
    left: 50% !important;
    top: calc(var(--progress-line-position) + var(--mobile-line-adjust)) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 2;
  }
  /* Aktivierbare (nicht-aktive) Schritte: dunkler Rand wie Desktop */
  .dp_steps.btn-group .btn:not(.active):not(.completed):not([disabled]):not(.disabled):not([aria-disabled=true])::before {
    border-color: var(--available-color) !important;
  }
  .dp_steps.btn-group .btn::after {
    content: attr(data-step) !important;
    position: absolute !important;
    width: var(--effective-circle-size) !important;
    height: var(--effective-circle-size) !important;
    left: 50% !important;
    top: calc(var(--progress-line-position) + var(--mobile-line-adjust)) !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: var(--neutral-dark, #333) !important;
    z-index: 4 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  /* Aktivierbare Kreise: minimaler Korrektur-Offset für exakte Mitte */
  .dp_steps.btn-group .btn:not(.active):not(.completed):not([disabled]):not(.disabled):not([aria-disabled=true])::before,
  .dp_steps.btn-group .btn:not(.active):not(.completed):not([disabled]):not(.disabled):not([aria-disabled=true])::after {
    top: calc(var(--progress-line-position) + var(--mobile-line-adjust) + var(--mobile-activatable-adjust)) !important;
  }
  .dp_steps.btn-group .btn.active::before,
  .dp_steps.btn-group .btn.completed::before,
  .dp_steps.btn-group .btn[disabled]::before {
    top: var(--progress-line-position) !important;
  }
  .dp_steps.btn-group .btn.active::after,
  .dp_steps.btn-group .btn.completed::after,
  .dp_steps.btn-group .btn[disabled]::after {
    top: var(--progress-line-position) !important;
  }
  .dp_steps.btn-group .btn.active::before {
    background-color: #fff !important; /* wie Desktop */
    border-color: var(--dp-primary, var(--accent-color)) !important;
    box-shadow: var(--accent-glow-shadow) !important;
    transform: translate(-50%, -50%) scale(1.05) !important;
    width: var(--effective-circle-size) !important;
    height: var(--effective-circle-size) !important;
    z-index: 3;
  }
  .dp_steps.btn-group .btn.active::after {
    color: var(--dp-primary, var(--accent-color)) !important;
    font-weight: 700 !important;
    width: var(--effective-circle-size) !important;
    height: var(--effective-circle-size) !important;
  }
  .dp_steps.btn-group .btn.completed::before {
    border-color: var(--completed-border) !important;
    background-color: var(--completed-bg-color) !important;
    box-shadow: none !important;
  }
  .dp_steps.btn-group .btn.completed::after {
    content: "✓" !important;
    color: var(--completed-border) !important;
    font-weight: bold !important;
    font-size: 18px !important;
  }
  .dp_steps.btn-group .btn[disabled]::before,
  .dp_steps.btn-group .btn[aria-disabled=true]::before,
  .dp_steps.btn-group .btn.disabled::before {
    border-color: #cccccc !important;
    border-width: 1px !important;
    opacity: 1 !important;
    width: var(--effective-circle-size) !important;
    height: var(--effective-circle-size) !important;
    background-color: #fff !important; /* überdeckt die Linie vollständig */
    box-shadow: none !important;
  }
  /* FORCE: SLIDER VOLLE BREITE AUF MOBILE */
  /* Accessory Info Box: Gleiche Breite wie Slider auf Mobile */
  /* Slider-Container mit data-name über volle Breite */
}
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  .dp_steps.btn-group .btn:not([disabled]):hover::before {
    transform: translate(-50%, -50%) !important;
    border-color: var(--upcoming-color) !important;
  }
}
@media (max-width: 600px) {
  .dp_steps.btn-group .btn[disabled]::after,
  .dp_steps.btn-group .btn[aria-disabled=true]::after,
  .dp_steps.btn-group .btn.disabled::after {
    color: #999999 !important;
    width: var(--effective-circle-size) !important;
    height: var(--effective-circle-size) !important;
    font-weight: 400 !important;
  }
  .dp_steps.btn-group .btn .step-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  fieldset.dp_group_measures {
    padding: 15px 10px;
    gap: 0;
  }
  fieldset.dp_group_measures div.content {
    grid-template-columns: 1fr;
    grid-template-areas: "ueberschrift" "ui_input_room_name" "ui_input_width" "ui_input_height" "draft" "ui_switch_split_curtain";
    row-gap: 0;
  }
  fieldset.dp_group_measures div.content .dp-slider__wrapper {
    margin-bottom: 0 !important;
  }
  .dp_field_container {
    margin-bottom: 10px;
  }
  .dp_input_container input,
  .dp_input_container select,
  .dp_input_container .ui-spinner {
    font-size: 16px;
    height: 40px;
    padding: 0 10px;
  }
  .dp-slider__wrapper {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }
  .dp-slider__wrapper:not(.dp-slider--hidden) {
    display: block !important;
  }
  .dp-slider__accessory-info {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .dp-slider__container {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    /* Keep display: flex for internal layout (buttons + track) */
  }
  fieldset.dp_group_measures div.content div[data-name]:has(.dp-slider__wrapper) {
    width: 100% !important;
    max-width: none !important;
    grid-column: 1/-1 !important;
  }
}
@media (max-width: 375px) {
  :root {
    --effective-circle-size: 32px;
    --progress-line-position: calc(var(--effective-circle-size) / 2);
  }
  .dp_steps.btn-group {
    padding: 0 5px;
  }
  .dp_steps.btn-group .btn {
    font-size: 14px;
    padding: 8px 5px;
  }
}
/* Zusätzliche feine Stufen für sehr schmale Smartphones */
@media (max-width: 480px) {
  :root {
    --effective-circle-size: 36px;
    --progress-line-position: calc(var(--effective-circle-size) / 2);
  }
  .dp_steps.btn-group {
    gap: 10px;
  }
}
@media (max-width: 430px) {
  :root {
    --effective-circle-size: 34px;
    --progress-line-position: calc(var(--effective-circle-size) / 2);
  }
  .dp_steps.btn-group {
    gap: 8px;
  }
}
@media (max-width: 390px) {
  :root {
    --effective-circle-size: 32px;
    --progress-line-position: calc(var(--effective-circle-size) / 2);
  }
  .dp_steps.btn-group {
    gap: 6px;
  }
}
/* Utilities */
/* Utilities (SCSS-Quelle) */
/* === VISIBILITY UTILITIES === */
.dp-hidden,
.dp-card-hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === IMAGE UTILITIES === */
.dp-fallback-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

.dp-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-gray, #777);
  font-size: 0.8rem;
  background: var(--bg-muted, #f9f9f9);
  border: 1px dashed var(--border-light, #e0e0e0);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* === LAYOUT UTILITIES === */
.dp-separator {
  border-top: 1px solid var(--border-subtle, #eee);
  margin: 8px 0;
}

.dp-panel {
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: var(--dp-radius, 6px);
}

/* === RADIO OPTIONS === */
.dp-radio-option {
  display: inline-block;
  padding: 0.5em 0.9em;
  margin-right: 0.5em;
  border-radius: var(--dp-radius, 3px);
  background-color: var(--bg-muted, #f2f2f2);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  position: relative;
  border: 1px solid transparent;
}
.dp-radio-option:hover {
  background-color: var(--accent-transparent-hover);
}
.dp-radio-option input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dp-radio-option:has(input[type=radio]:checked), .dp-radio-option.is-checked {
  border-color: var(--accent-border);
  background-color: var(--accent-transparent-light);
}

/* === SPECIFIC COMPONENT UTILITIES === */
#dp_auswahl_schiene_bestellen {
  display: flex;
  align-items: center;
}

#mobile-step-tooltip {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
  .dp_steps.btn-group .btn {
    touch-action: manipulation;
  }
  .dp_steps.btn-group .btn::before {
    min-width: 36px;
    min-height: 36px;
  }
  .dp_steps.btn-group .btn:active::before {
    transform: translateX(-50%) scale(0.95);
    transition: transform 0.1s ease;
  }
  .ui-spinner-button {
    width: 40px;
    height: 24px;
  }
}
/* Animations */
/* Animations (SCSS-Quelle) */
@keyframes dp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Legacy alias for backward compatibility */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}