/* Sunset Pergola – Konfigurator
 * Design-Tokens 1:1 aus sunsetpergola.webflow.io (Variablen-Namen der
 * Webflow-Site). Auf der Webflow-Seite existieren die --neutral-* und
 * --_layout-* Variablen bereits; die Fallbacks greifen im Standalone-Betrieb. */
@font-face { font-family: "Google Sans Variable"; src: url("https://cdn.prod.website-files.com/6a8ecf8a106a4c49d345ee44/6a8edc346c10c23a164f2174_GoogleSans-VariableFont_GRAD_opsz_wght_latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

.sc {
  /* Farben */
  --sc-black: var(--neutral--shadow-black, #1d1f16);
  --sc-white: var(--neutral--white, #fff);
  --sc-neutral-light: var(--neutral--shadow-neutral-light, #f6f6f3);
  --sc-neutral: var(--neutral--shadow-neutral, #bbbdaf);
  --sc-neutral-dark: var(--neutral--shadow-neutral-dark, #8a8a80);
  --sc-brand: #ef7f01;      /* Sonne im Logo */
  --sc-accent: #ffe500;     /* Check-Farbe der Webflow-Formulare */
  /* Typo */
  --sc-font: var(--font-family--body, "Google Sans Variable", Arial, sans-serif);
  --sc-size-tiny: var(--_typography---font-size--tiny, .75rem);
  --sc-size-small: var(--_typography---font-size--small, .875rem);
  --sc-size-regular: var(--_typography---font-size--regular, 1rem);
  --sc-size-medium: var(--_typography---font-size--medium, 1.25rem);
  --sc-size-h3: var(--_typography---h3--h3-font-size, 2rem);
  --sc-size-h5: var(--_typography---h5--h5-font-size, 1rem);
  --sc-weight-normal: var(--font-weight--normal, 400);
  --sc-weight-medium: var(--font-weight--medium, 500);
  /* Abstände / Radien */
  --sc-space-xxtiny: var(--_layout---spacing--xxtiny, .25rem);
  --sc-space-xtiny: var(--_layout---spacing--xtiny, .5rem);
  --sc-space-tiny: var(--_layout---spacing--tiny, .75rem);
  --sc-space-xxsmall: var(--_layout---spacing--xxsmall, 1rem);
  --sc-space-xsmall: var(--_layout---spacing--xsmall, 1.25rem);
  --sc-space-small: var(--_layout---spacing--small, 1.5rem);
  --sc-space-medium: var(--_layout---spacing--medium, 2rem);
  --sc-space-large: var(--_layout---spacing--large, 3rem);
  --sc-space-xlarge: var(--_layout---spacing--xlarge, 4rem);
  --sc-radius-small: var(--_sizes---border-radius--small, .25rem);
  --sc-radius-medium: var(--_sizes---border-radius--medium, .5rem);
  --sc-radius-large: var(--_sizes---border-radius--large, 1rem);

  font-family: var(--sc-font);
  font-size: var(--sc-size-regular);
  line-height: 1.5;
  color: var(--sc-black);
  -webkit-font-smoothing: antialiased;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc button, .sc input, .sc select { font: inherit; color: inherit; }
.sc h2, .sc h3 { margin: 0; font-weight: var(--sc-weight-normal); letter-spacing: 0; }
.sc-h { font-size: var(--sc-size-medium); line-height: 1.2; margin-bottom: var(--sc-space-xsmall); display: block; }

/* Layout */
.sc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr); gap: var(--sc-space-large); align-items: start; }
.sc-left { min-width: 0; position: sticky; top: var(--sc-sticky-top, 1.5rem); }
.sc-stage { position: relative; background: var(--sc-neutral-light); border-radius: var(--sc-radius-medium); aspect-ratio: 5 / 4; overflow: hidden; }
.sc-stage-title { position: absolute; top: var(--sc-space-medium); left: var(--sc-space-medium); font-size: var(--sc-size-h3); line-height: 1.2; z-index: 5; }
.sc-canvas { position: absolute; inset: 0; }
.sc-canvas canvas { display: block; width: 100% !important; height: 100% !important; outline: none; touch-action: none; }
.sc-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--sc-space-xtiny); font-size: var(--sc-size-small); color: var(--sc-neutral-dark); z-index: 3; background: var(--sc-neutral-light); }
.sc-loader[hidden] { display: none; }
.sc-loader span { width: 1rem; height: 1rem; border: 2px solid var(--sc-neutral); border-top-color: var(--sc-black); border-radius: 50%; animation: sc-spin .9s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-stage-tools { position: absolute; left: var(--sc-space-medium); right: var(--sc-space-medium); bottom: var(--sc-space-small); display: flex; align-items: center; gap: var(--sc-space-xxsmall); z-index: 2; }
.sc-range { flex: 1; display: flex; align-items: center; gap: var(--sc-space-tiny); font-size: var(--sc-size-small); color: var(--sc-neutral-dark); max-width: 22rem; }
.sc-range input { flex: 1; appearance: none; -webkit-appearance: none; height: 2px; background: var(--sc-neutral); border-radius: 1px; outline: none; margin: 0; cursor: pointer; }
.sc-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sc-black); border: 0; box-shadow: none; }
.sc-range input::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: var(--sc-black); border: 0; }
.sc-iconbtn { margin-left: auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--sc-white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sc-black); }
.sc-iconbtn:hover { background: var(--sc-neutral-light); }
.sc-iconbtn[hidden] { display: none; }

.sc-usps { list-style: none; margin: var(--sc-space-medium) 0 0; padding: 0 var(--sc-space-small); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-space-small); font-size: var(--sc-size-small); }
.sc-usps li { max-width: 9rem; line-height: 1.35; }

