:root {
  color-scheme: dark;
  --sd-red: #c41e2e;
  --sd-red-bright: #e63946;
  --sd-gold: #e8c76a;
  --sd-green: #00c850;

  --sd-bg: #0a0a10;
  --sd-panel: #12121a;
  --sd-elevated: #1a1a24;
  --sd-text: #f0f0f0;
  --sd-muted: #a0a0aa;
  --sd-border: rgba(255, 255, 255, .10);
  --sd-border-strong: rgba(255, 255, 255, .18);

  --sd-industrial-bg: #0a0a0c;
  --sd-industrial-surface: #101013;
  --sd-industrial-panel: #111115;
  --sd-industrial-panel-soft: #151519;
  --sd-industrial-elevated: #17171c;
  --sd-industrial-border: #303036;
  --sd-guide-bg: #07070b;
  --sd-guide-panel: #111119;
  --sd-guide-elevated: #171721;
  --sd-gallery-light: #f4f4f6;

  --sd-radius-2: 2px;
  --sd-radius-4: 4px;
  --sd-radius-8: 8px;
  --sd-radius-16: 16px;
  --sd-radius-24: 24px;
  --sd-radius-round: 999px;
  /* Interaktive Pillen sind ausschließlich für Sprach- und echte Navigations-Toggles zulässig. */
  --sd-button-radius: var(--sd-radius-4);
  --sd-button-commerce-radius: var(--sd-button-radius);
  --sd-button-industrial-radius: var(--sd-radius-2);

  --sd-max-shop: 1350px;
  --sd-max-content: 1120px;
  --sd-max-docs: 1040px;
  --sd-max-price-list: 1180px;
  --sd-max-navigation: 1360px;
  --sd-max-legal: 860px;
  --sd-max-guide: 1160px;
  --sd-max-faq-hero: 980px;
  --sd-max-product-wide: 1720px;
  --sd-focus-ring: 2px solid var(--sd-red-bright);
  --sd-font-shop: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sd-font-editorial: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--sd-focus-ring) !important;
  outline-offset: 3px !important;
}

.sd-font-shop { font-family: var(--sd-font-shop); }
.sd-font-editorial { font-family: var(--sd-font-editorial); }

.sd-photo-placeholder {
  border: 1px solid var(--sd-border);
  background: linear-gradient(145deg, var(--sd-elevated), var(--sd-panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  color: var(--sd-muted);
}

.sd-photo-placeholder .sd-photo-placeholder-icon {
  color: color-mix(in srgb, var(--sd-muted) 72%, transparent);
}

/* design100-block3-component-rules:start */
body.sd-buttons-commerce.sd-layout-shop[class] :is(.btn,.tool-cta,.finance-trigger,.m-sticky-buy-button,.btn-checkout,.btn-add-config,.co-btn-primary,.co-btn-secondary,.show-more-btn,.config-detail-btn,.m-cta-wa,.m-cta-mail,.setup-trust-link),
body.sd-buttons-commerce.sd-layout-content[class] :is(.btn,.tool-cta,.finance-trigger,.m-sticky-buy-button,.btn-checkout,.btn-add-config,.co-btn-primary,.co-btn-secondary,.show-more-btn,.config-detail-btn,.m-cta-wa,.m-cta-mail,.setup-trust-link) {
  border-radius: var(--sd-button-radius);
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

body.sd-buttons-commerce.sd-layout-shop[class] :is(.btn,.tool-cta,.finance-trigger,.m-sticky-buy-button,.btn-checkout,.btn-add-config,.co-btn-primary,.co-btn-secondary,.show-more-btn,.config-detail-btn,.m-cta-wa,.m-cta-mail,.setup-trust-link):is(:hover,:focus-visible,:active),
body.sd-buttons-commerce.sd-layout-content[class] :is(.btn,.tool-cta,.finance-trigger,.m-sticky-buy-button,.btn-checkout,.btn-add-config,.co-btn-primary,.co-btn-secondary,.show-more-btn,.config-detail-btn,.m-cta-wa,.m-cta-mail,.setup-trust-link):is(:hover,:focus-visible,:active) {
  border-color: var(--sd-border-strong) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body.sd-buttons-industrial.sd-family-industrial[class] :is(.btn,.ns-btn,.filter-btn,.catalog-filter,.sort-btn,.calc-reset,.scan-submit,.pill,.ghost,.support-actions a) {
  border-radius: var(--sd-button-industrial-radius);
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

body.sd-buttons-industrial.sd-family-industrial[class] :is(.btn,.ns-btn,.filter-btn,.catalog-filter,.sort-btn,.calc-reset,.scan-submit,.pill,.ghost,.support-actions a):is(:hover,:focus-visible,:active) {
  border-color: var(--sd-industrial-border) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

:where(.cart-btn,.part-card,.part-gallery button):is(:hover,:focus-visible,:active) {
  border-color: var(--sd-border-strong) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

:where(.language-switch a,.nav-logo,.energy-label-link):hover {
  box-shadow: none !important;
  filter: none !important;
  opacity: .84;
  transform: none !important;
}

:where(nav a,.cart-close,.back-to-top):hover {
  box-shadow: none !important;
  filter: none !important;
  opacity: .84;
  text-shadow: none !important;
  transform: none !important;
}

:where(main a:not([class]),.config-note,.db-skip-results):hover {
  color: var(--sd-red-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(.btn-primary,.m-sticky-buy-button,.btn-checkout,.btn-add-config):hover {
  background-color: var(--sd-red-bright) !important;
  border-color: var(--sd-red-bright) !important;
  opacity: .86;
}

:where(.finance-trigger,summary):hover {
  background-color: var(--sd-elevated) !important;
  border-color: var(--sd-red-bright) !important;
}

:where(input,select,textarea):hover {
  border-color: var(--sd-border-strong) !important;
}

:where(a,button,summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):hover {
  text-shadow: none !important;
}

:where(.nav-left a,.nav-ca-link)::after {
  background: var(--sd-red-bright) !important;
  border-radius: 0 !important;
}
/* design100-block3-component-rules:end */

/* finance-trigger-gold: Der Leasing-Button stand grau mit hellem Rahmen da und
   bekam im Hover den weissen Ring aus der Commerce-Regel weiter oben. Er laeuft
   jetzt in Goldschrift und hovert wie die Konfigurationskarten: weicher
   Goldrahmen, leicht hellerer Untergrund, kein heller Ring. Die wiederholten
   [class] heben die Spezifitaet ueber die generische Commerce-Hover-Regel. */
body.sd-buttons-commerce[class][class][class] .finance-trigger {
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .038) !important;
  color: var(--sd-gold) !important;
}

body.sd-buttons-commerce[class][class][class] .finance-trigger:is(:hover, :focus-visible) {
  border-color: rgba(255, 203, 86, .42) !important;
  background: rgba(255, 255, 255, .062) !important;
  color: var(--sd-gold) !important;
}