body, /* defaults */
body.ks-cluster-other {
  --ks-primary-bg: var(--ks-braun-heller-color);
  --ks-secondary-bg: var(--ks-braun-heller-color-sek); /* --ks-gruen-mittel-color-sek */
  --ks-primary-text: var(--ks-font-color);
  --ks-primary-headline: var(--ks-font-color);
}

body.ks-cluster-braun-dunkel {
  --ks-primary-bg: var(--ks-braun-dunkel-color);
  --ks-secondary-bg: var(--ks-braun-dunkel-color-sek);
  --ks-primary-text: #ffffff;
  --ks-primary-headline: #ffffff;
}

body.ks-cluster-braun-hell {
  --ks-primary-bg: var(--ks-braun-hell-color);
  --ks-secondary-bg: var(--ks-braun-hell-color-sek);
  --ks-primary-text: #333333;
  --ks-primary-headline: #333333;
}

body.ks-cluster-blau-hell {
  --ks-primary-bg: var(--ks-blau-hell-color);
  --ks-secondary-bg: var(--ks-blau-hell-color-sek);
  --ks-primary-text: #063e4f;
  --ks-primary-headline: #063e4f;
}

body.ks-cluster-blau-dunkel {
  --ks-primary-bg: var(--ks-blau-dunkel-color);
  --ks-secondary-bg: var(--ks-blau-dunkel-color-sek);
  --ks-primary-text: #ffffff;
  --ks-primary-headline: #ffffff;
}

body.ks-cluster-gruen {
  --ks-primary-bg: var(--ks-gruen-mittel-color);
  --ks-secondary-bg: var(--ks-gruen-mittel-color-sek);
  --ks-primary-text: #063e4f;
  --ks-primary-headline: #063e4f;
}

body.ks-cluster-neutral-hell {
  --ks-primary-bg: #f8f5f0;
  --ks-secondary-bg: #f8f5f0;
  --ks-primary-text: #333333;
  --ks-primary-headline: #333333;
}

body.ks-cluster-neutral-dunkel {
  --ks-primary-bg: #4f4f4f;
  --ks-secondary-bg: #797979;
  --ks-primary-text: #fff;
  --ks-primary-headline: #fff;
}

/* -------- nach base-colors ------------- */
/* alle roten Produkte */
/*
body.ks-base-red,
body.ks-base-pink 
{
  --ks-primary-bg:   hsl(0 73% 94% / 1);
  --ks-secondary-bg: hsl(0 73% 98% / 1);
}

body.ks-base-red.ks-tone-dark,
body.ks-base-pink.ks-tone-dark 
{
  --ks-primary-bg:   hsl(359 73% 32% / 1);
  --ks-secondary-bg: hsl(359 37.43% 52.42% / 1);
  --ks-primary-headline: #ffffff;
  --ks-primary-text: #ffffff;
}
*/

/* dunkle Brauntöne → eher kräftiger Look */
body.ks-base-brown.ks-tone-dark {
  --ks-primary-bg: var(--ks-braun-dunkel-color);
  --ks-primary-text: #ffffff;
}

/* helle neutrale, z.B. porzellan/puder/sand */
body.ks-base-grey.ks-tone-light,
body.ks-varlabel-porzellan,
body.ks-varlabel-puder,
body.ks-varlabel-sand {
  --ks-primary-bg: #f5f1eb;
  --ks-primary-text: #333333;
}