/* Panel */
.sc-panel { min-width: 0; display: flex; flex-direction: column; gap: var(--sc-space-medium); }
.sc-row-product { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sc-space-xsmall); }
.sc-row-product .sc-h { margin: 0; }
.sc-select { position: relative; }
.sc-select select { width: 100%; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--sc-radius-small); background: var(--sc-neutral-light); min-height: 2.5rem; padding: .5rem 2.5rem .5rem var(--sc-space-xxsmall); font-size: var(--sc-size-small); font-weight: var(--sc-weight-medium); cursor: pointer; }
.sc-select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sc-section { display: block; }

.sc-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--sc-space-xsmall); }
.sc-times { align-self: center; padding-top: 0; font-size: var(--sc-size-medium); color: var(--sc-black); line-height: 2.5rem; }
.sc-field { display: flex; flex-direction: column; gap: var(--sc-space-xtiny); font-size: var(--sc-size-tiny); }
.sc-field input { width: 100%; min-width: 0; min-height: 2.5rem; border: 1px solid var(--sc-neutral-dark); border-radius: var(--sc-radius-small); background: var(--sc-white); padding: .25rem var(--sc-space-tiny); font-size: var(--sc-size-regular); -moz-appearance: textfield; }
.sc-field input::-webkit-outer-spin-button, .sc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-field input:focus { outline: .125rem solid var(--sc-neutral); outline-offset: 0; border-color: var(--sc-black); }
.sc-field span { font-size: var(--sc-size-tiny); }
.sc-field small { color: var(--sc-neutral-dark); font-size: var(--sc-size-tiny); margin-top: -.25rem; }

.sc-seg { display: inline-flex; margin-top: var(--sc-space-xsmall); border: 1px solid var(--sc-neutral); border-radius: var(--sc-radius-small); overflow: hidden; }
.sc-seg button { border: 0; background: var(--sc-white); padding: .4rem .9rem; font-size: var(--sc-size-small); cursor: pointer; }
.sc-seg button + button { border-left: 1px solid var(--sc-neutral); }
.sc-seg button[aria-pressed="true"] { background: var(--sc-black); color: var(--sc-white); }

/* Options-Karten (entsprechen .form_option / .is-active auf der Webflow-Site) */
.sc-options { display: flex; flex-direction: column; gap: var(--sc-space-xtiny); }
.sc-option { display: flex; align-items: center; gap: var(--sc-space-tiny); min-height: 2.75rem; padding: .55rem var(--sc-space-xxsmall); border: .125rem solid var(--sc-neutral-light); border-radius: var(--sc-radius-small); background: var(--sc-neutral-light); cursor: pointer; font-size: var(--sc-size-small); transition: border-color .15s, background .15s; }
.sc-option:hover { border-color: var(--sc-neutral); }
.sc-option.is-active { border-color: var(--sc-neutral); }
.sc-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-option-label { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.sc-option-label em { font-style: normal; font-size: var(--sc-size-tiny); color: var(--sc-neutral-dark); }
.sc-option-price { font-size: var(--sc-size-tiny); white-space: nowrap; }
.sc-option:has(input:focus-visible) { outline: .125rem solid var(--sc-black); outline-offset: .1rem; }

/* Farben */
.sc-swatches { display: flex; gap: var(--sc-space-xsmall); overflow-x: auto; padding: .25rem .25rem .5rem; margin: -.25rem -.25rem 0; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--sc-neutral) transparent; }
.sc-swatch { flex: none; width: 4.25rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; border: 0; background: transparent; padding: 0; cursor: pointer; scroll-snap-align: start; }
.sc-swatch-dot { width: 2.75rem; height: 2.75rem; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(29,31,22,.08) inset; transition: transform .15s, box-shadow .15s; }
.sc-swatch:hover .sc-swatch-dot { transform: scale(1.06); }
.sc-swatch.is-active .sc-swatch-dot { box-shadow: 0 0 0 2px var(--sc-white), 0 0 0 4px var(--sc-black); }
.sc-swatch small { font-size: .5625rem; line-height: 1.2; color: var(--sc-neutral-dark); text-align: center; white-space: normal; }
.sc-swatch.is-active small { color: var(--sc-black); }
.sc-swatch:focus-visible { outline: .125rem solid var(--sc-black); outline-offset: .15rem; border-radius: var(--sc-radius-small); }

/* CTA (entspricht .button der Webflow-Site) */
.sc-cta { display: flex; flex-direction: column; gap: var(--sc-space-tiny); }
.sc .sc-button { width: 100%; padding: var(--sc-space-xtiny) var(--sc-space-xxsmall); min-height: 2.75rem; border: 2px solid var(--sc-black); border-radius: var(--sc-radius-small); background: var(--sc-black); color: var(--sc-white); font-size: var(--sc-size-small); text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.sc .sc-button:hover { border-color: var(--sc-neutral-dark); background: var(--sc-neutral-dark); }
.sc-summary { margin: 0; overflow-wrap: anywhere; font-size: var(--sc-size-tiny); color: var(--sc-neutral-dark); line-height: 1.4; }
.sc-summary strong { color: var(--sc-black); font-weight: var(--sc-weight-medium); }

/* Responsive */
@media (max-width: 991px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sc-space-medium); }
  .sc-stage { aspect-ratio: 4 / 3; }
  .sc-stage-title { top: var(--sc-space-small); left: var(--sc-space-small); font-size: 1.5rem; }
  .sc-usps { padding: 0; }
}
@media (max-width: 479px) {
  .sc-stage { aspect-ratio: 1 / 1; border-radius: var(--sc-radius-small); }
  .sc-stage-tools { left: var(--sc-space-xxsmall); right: var(--sc-space-xxsmall); }
  .sc-usps { grid-template-columns: 1fr 1fr; }
  .sc-row-product { grid-template-columns: 1fr; }
}

/* ---- v2: Bühne, Szene, Stepper, Tabs, Chips, Seitenelemente, Übersicht ---- */
.sc-stage { --sc-night: 0; background: color-mix(in srgb, var(--sc-neutral-light) calc((1 - var(--sc-night)) * 100%), #2a3143); transition: background .2s; }
.sc-stage-title { color: color-mix(in srgb, var(--sc-black) calc((1 - var(--sc-night)) * 100%), #fff); }
.sc-stage-top { position: absolute; top: var(--sc-space-small); right: var(--sc-space-small); display: flex; gap: var(--sc-space-xtiny); z-index: 2; }
.sc-iconbtn { margin-left: 0; }
.sc-iconbtn svg { width: 1.1rem; height: 1.1rem; }
.sc-iconbtn:disabled { opacity: .4; cursor: default; }
.sc-stage-bottom { position: absolute; left: var(--sc-space-small); right: var(--sc-space-small); bottom: var(--sc-space-small); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-space-xxsmall); z-index: 2; }
.sc-stage-tools { display: none; }
.sc-range { max-width: 20rem; background: rgba(255,255,255,.72); backdrop-filter: blur(8px); border-radius: var(--sc-radius-small); padding: .45rem .75rem; color: var(--sc-black); }
.sc-range span { white-space: nowrap; font-size: var(--sc-size-tiny); }
.sc-range-panel { max-width: none; background: var(--sc-neutral-light); backdrop-filter: none; padding: .6rem var(--sc-space-xxsmall); }
.sc-scene { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-space-xtiny); }
.sc-scene-toggle { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: var(--sc-radius-small); background: rgba(255,255,255,.85); backdrop-filter: blur(8px); padding: .5rem .8rem .5rem .6rem; font-size: var(--sc-size-small); font-weight: var(--sc-weight-medium); cursor: pointer; color: var(--sc-black); }
.sc-scene-toggle svg { width: 1rem; height: 1rem; transition: transform .2s; }
.sc-scene-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sc-scene-panel { display: flex; gap: var(--sc-space-small); background: rgba(29,31,22,.78); backdrop-filter: blur(10px); color: var(--sc-white); border-radius: var(--sc-radius-small); padding: var(--sc-space-tiny) var(--sc-space-xxsmall); }
.sc-scene-panel[hidden] { display: none; }
.sc-scene-group { display: flex; flex-direction: column; gap: .4rem; font-size: var(--sc-size-tiny); font-weight: var(--sc-weight-medium); }
.sc-scene-panel .sc-seg { margin: 0; border-color: rgba(255,255,255,.25); }
.sc-scene-panel .sc-seg button { background: rgba(255,255,255,.08); color: var(--sc-white); border-color: rgba(255,255,255,.25); }
.sc-scene-panel .sc-seg button[aria-pressed="true"] { background: var(--sc-white); color: var(--sc-black); }
.sc-toast { position: absolute; left: 50%; top: var(--sc-space-small); transform: translateX(-50%); background: var(--sc-black); color: var(--sc-white); font-size: var(--sc-size-small); padding: .45rem .9rem; border-radius: var(--sc-radius-small); z-index: 4; }
.sc-toast[hidden] { display: none; }
.sc-stage:fullscreen { aspect-ratio: auto; border-radius: 0; }

.sc-stepper { padding: .6rem 0; border-bottom: 1px solid var(--sc-neutral-light); }
.sc-stepper:first-of-type { padding-top: 0; }
.sc-stepper-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--sc-size-small); margin-bottom: .35rem; }
.sc-stepper-val { display: inline-flex; align-items: center; gap: .25rem; }
.sc-stepper-val output { min-width: 4.5rem; text-align: center; font-weight: var(--sc-weight-medium); }
.sc-stepper-val button { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--sc-neutral); background: var(--sc-white); cursor: pointer; line-height: 1; }
.sc-stepper-val button:hover { border-color: var(--sc-black); }
.sc-stepper input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; height: 2px; background: var(--sc-neutral); border-radius: 1px; outline: none; margin: .35rem 0; cursor: pointer; }
.sc-stepper input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sc-black); border: 0; box-shadow: none; }
.sc-stepper input[type="range"]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: var(--sc-black); border: 0; }
.sc-stepper-minmax { display: flex; justify-content: space-between; font-size: var(--sc-size-tiny); color: var(--sc-neutral-dark); }
.sc-hint { margin: var(--sc-space-xtiny) 0 0; font-size: var(--sc-size-tiny); color: var(--sc-neutral-dark); }
.sc-wall { display: flex; flex-direction: column; gap: var(--sc-space-xtiny); }
.sc-option-sub { margin-left: var(--sc-space-small); }
.sc-option-sub .sc-option { min-height: 2.25rem; background: var(--sc-white); width: 100%; }
.sc-option-sub .sc-option.is-active { border-color: var(--sc-neutral); }
.sc-option-sub[hidden] { display: none; }
.sc-option-stack { flex-direction: column; align-items: stretch; gap: var(--sc-space-xtiny); cursor: default; }
.sc-option-stack .sc-seg { margin: 0; align-self: flex-start; }
.sc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-chips[hidden] { display: none; }
.sc-chip { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--sc-white); background: var(--chip); box-shadow: 0 0 0 1px var(--sc-neutral); cursor: pointer; padding: 0; }
.sc-chip.is-active { box-shadow: 0 0 0 2px var(--sc-black); }
.sc-tabs { display: flex; gap: var(--sc-space-small); margin-bottom: var(--sc-space-xsmall); border-bottom: 1px solid var(--sc-neutral-light); }
.sc-tabs button { border: 0; background: none; padding: .4rem 0; font-size: var(--sc-size-small); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--sc-neutral-dark); }
.sc-tabs button[aria-selected="true"] { color: var(--sc-black); border-bottom-color: var(--sc-black); }
.sc-tabs button:disabled { opacity: .35; cursor: default; }
.sc-swatches[hidden] { display: none; }
.sc-systems { display: flex; flex-direction: column; gap: var(--sc-space-xtiny); margin-bottom: var(--sc-space-xtiny); }
.sc-sysrow { display: grid; grid-template-columns: 4.5rem 1fr; align-items: start; gap: var(--sc-space-xtiny); padding: .5rem var(--sc-space-xxsmall); background: var(--sc-neutral-light); border-radius: var(--sc-radius-small); }
.sc-sysrow.is-disabled { opacity: .55; }
.sc-sysrow-label { font-size: var(--sc-size-small); padding-top: .35rem; display: flex; flex-direction: column; }
.sc-sysrow-label em { font-style: normal; font-size: var(--sc-size-tiny); color: var(--sc-neutral-dark); }
.sc-sysrow-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .35rem; }
.sc-select-small select { min-height: 2rem; font-size: var(--sc-size-tiny); padding: .25rem 2rem .25rem .6rem; background: var(--sc-white); font-weight: var(--sc-weight-normal); }
.sc-select-small::after { right: .7rem; width: .4rem; height: .4rem; }
.sc-sysranges { display: flex; flex-direction: column; gap: var(--sc-space-xtiny); margin-top: var(--sc-space-xtiny); }
.sc-sysranges input { flex: 1; appearance: none; -webkit-appearance: none; height: 2px; background: var(--sc-neutral); border-radius: 1px; outline: none; margin: 0; cursor: pointer; }
.sc-sysranges input::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sc-black); border: 0; box-shadow: none; }
.sc-overview { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem var(--sc-space-xxsmall); font-size: var(--sc-size-small); }
.sc-overview dt { color: var(--sc-neutral-dark); }
.sc-overview dd { margin: 0; }
.sc .sc-button.is-secondary { background: transparent; color: var(--sc-black); }
.sc .sc-button.is-secondary:hover { background: var(--sc-neutral-light); border-color: var(--sc-black); }
@media (max-width: 479px) {
  .sc-stage-bottom { flex-direction: column; align-items: stretch; }
  .sc-range { max-width: none; }
  .sc-scene-panel { flex-direction: column; gap: var(--sc-space-xtiny); }
  .sc-sysrow { grid-template-columns: 1fr; }
}

/* ---- v3: Produktwahl in der Headline, Karten statt Checkboxen, Sticky ---- */
.sc-title-btn { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; padding: 0; font: inherit; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; }
.sc-title-btn svg { width: 1.1rem; height: 1.1rem; margin-top: .25rem; opacity: .7; transition: transform .2s; }
.sc-title-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sc-title-menu { list-style: none; margin: .5rem 0 0; padding: .35rem; min-width: 15rem; background: var(--sc-white); border-radius: var(--sc-radius-small); box-shadow: 0 1px 2px rgba(8,8,8,.08), 0 4px 8px rgba(8,8,8,.03), 0 10px 18px rgba(8,8,8,.03), 0 20px 40px rgba(8,8,8,.03); font-size: var(--sc-size-small); color: var(--sc-black); }
.sc-title-menu[hidden] { display: none; }
.sc-title-menu button { width: 100%; display: flex; flex-direction: column; gap: .1rem; text-align: left; border: 0; background: transparent; padding: .55rem .75rem; border-radius: var(--sc-radius-small); cursor: pointer; font: inherit; color: inherit; }
.sc-title-menu button:hover { background: var(--sc-neutral-light); }
.sc-title-menu button.is-active { background: var(--sc-neutral-light); }
.sc-title-menu button strong { font-weight: var(--sc-weight-medium); }
.sc-title-menu button span { font-size: var(--sc-size-tiny); color: var(--sc-neutral-dark); }
.sc button.sc-option { width: 100%; text-align: left; font: inherit; }
.sc-option[aria-pressed="true"], .sc-option.is-active { border-color: var(--sc-neutral); }
.sc-wall { gap: var(--sc-space-xtiny); }
.sc-option-sub[hidden] { display: none; }
@media (max-width: 991px) { .sc-left { position: static; } }

/* ---- v4: direkter Tag/Nacht-Schalter ---- */
.sc-daynight { display: inline-flex; background: rgba(255,255,255,.72); backdrop-filter: blur(8px); border-radius: var(--sc-radius-small); padding: .25rem; gap: .2rem; }
.sc-daynight button { border: 0; border-radius: .2rem; background: transparent; padding: .25rem .65rem; font-size: var(--sc-size-tiny); cursor: pointer; color: var(--sc-black); }
.sc-daynight button[aria-pressed="true"] { background: var(--sc-black); color: var(--sc-white); }

/* ---- v5: Abstände, Farb-Scrollbuttons ---- */
.sc-section > .sc-h { margin-bottom: 8px; }
.sc-hint.is-lead { margin: 0 0 14px; }
.sc-tabs-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-space-small); margin-bottom: var(--sc-space-xsmall); border-bottom: 1px solid var(--sc-neutral-light); }
.sc-tabs-row .sc-tabs { margin-bottom: 0; border-bottom: 0; }
.sc-scrollbtns { display: flex; gap: .3rem; padding-bottom: .3rem; }
.sc-scrollbtns button { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--sc-neutral); background: var(--sc-white); cursor: pointer; font-size: 1rem; line-height: 1; color: var(--sc-black); }
.sc-scrollbtns button:hover { border-color: var(--sc-black); }
.sc-swatches { scroll-behavior: smooth; }